/* ================================
   TalentUs Corporate Website Styles
   ================================ */

/* CSS Variables */
:root {
    /* ================================
       Professional palette — "Slate & Steel Blue"
       Calm, trustworthy tones for HR / finance / admin professionals.
       No gradients, no loud or neon colors.
       ================================ */

    /* Brand — steel blue */
    --primary-color: #2C5A87;   /* primary brand / CTA */
    --primary-dark: #1F4265;    /* hover / pressed */
    --primary-light: #5B84AE;   /* lighter brand accent */
    --primary-subtle: #EAF0F6;  /* tinted surface for icons / badges */

    /* Secondary — muted teal (used sparingly) */
    --secondary-color: #3E7C76;
    --secondary-subtle: #E7F0EE;

    /* Accent — muted emerald for positive figures / checks */
    --accent-color: #2F8F6B;

    /* Legacy aliases kept neutral so stray references never look loud */
    --coral: #5B84AE;
    --peach: #EAF0F6;

    /* Text — slate scale */
    --text-primary: #1C2733;
    --text-secondary: #55636F;
    --text-light: #8794A1;

    /* Surfaces — cool neutrals */
    --bg-white: #FFFFFF;
    --bg-light: #F4F6F9;
    --bg-cream: #EEF2F6;
    --bg-gradient: #F4F6F9;     /* flat background (no gradient) */
    --bg-dark: #172029;
    --border-color: #E1E7EE;

    /* Shadows — soft neutral slate */
    --shadow-sm: 0 1px 2px rgba(23, 37, 54, 0.06);
    --shadow-md: 0 4px 12px rgba(23, 37, 54, 0.08);
    --shadow-lg: 0 10px 24px rgba(23, 37, 54, 0.10);
    --shadow-xl: 0 18px 48px rgba(23, 37, 54, 0.12);

    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;

    /* Responsive Typography (fluid) */
    --font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --font-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
    --font-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1rem);
    --font-lg: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --font-xl: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
    --font-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
    --font-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
    --font-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);

    /* Spacing Scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Z-index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;

    /* Container */
    --container-max: 1200px;
    --container-padding: 1.5rem;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-gradient);
    min-height: 100vh;
}

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

ul {
    list-style: none;
}

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

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ================================
   Navigation
   ================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(23, 37, 54, 0.08);
    z-index: 1000;
    padding: 0.75rem 0;
    box-shadow: 0 2px 20px rgba(23, 37, 54, 0.05);
    transition: all 0.3s ease;
}

/* On scroll the bar compacts (never grows) so it takes less reading space */
.navbar.scrolled {
    padding: 0.5rem 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 16px rgba(23, 37, 54, 0.08);
}

.navbar.scrolled .logo-img {
    height: 42px;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.5rem;
}

.logo-img {
    height: 50px;
    width: auto;
    transition: height 0.3s ease;
}

.logo-icon {
    display: none;
}

.logo-text {
    display: none;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.nav-menu > li:not(.lang-switcher) > a:not(.btn) {
    position: relative;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.375rem 0;
    transition: color 0.2s ease;
}

.nav-menu > li:not(.lang-switcher) > a:not(.btn):hover,
.nav-menu > li:not(.lang-switcher) > a:not(.btn).active {
    color: var(--primary-color);
}

/* Underline indicator: shows where you are and what is clickable */
.nav-menu > li:not(.lang-switcher) > a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.nav-menu > li:not(.lang-switcher) > a:not(.btn):hover::after,
.nav-menu > li:not(.lang-switcher) > a:not(.btn).active::after {
    transform: scaleX(1);
}

.nav-menu > li:not(.lang-switcher) > a.active {
    font-weight: 600;
}

/* Header access buttons keep their own colors (previously overridden by .nav-menu a) */
.nav-menu .btn {
    padding: 0.5rem 1.125rem;
    font-size: 0.9375rem;
    font-weight: 600;
    box-shadow: none;
}

.nav-menu .btn-outline {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.nav-menu .btn-outline:hover {
    background: var(--primary-subtle);
}

.nav-menu .btn-primary,
.nav-menu .btn-primary:hover {
    color: #fff;
    box-shadow: none;
}

.nav-menu .btn svg {
    width: 16px;
    height: 16px;
    margin-right: 0.375rem;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: var(--transition);
}

/* ================================
   Buttons
   ================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 15px rgba(23, 37, 54, 0.4);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(23, 37, 54, 0.5);
}

.btn-outline {
    border-color: var(--border-color);
    background: transparent;
    color: var(--text-primary);
}

.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-white {
    background: white;
    color: var(--primary-color);
    font-weight: 600;
}

.btn-white:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-outline-white {
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

.btn-large {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
}

.btn-block {
    width: 100%;
}

/* ================================
   Hero Section
   ================================ */
.hero {
    padding: 9rem 0 5rem;
    background: var(--bg-light);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: transparent;
    border-radius: 50%;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: transparent;
    border-radius: 50%;
}

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

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.hero-content .highlight {
    background: var(--primary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
}

.hero-stats {
    display: flex;
    gap: 3rem;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    background: var(--primary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

/* Dashboard Preview */
.dashboard-preview {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    border: 1px solid rgba(23, 37, 54, 0.1);
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.preview-dots {
    display: flex;
    gap: 6px;
}

.preview-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-color);
}

.preview-dots span:first-child { background: var(--secondary-color); }
.preview-dots span:nth-child(2) { background: var(--accent-color); }
.preview-dots span:last-child { background: var(--coral); }

.preview-title {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.preview-content {
    display: flex;
    padding: 1rem;
    gap: 1rem;
    min-height: 300px;
}

.preview-sidebar {
    width: 60px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-item {
    height: 40px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    border: none;
}

.sidebar-item.active {
    background: var(--primary-color);
}

.preview-main {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.preview-card {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    min-height: 80px;
    border: none;
}

.preview-chart {
    grid-column: span 2;
    background: var(--primary-color);
    border-radius: var(--radius-md);
    min-height: 120px;
    opacity: 0.25;
}

/* ================================
   Section Styles
   ================================ */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.section-header p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ================================
   Features Overview
   ================================ */
.features-overview {
    padding: 5rem 0;
}

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

.feature-card {
    padding: 2rem;
    background: white;
    border: none;
    text-align: center;
    border-radius: var(--radius-lg);
    transition: var(--transition);
    box-shadow: 0 2px 12px rgba(23, 37, 54, 0.06);
}

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

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-md);
    margin: 0 auto 1.5rem auto;
    box-shadow: 0 4px 12px rgba(23, 37, 54, 0.25);
}

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

.feature-card p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ================================
   Technology Section
   ================================ */
.technology {
    padding: 5rem 0;
    background: var(--bg-light);
}

.tech-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.tech-item {
    padding: 1rem 2rem;
    background: white;
    border: none;
    border-radius: 50px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(23, 37, 54, 0.08);
}

.tech-item:hover {
    color: white;
    background: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(23, 37, 54, 0.25);
}

/* ================================
   Modules Section
   ================================ */
.modules-section {
    padding: 5rem 0;
    background: var(--bg-light);
}

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

.module-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(23, 37, 54, 0.06);
    border-left: 4px solid transparent;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.module-card:nth-child(1) { animation-delay: 0.1s; }
.module-card:nth-child(2) { animation-delay: 0.2s; }
.module-card:nth-child(3) { animation-delay: 0.3s; }
.module-card:nth-child(4) { animation-delay: 0.4s; }
.module-card:nth-child(5) { animation-delay: 0.5s; }
.module-card:nth-child(6) { animation-delay: 0.6s; }

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

.module-card:hover {
    box-shadow: 0 20px 40px rgba(23, 37, 54, 0.15);
    transform: translateY(-10px) scale(1.02);
    border-left-color: var(--primary-color);
}

.module-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-md);
    margin: 0 auto 1.25rem auto;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(23, 37, 54, 0.25);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.module-card:hover .module-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 20px rgba(23, 37, 54, 0.35);
}

.module-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.module-card p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.module-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.module-features span {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--primary-subtle);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.module-card:hover .module-features span {
    background: var(--primary-subtle);
    transform: translateY(-2px);
}

/* ================================
   Payroll Section
   ================================ */
.payroll-section {
    padding: 5rem 0;
    background: white;
}

.payroll-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.payroll-info {
    padding-right: 2rem;
}

.section-badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    background: var(--primary-subtle);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.payroll-info h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.payroll-info > p {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.payroll-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

.feature-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--secondary-color);
    color: white;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.75rem;
}

.payroll-feature p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.payroll-feature p strong {
    color: var(--text-primary);
}

.payroll-visual {
    display: flex;
    justify-content: center;
}

.payroll-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: 2rem;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(23, 37, 54, 0.1);
}

.payroll-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.payroll-card-header h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.payroll-period {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.25rem 0.75rem;
    background: var(--bg-light);
    border-radius: 50px;
}

.payroll-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.payroll-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.payroll-stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.payroll-stat-value.negative {
    color: var(--secondary-color);
}

.payroll-stat.total {
    padding-top: 1rem;
    border-top: 2px dashed var(--border-color);
}

.payroll-stat.total .payroll-stat-label {
    font-weight: 600;
    color: var(--text-primary);
}

.payroll-stat.total .payroll-stat-value {
    font-size: 1.5rem;
    background: var(--primary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.payroll-progress {
    margin-top: 1.5rem;
}

.progress-bar {
    height: 8px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: var(--radius-sm);
    width: 75%;
}

.progress-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: right;
}

/* ================================
   ATS Section
   ================================ */
.ats-section {
    padding: 5rem 0;
    background: var(--bg-light);
}

.ats-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.ats-visual {
    order: -1;
}

.pipeline-visual {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 1rem 0;
}

.pipeline-stage-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    min-width: 140px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

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

.stage-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--bg-light);
}

.stage-header.applied { border-bottom-color: var(--primary-color); }
.stage-header.screening { border-bottom-color: var(--coral); }
.stage-header.interview { border-bottom-color: var(--accent-color); }
.stage-header.hired { border-bottom-color: var(--secondary-color); }

.stage-header span {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.stage-count-big {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.stage-candidates {
    display: flex;
    align-items: center;
}

.candidate-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid white;
    margin-right: -8px;
    background: var(--primary-color);
}

.candidate-avatar:nth-child(2) {
    background: var(--primary-color);
}

.candidate-avatar:nth-child(3) {
    background: var(--primary-color);
}

.more-candidates {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 4px;
}

.pipeline-arrow {
    color: var(--text-light);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ats-info h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.ats-info > p {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.ats-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.ats-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.ats-features li::before {
    content: '';
    width: 20px;
    height: 20px;
    background: var(--secondary-color);
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

/* ================================
   API Section
   ================================ */
.api-section {
    padding: 5rem 0;
    background: white;
}

.api-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.api-code {
    background: var(--bg-dark);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.code-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-dots {
    display: flex;
    gap: 6px;
}

.code-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.code-dot:first-child { background: var(--secondary-color); }
.code-dot:nth-child(2) { background: var(--accent-color); }
.code-dot:last-child { background: var(--coral); }

.code-title {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Monaco', 'Consolas', monospace;
}

.api-code pre {
    margin: 0;
    padding: 1.5rem;
    overflow-x: auto;
}

.api-code code {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    color: #E5E7EB;
}

.code-comment {
    color: #6B7280;
}

.code-keyword {
    color: var(--secondary-color);
}

.code-string {
    color: var(--accent-color);
}

.api-info h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.api-info > p {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.api-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

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

.api-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--primary-subtle);
    color: var(--primary-color);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.api-feature h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.api-feature p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ================================
   Stats Section
   ================================ */
.stats-section {
    padding: 5rem 0;
    background: var(--bg-light);
}

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

.stat-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    box-shadow: 0 2px 12px rgba(23, 37, 54, 0.06);
    transition: var(--transition);
}

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

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--primary-subtle);
    color: var(--primary-color);
    border-radius: var(--radius-md);
    margin: 0 auto 1rem;
    font-size: 1.5rem;
}

.stat-number-big {
    font-size: 2.5rem;
    font-weight: 700;
    background: var(--primary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

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

/* ================================
   CTA Section
   ================================ */
.cta {
    padding: 6rem 0;
    background: var(--primary-color);
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: transparent;
    border-radius: 50%;
}

.cta::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: transparent;
    border-radius: 50%;
}

.cta-content {
    text-align: center;
    color: white;
    position: relative;
    z-index: 1;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.125rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* ================================
   Footer
   ================================ */
.footer {
    padding: 4rem 0 2rem;
    background: var(--bg-dark);
    color: white;
}

.footer .logo-img {
    filter: brightness(0) invert(1);
    height: 45px;
    opacity: 0.9;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand p {
    margin-top: 1rem;
    color: var(--text-light);
    font-size: 0.9375rem;
    max-width: 280px;
}

.footer-links h4 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    color: var(--text-light);
}

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

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
}

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

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.footer-bottom p {
    color: var(--text-light);
    font-size: 0.875rem;
}

.footer-bottom a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: var(--transition);
}

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

/* Footer Social */
.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-light);
    transition: var(--transition);
}

.social-link:hover {
    background: var(--secondary-color);
    color: white;
    transform: translateY(-3px);
}

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

/* Footer Contact */
.footer-contact {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 2rem 0;
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-light);
}

.contact-item svg {
    color: var(--secondary-color);
    flex-shrink: 0;
}

.contact-item a {
    color: var(--text-light);
    text-decoration: none;
    transition: var(--transition);
}

.contact-item a:hover {
    color: white;
}

/* ================================
   Back to Top Button
   ================================ */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(23, 37, 54, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(23, 37, 54, 0.4);
}

.back-to-top svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 44px;
        height: 44px;
    }

    .back-to-top svg {
        width: 20px;
        height: 20px;
    }
}

/* ================================
   Page Header
   ================================ */
.page-header {
    padding: 9rem 0 4rem;
    background: var(--bg-light);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -15%;
    width: 400px;
    height: 400px;
    background: transparent;
    border-radius: 50%;
}

.page-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.page-header p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ================================
   Feature Section (Features Page)
   ================================ */
.feature-section {
    padding: 5rem 0;
}

.feature-section.alt-bg {
    background: var(--bg-light);
}

.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.feature-row.reverse {
    direction: rtl;
}

.feature-row.reverse > * {
    direction: ltr;
}

.feature-badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    background: var(--primary-subtle);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.feature-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.feature-content p {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.feature-list li::before {
    content: '';
    width: 20px;
    height: 20px;
    background: var(--secondary-color);
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Visual Box */
.visual-box {
    background: white;
    border: none;
    border-radius: var(--radius-xl);
    padding: 2rem;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.feature-section.alt-bg .visual-box {
    background: white;
}

/* Tenant Diagram */
.tenant-diagram {
    display: flex;
    gap: 1rem;
    width: 100%;
}

.tenant-box {
    flex: 1;
    background: var(--bg-light);
    border: none;
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(23, 37, 54, 0.08);
}

.tenant-box span {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.tenant-data {
    height: 80px;
    background: var(--primary-color);
    border-radius: var(--radius-sm);
    opacity: 0.25;
}

/* Role Hierarchy */
.role-hierarchy {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.role-item {
    padding: 1rem;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    font-weight: 500;
    text-align: center;
}

.role-item.super { background: var(--primary-color); color: white; box-shadow: 0 4px 12px rgba(23, 37, 54, 0.3); }
.role-item.admin { background: var(--primary-color); color: white; width: 85%; margin-left: auto; }
.role-item.hr { background: var(--primary-color); color: white; width: 70%; margin-left: auto; }
.role-item.user { background: var(--bg-light); color: var(--text-primary); width: 55%; margin-left: auto; }

/* Employee Card */
.employee-card {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    width: 100%;
    max-width: 280px;
}

.employee-avatar {
    width: 64px;
    height: 64px;
    background: var(--primary-color);
    border-radius: 50%;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(23, 37, 54, 0.25);
}

.employee-info {
    margin-bottom: 1rem;
}

.info-line {
    height: 12px;
    background: var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.info-line.name { width: 70%; background: var(--text-primary); }
.info-line.title { width: 50%; }
.info-line.dept { width: 40%; }

.employee-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-bar {
    height: 8px;
    background: var(--primary-color);
    border-radius: var(--radius-sm);
    opacity: 0.5;
}

/* Pipeline */
.pipeline {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.pipeline-stage {
    flex: 1;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
}

.pipeline-stage span {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.stage-count {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--primary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Org Chart */
.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.org-node {
    padding: 0.75rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.875rem;
    box-shadow: 0 3px 10px rgba(23, 37, 54, 0.2);
}

.org-node.ceo {
    background: var(--primary-color);
    box-shadow: 0 4px 15px rgba(23, 37, 54, 0.3);
}

.org-level {
    display: flex;
    gap: 0.5rem;
}

.org-node.small {
    padding: 0.5rem 1rem;
    background: var(--bg-light);
    color: var(--text-primary);
    font-size: 0.75rem;
    box-shadow: 0 2px 6px rgba(23, 37, 54, 0.08);
}

/* Skills Chart */
.skills-chart {
    width: 100%;
}

.skill-bar {
    margin-bottom: 1rem;
}

.skill-bar span {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.skill-bar .bar {
    height: 8px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.skill-bar .fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: var(--radius-sm);
}

/* Payroll Preview */
.payroll-preview {
    width: 100%;
    max-width: 280px;
}

.payroll-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.payroll-item:last-child {
    border-bottom: none;
}

.payroll-item.total {
    border-top: 2px dashed var(--border-color);
    border-bottom: none;
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.payroll-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.payroll-item.total .payroll-label {
    font-weight: 600;
    color: var(--text-primary);
}

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

.payroll-value.positive {
    color: var(--accent-color);
}

.payroll-value.negative {
    color: var(--secondary-color);
}

.payroll-item.total .payroll-value {
    font-size: 1.25rem;
    background: var(--primary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Calendar Preview */
.calendar-preview {
    width: 100%;
    max-width: 280px;
    background: white;
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.calendar-header {
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.calendar-header span {
    font-weight: 600;
    color: var(--text-primary);
}

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

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.calendar-day.header {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.625rem;
}

.calendar-day.holiday {
    background: var(--primary-subtle);
    color: var(--secondary-color);
    font-weight: 500;
}

.calendar-day.vacation {
    background: var(--primary-subtle);
    color: var(--primary-color);
    font-weight: 500;
}

.calendar-day.today {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
}

.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.625rem;
    color: var(--text-secondary);
}

.legend-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-item .dot.holiday {
    background: var(--secondary-color);
}

.legend-item .dot.vacation {
    background: var(--primary-color);
}

/* Benefits Cards */
.benefits-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 280px;
}

.benefit-card {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    transition: var(--transition);
}

.benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.benefit-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    color: white;
}

.benefit-icon.health {
    background: var(--primary-color);
}

.benefit-icon.dental {
    background: var(--primary-color);
}

.benefit-icon.insurance {
    background: var(--primary-color);
}

.benefit-icon.assets {
    background: var(--primary-color);
}

.benefit-card span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Learning Progress */
.learning-progress {
    width: 100%;
    max-width: 320px;
}

.course-item {
    margin-bottom: 1rem;
}

.course-item:last-child {
    margin-bottom: 0;
}

.course-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.course-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.course-status {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 50px;
    text-transform: uppercase;
}

.course-status.completed {
    background: var(--secondary-subtle);
    color: var(--accent-color);
}

.course-status.in-progress {
    background: rgba(23, 37, 54, 0.15);
    color: var(--primary-color);
}

.course-status.pending {
    background: rgba(107, 114, 128, 0.15);
    color: #6B7280;
}

.course-bar {
    height: 6px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.course-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: var(--radius-sm);
    transition: width 0.3s ease;
}

/* Performance Chart */
.performance-chart {
    width: 100%;
    max-width: 300px;
}

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

.perf-header span:first-child {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.perf-score {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--primary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.perf-categories {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.perf-category {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

.perf-category > span:first-child {
    font-size: 0.75rem;
    color: var(--text-secondary);
    grid-column: 1 / -1;
}

.perf-bar {
    height: 8px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex: 1;
}

.perf-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: var(--radius-sm);
}

.perf-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    min-width: 35px;
    text-align: right;
}

/* Analytics Preview */
.analytics-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 280px;
}

.analytics-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.analytics-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: white;
    flex-shrink: 0;
}

.analytics-icon.green {
    background: var(--primary-color);
}

.analytics-icon.yellow {
    background: var(--primary-color);
}

.analytics-data {
    display: flex;
    flex-direction: column;
}

.analytics-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.analytics-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Expanded Features Checklist */
.features-checklist.expanded {
    grid-template-columns: repeat(4, 1fr);
}

/* New All Features Section */
.all-features-new {
    padding: 5rem 0;
    background: var(--bg-light);
}

.features-modules-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.feature-module-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(23, 37, 54, 0.06);
    transition: var(--transition);
    border: 1px solid transparent;
    text-align: center;
}

.feature-module-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(23, 37, 54, 0.1);
}

.module-card-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1rem auto;
    box-shadow: 0 4px 12px rgba(23, 37, 54, 0.2);
}

.feature-module-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.module-count {
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 1rem;
    padding: 0.2rem 0.6rem;
    background: var(--primary-subtle);
    border-radius: 50px;
    display: inline-block;
}

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

.module-list li {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.module-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--secondary-color);
    border-radius: 50%;
    flex-shrink: 0;
}

.features-total {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 2rem;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

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

.total-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    background: var(--primary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.total-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

@media (max-width: 1200px) {
    .features-modules-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .features-checklist.expanded {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .features-total {
        gap: 2rem;
        flex-wrap: wrap;
    }

    .total-number {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .features-checklist.expanded {
        grid-template-columns: 1fr;
    }

    .features-modules-grid {
        grid-template-columns: 1fr;
    }

    .features-total {
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .total-badge {
        flex: 1;
        min-width: 100px;
    }

    .total-number {
        font-size: 1.75rem;
    }

    .benefits-cards {
        max-width: 200px;
    }

    .calendar-preview,
    .payroll-preview,
    .learning-progress,
    .performance-chart,
    .analytics-preview {
        max-width: 100%;
    }
}

/* Code Box */
.code-box {
    background: var(--bg-dark);
    padding: 1.5rem;
}

.code-box pre {
    margin: 0;
}

.code-box code {
    color: #E5E7EB;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* All Features */
.all-features {
    padding: 5rem 0;
    background: var(--bg-light);
}

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

.checklist-column h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.checklist-column ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checklist-column li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.checklist-column li::before {
    content: '';
    width: 16px;
    height: 16px;
    background: var(--secondary-color);
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

/* ================================
   Pricing Page
   ================================ */
.pricing-section {
    padding: 3rem 0 5rem;
}

.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.toggle-label {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.toggle-label.active {
    color: var(--text-primary);
    font-weight: 500;
}

.save-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--secondary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    margin-left: 0.25rem;
}

.toggle-switch {
    position: relative;
    width: 48px;
    height: 24px;
    background: var(--border-color);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.toggle-switch.active {
    background: var(--primary-color);
}

.toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.toggle-switch.active .toggle-slider {
    left: 26px;
}

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

.pricing-card {
    position: relative;
    background: white;
    border: none;
    border-radius: var(--radius-xl);
    padding: 2rem;
    transition: var(--transition);
    box-shadow: 0 2px 12px rgba(23, 37, 54, 0.06);
}

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

.pricing-card.featured {
    background: var(--bg-light);
    box-shadow: var(--shadow-lg);
    transform: scale(1.05);
    border: 2px solid var(--primary-color);
}

.featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.35rem 1.25rem;
    background: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(23, 37, 54, 0.3);
}

.pricing-header {
    text-align: center;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.pricing-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.pricing-description {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.pricing-price .currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.pricing-price .amount {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.pricing-price .period {
    font-size: 1rem;
    color: var(--text-secondary);
}

.pricing-note {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-top: 0.5rem;
}

.pricing-features ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.pricing-features li.disabled {
    opacity: 0.5;
}

.pricing-features .check,
.pricing-features .x {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.pricing-features .check {
    background-color: var(--secondary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.pricing-features .x {
    background-color: var(--border-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

.plan-highlight {
    margin-top: 1.25rem;
}

.plan-badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    background: var(--primary-subtle);
    color: var(--primary-dark);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 50px;
}

/* Managing Companies Plans (Empresas Gestoras) */
.managed-companies-section {
    padding: 5rem 0;
    background: var(--primary-subtle);
}

.section-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.35rem 1rem;
    background: white;
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 50px;
}

.managed-benefits {
    margin-bottom: 3rem;
}

.managed-note {
    margin: 2.5rem auto 0;
    max-width: 720px;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.managed-note a {
    color: var(--primary-color);
    font-weight: 600;
}

.page-header-note {
    margin-top: 1.25rem;
    font-size: 1rem;
}

.page-header-note a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
}

/* Comparison Table */
.comparison-section {
    padding: 5rem 0;
    background: var(--bg-light);
}

.comparison-table-wrapper {
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.comparison-table th,
.comparison-table td {
    padding: 1rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.comparison-table th {
    background: var(--bg-light);
    font-weight: 600;
    font-size: 1rem;
}

.comparison-table th.featured {
    background: var(--primary-subtle);
    color: var(--primary-color);
}

.comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.comparison-table tr.category td {
    background: var(--bg-light);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.comparison-table .check,
.comparison-table .x {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.comparison-table .check {
    background-color: var(--secondary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.comparison-table .x {
    background-color: var(--border-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

/* FAQ Section */
.faq-section {
    padding: 5rem 0;
}

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

.faq-item {
    padding: 1.5rem;
    background: white;
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: 0 2px 12px rgba(23, 37, 54, 0.06);
    transition: var(--transition);
}

.faq-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.faq-item h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.faq-item p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ================================
   Contact Page
   ================================ */
.contact-section {
    padding: 3rem 0 5rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
}

.contact-form-wrapper h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

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

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition);
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

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

.form-group.checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.form-group.checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.form-group.checkbox label {
    font-weight: 400;
    color: var(--text-secondary);
}

/* Contact Info */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: none;
    box-shadow: 0 2px 12px rgba(23, 37, 54, 0.06);
}

.info-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.info-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    color: var(--primary-color);
    flex-shrink: 0;
}

.info-content h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.info-content p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.info-content p.small {
    font-size: 0.8125rem;
    color: var(--text-light);
}

.info-content a {
    color: var(--primary-color);
}

.info-content a:hover {
    text-decoration: underline;
}

/* Quick Links */
.quick-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quick-links a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    transition: var(--transition);
}

.quick-links a:hover {
    color: white;
    background: var(--primary-color);
    transform: translateX(4px);
}

.link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

/* Social Links */
.social-card {
    text-align: center;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: var(--transition);
}

.social-link:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(23, 37, 54, 0.3);
}

/* Map Section */
.map-section {
    padding: 0 0 5rem;
}

.map-placeholder {
    height: 400px;
    background: var(--bg-light);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: var(--shadow-md);
}

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

.map-overlay p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

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

    .hero-content h1 {
        font-size: 2.75rem;
    }

    .hero-subtitle {
        margin: 0 auto 2rem;
    }

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

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

    .hero-image {
        display: none;
    }

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

    .feature-row {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .feature-row.reverse {
        direction: ltr;
    }

    .visual-box {
        max-width: 400px;
        margin: 0 auto;
    }

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

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .pricing-card.featured {
        transform: none;
    }

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

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

    /* New sections responsive */
    .modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .payroll-content,
    .ats-content,
    .api-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .payroll-info {
        padding-right: 0;
        text-align: center;
    }

    .payroll-features {
        align-items: center;
    }

    .ats-visual {
        order: 0;
    }

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

    .ats-features {
        justify-content: center;
    }

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

    .api-features {
        align-items: center;
    }

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

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 2rem;
        gap: 1rem;
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-toggle {
        display: flex;
    }

    .hero-content h1 {
        font-size: 2.25rem;
    }

    .hero-stats {
        flex-direction: column;
        gap: 1.5rem;
    }

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

    .section-header h2,
    .page-header h1 {
        font-size: 2rem;
    }

    .features-checklist {
        grid-template-columns: 1fr;
    }

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

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

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

    .footer-brand {
        margin-bottom: 2rem;
    }

    .footer-brand p {
        max-width: none;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-contact {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* New sections responsive - 768px */
    .modules-grid {
        grid-template-columns: 1fr;
    }

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

    .module-icon {
        margin: 0 auto 1.25rem;
    }

    .module-features {
        justify-content: center;
    }

    .payroll-info h2,
    .ats-info h2,
    .api-info h2 {
        font-size: 1.75rem;
    }

    .pipeline-visual {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pipeline-arrow {
        display: none;
    }

    .ats-features {
        grid-template-columns: 1fr;
    }

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

    .api-code pre {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .hero-content h1 {
        font-size: 1.875rem;
    }

    .pricing-card {
        padding: 1.5rem;
    }
}

/* ================================
   About Section
   ================================ */
.about-section {
    padding: 5rem 0;
    background: var(--bg-light);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}

.about-text {
    padding-right: 2rem;
}

.about-text p {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

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

.about-feature {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: var(--radius-lg);
    transition: var(--transition);
    box-shadow: 0 2px 12px rgba(23, 37, 54, 0.06);
}

.about-feature:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.about-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-md);
    margin: 0 auto 1rem;
}

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

.about-feature p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ================================
   FAQs Section
   ================================ */
.faqs-section {
    padding: 5rem 0;
    background: var(--bg-light);
}

.faqs-grid {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(23, 37, 54, 0.06);
    transition: var(--transition);
}

.faq-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    transition: var(--transition);
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-question svg {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: var(--transition);
}

.faq-item.active .faq-question svg {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 0 1.5rem 1.25rem;
}

.faq-answer p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* FAQ Category Menu */
.faq-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.faq-category-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.faq-category-btn:hover {
    border-color: var(--primary-light);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.faq-category-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-md);
}

.faq-category-btn.active svg {
    color: white;
}

.faq-category-btn svg {
    flex-shrink: 0;
    transition: var(--transition);
}

/* Responsive FAQ Categories */
@media (max-width: 768px) {
    .faq-categories {
        gap: 0.5rem;
    }

    .faq-category-btn {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    .faq-category-btn svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .faq-categories {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .faq-categories::-webkit-scrollbar {
        display: none;
    }

    .faq-category-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ================================
   Book a Demo Section
   ================================ */
.demo-section {
    padding: 5rem 0;
    background: var(--bg-light);
}

.demo-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.demo-info h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.demo-info > p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}

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

.demo-benefits li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--text-primary);
}

.demo-benefits li svg {
    flex-shrink: 0;
    color: var(--primary-color);
}

.demo-form-container {
    background: white;
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}

.demo-form .form-group {
    margin-bottom: 1.25rem;
}

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

.demo-form input,
.demo-form select,
.demo-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    transition: var(--transition);
    font-family: inherit;
}

.demo-form input:focus,
.demo-form select:focus,
.demo-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(23, 37, 54, 0.1);
}

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

/* ================================
   Follow Us Section
   ================================ */
.follow-section {
    padding: 5rem 0;
    background: white;
}

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

.social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition);
    text-decoration: none;
}

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

.social-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    transition: var(--transition);
}

/* Social card colors */
.social-card.facebook .social-card-icon {
    background: #1877F2;
    color: white;
}

.social-card.twitter .social-card-icon {
    background: #000000;
    color: white;
}

.social-card.linkedin .social-card-icon {
    background: #0A66C2;
    color: white;
}

.social-card.instagram .social-card-icon {
    background: var(--primary-color);
    color: white;
}

.social-card.youtube .social-card-icon {
    background: var(--text-secondary);
    color: white;
}

.social-card.tiktok .social-card-icon {
    background: #000000;
    color: white;
}

.social-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.social-card p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ================================
   Legal Pages (Terms & Privacy)
   ================================ */
.legal-content {
    padding: 3rem 0 5rem;
}

.legal-document {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.legal-section {
    margin-bottom: 2.5rem;
}

.legal-section:last-child {
    margin-bottom: 0;
}

.legal-section h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.legal-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 0.75rem;
}

.legal-section p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.legal-section ul {
    list-style: none;
    margin: 1rem 0;
}

.legal-section ul li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

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

/* ================================
   New Sections Responsive
   ================================ */
@media (max-width: 1024px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-text {
        padding-right: 0;
        text-align: center;
    }

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

    .demo-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    .demo-benefits {
        align-items: center;
    }

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

@media (max-width: 768px) {
    .about-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .demo-info h2 {
        font-size: 2rem;
    }

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

    .legal-document {
        padding: 2rem;
    }
}

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

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

    .demo-form-container {
        padding: 1.5rem;
    }

    .legal-document {
        padding: 1.5rem;
    }
}

/* ================================
   Key Solutions Section
   ================================ */
.solutions-section {
    padding: 5rem 0;
    background: var(--bg-light);
}

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

.solution-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(23, 37, 54, 0.08);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

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

.solution-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.solution-icon.payroll {
    background: var(--primary-color);
    color: white;
}

.solution-icon.reports {
    background: var(--primary-color);
    color: white;
}

.solution-icon.evaluations {
    background: var(--primary-color);
    color: white;
}

.solution-icon.selfservice {
    background: var(--primary-color);
    color: white;
}

.solution-icon.kpi {
    background: var(--primary-color);
    color: white;
}

.solution-icon.recruitment {
    background: var(--primary-color);
    color: white;
}

.solution-card h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.solution-card > p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.solution-features {
    list-style: none;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.solution-features li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

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

.solution-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: var(--transition);
    margin-top: auto;
}

.solution-link:hover {
    gap: 0.75rem;
}

.solution-link svg {
    transition: var(--transition);
}

.solution-link:hover svg {
    transform: translateX(4px);
}

/* Solutions Section Responsive */
@media (max-width: 1024px) {
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .solution-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }
}

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

    .solution-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }

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

    .solution-icon {
        margin: 0 auto 1.5rem;
    }

    .solution-features {
        text-align: left;
        max-width: 280px;
        margin: 0 auto 1.5rem;
    }

    .solution-link {
        justify-content: center;
    }
}

/* ================================
   Core HR Features Section
   ================================ */
.core-features-section {
    padding: 5rem 0;
    background: var(--bg-light);
}

.core-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.core-feature-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: var(--transition);
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

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

.core-feature-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-feature-icon.time {
    background: var(--primary-color);
    color: white;
}

.core-feature-icon.recruitment {
    background: var(--primary-color);
    color: white;
}

.core-feature-icon.onboarding {
    background: var(--primary-color);
    color: white;
}

.core-feature-icon.learning {
    background: var(--primary-color);
    color: white;
}

.core-feature-icon.benefits {
    background: var(--primary-color);
    color: white;
}

.core-feature-icon.compliance {
    background: var(--primary-color);
    color: white;
}

.core-feature-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.core-feature-content > p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.core-feature-content ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.core-feature-content ul li {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: #F3F4F6;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
}

.core-features-cta {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Core Features Responsive */
@media (max-width: 1024px) {
    .core-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .core-feature-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .core-feature-content ul {
        justify-content: center;
    }

    .core-features-cta {
        flex-direction: column;
        align-items: center;
    }

    .core-features-cta .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* ================================
   Why TalentUs Section
   ================================ */
.why-section {
    padding: 5rem 0;
    background: var(--bg-light);
}

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

.why-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(23, 37, 54, 0.06);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

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

.why-number {
    font-size: 3rem;
    font-weight: 700;
    color: rgba(23, 37, 54, 0.1);
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    line-height: 1;
}

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

.why-card p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ================================
   Who We Serve Section
   ================================ */
.serve-section {
    padding: 5rem 0;
    background: white;
}

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

.serve-card {
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--bg-light);
    border-radius: var(--radius-xl);
    transition: var(--transition);
}

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

.serve-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
}

.serve-card h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.serve-card p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.serve-tag {
    display: inline-block;
    padding: 0.375rem 1rem;
    background: var(--primary-color);
    color: white;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 50px;
}

.serve-industries {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.serve-industries h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.industry-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.industry-tags span {
    padding: 0.5rem 1.25rem;
    background: var(--bg-light);
    color: var(--text-secondary);
    font-size: 0.875rem;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.industry-tags span:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* ================================
   Get More Info Section
   ================================ */
.info-section {
    padding: 4rem 0;
    background: var(--primary-color);
}

.info-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.info-text {
    flex: 1;
}

.info-text h2 {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
}

.info-text p {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.info-form {
    flex: 1;
    max-width: 500px;
}

.info-input-group {
    display: flex;
    gap: 0.75rem;
    background: white;
    padding: 0.5rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.info-input-group input {
    flex: 1;
    padding: 0.875rem 1rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--text-primary);
}

.info-input-group input:focus {
    outline: none;
}

.info-input-group input::placeholder {
    color: var(--text-light);
}

.info-input-group .btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.info-privacy {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.75rem;
    text-align: center;
}

/* ================================
   WhatsApp Button
   ================================ */
.whatsapp-btn {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: var(--transition);
    z-index: 999;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* ================================
   Help Widget
   ================================ */
.help-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
}

.help-widget-toggle {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(23, 37, 54, 0.4);
    transition: var(--transition);
}

.help-widget-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(23, 37, 54, 0.5);
}

.help-widget-toggle .close-icon {
    display: none;
}

.help-widget.active .help-widget-toggle .help-icon {
    display: none;
}

.help-widget.active .help-widget-toggle .close-icon {
    display: block;
}

.help-widget-panel {
    position: absolute;
    bottom: 75px;
    right: 0;
    width: 320px;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: var(--transition);
    overflow: hidden;
}

.help-widget.active .help-widget-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.help-panel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--primary-color);
    color: white;
}

.help-avatar {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-panel-header h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.125rem;
}

.help-panel-header p {
    font-size: 0.8125rem;
    opacity: 0.9;
}

.help-panel-options {
    padding: 0.75rem;
}

.help-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem;
    border-radius: var(--radius-md);
    transition: var(--transition);
    text-decoration: none;
}

.help-option:hover {
    background: var(--bg-light);
}

.help-option-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-option-icon.whatsapp {
    background: #25D366;
}

.help-option-text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.help-option-text span {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ================================
   Cookies Banner
   ================================ */
.cookies-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 1.25rem 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transform: translateY(100%);
    transition: var(--transition);
}

.cookies-banner.active {
    transform: translateY(0);
}

.cookies-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cookies-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.cookies-text svg {
    flex-shrink: 0;
    color: var(--primary-color);
}

.cookies-text p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.cookies-text a {
    color: var(--primary-color);
    font-weight: 500;
}

.cookies-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ================================
   Cookie Settings Modal
   ================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    padding: 1rem;
}

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

.modal-content {
    background: white;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.95);
    transition: var(--transition);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

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

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.25rem;
    transition: var(--transition);
}

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

.modal-body {
    padding: 1.5rem;
}

.modal-body > p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.cookie-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.cookie-option:last-child {
    border-bottom: none;
}

.cookie-option-info h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.cookie-option-info p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.toggle-switch-label {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    cursor: pointer;
}

.toggle-switch-label input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider-cookie {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border-color);
    border-radius: 24px;
    transition: var(--transition);
}

.toggle-slider-cookie::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: var(--transition);
}

.toggle-switch-label input:checked + .toggle-slider-cookie {
    background: var(--primary-color);
}

.toggle-switch-label input:checked + .toggle-slider-cookie::before {
    transform: translateX(24px);
}

.toggle-switch-label input:disabled + .toggle-slider-cookie {
    opacity: 0.6;
    cursor: not-allowed;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* ================================
   New Sections Responsive
   ================================ */
@media (max-width: 1024px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .info-content {
        flex-direction: column;
        text-align: center;
    }

    .info-form {
        max-width: 100%;
        width: 100%;
    }
}

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

    .serve-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto 3rem;
    }

    .info-input-group {
        flex-direction: column;
    }

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

    .cookies-content {
        flex-direction: column;
        text-align: center;
    }

    .cookies-text {
        flex-direction: column;
    }

    .whatsapp-btn {
        bottom: 90px;
        right: 16px;
        width: 50px;
        height: 50px;
    }

    .help-widget {
        right: 16px;
        bottom: 16px;
    }

    .help-widget-toggle {
        width: 54px;
        height: 54px;
    }

    .help-widget-panel {
        width: 290px;
        right: -8px;
    }
}

@media (max-width: 480px) {
    .info-text h2 {
        font-size: 1.5rem;
    }

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

    .cookies-actions .btn {
        width: 100%;
    }
}

/* ================================
   Language Switcher
   ================================ */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border-color);
}

.lang-switcher a {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-light);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.lang-switcher a:hover {
    color: var(--primary-color);
}

.lang-switcher a.active {
    color: var(--primary-color);
    background: rgba(23, 37, 54, 0.08);
    font-weight: 600;
}

@media (max-width: 768px) {
    .lang-switcher {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        justify-content: center;
        padding-top: 1rem;
        margin-top: 1rem;
        border-top: 1px solid var(--border-color);
    }
}

/* ================================
   Accessibility Improvements
   ================================ */

/* Focus Styles - Enhanced visibility */
:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    z-index: 9999;
    transition: top 0.3s ease;
    font-weight: 600;
}

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

/* 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: 0;
}

/* Campo trampa antispam de los formularios (lo revisa send-email.php).
   Fuera de pantalla y no con display:none, que algunos bots saltan. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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

    .hero::before,
    .hero::after {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --text-secondary: #4a4a4a;
        --text-light: #666666;
        --border-color: #999999;
    }

    .btn-primary {
        border: 2px solid var(--primary-dark);
    }

    .btn-outline {
        border-width: 3px;
    }

    .feature-card,
    .pricing-card,
    .solution-card {
        border: 2px solid var(--border-color);
    }
}

/* Color scheme preference (dark mode ready) */
@media (prefers-color-scheme: dark) {
    /* Reserved for future dark mode implementation */
}

/* ================================
   Mobile Optimization Enhancements
   ================================ */

/* Touch-friendly targets - minimum 44x44px */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .nav-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .faq-question {
        min-height: 48px;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Better text readability on mobile */
@media (max-width: 480px) {
    body {
        font-size: 15px;
        line-height: 1.7;
    }

    p {
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

/* Improved spacing for mobile */
@media (max-width: 768px) {
    .section-header {
        margin-bottom: 2rem;
    }

    .section-header h2 {
        font-size: var(--font-2xl);
    }

    .section-header p {
        font-size: var(--font-base);
    }
}

/* ================================
   Print Styles
   ================================ */
@media print {
    /* Hide non-essential elements */
    .navbar,
    .nav-toggle,
    .back-to-top,
    .cookies-banner,
    .help-widget,
    .whatsapp-btn,
    footer,
    .cta-section {
        display: none !important;
    }

    /* Reset backgrounds for printing */
    body {
        background: white !important;
        color: black !important;
    }

    .hero,
    .page-header,
    section {
        background: white !important;
        padding: 1rem 0 !important;
    }

    /* Ensure text is visible */
    * {
        color: black !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Show URLs after links */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    /* Page breaks */
    h1, h2, h3 {
        page-break-after: avoid;
    }

    .pricing-card,
    .feature-card {
        page-break-inside: avoid;
    }
}

/* ================================
   Performance Optimizations
   ================================ */

/* Hardware acceleration for animations */
.feature-card,
.pricing-card,
.solution-card,
.why-card,
.serve-card,
.btn {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize scroll performance */
.nav-menu {
    -webkit-overflow-scrolling: touch;
}

/* Contain paint for better performance */
.feature-card,
.pricing-card,
.solution-card {
    contain: layout style paint;
}

/* ================================
   Utility Classes
   ================================ */

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Display utilities */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flexbox utilities */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* Margin utilities */
.m-auto { margin: auto; }
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Responsive visibility */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

@media (max-width: 1024px) {
    .hide-tablet { display: none !important; }
}

/* Image optimization */
img {
    content-visibility: auto;
}

/* Lazy load placeholder */
img[loading="lazy"] {
    background: #EEF2F6;
    background-size: 200% 100%;
}

/* ================================
   Additional Mobile Responsive Fixes
   ================================ */

/* Extra small devices (phones, less than 360px) */
@media (max-width: 360px) {
    .container {
        padding: 0 0.75rem;
    }

    .hero-content h1 {
        font-size: 1.625rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .btn-large {
        padding: 0.75rem 1.25rem;
    }

    .pricing-card {
        padding: 1.25rem;
    }

    .legal-document {
        padding: 1rem;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 896px) and (orientation: landscape) {
    .hero {
        padding: 6rem 0 3rem;
    }

    .hero-stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }

    .nav-menu {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    .navbar {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .back-to-top {
        right: max(2rem, env(safe-area-inset-right));
        bottom: max(2rem, env(safe-area-inset-bottom));
    }

    footer {
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }
}

/* ================================
   SaaS product sections (added)
   ================================ */

/* Trust bar */
.trust-bar { padding: 2.5rem 0; background: var(--bg-white); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.trust-bar-label { text-align: center; color: var(--text-light); font-size: var(--font-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.25rem; }
.trust-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2.5rem; }
.trust-logos span { color: var(--text-secondary); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; opacity: 0.75; }

/* Shared section rhythm */
.tour-section, .integrations-section, .testimonials-section, .roi-section, .pricing-teaser { padding: 5rem 0; }
.tour-section, .testimonials-section, .pricing-teaser { background: var(--bg-light); }
.integrations-section, .roi-section { background: var(--bg-white); }

/* Product tour */
.tour { max-width: 980px; margin: 0 auto; }
.tour-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2rem; }
.tour-tab { padding: 0.6rem 1.25rem; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--bg-white); color: var(--text-secondary); font-weight: 600; font-size: var(--font-sm); cursor: pointer; transition: var(--transition); }
.tour-tab:hover { border-color: var(--primary-light); color: var(--primary-color); }
.tour-tab.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.tour-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-sm); }
.tour-panel[hidden] { display: none; }
.tour-panel-info h3 { font-size: var(--font-2xl); color: var(--text-primary); margin-bottom: 0.75rem; }
.tour-panel-info p { color: var(--text-secondary); margin-bottom: 1.25rem; }
.tour-list { display: grid; gap: 0.6rem; margin-bottom: 1.5rem; }
.tour-list li { position: relative; padding-left: 1.75rem; color: var(--text-primary); font-size: var(--font-sm); }
.tour-list li::before { content: ""; position: absolute; left: 0; top: 0.1rem; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--primary-subtle); }
.tour-list li::after { content: ""; position: absolute; left: 6px; top: 0.35rem; width: 5px; height: 8px; border: 2px solid var(--primary-color); border-top: 0; border-left: 0; transform: rotate(45deg); }
.tour-link { color: var(--primary-color); font-weight: 600; font-size: var(--font-sm); }
.tour-mock { background: var(--bg-light); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; }
.tour-mock-row { display: flex; justify-content: space-between; padding: 0.55rem 0; border-bottom: 1px solid var(--border-color); font-size: var(--font-sm); color: var(--text-secondary); }
.tour-mock-row b { color: var(--text-primary); }
.tour-mock-row b.neg { color: #B4483F; }
.tour-mock-row.total { border-bottom: 0; font-weight: 700; }
.tour-mock-row.total b { color: var(--primary-color); font-size: var(--font-lg); }
.tour-mock-bar { height: 8px; border-radius: var(--radius-full); background: var(--border-color); margin: 1rem 0 0.5rem; overflow: hidden; }
.tour-mock-bar i { display: block; height: 100%; background: var(--primary-color); }
.tour-mock-cap { font-size: var(--font-xs); color: var(--text-light); }
.tour-stage { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 0.75rem; padding: 0.5rem 0; font-size: var(--font-sm); color: var(--text-secondary); }
.tour-stage i { display: block; height: 10px; border-radius: var(--radius-full); background: var(--primary-color); }
.tour-stage b { color: var(--text-primary); }
.tour-kpi { padding: 0.6rem 0; font-size: var(--font-sm); color: var(--text-secondary); }
.tour-kpi b { float: right; color: var(--text-primary); }
.tour-kpi i { display: block; clear: both; height: 8px; border-radius: var(--radius-full); background: var(--primary-color); margin-top: 0.5rem; }
.tour-req { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border-color); font-size: var(--font-sm); color: var(--text-primary); }
.tour-req:last-child { border-bottom: 0; }
.tour-req .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tour-req .dot.ok { background: var(--accent-color); }
.tour-req .dot.wait { background: #C08A2E; }
.tour-req .badge { margin-left: auto; font-size: var(--font-xs); font-weight: 600; padding: 0.15rem 0.6rem; border-radius: var(--radius-full); }
.tour-req .badge.ok { background: var(--secondary-subtle); color: var(--accent-color); }
.tour-req .badge.wait { background: #F3ECD9; color: #8A6516; }

/* Integrations */
.integrations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 860px; margin: 0 auto; }
.integration-tile { display: flex; align-items: center; gap: 0.85rem; padding: 1.1rem 1.25rem; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-weight: 600; font-size: var(--font-sm); transition: var(--transition); }
.integration-tile:hover { border-color: var(--primary-light); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.integration-tile svg { color: var(--primary-color); flex-shrink: 0; }
.integrations-note { text-align: center; margin-top: 1.75rem; color: var(--text-light); font-size: var(--font-sm); }

/* Testimonials */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.testimonial-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 1.5rem; }
.testimonial-card blockquote { color: var(--text-primary); font-size: var(--font-lg); line-height: 1.55; }
.testimonial-card blockquote::before { content: "\201C"; color: var(--primary-light); font-size: 2.5rem; line-height: 0; vertical-align: -0.35em; margin-right: 0.1em; }
.testimonial-card figcaption { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; }
.t-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--primary-subtle); color: var(--primary-color); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-sm); flex-shrink: 0; }
.t-meta { display: flex; flex-direction: column; }
.t-meta strong { color: var(--text-primary); font-size: var(--font-sm); }
.t-meta span { color: var(--text-light); font-size: var(--font-xs); }

/* ROI calculator */
.roi-card { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: 3rem; }
.roi-intro h2 { font-size: var(--font-3xl); color: var(--text-primary); margin: 0.75rem 0; }
.roi-intro p { color: var(--text-secondary); }
.roi-range-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.roi-range-head label { color: var(--text-secondary); font-weight: 600; font-size: var(--font-sm); }
.roi-range-head strong { color: var(--primary-color); font-size: var(--font-xl); }
.roi-range { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: var(--radius-full); background: var(--border-color); outline: none; }
.roi-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-color); border: 3px solid #fff; box-shadow: var(--shadow-md); cursor: pointer; }
.roi-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-color); border: 3px solid #fff; cursor: pointer; }
.roi-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.75rem 0 1rem; }
.roi-result { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.1rem; text-align: center; }
.roi-num { display: block; font-size: var(--font-2xl); font-weight: 700; color: var(--primary-color); }
.roi-lbl { display: block; font-size: var(--font-xs); color: var(--text-secondary); margin-top: 0.25rem; }
.roi-note { font-size: var(--font-xs); color: var(--text-light); }

/* Pricing teaser */
.pt-toggle { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; }
.pt-label { color: var(--text-secondary); font-weight: 600; font-size: var(--font-sm); cursor: pointer; }
.pt-label.active { color: var(--text-primary); }
.pt-badge { background: var(--secondary-subtle); color: var(--accent-color); font-size: var(--font-xs); font-weight: 700; padding: 0.1rem 0.45rem; border-radius: var(--radius-full); }
.pt-switch { width: 48px; height: 26px; border-radius: var(--radius-full); background: var(--primary-color); border: none; position: relative; cursor: pointer; padding: 0; }
.pt-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: var(--transition); }
.pt-switch.active .pt-knob { left: 25px; }
.pt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.pt-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); position: relative; }
.pt-card.featured { border-color: var(--primary-color); box-shadow: var(--shadow-md); }
.pt-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary-color); color: #fff; font-size: var(--font-xs); font-weight: 700; padding: 0.25rem 0.85rem; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.04em; }
.pt-card h3 { font-size: var(--font-xl); color: var(--text-primary); }
.pt-tagline { color: var(--text-light); font-size: var(--font-sm); margin: 0.35rem 0 1.25rem; }
.pt-price { font-size: var(--font-3xl); font-weight: 700; color: var(--text-primary); display: flex; align-items: baseline; gap: 0.15rem; }
.pt-per { font-size: var(--font-sm); color: var(--text-light); font-weight: 500; }
.pt-custom { font-size: var(--font-2xl); }
.pt-features { display: grid; gap: 0.65rem; margin: 1.5rem 0 2rem; }
.pt-features li { position: relative; padding-left: 1.6rem; color: var(--text-secondary); font-size: var(--font-sm); }
.pt-features li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-light); }
.pt-card .btn { margin-top: auto; }
.pt-note { text-align: center; margin-top: 2rem; color: var(--text-secondary); font-size: var(--font-sm); }
.pt-note a { color: var(--primary-color); font-weight: 600; }

@media (max-width: 860px) {
  .tour-panel { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem; }
  .roi-card { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; }
  .integrations-grid, .testimonials-grid, .pt-cards { grid-template-columns: 1fr; }
}

/* ===== What's new, mobile app section and "New" pill ===== */
.whats-new-section { padding: 5rem 0; background: var(--bg-white); }
.new-pill { display: inline-block; margin: 0 0 0.5rem 0.4rem; padding: 0.15rem 0.6rem; border-radius: var(--radius-full); background: var(--secondary-subtle); color: var(--accent-color); font-size: var(--font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; }
.feature-card .new-pill { margin-left: 0; display: table; }
.mobile-section { padding: 5rem 0; background: var(--bg-white); }
.mobile-content { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; }
.mobile-info h2 { font-size: var(--font-3xl, 2rem); color: var(--text-primary); margin: 0.75rem 0 1rem; }
.mobile-info > p { color: var(--text-secondary); margin-bottom: 1.5rem; }
.mobile-visual { display: flex; justify-content: center; }
.phone-mock { width: 100%; max-width: 280px; margin: 0 auto; background: var(--bg-white); border: 10px solid var(--bg-dark); border-radius: 2rem; padding: 1.25rem 1rem 1.5rem; box-shadow: var(--shadow-lg); }
.phone-notch { width: 72px; height: 6px; margin: 0 auto 1rem; border-radius: var(--radius-full); background: var(--border-color); }
.phone-title { font-weight: 700; font-size: var(--font-lg); color: var(--text-primary); margin-bottom: 0.75rem; }
.phone-mock .tour-req { font-size: var(--font-xs); }
@media (max-width: 860px) {
  .mobile-content { grid-template-columns: 1fr; gap: 2.5rem; }
}
.payroll-features, .ats-features { margin-bottom: 2rem; }
.tour-kpi b { margin-left: 0.75rem; }

/* ===== Product screens showcase (app mockups, app brand tokens) ===== */
.screens-section { padding: 5rem 0; background: var(--bg-light); }
.shots { max-width: 1120px; margin: 0 auto; }
.shot-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.75rem; }
.shot-tab { padding: 0.55rem 1.1rem; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--bg-white); color: var(--text-secondary); font-weight: 600; font-size: var(--font-sm); cursor: pointer; transition: var(--transition); }
.shot-tab:hover { border-color: var(--primary-light); color: var(--primary-color); }
.shot-tab.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.shot-panel[hidden] { display: none; }
.shot-caption { text-align: center; color: var(--text-secondary); font-size: var(--font-sm); margin-top: 1rem; }
.shots-sub { text-align: center; font-size: var(--font-2xl); color: var(--text-primary); margin: 4rem 0 0.5rem; }
.shots-sub-p { text-align: center; color: var(--text-secondary); margin-bottom: 1.5rem; }

.am { --am-p: #9b0b49; --am-pl: #fdf2f7; --am-g1: #f9fafb; --am-g2: #f2f4f7; --am-g3: #e4e7ec; --am-g5: #98a2b3; --am-g6: #667085; --am-g7: #475467; --am-g9: #101828;
  --am-ok: #067647; --am-okl: #ecfdf3; --am-wa: #b54708; --am-wal: #fffaeb; --am-er: #b42318; --am-erl: #fef3f2; --am-in: #175cd3; --am-inl: #eff8ff;
  font-family: Inter, system-ui, sans-serif; color: var(--am-g9); font-size: 12px; line-height: 1.45; text-align: left; }
.am * { box-sizing: border-box; }
.am-browser { background: #fff; border: 1px solid #d0d5dd; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); }
.am-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--am-g2); border-bottom: 1px solid var(--am-g3); }
.am-dots { display: flex; gap: 6px; }
.am-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d0d5dd; display: block; }
.am-url { flex: 1; max-width: 420px; margin: 0 auto; background: #fff; border: 1px solid var(--am-g3); border-radius: 999px; padding: 3px 12px; color: var(--am-g6); font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-app { display: grid; grid-template-columns: 178px 1fr; min-height: 470px; }
.am-side { background: var(--am-g9); color: #d0d5dd; padding: 14px 10px; }
.am-logo { color: #fff; font-weight: 700; font-size: 14px; padding: 2px 8px 14px; }
.am-logo b { color: #f4a6c6; }
.am-sec { font-size: 9px; letter-spacing: .08em; color: var(--am-g6); padding: 10px 8px 4px; }
.am-nav { display: block; padding: 6px 8px; border-radius: 6px; font-size: 11.5px; white-space: nowrap; }
.am-nav.on { background: #1d2939; color: #fff; box-shadow: inset 3px 0 0 var(--am-p); }
.am-main { background: var(--am-g1); min-width: 0; }
.am-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 50px; padding: 0 18px; background: #fff; border-bottom: 1px solid var(--am-g3); }
.am-top h5 { margin: 0; font-size: 14px; font-weight: 600; color: var(--am-g9); }
.am-top small { color: var(--am-g5); font-size: 10.5px; }
.am-tr { display: flex; align-items: center; gap: 10px; color: var(--am-g6); }
.am-tr svg { width: 16px; height: 16px; }
.am-pill { border: 1px solid var(--am-g3); border-radius: 999px; padding: 3px 10px; font-size: 10.5px; color: var(--am-g7); background: #fff; white-space: nowrap; }
.am-av { width: 26px; height: 26px; border-radius: 50%; background: var(--am-pl); color: var(--am-p); font-weight: 700; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.am-body { padding: 16px 18px; }
.am-scroll { overflow-x: auto; }
.am-card { background: #fff; border: 1px solid #eaecf0; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.am-h { font-weight: 600; font-size: 13px; margin: 0 0 2px; color: var(--am-g9); }
.am-mut { color: var(--am-g6); font-size: 11px; }
.am-grid { display: grid; gap: 10px; }
.am-g2 { grid-template-columns: repeat(2, 1fr); }
.am-g3 { grid-template-columns: repeat(3, 1fr); }
.am-g4 { grid-template-columns: repeat(4, 1fr); }
.am-g6 { grid-template-columns: repeat(6, 1fr); }
.am-g73 { grid-template-columns: 1.6fr 1fr; }
.am-kpi { border-top: 3px solid var(--k, var(--am-p)); }
.am-kpi .am-mut { display: block; }
.am-kpi b { display: block; font-size: 19px; font-weight: 700; margin: 2px 0; color: var(--am-g9); }
.am-meter { height: 5px; border-radius: 999px; background: var(--am-g2); overflow: hidden; display: flex; margin-top: 4px; }
.am-meter i { display: block; height: 100%; }
.am-b { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.am-b.ok { background: var(--am-okl); color: var(--am-ok); }
.am-b.wa { background: var(--am-wal); color: var(--am-wa); }
.am-b.er { background: var(--am-erl); color: var(--am-er); }
.am-b.in { background: var(--am-inl); color: var(--am-in); }
.am-b.pr { background: var(--am-pl); color: var(--am-p); }
.am-b.gr { background: var(--am-g2); color: var(--am-g7); }
.am-btn { display: inline-block; border-radius: 6px; padding: 4px 10px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.am-btn.p { background: var(--am-p); color: #fff; }
.am-btn.s { background: #12b76a; color: #fff; }
.am-btn.ls { background: var(--am-okl); color: var(--am-ok); }
.am-btn.ld { background: var(--am-erl); color: var(--am-er); }
.am-btn.lw { background: var(--am-wal); color: var(--am-wa); }
.am-btn.l { background: var(--am-g2); color: var(--am-g7); }
.am-btn.lp { background: var(--am-pl); color: var(--am-p); }
.am-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.am-gap { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.am-mt { margin-top: 10px; }
.am-tbl { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 560px; }
.am-tbl th { text-align: left; font-weight: 600; color: var(--am-g6); font-size: 10px; text-transform: uppercase; letter-spacing: .03em; padding: 7px 8px; border-bottom: 1px solid #eaecf0; background: var(--am-g1); white-space: nowrap; }
.am-tbl td { padding: 7px 8px; border-bottom: 1px solid #f2f4f7; white-space: nowrap; vertical-align: middle; }
.am-tbl tr.bad td { background: #fffbfa; }
.am-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.am-tbl tfoot td { font-weight: 700; background: var(--am-g1); }
.am-tbl .warnv { color: #dc6803; font-weight: 700; }
.am-emp { display: flex; align-items: center; gap: 7px; }
.am-emp small { display: block; color: var(--am-g5); font-size: 10px; }
.am-chk { width: 12px; height: 12px; border: 1px solid #d0d5dd; border-radius: 3px; display: inline-block; vertical-align: middle; background: #fff; }
.am-chk.on { background: var(--am-p); border-color: var(--am-p); }
.am-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--am-g3); margin-bottom: 10px; overflow-x: auto; }
.am-tabs span { padding: 6px 0; color: var(--am-g6); font-weight: 500; white-space: nowrap; }
.am-tabs span.on { color: var(--am-p); box-shadow: inset 0 -2px 0 var(--am-p); }
.am-ctx { display: flex; gap: 6px; background: #fff; border: 1px solid #eaecf0; border-radius: 12px; padding: 6px; margin-bottom: 12px; overflow-x: auto; }
.am-ctx span { flex: 1; min-width: 92px; padding: 6px 8px; border-radius: 8px; font-weight: 600; font-size: 11px; white-space: nowrap; }
.am-ctx span small { display: block; font-weight: 400; color: var(--am-g6); font-size: 10px; }
.am-ctx span.on { background: var(--am-pl); color: var(--am-p); }
.am-bars { display: flex; align-items: flex-end; gap: 10px; height: 118px; padding-top: 6px; }
.am-bars div { flex: 1; text-align: center; font-size: 9.5px; color: var(--am-g6); }
.am-bars i { display: block; background: var(--am-p); border-radius: 4px 4px 0 0; margin-bottom: 4px; }
.am-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 10.5px; color: var(--am-g7); margin-top: 8px; }
.am-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.am-donut { display: flex; align-items: center; gap: 14px; }
.am-split { display: grid; grid-template-columns: 210px 1fr; gap: 12px; }
.am-vac { border: 1px solid #eaecf0; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: #fff; }
.am-vac.on { border-color: var(--am-p); box-shadow: inset 3px 0 0 var(--am-p); }
.am-vac b { display: block; font-size: 11.5px; }
.am-score { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; border-radius: 999px; padding: 2px 8px; font-weight: 700; font-size: 11px; }
.am-rank { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 700; font-size: 10px; background: var(--am-g2); color: var(--am-g7); }
.am-rank.top { background: var(--am-pl); color: var(--am-p); }
.am-board { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; min-width: 780px; }
.am-col { background: var(--am-g2); border-radius: 10px; padding: 8px; }
.am-col-h { display: flex; justify-content: space-between; font-weight: 600; font-size: 11px; padding: 2px 2px 8px; border-bottom: 3px solid var(--c); margin-bottom: 8px; }
.am-kc { background: #fff; border: 1px solid #eaecf0; border-radius: 8px; padding: 8px; margin-bottom: 7px; font-size: 10.5px; color: var(--am-g6); }
.am-kc b { display: block; font-size: 11.5px; margin-bottom: 3px; color: var(--am-g9); }
.am-dist { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin: 8px 0 2px; }
.am-dist i { display: block; height: 100%; }
.am-hero { display: flex; align-items: center; gap: 12px; }
.am-hero .am-av { width: 42px; height: 42px; font-size: 14px; }
.am-tl { list-style: none; margin: 0; padding: 0; }
.am-tl li { position: relative; padding: 0 0 12px 20px; font-size: 11px; }
.am-tl li::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 0; width: 2px; background: var(--am-g3); }
.am-tl li:last-child::before { display: none; }
.am-tl li i { position: absolute; left: 0; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--d); }
.am-tl li small { display: block; color: var(--am-g6); font-size: 10px; }
.am-box { border: 1px solid #eaecf0; border-radius: 8px; padding: 7px 9px; background: #fff; }
.am-box small { display: block; color: var(--am-g6); font-size: 10px; }
.am-box b { font-size: 13px; }
.am-li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f2f4f7; }
.am-li:last-child { border-bottom: 0; }

/* Mobile app phones */
.phones { display: flex; gap: 14px; overflow-x: auto; padding: 8px 4px 18px; scroll-snap-type: x mandatory; justify-content: safe center; }
.ph { flex: 0 0 212px; scroll-snap-align: center; }
.ph-frame { background: #f5f6f8; border: 8px solid #1d2939; border-radius: 30px; height: 500px; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); font-family: Inter, system-ui, sans-serif; text-align: left; }
.ph-status { display: flex; justify-content: space-between; padding: 6px 16px 2px; font-size: 10px; font-weight: 600; color: #1f2330; }
.ph-head { display: flex; align-items: center; gap: 6px; padding: 6px 14px 8px; font-weight: 600; font-size: 14px; color: #1f2330; background: #f5f6f8; }
.ph-head svg { width: 14px; height: 14px; color: #667085; }
.ph-body { flex: 1; overflow: hidden; padding: 6px 11px 10px; font-size: 11px; color: #1f2330; line-height: 1.4; }
.ph-card { background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.ph-tabs { display: flex; justify-content: space-around; background: #fff; border-top: 1px solid #e4e7ec; padding: 6px 2px 8px; }
.ph-tabs span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 8.5px; color: #667085; }
.ph-tabs span.on { color: #9b0b49; font-weight: 600; }
.ph-tabs svg { width: 15px; height: 15px; }
.ph-hello { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ph-hello .am-av { width: 34px; height: 34px; font-size: 12px; }
.ph-hello b { display: block; font-size: 15px; }
.ph-bell { margin-left: auto; position: relative; color: #1f2330; }
.ph-bell svg { width: 17px; height: 17px; }
.ph-bell em { position: absolute; top: -4px; right: -5px; background: #9b0b49; color: #fff; font-style: normal; font-size: 8px; border-radius: 999px; padding: 0 4px; }
.ph-big { font-size: 28px; font-weight: 700; color: #9b0b49; line-height: 1.1; }
.ph-mut { color: #667085; font-size: 10px; }
.ph-sec { font-weight: 600; font-size: 12px; margin: 10px 0 6px; }
.ph-line { display: flex; justify-content: space-between; gap: 6px; padding: 5px 0; border-bottom: 1px solid #f2f4f7; font-size: 10.5px; }
.ph-line:last-child { border-bottom: 0; }
.ph-line .neg { color: #c0262d; font-weight: 600; }
.ph-line.tot { font-weight: 700; }
.ph-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-2 .ph-card { margin-bottom: 0; }
.ph-2 b { display: block; font-size: 14px; }
.ph-qa { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; text-align: center; font-size: 8px; color: #1f2330; line-height: 1.2; }
.ph-qa i { display: flex; width: 30px; height: 30px; margin: 0 auto 3px; border-radius: 10px; background: #f7e6ee; color: #9b0b49; align-items: center; justify-content: center; }
.ph-qa svg { width: 14px; height: 14px; }
.ph-btn { display: block; text-align: center; border-radius: 10px; padding: 8px; font-weight: 600; font-size: 11px; background: #9b0b49; color: #fff; }
.ph-btn.d { background: #fdecec; color: #c0262d; }
.ph-btn.s { background: #eef0f3; color: #1f2330; }
.ph-field { border: 1px solid #e4e7ec; border-radius: 8px; padding: 6px 8px; background: #fff; }
.ph-field small { display: block; color: #667085; font-size: 9px; }
.ph-hero { background: #9b0b49; color: #fff; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.ph-hero small { opacity: .85; font-size: 10px; display: block; }
.ph-hero b { display: block; font-size: 21px; margin: 2px 0 0; }
.ph-tag { display: inline-block; font-size: 8.5px; border-radius: 999px; padding: 0 6px; background: #e8f0fd; color: #175cd3; margin-left: 4px; }
.ph .am-b { font-size: 9px; padding: 1px 7px; }
.ph .am-tl li { font-size: 10.5px; }
.ph-caption { text-align: center; margin-top: 10px; font-weight: 600; font-size: var(--font-sm); color: var(--text-primary); }
.ph-caption span { display: block; font-weight: 400; color: var(--text-secondary); font-size: var(--font-xs); }

@media (max-width: 760px) {
  .am-app { grid-template-columns: 1fr; }
  .am-side { display: none; }
  .am-g4, .am-g6 { grid-template-columns: repeat(2, 1fr); }
  .am-g3, .am-g73 { grid-template-columns: 1fr; }
  .am-split { grid-template-columns: 1fr; }
  .am-vlist { display: none; }
  .am-tr .am-pill { display: none; }
}

/* ================================
   Visual refresh — legibility of links, buttons and access points
   Overrides placed last on purpose so they win over earlier section rules.
   Solid colors only (no gradients).
   ================================ */

/* Type rendering and headings: tighter tracking reads more modern */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* The hero headline has its own deliberate line breaks */
.hero-content h1 {
    text-wrap: wrap;
}

::selection {
    background: var(--primary-subtle);
    color: var(--primary-dark);
}

/* Buttons: one consistent weight, soft shadows, visible pressed state */
.btn {
    font-weight: 600;
    gap: 0.5rem;
    line-height: 1.2;
}

.btn-primary {
    box-shadow: 0 1px 2px rgba(23, 37, 54, 0.12), 0 4px 12px rgba(44, 90, 135, 0.22);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(23, 37, 54, 0.12), 0 8px 20px rgba(44, 90, 135, 0.28);
}

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

.btn-outline {
    background: var(--bg-white);
    border-color: #C9D3DE;
    color: var(--text-primary);
}

.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-subtle);
}

.btn-white:hover {
    background: var(--primary-subtle);
    transform: translateY(-1px);
}

.btn-outline-white {
    border-color: rgba(255, 255, 255, 0.6);
}

/* Inline text links: always underlined so they are recognizable as links */
.about-text a,
.legal-content a,
.faq-answer a,
.pt-note a,
.cookies-text a,
.info-content a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(44, 90, 135, 0.35);
}

.about-text a:hover,
.legal-content a:hover,
.faq-answer a:hover,
.pt-note a:hover,
.cookies-text a:hover,
.info-content a:hover {
    color: var(--primary-dark);
    text-decoration-color: currentColor;
}

/* "Ver más / Saber más" action links: bolder, with a moving arrow */
.solution-link,
.tour-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease, gap 0.2s ease;
}

.solution-link:hover,
.tour-link:hover {
    color: var(--primary-dark);
    text-decoration-color: currentColor;
}

/* Newsletter band: light surface so it does not merge with the blue CTA below */
.info-section {
    background: var(--bg-white);
    border-top: 1px solid var(--border-color);
}

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

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

.info-section .info-input-group {
    border: 1px solid #C9D3DE;
    box-shadow: var(--shadow-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.info-section .info-input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(44, 90, 135, 0.15);
}

/* Was unreadable: .info-content p out-ranked .info-privacy */
.info-section .info-content .info-privacy {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

/* CTA band */
.cta-content h2 {
    font-size: var(--font-3xl);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.cta-content p {
    opacity: 1;
    color: rgba(255, 255, 255, 0.88);
}

/* Footer: larger brand, clearer headings, links that react */
.footer {
    padding-top: 4.5rem;
}

.footer .logo-img {
    height: 56px;
    opacity: 1;
}

.footer-brand p {
    color: #A9B4C0;
    line-height: 1.6;
}

.footer-links h4 {
    color: #FFFFFF;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
}

.footer-links a {
    color: #B8C2CD;
    text-underline-offset: 4px;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: #FFFFFF;
    text-decoration: underline;
}

.contact-item,
.contact-item a,
.footer-bottom p {
    color: #A9B4C0;
}

.contact-item svg {
    color: #8FB3D6;
}

.footer-bottom a {
    color: #8FB3D6;
    font-weight: 600;
}

.social-link {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #C9D3DE;
}

.social-link:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Focus ring readable on both light and dark surfaces */
.footer :focus-visible,
.cta :focus-visible {
    outline-color: #FFFFFF;
}

/* Hero product preview (real content instead of empty placeholders) */
.dashboard-preview .preview-main {
    grid-template-columns: repeat(2, 1fr);
    align-content: start;
}

.dashboard-preview .preview-card {
    min-height: 0;
    padding: 0.875rem 1rem;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.preview-kpi-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
}

.preview-kpi-value {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.preview-kpi-trend {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
}

.dashboard-preview .preview-chart {
    opacity: 1;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.preview-chart-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    min-height: 90px;
}

.preview-chart-bars span {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: var(--primary-light);
}

.preview-chart-bars span:last-child {
    background: var(--primary-color);
}

.preview-sidebar .sidebar-item {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

.preview-sidebar .sidebar-item.active {
    color: #FFFFFF;
}

.preview-sidebar .sidebar-item svg {
    width: 16px;
    height: 16px;
}