/* --- SAFFRON & WHITE LANDING THEME (NATIONAL IDENTITY) --- */

:root {
    /* --- CORE PALETTE --- */
    /* Light Mode (Default) */
    --bg-body: #FFFAF5;       /* Warm Cream/Pale Saffron Tint */
    --bg-card: #FFFFFF;       /* Pure White */
    --bg-accent: #FFE4CC;     /* Light Saffron Divider */
    
    /* Typography */
    --text-heading: #000080;  /* Navy Blue (Ashoka Chakra) - Authoritative */
    --text-body: #475569;     /* Slate Grey */
    
    /* Brand Colors */
    --brand-primary: #E67E22; /* Rich Saffron */
    --brand-gradient: linear-gradient(135deg, #E67E22 0%, #D35400 100%);

    --rep-gradient: linear-gradient(135deg, #d0c600 0%, #D35400 100%);
    
    /* Role Specifics (Tiranga Theme) */
    --rep-color: #E67E22;
    --rep-color1: #e62222;    /* Saffron for Representative */
    --rep-bg: #FFF7ED;        /* Very Light Orange */
    --rep-bg1:#ffe8e8;       /* Very Light Orange */
    --rep-glow: rgba(230, 126, 34, 0.2);
    
    --view-color: #138808;    /* India Green for Public Viewer */
    --view-bg: #F0FDF4;       /* Very Light Green */
    --view-glow: rgba(19, 136, 8, 0.2);
    
    --active-glow: rgba(230, 126, 34, 0.4); /* Default Saffron */
    --active-theme-color: #E67E22;

    /* Shadows & Structure */
    --shadow-card: 0 10px 30px -10px rgba(230, 126, 34, 0.1);
    --shadow-hover: 0 20px 40px -5px rgba(230, 126, 34, 0.2);
    --radius-lg: 24px;
}

/* --- DARK MODE OVERRIDES (Midnight Saffron) --- */
/* --- DARK MODE OVERRIDES (Deep Saffron / Bronze Theme) --- */
[data-theme="dark"] {
    /* Backgrounds: Moving from Navy to Deep Warm Bronze */
    --bg-body: #120b08;       /* Very Dark Brown/Black (Warm) */
    --bg-card: #1f120a;       /* Dark Chocolate/Bronze Card */
    --bg-accent: #3d2211;     /* Lighter Brown Divider */
    
    /* Text */
    --text-heading: #ffae6b;  /* Pastel Orange Text (Readable on dark) */
    --text-body: #d6c0b3;     /* Warm Grey */
    
    /* Gradients & Glows */
    --brand-primary: #ff9f43; /* Brighter Orange for dark mode */
    --rep-bg: rgba(255, 159, 67, 0.1);
    --rep-bg1: rgba(255, 67, 67, 0.1);
    --view-bg: rgba(46, 204, 113, 0.1);
    
    /* Shadows */
    --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
    --shadow-hover: 0 20px 40px -5px rgba(230, 100, 0, 0.2); /* Orange Glow */
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }

body {
    background-color: var(--bg-body);
    color: var(--text-heading);
    min-height: 100vh;
    display: flex; flex-direction: column;
}

/* --- ICON-ONLY BUTTONS --- */
.role-access-buttons {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between the two icons */
}

.nav-icon-link {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px; /* Rounded Square shape like your image */
    color: white; /* Icon is always white */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    text-decoration: none;
}


/* 1. ORANGE ICON (Entry) */
.nav-icon-link.orange {
    /* Gradient matches your orange image */
    background: linear-gradient(135deg, #F97316, #EA580C);
    border: 1px solid rgba(234, 88, 12, 0.2);
}

.nav-icon-link.orange:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(234, 88, 12, 0.25);
}

/* 2. GREEN ICON (View) */
.nav-icon-link.green {
    /* Gradient matches your green image */
    background: linear-gradient(135deg, #4ADE80, #16A34A);
    border: 1px solid rgba(22, 163, 74, 0.2);
}

.nav-icon-link.green:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(22, 163, 74, 0.25);
}

/* NAV LAYOUT ADJUSTMENTS */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-divider {
    width: 1px;
    height: 24px;
    background-color: var(--text-color, #555);
    opacity: 0.15;
}

/* 3. BLUE ICON (Admin) */
.nav-icon-link.blue {
    /* Gradient: Royal Blue to Darker Blue */
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.nav-icon-link.blue:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(37, 99, 235, 0.25);
}

/* 4. PURPLE ICON (Support) */
.nav-icon-link.purple {
    /* Gradient: Deep Purple to Violet */
    background: linear-gradient(135deg, #7C3AED, #5B21B6);
    border: 1px solid rgba(124, 58, 237, 0.2);
}

.nav-icon-link.purple:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(124, 58, 237, 0.25);
}

/* 5. RED ICON (Logout) - Matches New UI */
.nav-icon-link.red {
    background: linear-gradient(135deg, #EF4444, #DC2626); /* Red Gradient */
    border: 1px solid rgba(220, 38, 38, 0.2);
    cursor: pointer; /* Important for button */
    border-radius: 10px; /* Matches other icons */
    color: white;
}
.nav-icon-link.red:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(220, 38, 38, 0.25);
}

/* 6. AMBER ICON (About Us - Prosperity/Sugarcane) */
.nav-icon-link.amber {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.nav-icon-link.amber:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(245, 158, 11, 0.25);
}

/* 7. SKY BLUE ICON (Privacy Policy - Transparency) */
.nav-icon-link.skyblue {
    background: linear-gradient(135deg, #38BDF8, #0284C7);
    border: 1px solid rgba(56, 189, 248, 0.2);
}
.nav-icon-link.skyblue:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(56, 189, 248, 0.25);
}
/* =========================
   GLASS FOOTER STYLING
   ========================= */

/* --- FOOTER --- */
footer {
    text-align: center; padding: 30px; font-size: 13px; color: var(--text-body);
    background: var(--bg-card); border-top: 1px solid var(--bg-accent); margin-top: 60px;
}
/* Responsive: Stack nicely on mobile */
@media (max-width: 768px) {
    .footer-area {
        margin-bottom: 20px; /* Space for scrolling */
    }
}   

/* Dark Mode specific glass tint */
[data-theme="dark"] .glass-footer {
    background: var(--bg-card);
}

/* CENTERING CONTAINER */
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* Flex Centering Magic */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
}

/* TYPOGRAPHY & SAFFRON ACCENTS */
.copyright {
    font-size: 14px;
    color: var(--text-body);
    opacity: 0.9;
}

.copyright strong {
    font-weight: 700;
    color: var(--text-heading);
}

.domain-link {
    color: var(--brand-primary); /* SAFFRON COLOR */
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}

.credits {
    font-size: 12px;
    color: var(--text-body);
    opacity: 0.7;
}

/* HEART ANIMATION */
.heart {
    color: var(--brand-primary); /* Saffron Heart */
    display: inline-block;
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}


/* --- ANIMATION CANVAS --- */
#neural-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; opacity: 0.5; pointer-events: none;
}

/* --- NAVBAR --- */
.navbar {
    background: var(--bg-card);
    height: 76px;
    border-bottom: 2px solid var(--brand-primary); /* Saffron Top Border */
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    position: sticky; top: 0; z-index: 50;
}

.brand { display: flex; align-items: center; gap: 14px; }
/* IN newreport.css */

/* UPDATED Container - Removes the old colored box styles */
.brand-logo { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    height: 40px; /* Fixed height for consistency */
    width: auto;   
}

/* NEW Image Style - Ensures logo fits perfectly */
.navbar-logo-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    /* Sharp, darker shadow */
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15)); 
}

.brand-info h1 { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; }
.brand-info span { font-size: 11px; color: var(--text-body); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; }

.nav-actions { display: flex; align-items: center; gap: 16px; }

.status-indicator {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; color: var(--view-color);
    background: var(--view-bg); padding: 6px 14px; border-radius: 99px;
    border: 1px solid var(--view-glow);
}
.dot { width: 8px; height: 8px; background: currentColor; border-radius: 50%; animation: pulse 2s infinite; }

.heart {
    color: #E67E22;
    display: inline-block;
    animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); } /* Pumps larger */
}


/* Theme Toggle */
.theme-toggle {
    background: var(--bg-body);
    border: 1px solid var(--bg-accent);
    color: var(--text-heading);
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.theme-toggle:hover { background: var(--brand-primary); color: white; border-color: var(--brand-primary); transform: rotate(15deg); }

/* Show/Hide Icons based on Theme */
[data-theme="light"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: none; }

/* --- RESTRICTION WARNING LABEL --- */
.restriction-tag {
    position: absolute;
    top: 70px; /* Sits right below the Data Entry badge */
    right: 30px; /* Aligned with the badge */
    
    display: flex;
    align-items: center;
    gap: 5px;
    
    font-size: 10px;
    font-weight: 700;
    color: #DC2626; /* Warning Red */
    background: rgba(220, 38, 38, 0.08); /* Light Red Background */
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(220, 38, 38, 0.15);
    
    pointer-events: none; /* Allows click-through */
    transition: all 0.3s;
}

/* Make it glow slightly on hover to grab attention */
.role-card.rep:hover .restriction-tag {
    background: rgba(220, 38, 38, 0.15);
    transform: translateY(-2px);
}

/* --- MAIN WRAPPER --- */
.main-wrapper {
    max-width: 1100px; margin: 40px auto; padding: 0 24px;
    display: flex; flex-direction: column; gap: 50px; flex: 1;
}

/* --- HERO SECTION --- */
.hero-section {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 1px solid var(--bg-accent); padding-bottom: 40px;
}
.hero-content h2 { 
    font-size: 42px; font-weight: 800; 
    /* Gradient Text for Title */
    background: linear-gradient(90deg, var(--brand-primary), #D35400);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 12px; letter-spacing: -1.5px; 
}
.hero-content p { color: var(--text-body); font-size: 18px; max-width: 480px; line-height: 1.6; }

.industrial-clock { text-align: right; }
#time { font-size: 64px; font-weight: 800; color: var(--text-heading); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -3px; }
#date { font-size: 16px; color: var(--brand-primary); font-weight: 600; margin-top: 6px; text-transform: uppercase; letter-spacing: 1px; }

/* --- ROLE CARDS --- */
.role-container { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.role-card {
    background: var(--bg-card);
    border: 1px solid var(--bg-accent);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-decoration: none;
    position: relative; overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; gap: 24px;
    box-shadow: var(--shadow-card);
}

.role-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: currentColor; }

.card-badge {
    position: absolute; top: 30px; right: 30px;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    padding: 6px 14px; border-radius: 99px;
}

.icon-wrapper {
    width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
}

.role-details h3 { font-size: 24px; font-weight: 800; color: var(--text-heading); margin-bottom: 8px; }
.role-desc { font-size: 15px; color: var(--text-body); line-height: 1.5; }

.role-features { list-style: none; padding-left: 0; border-top: 1px solid var(--bg-accent); padding-top: 24px; }
.role-features li {
    font-size: 14px; color: var(--text-heading);
    margin-bottom: 12px; padding-left: 24px; position: relative; font-weight: 500;
}
.role-features li::before { content: "✓"; position: absolute; left: 0; font-weight: 900; font-size: 14px; }


.role-featuress { list-style: none; padding-left: 0; border-top: 1px solid var(--bg-accent); padding-top: 24px; }
.role-featuress li {
    font-size: 14px; color: var(--text-heading);
    margin-bottom: 12px; padding-left: 24px; position: relative; font-weight: 500;
}
.role-featuress li::before { content: "✗"; position: absolute; left: 0; font-weight: 900; font-size: 14px; color: rgb(161, 0, 0)}



.action-arrow { margin-top: auto; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; transition: gap 0.2s; }
.role-card:hover .action-arrow { gap: 14px; }

/* 1. REPRESENTATIVE CARD (SAFFRON) */
.role-card.rep { color: var(--rep-color); }
.role-card.rep .icon-wrapper { background: linear-gradient(135deg, #FF9933, #D35400); color: white; box-shadow: 0 10px 20px var(--rep-glow); }
.role-card.rep .card-badge { background: var(--rep-bg1); color: var(--rep-color1); }
.role-card.rep .role-features li::before { color: var(--rep-color); }

/* 2. VIEWER CARD (GREEN - NATIONAL FLAG TRIO) */
.role-card.viewer { color: var(--view-color); --shadow-hover: 0 20px 40px -5px rgba(19, 136, 8, 0.2);}
.role-card.viewer .icon-wrapper { background: linear-gradient(135deg, #2ECC71, #138808); color: white; box-shadow: 0 10px 20px var(--view-glow); }
.role-card.viewer .card-badge { background: var(--view-bg); color: var(--view-color); }
.role-card.viewer .role-features li::before { color: var(--view-color); }

/* --- PARTNER INFO --- */
.partner-info { text-align: center; border-top: 1px solid var(--bg-accent); padding-top: 40px; margin-top: auto; }
.tech-label { font-size: 11px; text-transform: uppercase; color: var(--brand-primary); letter-spacing: 2px; font-weight: 800; margin-bottom: 8px; }
.partner-info h3 { font-size: 20px; color: var(--text-heading); font-weight: 800; }
.sub-credit { font-size: 14px; color: var(--text-body); margin-top: 4px; }
.tech-credit { margin-top: 16px; font-size: 12px; font-weight: 600; color: var(--text-body); opacity: 0.6; }

/* --- FOOTER --- */
footer {
    text-align: center; padding: 30px; font-size: 13px; color: var(--text-body);
    background: var(--bg-card); border-top: 1px solid var(--bg-accent); margin-top: 60px;
}

@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }

/* --- RESPONSIVE --- */
/* =========================================
   MOBILE OPTIMIZATION (Layout Fixes)
   ========================================= */
@media (max-width: 768px) {

    .nav-icon-link.skyblue {
        display: none !important;
    }
    
    /* 1. NAVBAR FIX: Hide Text, Keep Logo & Icons */
    .navbar {
        padding: 0 15px; 
        height: 64px;
    }
    
    /* Hide the long name on mobile so buttons don't break */
    .brand-info {
        display: none; 
    }
    
    /* Make the logo image slightly larger since text is gone */
    .brand-logo {
        height: 42px;
        width: auto;
    }

    /* 2. COMPACT ICONS (Fit all 5 buttons comfortably) */
    .nav-right-group {
        gap: 10px; /* Reduce gap between divider and buttons */
    }
    
    .role-access-buttons {
        gap: 8px; /* Tighter spacing between colored icons */
    }
    
    .nav-icon-link {
        width: 32px; /* Slightly smaller touch targets */
        height: 32px;
    }
    
    .nav-icon-link svg {
        width: 18px;
        height: 18px;
    }

    /* 3. HERO SECTION FIX */
    .hero-section {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0 30px 0; /* Adjust padding */
    }
    
    /* 4. CLOCK ALIGNMENT */
    .industrial-clock { 
        text-align: left; 
        margin-top: 20px;
        width: 100%;
        padding-top: 20px;
        border-top: 1px dashed var(--bg-accent); /* visual separator */
    }
    #time { font-size: 42px; } /* Smaller clock font */

    /* 5. ROLE CARDS (Stacking & Reordering) */
    .role-container {
        grid-template-columns: 1fr; /* Stack cards vertically */
        gap: 20px;
    }

    /* REORDER LOGIC: Move Viewer card to top */
    .role-card.viewer {
        order: -1; /* Default order is 0, so -1 jumps to the top */
    }
    
    .role-card.rep {
        order: 1; /* Ensures Rep stays below */
    }
    
    /* 6. MODAL & FORM FIXES */
    .main-wrapper {
        padding: 0 20px;
        margin-top: 20px;
    }
}

/* ------------ABOUT PAGE---------------- */
/* SECURITY SECTION */
.security-section {
    border-top: 1px solid var(--bg-accent);
    padding-top: 40px;
    margin-bottom: 40px;
}

.security-header {
    text-align: center;
    margin-bottom: 40px;
}
.security-header h2 {
    font-size: 28px;
    color: var(--text-heading);
    margin-bottom: 10px;
}
.security-header p {
    color: var(--text-body);
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.security-card {
    background: var(--bg-card); /* Matches your white/dark theme */
    border: 1px solid var(--bg-accent);
    border-radius: 16px;
    padding: 30px;
    transition: transform 0.2s;
}

.security-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-primary);
    box-shadow: 0 10px 20px var(--rep-glow);
}

.sec-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-body);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    margin-bottom: 20px;
}

.security-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--text-heading);
}

.security-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-body);
    opacity: 0.9;
}

.about { text-align: center; font-size: 11px; text-transform: uppercase; color: var(--brand-primary); letter-spacing: 2px; font-weight: 800; margin-bottom: 8px; }

/* Mobile Responsiveness for Security Grid */
@media (max-width: 768px) {
    .security-grid {
        grid-template-columns: 1fr;
    }
}
/* --------------------------------------------- */

/* -----------------How To Use------------------- */
/* --- HOW IT WORKS & BENEFITS --- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

.section-header { text-align: center; margin-bottom: 40px; }
.section-header h2 { font-size: 32px; font-weight: 800; color: var(--text-heading); }
.section-header p { color: var(--text-body); margin-top: 8px; }

/* TOGGLE SWITCH */
.toggle-container {
    display: flex; position: relative;
    background: var(--bg-card); border: 1px solid var(--bg-accent);
    width: fit-content; margin: 0 auto 50px auto;
    padding: 6px; border-radius: 99px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.toggle-btn {
    background: transparent; border: none;
    padding: 10px 24px; font-size: 14px; font-weight: 700;
    color: var(--text-body); cursor: pointer; z-index: 2;
    transition: color 0.3s;
}

.toggle-btn.active { color: white; }

/* The sliding background pill */
.toggle-bg {
    position: absolute; top: 6px; left: 6px; height: calc(100% - 12px);
    background: var(--brand-gradient); border-radius: 99px;
    z-index: 1; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* STEPS GRID */
.steps-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}

.step-card {
    background: var(--bg-card);
    border: 1px solid var(--bg-accent);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Hover Effect for Steps */
.step-card:hover {
    transform: translateY(-8px);
    border-color: var(--active-theme-color);
    box-shadow: 0 10px 30px var(--active-glow); /* Dynamic Glow */
}

.step-number {
    font-size: 48px; font-weight: 900; color: var(--bg-accent);
    opacity: 0.5; margin-bottom: -20px; position: relative; z-index: 0;
}
.step-title { font-size: 18px; font-weight: 700; color: var(--text-heading); margin-bottom: 8px; position: relative; z-index: 1; }
.step-desc { font-size: 14px; color: var(--text-body); position: relative; z-index: 1; }

/* BENEFITS GRID */
.benefits-section { margin-top: 60px; margin-bottom: 0px; }
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.benefit-card {
    background: var(--bg-card);
    border: 1px solid var(--bg-accent);
    padding: 24px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
}
.benefit-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-primary);
    box-shadow: 0 10px 25px rgba(230, 126, 34, 0.15); /* Soft Saffron Glow */
}
.b-icon {
    width: 56px;
    height: 56px;
    background: var(--bg-body); /* Subtle background circle */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    color: var(--brand-primary);
    transition: transform 0.3s;
}
.benefit-card h3 { font-size: 16px; font-weight: 700; color: var(--text-heading); margin-bottom: 8px; }
.benefit-card p { font-size: 13px; color: var(--text-body); line-height: 1.5; }

.benefit-card:hover .b-icon {
    transform: scale(1.1) rotate(5deg); /* Playful animation on hover */
    background: var(--rep-bg); /* Highlight background */
}
/* RESPONSIVE */
@media (max-width: 768px) {
    .steps-grid, .benefits-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* 21 feB */
/* =========================================
   ENHANCED CTA BUTTON (Read Our Story)
   ========================================= */
.cta-story-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--brand-primary);
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
    padding: 14px 32px;
    border: 2px solid var(--brand-primary);
    border-radius: 99px;
    background: transparent;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The liquid fill effect */
.cta-story-btn::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--brand-gradient);
    z-index: -1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover State */
.cta-story-btn:hover {
    color: white;
    border-color: transparent;
    box-shadow: 0 10px 25px rgba(230, 126, 34, 0.35); /* Glowing shadow */
    transform: translateY(-4px); /* Float up */
}

/* Trigger the liquid fill */
.cta-story-btn:hover::before {
    width: 100%;
}

/* Arrow animation */
.cta-story-btn svg {
    transition: transform 0.4s ease;
}
.cta-story-btn:hover svg {
    transform: translateX(6px); /* Arrow darts right */
}

/* =========================================
   ENHANCED FOOTER NAVIGATION (SLIM VERSION)
   ========================================= */
.footer-legal-nav {
    display: flex;
    gap: 5px; /* Tighter gap */
    justify-content: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    background: var(--bg-body); 
    padding: 6px; /* Much smaller outer padding */
    border-radius: 99px;
    border: 1px solid var(--bg-accent);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.03); 
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.footer-legal-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-heading);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px; /* Slightly smaller text */
    padding: 8px 16px; /* Tighter button padding */
    border-radius: 99px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-legal-link:hover {
    background: var(--rep-bg);
    color: var(--brand-primary);
    transform: translateY(-2px);
}

.footer-legal-link svg {
    opacity: 0.6;
    transition: all 0.3s ease;
}

.footer-legal-link:hover svg {
    opacity: 1;
    transform: scale(1.1);
}

/* Enable smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Prevent the sticky navbar from hiding the section title when scrolling */
#about {
    scroll-margin-top: 100px; /* Adjusts the landing spot so it clears your 76px navbar */
}