@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.h-56 {
    height: 19rem !important;
}

.h-48 {
    height: 19rem !important;
}

/* Shimmer Animation for CTA */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.shimmer-btn {
    position: relative;
    overflow: hidden;
}

.shimmer-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 2.5s infinite;
}

/* Pulse for Nav CTA (Updated to Amber/Orange Industrial Tone) */
@keyframes pulse-amber {
    0% {
        box-shadow: 0 0 0 0 rgb(28 162 158);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(217, 119, 6, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);
    }
}

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

/* Restored Missing Animations */
.animate-marquee {
    display: flex;
    animation: marquee 40s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

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

.gradient-text {
    background: linear-gradient(135deg, #1AA29E 0%, #1AA29E 50%, #5ce1e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: textShine 4s linear infinite;
}

@keyframes textShine {
    to {
        background-position: 200% center;
    }
}

.dark .gradient-text {
    background: linear-gradient(135deg, #1AA29E 0%, #1AA29E 50%, #5ce1e6 100%)
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: textShine 4s linear infinite;
}

.spin-slow {
    animation: spin 20s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.bounce-subtle {
    animation: bounce-subtle 4s ease-in-out infinite;
}

@keyframes bounce-subtle {

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

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

/* Refined Nav Styles */
.nav-island {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Forces transparent background when at the top (un-scrolled) */
.nav-island:not(.scrolled-nav) {
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Premium Glassmorphism Pill (Active when scrolled) */
.scrolled-nav {
    margin-top: 1.25rem !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 9999px !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    background: rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(217, 119, 6, 0.15) !important;
    /* Overrides any conflicting bottom-rounded tailwind classes */
    border-bottom-left-radius: 9999px !important;
    border-bottom-right-radius: 9999px !important;
}

.dark .scrolled-nav {
    background: rgba(15, 23, 42, 0.65) !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.nav-link {
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
    cursor: pointer;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #d97706;
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.nav-link:hover::before {
    width: 100%;
}

.nav-link:hover {
    color: #d97706;
}

/* Mobile Bottom Nav Styles */
.bottom-nav-item.active {
    color: #d97706;
}

.bottom-nav-item.active i {
    fill: rgba(217, 119, 6, 0.1);
    transform: translateY(-2px);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

/* FAQ Accordion Styling */
.faq-item.active .faq-answer {
    max-height: 300px;
    opacity: 1;
    margin-top: 1rem;
}

.faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-chevron {
    transition: transform 0.4s ease;
}

.faq-item.active .faq-chevron {
    transform: rotate(180deg);
}

/* Blueprint & Visual Effects */
.blueprint-bg {
    background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px);
    background-size: 40px 40px;
}

.dark .blueprint-bg {
    background-image: radial-gradient(#334155 1.2px, transparent 1.2px);
}

/* Restored Visual Scanners & Floating Items */
.scanner-line {
    height: 100%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, #d97706, transparent);
    position: absolute;
    left: 0;
    animation: scan 4s linear infinite;
}

@keyframes scan {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

.floating-molecule {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

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

.max-w-7xl {
    max-width: 99rem !important;
}

/* Modal Styles */
#survey-modal {
    transition: visibility 0.3s linear;
}

#survey-modal.hidden {
    visibility: hidden;
}

#survey-modal:not(.hidden) {
    visibility: visible;
}

/* Glassmorphism Classes */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glass-card {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Filter Tab Active Style */
.filter-btn {
    transition: all 0.3s ease;
}

.filter-btn.filter-active {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.3) !important;
}

/* =========================================
   Mobile-Only Adjustments 
   ========================================= */
@media (max-width: 768px) {
    /* Prevents the float chat from mixing with the bottom navigation */
    .crinfly-float-chat-wrapper, 
    #crinfly-float-chat-wrapper {
        padding-bottom: 60px !important;
    }

    /* Positions the theme toggle button above the float chat widget */
    .theme-toggle,
    #theme-toggle {
        bottom: 140px !important; 
        z-index: 50;
    }

    /* PREVENT MOBILE ZOOM ON INPUT FOCUS */
    input, 
    textarea, 
    select {
        font-size: 16px !important;
    }

    /* Prevent layout clutter / horizontal scroll on mobile */
    body, 
    html {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Keep float chat perfectly contained within the mobile screen limits */
    #float-chat-window {
        max-width: calc(100vw - 2rem) !important;
    }
}

/* =========================================
   Mapped Elements from New Styling
   ========================================= */

@keyframes pulse-emerald {
    0%   { box-shadow: 0 0 0 0 rgba(5,150,105,0.4); }
    70%  { box-shadow: 0 0 0 15px rgba(5,150,105,0); }
    100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
}

/* TOC sidebar */
.toc-link {
    display: block; padding: 0.5rem 0.75rem;
    border-left: 2px solid transparent;
    font-size: 0.78rem; font-weight: 600;
    color: #64748b; transition: all 0.2s;
    border-radius: 0 0.5rem 0.5rem 0;
    line-height: 1.4;
}
.toc-link:hover { color: #059669; border-left-color: #059669; background: rgba(5,150,105,0.05); }
.toc-link.active { color: #059669; border-left-color: #059669; background: rgba(5,150,105,0.08); font-weight: 700; }
.dark .toc-link { color: #94a3b8; }
.dark .toc-link:hover, .dark .toc-link.active { color: #34d399; border-left-color: #34d399; background: rgba(52,211,153,0.08); }

/* Policy prose */
.policy-section { scroll-margin-top: 6rem; }

/* Force text-justify on policy paragraphs */
.policy-body p { 
    color: #475569; 
    line-height: 1.8; 
    margin-bottom: 1rem; 
    font-size: 0.9375rem; 
    text-align: justify;
    text-justify: inter-word;
}
.dark .policy-body p { color: #94a3b8; }
.policy-body ul { margin-bottom: 1rem; padding-left: 0; list-style: none; }
.policy-body ul li {
    position: relative; padding-left: 1.25rem;
    color: #475569; font-size: 0.9375rem; line-height: 1.8; margin-bottom: 0.25rem;
}
.dark .policy-body ul li { color: #94a3b8; }
.policy-body ul li::before {
    content: ''; position: absolute; left: 0; top: 0.65rem;
    width: 5px; height: 5px; border-radius: 50%; background: #059669;
}
.policy-body a { color: #059669; text-decoration: underline; text-decoration-style: dotted; }
.policy-body a:hover { text-decoration-style: solid; }

/* Section divider line */
.section-rule { border: none; border-top: 1px solid #e2e8f0; margin: 2.5rem 0; }
.dark .section-rule { border-top-color: #1e293b; }

/* Premium Sequenced Animation: Pulse -> Right-To-Left Glass Sweep */
@keyframes crisp-pulse {
    0%, 60%, 100% { transform: scale(1); }
    10% { transform: scale(1.05); } 
    20% { transform: scale(1); }    
}

@keyframes rtl-glass-sweep {
    0%, 15% { left: 150%; opacity: 0; } 
    20% { opacity: 1; }
    45% { left: -100%; opacity: 1; } 
    50%, 100% { left: -100%; opacity: 0; }
}

.logo-pulse-seq {
    animation: crisp-pulse 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.logo-glass-seq {
    animation: rtl-glass-sweep 4s ease-in-out infinite;
}

.logo-scrolled {
    height: 50px !important;
}

/* =========================================
   Blog Article Customizations
   ========================================= */

#reading-progress {
    width: 0%;
    transition: width 0.1s;
}

/* Blog body links */
.article-content a {
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
    text-decoration: underline;
    text-underline-offset: 4px; 
    font-weight: 600;
    transition: opacity 0.3s ease;
}

.article-content a:hover {
    opacity: 0.8;
}

.dark .article-content a {
    color: rgb(52 211 153 / var(--tw-text-opacity, 1)); 
}

/* Article Typography Customization */
.article-content h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 800;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: #0f172a;
}
.dark .article-content h2 { color: #f8fafc; }

.article-content h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #1e293b;
}
.dark .article-content h3 { color: #e2e8f0; }

/* Enforcing text-justify for standard paragraph flow */
.article-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    font-size: 1.125rem;
    color: #475569;
    text-align: justify;
    text-justify: inter-word;
}
.dark .article-content p { color: #94a3b8; }

.article-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    color: #475569;
}
.dark .article-content ul { color: #94a3b8; }

/* Enforcing text justify for lists too */
.article-content li { 
    margin-bottom: 0.5rem; 
    text-align: justify;
}

.article-content blockquote {
    border-left: 4px solid #059669;
    margin: 2rem 0;
    font-style: italic;
    font-size: 1.25rem;
    color: #334155;
    background: rgba(5, 150, 105, 0.05);
    padding: 1.5rem;
    border-radius: 0 1rem 1rem 0;
}
.dark .article-content blockquote {
    color: #cbd5e1;
    background: rgba(5, 150, 105, 0.1);
}

.article-content img {
    border-radius: 1.5rem;
    margin: 2rem 0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Code block styling */
.article-content code {
    font-family: 'JetBrains Mono', monospace;
    background-color: #f1f5f9;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    color: #0f172a;
}

.dark .article-content code {
    background-color: #1e293b;
    color: #e2e8f0;
}

/* --- Enhanced Table of Contents (Added) --- */
.toc-wrapper {
    background: rgba(248, 250, 252, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.05);
}

.dark .toc-wrapper {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(30, 41, 59, 0.8);
    box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.4);
}

.toc-beautiful-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.toc-beautiful-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(5, 150, 105, 0.08), transparent);
    transition: width 0.4s ease;
    z-index: 0;
}

.toc-beautiful-link:hover::before, .toc-beautiful-link.active::before {
    width: 100%;
}

.toc-beautiful-link:hover, .toc-beautiful-link.active {
    color: #059669;
    transform: translateX(6px);
}

.dark .toc-beautiful-link { color: #94a3b8; }
.dark .toc-beautiful-link::before { background: linear-gradient(90deg, rgba(52, 211, 153, 0.12), transparent); }
.dark .toc-beautiful-link:hover, .dark .toc-beautiful-link.active { color: #34d399; }

.toc-dot {
    width: 6px;
    height: 6px;
    background-color: #cbd5e1;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.toc-beautiful-link:hover .toc-dot, .toc-beautiful-link.active .toc-dot {
    background-color: #059669;
    box-shadow: 0 0 10px rgba(5, 150, 105, 0.6);
    transform: scale(1.5);
}

.dark .toc-beautiful-link:hover .toc-dot, .dark .toc-beautiful-link.active .toc-dot {
    background-color: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.6);
}

.toc-text {
    position: relative;
    z-index: 1;
    line-height: 1.4;
}