:root {
    --ink: #0F172A;
    --slate: #334155;
    --muted: #6B7280;
    --cloud: #E5E7EB;
    --paper: #F8FAFC;
    --white: #fff;
    --p900: #0B3D2E;
    --p700: #115E44;
    --p500: #2CA66F;
    --p100: #C7EBDD;
    --radius: 16px; 
    --radius-lg: 24px; 
    --sh1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
    --sh2: 0 8px 24px rgba(15, 23, 42, .12);
    --reveal-duration: 700ms;
    --reveal-ease: cubic-bezier(.22, .61, .36, 1)
}

/* ========================================================= */
/* GLOBAL STYLES */
/* ========================================================= */
html,
body {
    scroll-behavior: smooth;
}

body {
    background: var(--paper);
    color: var(--slate);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

main {
    /* No global overflow hidden */
}

.bg-paper {
    background: var(--paper)
}

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

.text-ink {
    color: var(--ink) !important
}

/* AOS */
[data-aos] {
    will-change: transform, opacity
}

.aos-animate {
    transition: transform var(--reveal-duration) var(--reveal-ease), opacity var(--reveal-duration) var(--reveal-ease)
}

/* Card/Chip Styles */
/*.card-brand {*/
/*    border: none;*/
/*    border-radius: var(--radius);*/
/*    box-shadow: var(--sh1);*/
/*    background: var(--white)*/
/*}*/

.card-brand {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--sh1);
    background: var(--white);
    /* FIX: Ensure default state is visible (removes conflict if AOS is slow/broken) */
    opacity: 1; 
    transform: none; 
}

.chip {
    display: inline-block;
    background: #f2eee8;
    color: #6b7280;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-size: .875rem
}

.badge.bg-mint {
    background: var(--p100);
    color: var(--p700);
    border-radius: 999px;
    padding: .5rem .75rem
}

.logo-chip {
    background: #fff;
    border-radius: 10px;
    padding: .8rem 1.5rem;
    box-shadow: var(--sh1);
    color: #333;
    font-weight: 600;
    display: inline-block;
    min-width: 140px;
    text-align: center
}

/* ========================================================= */
/* NAVIGATION STYLES */
/* ========================================================= */

/* Sticky Header */
#site-header {
    z-index: 1030;
}

#mainNav .nav-link {
    position: relative;
    color: var(--slate);
    transition: color .2s ease
}

#mainNav .nav-link.active,
#mainNav .nav-link:hover {
    color: var(--p700)
}

#mainNav .nav-link::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .2rem;
    height: 2px;
    background: var(--p700);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease
}

#mainNav .nav-link:hover::after {
    transform: scaleX(1)
}

.navbar-brand .text-ink {
    color: var(--ink) !important
}


/* --- MOBILE NAV TOGGLER CUSTOM STYLES (Hamburger -> X Animation) --- */
.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: none;
    border-radius: var(--radius);
    transition: box-shadow .15s ease-in-out;
}

/* default Bootstrap focus/active rings/shadows on click/focus */
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
}

.navbar-toggler .toggler-icon {
    display: block;
    width: 26px;
    height: 2px;
    background-color: var(--ink);
    transition: all .35s cubic-bezier(.175, .885, .32, 1.275);
}

.navbar-toggler .middle-bar {
    margin: 5px 0;
}

/* Default state: Hamburger */
.navbar-toggler.collapsed .top-bar {
    transform: none; 
}
.navbar-toggler.collapsed .middle-bar {
    opacity: 1; 
}
.navbar-toggler.collapsed .bottom-bar {
    transform: none; 
}

/* Toggler to X animation */
.navbar-toggler:not(.collapsed) .top-bar {
    transform: translateY(7px) rotate(45deg);
}

.navbar-toggler:not(.collapsed) .bottom-bar {
    transform: translateY(-7px) rotate(-45deg);
}

.navbar-toggler:not(.collapsed) .middle-bar {
    opacity: 0;
}


/* ========================================================= */
/* GLOBAL BUTTON STYLES WITH ICON HOVER EFFECT */
/* ========================================================= */

.btn {
    position: relative;
    overflow: hidden; 
    transition: all .35s ease;
    border-radius: var(--radius) !important; 
}

/* All buttons using the icon effect must use this class */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-right: 32px !important; 
    padding-left: 32px !important; 
}

/* Button text span */
.icon-btn span {
    position: relative;
    z-index: 1;
    transition: transform .35s ease;
}

/* Hidden icon */
.icon-btn .icon-hide {
    position: absolute;
    right: 24px; 
    opacity: 0;
    transform: translateX(10px); 
    transition: transform .35s ease, opacity .35s ease, color .35s ease;
    z-index: 0;
}

/* Hover/Focus Logic (Applies to ALL .icon-btn) */
.icon-btn:hover span,
.icon-btn:focus-visible span {
    transform: translateX(-16px); 
}
.icon-btn:hover .icon-hide,
.icon-btn:focus-visible .icon-hide {
    opacity: 1;
    transform: translateX(-8px); 
}
.icon-btn:hover:active {
    transform: scale(0.98);
}


/* Primary Button Styles */
.btn-primary {
    background: var(--p500);
    border-color: var(--p500);
    color: var(--white);
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border-color: #16a34a !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 16px rgba(44, 166, 111, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}


/* Secondary Outline Button Styles */
.btn-outline-secondary {
    color: var(--p700); 
    border-color: var(--p700); 
    background: none;
    transition: all .35s ease;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    color: var(--white); 
    background: var(--p700) !important; 
    border-color: var(--p700);
    box-shadow: 0 4px 10px rgba(17, 94, 68, 0.2);
    transform: translateY(-2px);
}
.btn-outline-secondary:hover .icon-hide,
.btn-outline-secondary:focus-visible .icon-hide {
    color: var(--white);
}


/* Light Outline Button Styles */
.btn-outline-light {
    color: var(--white);
    border-color: var(--white);
    background: none;
    transition: all .35s ease;
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
    color: var(--p700); 
    background: var(--white) !important; 
    border-color: var(--white);
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}
.btn-outline-light:hover span,
.btn-outline-light:focus-visible span {
    transform: translateX(-22px); 
}
.btn-outline-light:hover .icon-hide,
.btn-outline-light:focus-visible .icon-hide {
    color: var(--p700); /* Icon turns green on hover */
    opacity: 1; 
    transform: translateX(-8px);
}


/* ========================================================= */
/* FOOTER STYLES */
/* ========================================================= */

footer {
    background: #0B1220;
    color: #d1d5db;
    font-size: .95rem
}

/* Footer Explore Links */
.footer-link-item {
    padding: .3rem 0;
}

footer .list-unstyled a {
    color: #d1d5db;
    text-decoration: none;
    display: inline-flex; 
    align-items: center;
    gap: .5rem;
    transition: color .25s ease, transform .25s ease;
}

footer .list-unstyled a i {
    color: var(--p500); 
    transition: color .25s ease;
}

footer .list-unstyled a:hover {
    color: var(--p500);
    transform: translateX(3px);
}

footer .list-unstyled a:hover i {
    color: #fff;
    text-shadow: 0 0 8px rgba(34, 197, 94, .8);
}

/* Footer Contact Info */
.footer-contact p {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .45rem 0;
    color: #e5e7eb;
    transition: color .3s ease
}

.footer-contact p i {
    color: #16a34a;
    background: rgba(22, 163, 74, .12);
    border-radius: 10px;
    font-size: 1rem;
    padding: .5rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .15);
    transition: all .3s ease
}

footer .footer-contact p:hover {
    color: #fff
}

footer .footer-contact p:hover i {
    color: #fff;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 0 14px rgba(34, 197, 94, .55), inset 0 0 0 1px rgba(255, 255, 255, .25);
    transform: translateY(-2px) scale(1.07)
}

.footer-contact a {
    color: inherit;
    text-decoration: none
}

.footer-contact a:hover {
    color: #22c55e
}

/* Footer Social Links */
footer .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(44, 166, 111, 0.12);
    color: #d1d5db;
    font-size: 1.1rem;
    box-shadow: inset 0 0 0 1px rgba(44, 166, 111, 0.15);
    transition: all 0.35s ease;
    text-decoration: none; 
}

footer .social-links a:hover {
    color: #fff;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow:
        0 0 18px rgba(44, 166, 111, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    transform: translateY(-4px) scale(1.08);
}

footer .social-links a:active {
    transform: scale(0.96);
}

footer .social-links a:focus-visible {
    outline: 2px solid rgba(34, 197, 94, .8);
    outline-offset: 3px;
    box-shadow: 0 0 10px rgba(34, 197, 94, .5);
}

/* Footer Bottom Row */
.footer-bottom {
    color: #cbd5e1;
    font-size: .9rem
}

.footer-bottom .footer-left {
    color: #cbd5e1;
}

.footer-links a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color .25s ease, transform .25s ease
}

.footer-links a:hover {
    color: var(--p500);
    transform: translateY(-2px)
}

.footer-links .separator {
    opacity: .45
}

.back-to-top i {
    font-size: .85rem
}

.back-to-top:hover i {
    transform: translateY(-2px);
    transition: transform .2s ease
}

.footer-contact a:focus-visible,
.footer-links a:focus-visible,
footer .social-links a:focus-visible {
    outline: 2px solid rgba(34, 197, 94, .8);
    outline-offset: 3px;
    border-radius: 10px
}

/* ========================================================= */
/* MEDIA QUERIES */
/* ========================================================= */

/* Mobile Navigation (Applies below 992px) */
@media (max-width: 991.98px) {
    #navMenu {
        position: absolute;
        width: 100%;
        background: var(--paper); 
        z-index: 1020; 
        left: 0;
        top: 100%; 
        border-bottom: 1px solid var(--cloud);
        padding: 1rem 0;
    }
    #mainNav .navbar-nav {
        /* Center links */
        align-items: center !important; 
        text-align: center;
        width: 100%;
    }
    #mainNav .nav-item {
        width: 100%;
    }
    #mainNav .nav-link {
        margin: 0; 
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    #mainNav .nav-link::after {
        content: none;
    }
    #mainNav .nav-item:last-child {
        margin-top: 1rem !important;
    }
    #mainNav .nav-item:last-child .btn {
        width: 90%; 
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }
}