/* Global Styles */
:root {
    --primary-color: #0d9488;
    /* Teal 600 - Trustworthy & Modern */
    --primary-dark: #0f766e;
    --text-color: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f9fafb;
    --white: #ffffff;
    --max-width: 1200px;
    --transition: all 0.3s ease;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --radius: 8px;
}

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

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

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

.section-padding {
    padding: 80px 0;
}

.bg-light {
    background-color: var(--bg-light);
}

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

/* Typography */
h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

p {
    margin-bottom: 1rem;
    color: var(--text-light);
}

.highlight {
    color: var(--primary-color);
    white-space: nowrap;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 1rem;
}

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

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

.btn-lg {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.link-text {
    color: var(--text-color);
    font-weight: 500;
    margin-left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

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

/* Navigation */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Safari support */
    padding: 20px 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* Subtle separation */
    height: auto;
    /* Allow auto height */
    display: block;
    /* Reset display to default block for structure, flex is inside container */
}

.navbar.scrolled {
    padding: 12px 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

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

.logo {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-color);
    text-decoration: none;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.2s ease;
    position: relative;
    padding-bottom: 5px;
}

.nav-links a:hover {
    color: var(--primary-color);
}

/* Underline Animation */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.2s ease-in-out;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-cta {
    background-color: var(--primary-color);
    color: white !important;
    /* Force white text */
    padding: 10px 20px !important;
    border-radius: 6px;
    font-weight: 600;
    border: none;
}

.nav-cta:hover {
    background-color: var(--primary-hover);
    color: white !important;
}

.nav-cta::after {
    display: none;
    /* No underline for button */
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
}

/* Hero Section */
.hero {
    padding-top: 150px;
    padding-bottom: 80px;
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
}

.hero-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

.hero-content {
    flex: 1;
}

.hero-subtitle {
    font-size: 1.15rem;
    margin-bottom: 40px;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* CSS Phone Mockup */
.mockup-container {
    position: relative;
    width: 280px;
    height: 550px;
}

.phone-mockup {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    border-radius: 40px;
    padding: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 4px solid #333;
    position: relative;
}

.screen {
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-header {
    background-color: var(--primary-color);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.app-content {
    padding: 20px;
    flex: 1;
    background-color: #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.loyalty-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e7eb;
}

.loyalty-card h3 {
    margin-bottom: 5px;
    color: var(--text-color);
}

.loyalty-card .points {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.qr-placeholder {
    width: 140px;
    height: 140px;
    background: white;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.qr-placeholder svg {
    width: 100%;
    height: 100%;
}

.qr-hint {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0;
}

.pulse-qr {
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.4);
        border-color: var(--primary-color);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(13, 148, 136, 0);
        border-color: var(--primary-color);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(13, 148, 136, 0);
        border-color: #e5e7eb;
    }
}

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


.reward-item {
    background: white;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: var(--shadow-sm);
}

.reward-item .icon {
    width: 40px;
    height: 40px;
    background: #ccfbf1;
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Quick Benefits */
.quick-benefits {
    padding: 60px 0;
    border-bottom: 1px solid #f3f4f6;
    background-color: white;
    /* Ensure bg is white */
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 cols desktop */
    gap: 30px;
}

.benefit-item {
    text-align: center;
    padding: 20px;
    border-radius: var(--radius);
    transition: var(--transition);
}

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

.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 20px;
}

/* Icon Background Colors */
.icon-green {
    background-color: #ecfdf5;
    color: #059669;
}

.icon-blue {
    background-color: #eff6ff;
    color: #2563eb;
}

.icon-purple {
    background-color: #f5f3ff;
    color: #7c3aed;
}

.icon-orange {
    background-color: #fff7ed;
    color: #ea580c;
}


.benefit-number {
    font-size: 2rem;
    /* approx 32px */
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text-color);
    line-height: 1.1;
}

.benefit-item p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-light);
}

/* How It Works - Visual */
.visual-steps-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: nowrap;
    /* Force row on desktop */
}

.visual-step {
    flex: 1;
    text-align: center;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-visual {
    width: 120px;
    height: 120px;
    background-color: #f0fdfa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 20px;
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.main-icon {
    font-size: 3.5rem;
}

.step-number-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 35px;
    background-color: var(--text-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    border: 3px solid white;
}

.overlay-icon {
    position: absolute;
    background: white;
    padding: 5px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-color);
}

.qr-small {
    bottom: 20px;
    right: 25px;
    color: #1f2937;
}

.points-badge {
    top: 20px;
    right: 15px;
    background: #ffedd5;
    color: #c2410c;
    padding: 2px 8px;
    font-size: 0.9rem;
    border-radius: 20px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}


.step-arrow {
    font-size: 2rem;
    color: #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-arrow {
    animation: pulse-horizontal 1.5s infinite;
}

@keyframes pulse-horizontal {
    0% {
        transform: translateX(0);
        opacity: 0.5;
    }

    50% {
        transform: translateX(5px);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 0.5;
    }
}

.visual-step h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.visual-step p {
    font-size: 0.95rem;
    color: var(--text-light);
}

.time-tag {
    display: inline-block;
    background-color: #f3f4f6;
    color: var(--text-color);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 10px;
}

.time-tag i {
    color: var(--primary-color);
    margin-right: 5px;
}


/* Target Audience */
.sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.sector-card {
    background: white;
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid #f3f4f6;
}

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

.sector-icon {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.sector-benefit {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f3f4f6;
    font-size: 0.9rem;
    color: var(--primary-dark);
    font-weight: 500;
}

/* ROI Section */
.roi-section {
    background-color: white;
}





/* ROI Section Comparison */
.roi-comparison-container {
    display: flex;
    background: white;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid #e5e7eb;
}

.roi-column {
    flex: 1;
    padding: 50px 40px;
}

.roi-negative {
    background-color: #f9fafb;
    border-right: 1px solid #e5e7eb;
}

.roi-negative h3 {
    color: #4b5563;
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-align: center;
}

.roi-positive {
    background-color: #f0fdfa;
    /* Very light teal */
    position: relative;
}

.roi-positive h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-align: center;
}

.roi-list-clean li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.roi-list-clean li:last-child {
    margin-bottom: 0;
}

.roi-list-clean i {
    font-size: 1.5rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.text-red {
    color: #ef4444;
    /* Red 500 */
}

.text-green {
    color: #10b981;
    /* Emerald 500 */
}

.roi-list-clean strong {
    display: block;
    font-size: 1.1rem;
    color: #1f2937;
    margin-bottom: 2px;
}

.roi-list-clean p {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 0;
}

.big-stat {
    font-size: 1.4rem !important;
    /* Larger for stats */
    color: var(--primary-color) !important;
}

.mt-40 {
    margin-top: 40px;
}


/* Features Cards */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: 1px solid #f3f4f6;
    text-align: center;
}

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

.feature-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.card-header-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 20px;
}

.feature-list {
    text-align: left;
    margin-top: 20px;
}

.feature-list li {
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-list li i {
    font-size: 0.85rem;
    color: var(--primary-color);
    /* Default, overridden by specific card colors if needed, but keeping simple checks compatible */
}

/* Card Specific Colors */
.border-blue {
    border-top: 4px solid #3b82f6;
}

/* Blue 500 */
.border-green {
    border-top: 4px solid #10b981;
}

/* Emerald 500 */
.border-purple {
    border-top: 4px solid #8b5cf6;
}

/* Violet 500 */

.bg-blue-subtle {
    background-color: #eff6ff;
}

.text-blue {
    color: #3b82f6;
}

.bg-green-subtle {
    background-color: #ecfdf5;
}

.text-green {
    color: #10b981;
}

.bg-purple-subtle {
    background-color: #f5f3ff;
}

.text-purple {
    color: #8b5cf6;
}

/* Override check icon colors inside cards */
.border-blue .feature-list li i {
    color: #3b82f6;
}

.border-green .feature-list li i {
    color: #10b981;
}

.border-purple .feature-list li i {
    color: #8b5cf6;
}


/* Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.testimonial-card {
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid #f3f4f6;
}

.quote {
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: 25px;
    color: #4b5563;
}

.author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar {
    width: 50px;
    height: 50px;
    background: #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #9ca3af;
}

.author strong {
    display: block;
    color: var(--text-color);
}

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

/* FAQ */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

details.faq-item {
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.3s ease;
}

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

details.faq-item[open] {
    background-color: #f9fafb;
}

summary.faq-question {
    padding: 20px 24px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    /* Hide default marker */
    color: var(--text-color);
    font-size: 1.05rem;
    transition: color 0.3s ease;
}

summary.faq-question::-webkit-details-marker {
    display: none;
    /* Hide marker in WebKit */
}

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

summary.faq-question i {
    color: #9ca3af;
    transition: transform 0.3s ease;
}

/* Pricing Section */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pricing-card .btn-full {
    margin-top: auto;
}

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

.pricing-card.popular {
    border: 2px solid var(--primary-color);
    box-shadow: var(--shadow-md);
}

.popular-tag {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.card-header {
    margin-bottom: 30px;
}

.card-header h3 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 20px;
}

.price .amount {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-color);
}

.price .period {
    font-size: 1.1rem;
    color: var(--text-light);
}

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

.savings-text {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 10px;
}

.pricing-features {
    list-style: none;
    margin-bottom: 30px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

.pricing-features li {
    margin-bottom: 12px;
    color: var(--text-color);
}

.pricing-features li i {
    color: var(--primary-color);
    margin-right: 10px;
}

.addon-info {
    background-color: #f9fafb;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 30px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.btn-full {
    width: 100%;
    display: block;
}

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

.btn-outline:hover {
    background: var(--bg-light);
    transform: translateY(-2px);
}

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


details.faq-item[open] summary.faq-question i {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.faq-answer {
    padding: 0 24px 24px 24px;
    color: var(--text-light);
    line-height: 1.6;
    /* Optional: Small fade in/slide down for content using animation */
    animation: fadeInSlide 0.3s ease-out;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

/* Final CTA */
.final-cta {
    background: #111827;
    color: white;
}

.final-cta h2 {
    color: white;
    margin-bottom: 15px;
}

.final-cta .subtitle {
    color: #9ca3af;
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.small-text {
    margin-top: 15px;
    font-size: 0.85rem;
    color: #6b7280;
}

/* Footer */
footer {
    padding: 80px 0 30px;
    border-top: 1px solid #f3f4f6;
    background-color: white;
    color: var(--text-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.footer-col h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-color);
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-color);
    text-decoration: none;
    display: block;
    margin-bottom: 15px;
}

.tagline {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    background-color: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background-color: var(--primary-color);
    color: white;
    transform: rotate(5deg);
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--text-light);
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.mt-20 {
    margin-top: 20px;
}

.small-text-footer {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

.newsletter-form {
    display: flex;
    gap: 10px;
}

.newsletter-form input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
    outline: none;
}

.newsletter-form input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.1);
}

.newsletter-form button {
    background-color: var(--text-color);
    color: white;
    border: none;
    width: 40px;
    /* Square button */
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
    background-color: var(--primary-color);
}

.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.footer-meta a {
    color: var(--text-light);
}

.footer-meta a:hover {
    color: var(--primary-color);
}

/* Responsive Footer */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 on Tablet */
        gap: 50px 30px;
    }
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr;
        /* Stack on Mobile */
        text-align: center;
        gap: 40px;
    }

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

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


/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.4s;
}

.delay-3 {
    transition-delay: 0.6s;
}


.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.7);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(13, 148, 136, 0);
    }
}



/* Registration Page */
.registration-hero {
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
    padding-top: 150px;
    padding-bottom: 80px;
    min-height: 100vh;
}

.mb-40 {
    margin-bottom: 40px;
}

.registration-form {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    border: 1px solid #e5e7eb;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-color);
}

.required {
    color: #ef4444;
}

.input-icon {
    position: relative;
    width: 100%;
}

.input-icon i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1rem;
    pointer-events: none;
}

.input-icon input,
.input-icon select {
    width: 100%;
    padding: 14px 16px 14px 45px;
    /* Left padding for icon */
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease;
    background-color: #f9fafb;
    color: var(--text-color);
    font-family: inherit;
    appearance: none;
    /* Remove default arrow to use custom matching style if desired, or keep standard. Let's add appearance:none and maybe a custom background icon if needed, but for now just basic style. Actually, standard arrow is fine but might clash with padding. Let's try just matching styles first. */
    cursor: pointer;
}

.input-icon input:focus,
.input-icon select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
    background-color: white;
}

.input-icon select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 40px;
}

.input-icon input::placeholder {
    color: #9ca3af;
}

/* Data Protection Modal */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.checkbox-group input {
    margin-top: 4px;
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
}

.checkbox-group label {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-light);
}

.checkbox-group a {
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

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

.modal-content {
    background: white;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-overlay.open .modal-content {
    transform: translateY(0);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-color);
}

.close-modal {
    font-size: 1.5rem;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s;
}

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

.modal-body {
    padding: 24px;
    overflow-y: auto;
}

.legal-section {
    margin-bottom: 20px;
}

.legal-section h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 8px;
}

.legal-section p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 0;
}

.bg-gray {
    background-color: #f9fafb;
    padding: 16px;
    border-radius: 8px;
}

.highlight-green {
    color: #059669;
    /* Green 600 */
    font-weight: 600;
}

.highlight-green i {
    margin-right: 8px;
}

.legal-notice-box {
    background-color: #eff6ff;
    /* Blue 50 */
    border: 1px solid #dbeafe;
    /* Blue 100 */
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
}

.legal-notice-box p {
    font-size: 0.85rem;
    color: #1e40af;
    /* Blue 800 */
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.btn-modal {
    width: 100%;
    padding: 12px;
    background-color: #4f46e5;
    /* Indigo 600 from screenshot */
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-modal:hover {
    background-color: #4338ca;
}

/* Responsive */
@media (max-width: 1024px) and (min-width: 640px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Tablet 2 cols */
    }
}

@media (max-width: 900px) {
    .nav-links {
        display: block;
        /* Prepare for transform */
        position: absolute;
        top: 100%;
        /* Below navbar */
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 0;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        text-align: center;

        /* Animation State: Closed */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }

    .nav-links.menu-open {
        /* Animation State: Open */
        max-height: 400px;
        /* Enough for content */
        opacity: 1;
        padding: 20px;
    }

    .nav-links li {
        margin-bottom: 15px;
    }

    .nav-links li:last-child {
        margin-bottom: 0;
    }

    /* Show CTA inside menu on mobile */
    .nav-cta.mobile-only {
        display: inline-block;
        margin-top: 10px;
    }

    .nav-cta {
        display: none;
        /* Hide header button on smaller mobile if needed, or keep. 
                        User: "CTA button en navbar: "Prueba gratis" siempre visible". 
                        So let's keep header button visible if space allows, usually header button is fine on tablet 
                        but maybe hidden on very small screens. 
                        Let's keep the existing logic: hide generic nav links, ensure CTA logic is sound. 
                        I'll assume desktop button stays, but duplicates in menu if screen is small? 
                        The prompt says "CTA button en navbar... siempre visible". 
                        I will NOT hide `.nav-cta` by default in mobile if possible, 
                        BUT space is tight. Usually "siempre visible" means outside the hamburger.
                        I will try to keep it visible next to hamburger. */
        display: inline-block;
        font-size: 0.9rem;
        padding: 8px 15px !important;
    }

    /* Adjust navbar layout for mobile to fit Logo - CTA - Hamburger */
    .nav-container {
        padding-right: 15px;
        /* specific tweak */
        padding-left: 15px;
    }


    .mobile-menu-btn {
        display: block;
    }

    .hero-container {
        flex-direction: column;
        text-align: center;
        padding-top: 20px;
        gap: 40px;
    }

    .visual-steps-container {
        flex-direction: column;
        gap: 40px;
    }

    .step-arrow {
        transform: rotate(90deg);
    }

    .pulse-arrow {
        animation: pulse-vertical 1.5s infinite;
    }

    @keyframes pulse-vertical {
        0% {
            transform: translateY(0);
            opacity: 0.5;
        }

        50% {
            transform: translateY(5px);
            opacity: 1;
        }

        100% {
            transform: translateY(0);
            opacity: 0.5;
        }
    }


    .roi-comparison-container {
        flex-direction: column;
    }

    .roi-negative {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

    .roi-column {
        padding: 40px 20px;
    }

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

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

    .link-text {
        margin-left: 0;
        margin-top: 15px;
        width: 100%;
        justify-content: center;
    }

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

    h1 {
        font-size: 2rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        /* Mobile 1 col */
    }
}

/* Blog Placeholder Styles */
#blog .blog-placeholder {
    padding: 60px 20px;
    background-color: var(--light-color);
    border-radius: var(--border-radius);
    border: 2px dashed #cbd5e1;
    color: var(--text-color);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#blog h2 {
    margin-bottom: 10px;
}

/* Blog Card Hover Effects */
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card .read-more i {
    transition: transform 0.2s ease;
}

.blog-card:hover .read-more i {
    transform: translateX(4px);
}