/* 1. Imports (Must be at the very top of the file) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* 2. Custom Variable Configuration */
:root {
    --primary: #00A651;
    --primary-dark: #00853E;
    --dark: #0A192F;
    --text: #4A5568;
    --light: #F7FAFC;
    --white: #FFFFFF;
    --border: #E2E8F0;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Base Reset Optimization */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background-color: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Smoother text rendering */
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 4. Header & Navigation */
header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--dark);
    font-size: 1.2rem;
    text-decoration: none;
}

.logo-icon {
    color: var(--primary);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 24px;
}

nav a {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition);
}

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

.nav-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* 5. Global Buttons & Badges */
.btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.btn-light {
    background: #E8F5E9;
    color: var(--primary);
    border: 1px solid transparent;
}

.btn-light:hover {
    background: #C8E6C9;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    animation: pulseGlow 3s infinite;
}

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

.btn-outline {
    border: 1px solid var(--border);
    color: var(--dark);
    background: transparent;
}

.btn-outline:hover {
    background: var(--light);
    border-color: var(--dark);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #E8F5E9;
    color: var(--primary-dark);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

/* 6. Hero Section & Micro-Animations */
.hero {
    padding: 60px 0;
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.hero h1 {
    font-size: 3rem;
    color: var(--dark);
    line-height: 1.2;
    margin-bottom: 20px;
    animation: fadeInUp 0.8s ease-out;
}

.hero-p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: var(--text);
    animation: fadeInUp 1s ease-out;
}

.hero-features {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    animation: fadeInUp 1.2s ease-out;
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.hero-feature-item i {
    color: var(--primary);
}

.hero-actions {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
    animation: fadeInUp 1.4s ease-out;
}

/* 7. Dashboard Mockup Representation */
/* Dashboard Preview */
.hero-mockup{
    display:flex;
    justify-content:center;
    align-items:center;
    animation:floatDashboard 6s ease-in-out infinite;
}

.dashboard-preview{
    background:#fff;
    border-radius:22px;
    padding:14px;
    overflow:hidden;

    box-shadow:
        0 30px 70px rgba(0,0,0,.12),
        0 10px 25px rgba(0,166,81,.10);

    border:1px solid rgba(255,255,255,.7);

    max-width:700px;
    width:100%;
}

.dashboard-image{
    display:block;
    width:100%;
    height:auto;
    border-radius:16px;
    transition:.5s ease;
}

.dashboard-preview:hover .dashboard-image{
    transform:scale(1.02);
}

.hero-mockup{
    position:relative;
}

.hero-mockup::before{
    content:"";
    position:absolute;

    width:420px;
    height:420px;

    background:#00A65122;
    filter:blur(90px);

    border-radius:50%;

    z-index:-1;
}

.mockup-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    padding: 20px;
    border: 1px solid var(--border);
}

.mockup-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.mockup-title {
    font-weight: bold;
    color: var(--dark);
}

.mockup-window-controls {
    display: flex;
    gap: 6px;
}

.control-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.close { background: #FF5F56; }
.minimize { background: #FFBD2E; }
.expand { background: #27C93F; }

.mockup-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.m-stat-card {
    background: var(--light);
    padding: 15px;
    border-radius: 8px;
}

.border-green { border-left: 4px solid #00A651; }
.border-blue { border-left: 4px solid #3182CE; }
.border-purple { border-left: 4px solid #805AD5; }
.border-orange { border-left: 4px solid #DD6B20; }

.m-stat-card h5 {
    font-size: 0.75rem;
    color: var(--text);
    margin-bottom: 4px;
}

.m-stat-card h3 {
    color: var(--dark);
    font-size: 1.1rem;
}

.mockup-chart-placeholder {
    height: 140px;
    background: var(--light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A0AEC0;
    font-size: 0.9rem;
}

/* 8. Trust Validation Grid */
/* Trust Section */
.trust-section{
    padding:40px 0;
    background:#fff;
    overflow:hidden;
    border-top:1px solid #e5e7eb;
    border-bottom:1px solid #e5e7eb;
}

.trust-slider{
    overflow:hidden;
    position:relative;
    width:100%;
}

.trust-track{
    display:flex;
    align-items:center;
    gap:60px;
    width:max-content;

    animation: scrollLogos 30s linear infinite;
}

.trust-logo-item{
    display:flex;
    align-items:center;
    gap:10px;

    white-space:nowrap;

    color:#64748b;
    font-weight:600;
    font-size:16px;

    transition:.3s;
}

.trust-logo-item:hover{
    color:#00A651;
    transform:scale(1.05);
}

.trust-logo-item svg{
    width:22px;
    height:22px;
    color:#00A651;
}

.trust-track:hover{
    animation-play-state: paused;
}

.trust-slider::before,
.trust-slider::after{
    content:"";
    position:absolute;
    top:0;
    width:80px;
    height:100%;
    z-index:2;
}

.trust-slider::before{
    left:0;
    background:linear-gradient(to right,#fff,transparent);
}

.trust-slider::after{
    right:0;
    background:linear-gradient(to left,#fff,transparent);
}

/* Infinite Animation */
@keyframes scrollLogos{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* 9. Features Component Grid Matrix */
.features-section {
    padding: 80px 0;
    background: #FDFDFD;
    text-align: center;
}

.section-tag {
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    display: block;
}

.section-title {
    font-size: 2.25rem;
    color: var(--dark);
    margin-bottom: 12px;
}

.section-subtitle {
    color: var(--text);
    margin-bottom: 50px;
    font-size: 1.05rem;
}

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

.feature-card {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 30px 24px;
    border-radius: 12px;
    text-align: left;
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: var(--primary);
}

.feature-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: var(--transition);
}

.feature-card:hover .feature-icon-wrapper {
    transform: scale(1.1);
}

.card-blue { background: #EBF8FF; color: #3182CE; }
.card-purple { background: #FAF5FF; color: #805AD5; }
.card-orange { background: #FFFAF0; color: #DD6B20; }
.card-red { background: #FFF5F5; color: #E53E3E; }
.card-green { background: #E6FFFA; color: #319795; }
.card-indigo { background: #EBF4FF; color: #4C51BF; }

.feature-card h3 {
    font-size: 1.15rem;
    color: var(--dark);
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 16px;
    min-height: 54px;
}

.feature-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 10. Metrics Performance Summary Bar */
.stats-bar {
    background: #1E4620;
    color: var(--white);
    padding: 40px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.stat-item h2 {
    font-size: 2.5rem;
    margin-bottom: 4px;
}

.stat-item p {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* 11. User Validation & Engagement Callout (Completed) */
.bottom-section {
    padding: 80px 0;
    background: var(--white);
}

.bottom-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}
/* 11. User Validation & Engagement Callout (Completed) */
.testimonial-box h3 {
    font-size: 1.5rem;
    color: var(--dark);
    margin-bottom: 30px;
}

.quote-card {
    background: #F8FAFC;
    border-left: 4px solid var(--primary);
    padding: 30px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 24px;
}

.quote-text {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--dark);
    margin-bottom: 20px;
}

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

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #CBD5E1;
}

.author-name {
    font-weight: 700;
    color: var(--dark);
    font-size: 0.95rem;
}

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

.cta-box h2 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.cta-box p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.cta-actions {
    display: flex;
    gap: 16px;
}

/* 12. Footer Content Matrix */
footer {
    background: #0B1528;
    color: #94A3B8;
    padding: 60px 0 30px 0;
    font-size: 0.9rem;
}

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

.footer-logo-override {
    color: var(--white) !important;
    margin-bottom: 15px;
}

.footer-brand p {
    margin: 16px 0;
    line-height: 1.5;
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-links a {
    color: #94A3B8;
    background: #1E293B;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

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

.footer-col h4 {
    color: var(--white);
    margin-bottom: 20px;
    font-size: 1rem;
}

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

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

.footer-col ul a {
    color: #94A3B8;
    text-decoration: none;
    transition: var(--transition);
}

.footer-col ul a:hover {
    color: var(--white);
    padding-left: 4px;
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.contact-info i {
    color: var(--primary);
    margin-top: 3px;
}

.footer-bottom {
    border-top: 1px solid #1E293B;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-legal-links {
    display: flex;
    gap: 20px;
}

.footer-legal-links a {
    color: #94A3B8;
    text-decoration: none;
    transition: var(--transition);
}

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

/* 13. Persistent Helpdesk Widget */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    text-decoration: none;
    transition: var(--transition);
}

.whatsapp-float:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.whatsapp-icon {
    width: 28px;
    height: 28px;
}

/* 14. Performance Animation Rules */
@keyframes floatDashboard {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

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

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(0, 166, 81, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(0, 166, 81, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 166, 81, 0); }
}

/* 15. Responsive Viewport Adaptability */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-grid, .bottom-grid {
        grid-template-columns: 1fr;
    }
    .nav-menu{
    display:none;
}

.nav-buttons{
    display:none;
}
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero h1 {
        font-size: 2.2rem;
    }
    .mockup-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ==========================================================================
   Mobile Nav Interface Component Rules 
   ========================================================================== */
.mobile-menu-trigger {
    display: none;
    background: transparent;
    border: none;
    color: var(--dark);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1100;
    transition: var(--transition);
}

@media (max-width: 768px) {
    /* 1. Force the trigger icon button to display on mobile devices */
    .mobile-menu-trigger {
        display: inline-flex !important;
        position: relative;
        z-index: 1100;
    }

    /* 2. Style the hidden sliding mobile container layout */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Keeps panel off-screen by default */
        width: 80%;
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        visibility: hidden;
        background: var(--white);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
        padding: 100px 40px 40px 40px;
        transition: var(--transition);
        z-index: 1050;
        display: block !important; /* Overrides any desktop hidden rules */
    }

    /* 3. Slide the menu fully into view when activated via JavaScript */
    .nav-menu.nav-active {
        right: 0 !important;
        visibility: visible;
    }

    /* 4. Format the link items into a clean single vertical column */
    .nav-menu ul {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
        display: flex;
    }

    .nav-menu a {
        font-size: 1.1rem;
        display: block;
        width: 100%;
        color: var(--dark);
    }

    /* 5. Hide the default flat desktop button layout orientation */
    .nav-buttons {
        position: static;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid var(--border);
        width: 100%;
        flex-direction: column;
        gap: 16px;
        z-index: 1060;
        transition: var(--transition);
        display: flex !important;
    }

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

	.mobile-overlay{
		position:fixed;
		inset:0;
		background:rgba(0,0,0,.45);
		opacity:0;
		visibility:hidden;
		transition:.3s;
		z-index:1040;
	}

	.mobile-overlay.active{
		opacity:1;
		visibility:visible;
	}
	
	.browser-bar{
    display:flex;
    gap:8px;
    padding:10px 15px;
    border-bottom:1px solid #eee;
    background:#f8fafc;
}

.browser-bar span{
    width:12px;
    height:12px;
    border-radius:50%;
}

.browser-bar span:nth-child(1){background:#ff5f57;}
.browser-bar span:nth-child(2){background:#febc2e;}
.browser-bar span:nth-child(3){background:#28c840;}

.dashboard-preview{
    transform:perspective(1800px) rotateY(-8deg) rotateX(4deg);
    transition:.5s;
}

.dashboard-preview:hover{
    transform:perspective(1800px) rotateY(0deg) rotateX(0deg);
}

.dashboard-preview{
    box-shadow:
        0 40px 80px rgba(0,0,0,.15),
        0 0 80px rgba(0,166,81,.18);
}

@keyframes floatDashboard{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-15px);
    }
    100%{
        transform:translateY(0px);
    }
}

.modal-content{
    border:none;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.modal-header{
    background:linear-gradient(135deg,#00A651,#00853E);
    color:#fff;
    border:none;
    padding:20px 25px;
}

.modal-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
}

.modal-body{
    padding:30px;
}

.modal-footer{
    border:none;
    padding:20px 30px;
}

.modal .form-control{
    height:58px;
    border-radius:12px;
    font-size:18px;
}

.modal .form-control:focus{
    border-color:#00A651;
    box-shadow:0 0 0 .2rem rgba(0,166,81,.2);
}


/* ==========================================================================
   About Us Specific Module Layout Rules 
   ========================================================================== */
.about-hero {
    padding: 80px 0 60px 0;
    text-align: center;
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
}

.about-hero h1 {
    font-size: 2.75rem;
    color: var(--dark);
    max-width: 800px;
    margin: 0 auto 20px auto;
    line-height: 1.2;
}

.active-nav-link {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

.vision-mission-section {
    padding: 40px 0;
    background: var(--white);
}

.vision-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.vision-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 40px;
    transition: var(--transition);
}

.vision-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-color: var(--border);
}

.about-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.about-icon-box i {
    width: 24px;
    height: 24px;
}

.bg-green { background: #E8F5E9; color: var(--primary); }
.bg-blue { background: #EBF8FF; color: #3182CE; }

.vision-card h3 {
    font-size: 1.5rem;
    color: var(--dark);
    margin-bottom: 16px;
}

.values-section {
    padding: 80px 0;
    background: #FDFDFD;
    text-align: center;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 20px;
}

.value-item-card {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 30px;
    border-radius: 12px;
    text-align: left;
}

.value-icon {
    color: var(--primary);
    width: 36px;
    height: 36px;
    margin-bottom: 20px;
}

.value-item-card h4 {
    font-size: 1.2rem;
    color: var(--dark);
    margin-bottom: 12px;
}

.text-center-cta {
    display: flex;
    justify-content: center;
    text-align: center;
}

.cta-box-centered {
    max-width: 800px;
}

.cta-box-centered h2 {
    font-size: 2.25rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.3;
}

.cta-center-flex {
    justify-content: center;
    margin-top: 24px;
}

/* ==========================================================================
   About Us Component Responsive Breakdown Layer 
   ========================================================================== */
@media (max-width: 992px) {
    .values-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .vision-mission-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .about-hero h1 {
        font-size: 2rem;
    }
    .cta-box-centered h2 {
        font-size: 1.75rem;
    }
}


/* ==========================================================================
   Sign-Up & Authentication Interface Component Rules 
   ========================================================================== */
.auth-body-layout {
    background-color: #F8FAFC;
    min-height: 100vh;
}

.auth-wrapper-grid {
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    min-height: 100vh;
}

/* Sidebar Styling Parameters */
.auth-sidebar-info {
    background: linear-gradient(135deg, #0A192F 0%, #112240 100%);
    color: #94A3B8;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.auth-sidebar-info::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0,166,81,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.auth-logo-override {
    color: var(--white) !important;
}

.auth-marketing-message h2 {
    color: var(--white);
    font-size: 2.25rem;
    line-height: 1.25;
    margin-bottom: 20px;
}

.auth-marketing-message p {
    font-size: 1.05rem;
    line-height: 1.6;
}

.auth-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 40px 0;
}

.auth-benefit-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.auth-benefit-item i {
    color: var(--primary);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.auth-benefit-item h5 {
    color: var(--white);
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.auth-benefit-item p {
    font-size: 0.9rem;
    line-height: 1.5;
}

.auth-sidebar-footer p {
    font-size: 0.85rem;
}

/* Form Container Side Mechanics */
.auth-form-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    background-color: var(--white);
}

.auth-form-card {
    width: 100%;
    max-width: 460px;
}

.mobile-auth-logo {
    display: none;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--dark);
    text-decoration: none;
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.mobile-auth-logo i {
    color: var(--primary);
}

.auth-form-header h1 {
    font-size: 2rem;
    color: var(--dark);
    margin-bottom: 8px;
}

.auth-form-header p {
    color: var(--text);
    font-size: 0.95rem;
    margin-bottom: 30px;
}

/* Input Form Controls Overrides */
.smartsm-form-element {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group-block label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-anchor {
    position: absolute;
    left: 14px;
    color: #A0AEC0;
    width: 18px;
    height: 18px;
    pointer-events: none;
    transition: var(--transition);
}

.form-control {
    width: 100%;
    padding: 12px 16px 12px 44px;
    font-size: 0.95rem;
    color: var(--dark);
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: var(--transition);
    outline: none;
}

/* Dynamic styling parameter constraints for standard selection dropdown placeholders */
select.form-control {
    appearance: none;
    cursor: pointer;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.1);
}

.form-control:focus + .input-icon-anchor {
    color: var(--primary);
}

/* Form Checkbox Layout Configurations */
.form-checkbox-block {
    margin: 5px 0;
}

.checkbox-container-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    user-select: none;
}

.checkbox-container-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox-marker {
    width: 18px;
    height: 18px;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: var(--transition);
}

.checkbox-container-label:hover input ~ .custom-checkbox-marker {
    border-color: var(--primary);
}

.checkbox-container-label input:checked ~ .custom-checkbox-marker {
    background-color: var(--primary);
    border-color: var(--primary);
}

.custom-checkbox-marker::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-container-label input:checked ~ .custom-checkbox-marker::after {
    display: block;
}

.auth-inline-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.auth-inline-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.btn-auth-submit {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 1rem;
    margin-top: 10px;
}

.auth-form-footer-alt {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
    color: var(--text);
}


/* Terms & Conditions Modal */
.terms-modal[hidden] {
    display: none !important;
}

.terms-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(3px);
}

.terms-modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

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

.terms-modal-header h2 {
    margin: 0 0 5px;
    font-size: 21px;
    color: #111827;
}

.terms-modal-header p {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.terms-close {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.terms-close:hover {
    color: #dc2626;
}

.terms-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px;
    color: #374151;
    font-size: 14px;
    line-height: 1.75;
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #f3f4f6;
}

.terms-modal-body h3 {
    margin: 22px 0 8px;
    color: #111827;
    font-size: 16px;
}

.terms-modal-body h3:first-child {
    margin-top: 0;
}

.terms-modal-body h4 {
    margin: 15px 0 5px;
    color: #374151;
    font-size: 14px;
}

.terms-modal-body p {
    margin: 0 0 12px;
}

.terms-modal-body ul {
    padding-left: 22px;
    margin-bottom: 15px;
}

.terms-modal-body a {
    color: #2563eb;
    overflow-wrap: anywhere;
}

.terms-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.terms-modal-footer span {
    font-size: 12px;
    color: #6b7280;
}

.terms-accept-btn {
    flex-shrink: 0;
    padding: 11px 16px;
    border: none;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.terms-accept-btn:hover:not(:disabled) {
    background: #1d4ed8;
}

.terms-accept-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

body.terms-modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .terms-modal {
        padding: 8px;
    }

    .terms-modal-content {
        max-height: 94vh;
        border-radius: 9px;
    }

    .terms-modal-header,
    .terms-modal-footer {
        padding: 14px;
    }

    .terms-modal-header h2 {
        font-size: 18px;
    }

    .terms-modal-body {
        padding: 18px;
        font-size: 13px;
    }

    .terms-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .terms-accept-btn {
        width: 100%;
    }
}


/* =========================================
   SMARTSM 365 TERMS & CONDITIONS MODAL
   ========================================= */

#termsModal[hidden] {
    display: none !important;
}

#termsModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px !important;
    margin: 0 !important;
    background: rgba(15, 23, 42, 0.75) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#termsModal,
#termsModal * {
    box-sizing: border-box;
}

#termsModal .terms-modal-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 780px !important;
    height: auto !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: 0 !important;
    background: #fff !important;
    color: #374151 !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3) !important;
}

#termsModal .terms-modal-header {
    position: relative;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    padding: 18px 24px !important;
    margin: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb;
}

#termsModal .terms-modal-header h2 {
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: #111827 !important;
    font-size: 21px !important;
    line-height: 1.4 !important;
}

#termsModal .terms-modal-header p {
    margin: 0 !important;
    padding: 0 !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

#termsModal .terms-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 6px;
    background: #f3f4f6 !important;
    color: #374151 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    cursor: pointer;
}

#termsModal .terms-close:hover {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

#termsModal .terms-modal-body {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 24px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff !important;
    color: #374151 !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    text-align: left !important;
}

#termsModal .terms-modal-body h3 {
    display: block;
    margin: 22px 0 8px !important;
    padding: 0 !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

#termsModal .terms-modal-body h3:first-child {
    margin-top: 0 !important;
}

#termsModal .terms-modal-body h4 {
    margin: 16px 0 6px !important;
    padding: 0 !important;
    color: #1f2937 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

#termsModal .terms-modal-body p {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #374151 !important;
}

#termsModal .terms-modal-body ul {
    margin: 0 0 16px !important;
    padding-left: 24px !important;
}

#termsModal .terms-modal-body li {
    display: list-item;
    margin-bottom: 8px;
    line-height: 1.7;
}

#termsModal .terms-modal-body a {
    color: #2563eb !important;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

#termsModal .terms-modal-footer {
    position: relative;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    padding: 15px 24px !important;
    margin: 0 !important;
    background: #f9fafb !important;
    border-top: 1px solid #e5e7eb;
}

#termsModal .terms-modal-footer span {
    display: block;
    margin: 0 !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    line-height: 1.5;
}

#termsModal .terms-accept-btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 16px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 6px !important;
    background: #2563eb !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

#termsModal .terms-accept-btn:hover:not(:disabled) {
    background: #1d4ed8 !important;
}

#termsModal .terms-accept-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

body.terms-modal-open {
    overflow: hidden !important;
}

/* Mobile layout */
@media (max-width: 600px) {
    #termsModal {
        padding: 8px !important;
        align-items: center;
    }

    #termsModal .terms-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 94vh !important;
        max-height: 94dvh !important;
        border-radius: 9px !important;
    }

    #termsModal .terms-modal-header {
        padding: 13px 15px !important;
    }

    #termsModal .terms-modal-header h2 {
        font-size: 18px !important;
    }

    #termsModal .terms-modal-body {
        padding: 17px !important;
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    #termsModal .terms-modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 15px !important;
    }

    #termsModal .terms-accept-btn {
        width: 100% !important;
    }
}


/* ==========================================================================
   Authentication Screens Responsive Viewport Variations
   ========================================================================== */
@media (max-width: 992px) {
    .auth-wrapper-grid {
        grid-template-columns: 1fr;
    }
    
    /* Sidebar Styling Parameters with Theme-Matching Dark Green */
/* Sidebar Styling Parameters with Deep Theme Green Force Hooks */
.auth-sidebar-info {
    background: linear-gradient(135deg, #06371B 0%, #032411 100%) !important; /* Forces dark green theme on all resolutions */
    color: #A3B8AC !important;
    padding: 60px !important;
    display: flex !important; /* Overrides accidental mobile display triggers on desktop scales */
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
}


.auth-sidebar-info::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 166, 81, 0.15) 0%, transparent 60%); /* Subtle vibrant green glow overlay */
    pointer-events: none;
}

    .auth-form-container {
        padding: 40px 20px;
    }

    .mobile-auth-logo {
        display: inline-flex;
    }
}

/* Home page refresh */
:root{--primary:#0f8b61;--primary-dark:#08734f;--dark:#102a43;--text:#536579;--light:#f5f8fb;--border:#e3eaf0;--transition:all .22s ease}
html{scroll-behavior:smooth;scroll-padding-top:88px}
header{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav-container{height:76px;gap:28px}.logo{font-size:1.16rem;letter-spacing:-.035em}.logo::before{content:"S";display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#e8f5ef;color:var(--primary);font-size:19px;font-weight:800}.nav-menu{margin-left:auto}.nav-menu ul{align-items:center;margin:0;padding:0}.nav-menu a{font-size:.9rem}.nav-menu a.active-nav-link{color:var(--primary);font-weight:700}.nav-buttons{gap:9px}.nav-buttons .btn{padding:10px 15px;font-size:.85rem;animation:none}.btn{border-radius:10px;min-height:44px}.btn-primary{background:var(--primary);border-color:var(--primary);box-shadow:0 7px 18px rgba(15,139,97,.15);animation:none}.btn-primary:hover,.btn-primary:focus{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:0 9px 23px rgba(15,139,97,.2)}.btn-outline{border-color:#d5e0e8;color:#294258;background:#fff}.btn-outline:hover,.btn-outline:focus{border-color:#a9c9ba;background:#f6fbf8;color:var(--primary-dark)}
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(62px,8vw,108px) 0 clamp(54px,7vw,90px);background:radial-gradient(ellipse at 82% 43%,rgba(19,155,104,.13),transparent 36%),linear-gradient(180deg,#f7fbf9 0%,#fff 100%)}.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(16,42,67,.08) .7px,transparent .7px);background-size:20px 20px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.26),transparent 75%)}.hero-grid{grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:clamp(42px,7vw,95px)}.hero-content{max-width:570px}.badge{gap:9px;padding:8px 13px;margin-bottom:22px;border:1px solid #dceee5;border-radius:999px;background:rgba(255,255,255,.88);color:#2a7156;font-size:.76rem;letter-spacing:.01em}.badge-dot{width:7px;height:7px;border-radius:50%;background:#13a36c;box-shadow:0 0 0 4px rgba(19,163,108,.1)}.hero h1{max-width:610px;margin:0 0 20px;font-size:clamp(2.65rem,5.1vw,4.25rem);line-height:1.055;font-weight:760;letter-spacing:-.065em;color:#102a43}.hero h1 span{color:var(--primary)}.hero-p{max-width:535px;margin:0 0 24px;color:#596b7d;font-size:clamp(1rem,1.35vw,1.13rem);line-height:1.75}.hero-features{gap:12px 18px;margin-bottom:29px}.hero-feature-item{gap:7px;color:#40576b;font-size:.82rem}.hero-feature-item svg,.hero-feature-item i{width:17px;height:17px;color:var(--primary)}.hero-actions{gap:11px;margin:0 0 16px}.hero-actions .btn{min-height:50px;padding:12px 18px;font-size:.91rem}.hero-note{display:flex;align-items:center;gap:7px;margin:0;color:#8190a0;font-size:.76rem}.hero-note svg{width:14px;height:14px;color:var(--primary)}.hero-mockup{min-width:0;flex-direction:column;gap:16px;animation:none}.hero-mockup::before{width:min(78%,420px);height:min(78%,420px);background:rgba(15,139,97,.12);filter:blur(80px)}.dashboard-preview{max-width:690px;padding:10px;border:1px solid rgba(217,229,223,.9);border-radius:17px;background:#fff;box-shadow:0 34px 85px rgba(16,42,67,.16),0 8px 24px rgba(15,139,97,.09);transform:perspective(1500px) rotateY(-3deg) rotateX(1deg);transition:transform .35s ease,box-shadow .35s ease}.dashboard-preview:hover{transform:perspective(1500px) rotateY(0) rotateX(0);box-shadow:0 38px 90px rgba(16,42,67,.2)}.browser-bar{align-items:center;gap:6px;padding:8px 10px 11px;border:0;background:#fff}.browser-bar span{width:8px;height:8px}.browser-bar small{margin-left:7px;color:#8795a2;font-size:.65rem}.dashboard-image{border:1px solid #edf1f4;border-radius:9px;object-fit:cover}.preview-caption{display:flex;align-items:center;gap:11px;align-self:flex-end;max-width:290px;padding:12px 15px;border:1px solid #e3eaf0;border-radius:13px;background:rgba(255,255,255,.94);box-shadow:0 12px 32px rgba(16,42,67,.09)}.preview-caption-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:#eaf5ef;color:var(--primary)}.preview-caption-icon svg{width:18px;height:18px}.preview-caption strong,.preview-caption small{display:block}.preview-caption strong{color:#243d52;font-size:.76rem}.preview-caption small{margin-top:2px;color:#8090a0;font-size:.65rem}
.home-login-modals{position:relative;z-index:1200}.modal-content{border:1px solid #e6edf1;border-radius:17px;box-shadow:0 25px 75px rgba(14,38,59,.2)}.modal-header{padding:20px 23px;border-bottom:1px solid #edf1f4;background:#f8fbf9;color:#19374b}.modal-title{gap:10px;font-size:1.05rem}.modal-title svg{width:21px;height:21px;color:var(--primary)}.modal-body{padding:24px}.login-intro{margin:0 0 20px;color:#6f8090;font-size:.9rem}.modal .form-control{height:52px;border:1px solid #dce5e9;border-radius:10px;font-size:1rem;text-align:left!important}.modal .form-control:focus{border-color:#56a887;box-shadow:0 0 0 .22rem rgba(15,139,97,.14)}.modal-footer{gap:9px;padding:0 24px 22px}.modal-footer .btn{animation:none}
#about{padding:76px 0 70px;background:#fff}.about-container{max-width:980px}.section-tag{margin-bottom:10px;color:var(--primary);font-size:.72rem;letter-spacing:.13em}.section-title{max-width:760px;margin:0 auto 16px;color:#102a43;font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:740;letter-spacing:-.05em;line-height:1.13}.about-container .section-title{margin-left:0}.about-copy{max-width:850px;margin-top:22px;color:#5d6e7d;font-size:.96rem;line-height:1.82}.about-copy p{margin:0 0 14px}.about-copy strong{color:#29465a}.features-section{padding:84px 0 88px;background:#f6f9fb;text-align:center}.features-section .container{max-width:1220px}.features-section .section-title{margin-bottom:10px}.section-subtitle{max-width:650px;margin:0 auto 38px;color:#748493;font-size:.98rem;line-height:1.7}.features-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}.feature-card{min-height:218px;padding:23px 22px;border:1px solid #e5ebef;border-radius:14px;box-shadow:0 5px 20px rgba(16,42,67,.025)}.feature-card:hover{transform:translateY(-4px);border-color:#c9e4d8;box-shadow:0 16px 36px rgba(16,42,67,.075)}.feature-icon-wrapper{width:43px;height:43px;margin-bottom:18px;border-radius:12px}.feature-icon-wrapper svg{width:20px;height:20px}.feature-card h3{margin-bottom:9px;font-size:1.02rem;line-height:1.38;letter-spacing:-.018em}.feature-card p{min-height:0;margin:0;color:#708090;font-size:.83rem;line-height:1.65}.feature-explore{margin-top:4px}.stats-bar{padding:35px 0;background:#123c35}.stats-grid{gap:20px}.stat-item h2{margin-bottom:4px;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:750;letter-spacing:-.04em}.stat-item p{margin:0;color:#d0e0dc;font-size:.82rem}.bottom-section{padding:74px 0;background:#fff}.bottom-grid{grid-template-columns:minmax(0,1fr);max-width:1100px}.cta-box{position:relative;overflow:hidden;padding:clamp(30px,6vw,58px);border:1px solid #dcebe4;border-radius:22px;background:radial-gradient(ellipse at 95% 5%,rgba(34,167,114,.16),transparent 35%),linear-gradient(125deg,#f0f8f4,#fbfdfc)}.cta-box h2{max-width:650px;margin-bottom:12px;font-size:clamp(1.8rem,3.4vw,2.65rem);font-weight:750;letter-spacing:-.05em}.cta-box p{max-width:650px;margin-bottom:23px;color:#647687;font-size:.98rem;line-height:1.7}.cta-actions .btn{animation:none}footer{padding:27px 0;background:#102a43}footer .footer-bottom{padding-top:0;border:0}.footer-bottom p{margin:0}.footer-legal-links{margin:0;padding:0;list-style:none}.footer-legal-links li{display:flex;align-items:center;gap:8px;color:#d1dbe4;font-size:.82rem}.footer-legal-links svg{width:15px;height:15px;color:#55c195}.whatsapp-float{right:24px;bottom:24px;width:54px;height:54px;box-shadow:0 8px 24px rgba(0,0,0,.2)}.mobile-menu-trigger{border-radius:9px;padding:8px}.mobile-menu-trigger:focus-visible,.btn:focus-visible,.nav-menu a:focus-visible{outline:3px solid rgba(15,139,97,.45);outline-offset:3px}
@media(max-width:1024px){.hero-grid{gap:35px}.features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.nav-container{height:68px;gap:12px}.hero{padding:54px 0 58px}.hero-grid{grid-template-columns:minmax(0,1fr);gap:39px}.hero-content{max-width:650px}.hero h1{max-width:590px;font-size:clamp(2.55rem,9vw,3.65rem)}.hero-p{font-size:1rem}.hero-features{gap:11px 14px}.hero-feature-item{font-size:.78rem}.hero-actions{flex-wrap:wrap}.hero-actions .btn{min-width:155px;justify-content:center}.hero-mockup{max-width:650px;margin-inline:auto}.dashboard-preview{transform:none}.preview-caption{align-self:flex-end}.features-section{padding:66px 0}.stats-grid{gap:22px 12px}.stat-item h2{font-size:1.8rem}.bottom-section{padding:58px 0}.footer-bottom{align-items:flex-start;flex-direction:column}.footer-legal-links{flex-wrap:wrap;gap:12px 20px}}
@media(max-width:480px){.container{padding-inline:18px}.logo{font-size:1.02rem}.logo::before{width:32px;height:32px}.hero{padding-top:43px}.hero h1{font-size:2.55rem}.hero-features{display:grid;grid-template-columns:1fr 1fr}.hero-feature-item:last-child{grid-column:1/-1}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hero-actions .btn{min-width:0;padding-inline:11px;font-size:.82rem}.preview-caption{align-self:stretch;max-width:none}.features-grid{grid-template-columns:minmax(0,1fr);gap:12px}.feature-card{min-height:0;padding:20px}.section-title{font-size:1.9rem}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-item h2{font-size:1.65rem}.cta-box{padding:27px 22px;border-radius:17px}.footer-legal-links{flex-direction:column}.whatsapp-float{right:16px;bottom:16px;width:49px;height:49px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Public feature and registration pages */
.features-page-hero{padding:clamp(58px,8vw,96px) 0 56px;background:radial-gradient(ellipse at 50% 0,rgba(15,139,97,.11),transparent 58%),#f7fbf9}
.features-page-hero .container{max-width:850px}
.features-page-hero h1{margin:0 auto 16px;color:#102a43;font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:760;letter-spacing:-.055em;line-height:1.08}
.features-hero-p{max-width:690px;margin:0 auto;color:#66798a;font-size:1.05rem;line-height:1.75}
.features-detailed-section{padding:24px 0 62px;background:#f7fbf9}
.features-showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.feature-card.showcase-variant{min-width:0;min-height:0;padding:25px;border:1px solid #e2ebe6;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(16,42,67,.04)}
.showcase-variant h3{margin:0 0 9px;color:#17384d;font-size:1.08rem;font-weight:700;letter-spacing:-.02em}
.showcase-variant>p{margin:0 0 17px;color:#6b7d8c;font-size:.87rem;line-height:1.7}
.showcase-bullets{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.showcase-bullets li{display:flex;align-items:flex-start;gap:8px;color:#526879;font-size:.81rem;line-height:1.5}
.showcase-bullets svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px;color:#138a60;stroke-width:2.3}
.features-cta-banner{padding:48px 0;border:1px solid #dcebe4;border-radius:20px;background:radial-gradient(ellipse at 95% 5%,rgba(34,167,114,.15),transparent 38%),linear-gradient(125deg,#f0f8f4,#fbfdfc)}
.features-cta-banner h2{color:#102a43;font-size:clamp(1.8rem,3.3vw,2.45rem);font-weight:740;letter-spacing:-.045em}
.features-cta-banner p{max-width:650px;margin:10px auto 0;color:#66798a;line-height:1.7}
.auth-body-layout{min-height:100vh;background:#f4f7f6}
.auth-wrapper-grid{min-height:100vh;grid-template-columns:minmax(290px,.83fr) minmax(0,1.17fr)}
.auth-sidebar-info{min-height:100vh;padding:clamp(30px,5vw,64px)!important;background:radial-gradient(ellipse at 15% 10%,rgba(43,187,126,.2),transparent 38%),linear-gradient(145deg,#0b4934,#082d27)!important}
.auth-sidebar-content{position:relative;z-index:1;width:100%;max-width:500px;margin-inline:auto}
.auth-sidebar-info .logo{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.auth-sidebar-info .logo::before{content:none}
.auth-marketing-message{margin:clamp(45px,9vh,100px) 0 35px}
.auth-marketing-message h2{max-width:470px;color:#fff;font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:730;letter-spacing:-.045em;line-height:1.12}
.auth-marketing-message p{max-width:450px;color:#d0e2da;font-size:.95rem;line-height:1.75}
.auth-benefits-list{display:grid;gap:16px}
.auth-benefit-item{display:flex;gap:12px;align-items:flex-start}
.auth-benefit-item>svg{width:19px;height:19px;flex:0 0 19px;color:#71d1a4}
.auth-benefit-item h5{margin:0 0 3px;color:#fff;font-size:.9rem;font-weight:650}
.auth-benefit-item p{margin:0;color:#c0d5cb;font-size:.8rem;line-height:1.55}
.auth-sidebar-footer{margin-top:35px;color:#d0e2da;font-size:.8rem}
.auth-form-container{display:flex;align-items:center;justify-content:center;padding:clamp(24px,5vw,70px)!important}
.auth-form-card{width:min(100%,610px);padding:clamp(25px,4vw,46px);border:1px solid #e2eae6;border-radius:20px;background:#fff;box-shadow:0 20px 60px rgba(16,42,67,.08)}
.auth-form-header h1{margin:0 0 8px;color:#142f42;font-size:clamp(1.7rem,3vw,2.15rem);font-weight:740;letter-spacing:-.045em}
.auth-form-header>p{margin:0 0 23px;color:#718291;font-size:.92rem}
.mobile-auth-logo{display:none;align-items:center;gap:8px;margin-bottom:24px;color:#126b4c;font-weight:750;text-decoration:none}
.smartsm-form-element{display:grid;gap:15px}
.form-group-block{margin:0}
.form-group-block>label{display:block;margin:0 0 7px;color:#30485a;font-size:.83rem;font-weight:650}
.input-icon-wrapper{position:relative}
.input-icon-anchor{position:absolute;top:50%;left:14px;width:17px;height:17px;transform:translateY(-50%);color:#84949f;pointer-events:none}
.input-icon-wrapper .form-control{min-height:48px;padding:11px 14px 11px 42px;border:1px solid #dce5e1;border-radius:10px;background-color:#fff;color:#193649;font-size:.9rem;box-shadow:none}
.input-icon-wrapper .form-control:focus{border-color:#55a98a;box-shadow:0 0 0 3px rgba(15,139,97,.12)}
.form-checkbox-block{margin:3px 0 0}
.checkbox-text-span{color:#586d7b;font-size:.81rem;line-height:1.6}
.auth-inline-link{color:#0f8b61;font-weight:650}
.termsNotice,#termsNotice{color:#9a6532!important;font-size:.74rem}
.btn-auth-submit{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:49px;margin-top:3px;font-weight:680}
.btn-auth-submit svg{width:17px;height:17px}
.registration-alert{margin:0 0 17px;padding:13px 15px;border:1px solid;border-radius:10px;font-size:.85rem;line-height:1.55}
.registration-alert-success{border-color:#c5e8d5;background:#f0faf4;color:#17643e}
.registration-alert-error{border-color:#f0d1cd;background:#fff5f3;color:#943c34}
.auth-form-footer-alt{margin-top:15px;text-align:center;font-size:.82rem}
@media(max-width:992px){.auth-wrapper-grid{grid-template-columns:1fr}.auth-sidebar-info{display:none!important}.auth-form-container{min-height:100vh;padding:24px!important}.auth-form-card{max-width:650px}.mobile-auth-logo{display:inline-flex}}
@media(max-width:700px){.features-page-hero{padding:51px 0 39px}.features-detailed-section{padding:18px 0 44px}.features-showcase-grid{grid-template-columns:minmax(0,1fr);gap:13px}.feature-card.showcase-variant{padding:21px}.features-cta-banner{margin-inline:14px;padding:34px 18px;border-radius:16px}.features-cta-banner .d-flex{flex-wrap:wrap}.auth-form-container{align-items:flex-start;padding:20px 14px!important}.auth-form-card{padding:23px 19px;border-radius:16px}}

/* Registration page density and icon visibility */
.auth-form-card{width:min(100%,560px);padding:clamp(20px,2.8vw,32px)}
.auth-form-header h1{font-size:clamp(1.55rem,2.6vw,1.9rem)}
.auth-form-header>p{margin-bottom:16px;font-size:.86rem}
.smartsm-form-element{gap:10px}
.form-group-block>label{margin-bottom:5px;font-size:.79rem}
.input-icon-wrapper .form-control{min-height:42px;padding-top:8px;padding-bottom:8px;font-size:.86rem}
.input-icon-anchor{width:16px;height:16px}
.btn-auth-submit{min-height:44px}
.auth-benefit-item>svg,.auth-benefit-item>i{display:block;width:19px;height:19px;flex:0 0 19px;color:#71d1a4;stroke:currentColor;visibility:visible;opacity:1}
@media(max-width:992px){.auth-form-card{max-width:560px}}
.logo::before{content:none!important;display:none!important}
.brand-logo{display:block;width:38px;height:38px;flex:0 0 38px;object-fit:contain;border-radius:0;background:transparent}
.auth-sidebar-info .brand-logo{width:42px;height:42px;flex-basis:42px}
.mobile-auth-logo .brand-logo{width:34px;height:34px;flex-basis:34px}

/* Referral programme */
.referral-banner{padding:68px 0;background:radial-gradient(ellipse at 100% 0,rgba(59,181,131,.19),transparent 55%),#102f2c;color:#d7e8e1}
.referral-banner-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.referral-eyebrow{display:block;margin-bottom:18px;color:#91e7b9;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.referral-banner h1,.referral-banner h2{max-width:720px;margin:0 0 20px;color:#fff;font-size:clamp(2rem,3.7vw,3.25rem);line-height:1.12;letter-spacing:-.045em;font-weight:750}
.referral-banner p{margin:0 0 18px;line-height:1.8;font-size:.97rem}
.referral-banner .referral-lead{color:#a0edc3;font-size:1.18rem;line-height:1.5;font-weight:600}
.referral-banner-copy{padding-left:32px;border-left:1px solid #40625a}
.referral-cta{display:inline-flex;justify-content:center;gap:24px;min-height:48px;margin-top:8px;padding:12px 22px;background:#a0edc3;color:#123b2e;border:1px solid #a0edc3;font-weight:700}
.referral-cta:hover,.referral-cta:focus{background:#c6f7dc;color:#123b2e}
.referral-page-intro{padding:70px 0 56px}
.referral-page-intro .container{max-width:980px}
.referral-page-intro h1{max-width:800px}
.referral-details{padding:48px 0;background:#fff}
.referral-details-copy{max-width:980px;color:#536978;font-size:1.02rem;line-height:1.85}
.referral-details-copy p{margin:0 0 20px}
.referral-details-copy p:last-child{margin-bottom:0}
.referral-commission{padding:20px 24px;border-left:3px solid #0f8b61;background:#eef8f2;color:#17583e;font-weight:650;border-radius:0 10px 10px 0}
.referral-registration{padding:64px 0 80px;background:#f3f7f5;scroll-margin-top:90px}
.referral-registration-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;max-width:1100px;align-items:start}
.referral-registration-intro h2{margin:0 0 16px;color:#102a43;font-size:2.25rem;line-height:1.2;letter-spacing:-.04em}
.referral-registration-intro p{color:#607482;line-height:1.8}
.referral-help{display:flex;flex-direction:column;gap:8px;margin-top:32px;font-size:.9rem;overflow-wrap:anywhere}
.referral-help strong{color:#29465a}.referral-help a{color:#0b7250}
.referral-form-card{padding:32px;border:1px solid #dfebe4;border-radius:18px;background:white;box-shadow:0 12px 40px rgba(16,47,44,.05);min-width:0}
.referral-form{display:grid;gap:20px}
.referral-form-note{margin:0;color:#607482;font-size:.85rem;line-height:1.65}
.referral-field{display:grid;gap:7px}
.referral-field label{font-weight:650;font-size:.9rem;color:#243e4e}
.referral-field input,.referral-field select{width:100%;min-width:0;min-height:48px;padding:11px 13px;border:1px solid #ccdcd3;border-radius:9px;background:#fff;font:inherit;font-size:16px;color:#193b31}
.referral-field input:focus,.referral-field select:focus{outline:3px solid #c2ead5;border-color:#16885d}
.referral-field small{color:#657b88;font-size:.78rem;line-height:1.5}
.referral-field .referral-field-error{color:#a62828}
.referral-field [aria-invalid="true"]{border-color:#b43939}
.referral-form .btn{justify-content:center;min-height:50px;gap:18px}
.referral-errors{margin-bottom:22px;padding:18px;border:1px solid #efbdbd;border-radius:10px;background:#fff6f6;color:#8e2020;font-size:.9rem}
.referral-errors ul{margin:10px 0 0;padding-left:20px}.referral-errors a{color:inherit}
.referral-success{padding:12px;color:#17583e;line-height:1.8}.referral-success h3{margin-bottom:12px;font-size:1.5rem}
.nav-buttons:empty{display:none!important}
@media(min-width:769px) and (max-width:1100px){
    .nav-container{gap:12px}.nav-menu ul{gap:12px}.nav-menu a{font-size:.8rem;white-space:nowrap}
    .nav-container .logo{font-size:.95rem;white-space:nowrap}.nav-buttons .btn{font-size:.75rem;padding:10px 9px;white-space:nowrap}
}
@media(max-width:768px){
    .referral-banner{padding:46px 0}.referral-banner-grid,.referral-registration-grid{grid-template-columns:minmax(0,1fr);gap:28px}
    .referral-banner-copy{border-left:0;border-top:1px solid #40625a;padding:24px 0 0}
    .referral-details{padding:32px 0}.referral-registration{padding:40px 0}.referral-registration-intro h2{font-size:1.9rem}
    .referral-form-card{padding:24px}.referral-help{margin-top:20px}
}
@media(max-width:480px){.referral-form-card{padding:20px}.referral-cta{width:100%}.referral-banner h1,.referral-banner h2{font-size:2rem}}
/* Let the mobile drawer use the viewport instead of the blurred header as its containing block. */
@media (max-width: 768px) {
    header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nav-menu ul {
        align-items: flex-start;
    }
}