html, body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

.site-title {
    font-size: clamp(1.25rem, 5vw, 2.5rem); /* Mobile: ~20px, Tablet: ~32px, Desktop: ~40px */
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 4rem); /* Mobile: ~40px, Tablet: ~50px, Desktop: ~64px */
}

.about-title, .how-it-works-title, .industries-title, .pricing-title, .faq-title, .calculator-title, .contact-title {
    font-size: clamp(2rem, 6vw, 3rem); /* Mobile: ~32px, Tablet: ~40px, Desktop: ~48px */
}

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

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

@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

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

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

.animate-slide-up {
    animation: slideUp 0.7s ease-out forwards;
    opacity: 0;
}

.animate-slide-up-delay-1 {
    animation: slideUp 0.7s ease-out 0.2s forwards;
    opacity: 0;
}

.animate-slide-up-delay-2 {
    animation: slideUp 0.7s ease-out 0.4s forwards;
    opacity: 0;
}

.animate-fade-in-delay-3 {
    animation: fadeIn 0.7s ease-out 0.6s forwards;
    opacity: 0;
}

.animate-fade-in-scale-up {
    animation: fadeIn 0.8s ease-out 0.8s forwards, scaleUp 0.8s ease-out 0.8s forwards;
    opacity: 0;
}

.animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
    opacity: 0;
}

.animate-slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
    opacity: 0;
}

.animate-fade-in-delay-4 {
    animation: fadeIn 0.7s ease-out 0.2s forwards;
    opacity: 0;
}
.animate-fade-in-delay-5 {
    animation: fadeIn 0.7s ease-out 0.4s forwards;
    opacity: 0;
}
.animate-fade-in-delay-6 {
    animation: fadeIn 0.7s ease-out 0.6s forwards;
    opacity: 0;
}
.animate-fade-in-delay-7 {
    animation: fadeIn 0.7s ease-out 0.8s forwards;
    opacity: 0;
}

.animate-slide-up-step {
    animation: slideUp 0.7s ease-out forwards;
    opacity: 0;
}

.animate-fade-in-card {
    animation: fadeIn 0.7s ease-out forwards, scaleUp 0.7s ease-out forwards;
    opacity: 0;
}

.animate-fade-in-faq {
    animation: fadeIn 0.7s ease-out forwards;
    opacity: 0;
}

.animate-fade-in-calculator {
    animation: fadeIn 0.8s ease-out forwards, scaleUp 0.8s ease-out forwards;
    opacity: 0;
}

.animate-fade-in-contact {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
}

/* SVG line animation for How It Works */
#process-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 2s linear forwards;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

/* Pricing card transition for toggle */
.pricing-card.active-plan {
    transform: scale(1);
    opacity: 1;
}
.pricing-card:not(.active-plan) {
    transform: scale(0.95);
    opacity: 0;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}

/* Ensure images in cards have consistent height */
.industries-card img {
    height: 150px; /* Example fixed height */
    object-fit: cover;
}

/* Scrollbar for modal if content overflows */
#cookie-consent-modal > div {
    max-height: 90vh;
    overflow-y: auto;
}

/* Hide scrollbar on mobile menu for clean look */
#mobile-menu {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

#mobile-menu::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Navbar height for desktop to prevent content overlap */
@media (min-width: 768px) {
    main {
        padding-top: 6rem; /* Adjust based on navbar height */
    }
}

/* Range slider styling */
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #60A5FA;
    border-radius: 50%;
    cursor: grab;
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5);
    transition: background .15s ease-in-out;
}

.range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #60A5FA;
    border-radius: 50%;
    cursor: grab;
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5);
    transition: background .15s ease-in-out;
}

.range-slider::-webkit-slider-thumb:hover, .range-slider::-moz-range-thumb:hover {
    background: #3B82F6;
}

.range-slider::-webkit-slider-runnable-track {
    background: #3B82F6;
    border-radius: 5px;
}

.range-slider::-moz-range-track {
    background: #3B82F6;
    border-radius: 5px;
}

.plan-toggle-button.active {
    background-color: #3B82F6;
    color: white;
}
.plan-toggle-button:not(.active) {
    background-color: transparent;
    color: #9CA3AF;
}

/* For form inputs focus */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #3B82F6;
}

/* Ensure button text wraps */
button {
    white-space: normal;
    word-break: break-word;
}
/*
 * Stock styles for common typography elements within .trustPillarUnit
 * These styles aim for readability and a clean, modern look with moderate font sizes.
 */

/* Container padding for the trust pillar unit */
.trustPillarUnit {
    padding: 32px 24px; /* Top/bottom padding: 32px, Left/right padding: 24px */
}

/* Heading 1 styles */
.trustPillarUnit h1 {
    font-size: 28px; /* Moderate size for the main heading */
    font-weight: 700; /* Bold font weight */
    line-height: 1.2; /* Tighter line height for headings */
    margin-top: 0; /* Remove default top margin for potential first element */
    margin-bottom: 18px; /* Space below the heading */
}

/* Heading 2 styles */
.trustPillarUnit h2 {
    font-size: 24px; /* Moderate size for sub-headings */
    font-weight: 700;
    line-height: 1.25;
    margin-top: 28px; /* Space above the heading */
    margin-bottom: 16px;
}

/* Heading 3 styles */
.trustPillarUnit h3 {
    font-size: 20px; /* Moderate size for tertiary headings */
    font-weight: 700;
    line-height: 1.3;
    margin-top: 24px;
    margin-bottom: 12px;
}

/* Heading 4 styles */
.trustPillarUnit h4 {
    font-size: 18px; /* Moderate size for quaternary headings */
    font-weight: 600; /* Slightly less bold */
    line-height: 1.4;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Heading 5 styles */
.trustPillarUnit h5 {
    font-size: 16px; /* Moderate size for quinary headings, close to body text */
    font-weight: 600;
    line-height: 1.4;
    margin-top: 18px;
    margin-bottom: 8px;
}

/* Paragraph styles */
.trustPillarUnit p {
    font-size: 16px; /* Standard body text size */
    line-height: 1.6; /* Good line height for readability */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 16px; /* Space between paragraphs */
}

/* Unordered list styles */
.trustPillarUnit ul {
    list-style-type: disc; /* Default disc bullets */
    padding-left: 24px; /* Indent for bullet points */
    margin-top: 0;
    margin-bottom: 16px; /* Space below the list */
}

/* List item styles */
.trustPillarUnit li {
    font-size: 16px; /* Match body text size for list items */
    line-height: 1.6; /* Match body text line height */
    margin-bottom: 8px; /* Space between list items */
}

/* Optional: Remove bottom margin for the last element to prevent extra space before container's bottom padding */
.trustPillarUnit p:last-child,
.trustPillarUnit ul:last-child,
.trustPillarUnit li:last-child {
    margin-bottom: 0;
}
main {
    overflow: hidden;
}