@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/plusjakartasans-200.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/plusjakartasans-300.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plusjakartasans-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plusjakartasans-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plusjakartasans-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/plusjakartasans-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/plusjakartasans-800.ttf') format('truetype');
}

html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100%;
}

* { 
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; 
}

/* Premium Light-Weight Headings Styling */
h1, h2, h3, h4, h5, h6, .heading-font {
    font-weight: 300 !important;
    letter-spacing: -0.025em !important;
}

p {
    color: #000000 !important; /* Pure black for maximum readability */
    font-size: 0.975rem !important; /* Unified standard body font size */
    line-height: 1.7 !important; /* Comfortable, highly legible line height */
    font-weight: 400 !important;
}

/* Exception for Lead/Hero Subtitle Paragraphs to maintain visual balance */
p.lead, p.hero-lead, .hero p, .text-lg, .text-xl, .text-2xl {
    font-size: 1.125rem !important;
    line-height: 1.6 !important;
    color: #000000 !important;
}

/* Exception for Small/Micro Text, Metadata, and Footers */
p.text-xs, p.text-sm, .metadata p, .caption {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    color: #1e293b !important; /* Dark Slate-800 for readability on light bg */
}

.text-xs {
    font-size: 0.75rem !important;
}

.text-sm {
    font-size: 0.875rem !important;
}

/* Ensure paragraph visibility on dark background elements */
.glass-dark p, .glass-dark span,
.bg-\[\#0b1120\] p, .bg-\[\#0b1120\] span,
.bg-[#0b1120] p, .bg-[#0b1120] span,
.bg-dark-950 p, .bg-dark-950 span, 
.mobile-menu p, .mobile-menu span,
.text-slate-400, .text-slate-350 {
    color: #cbd5e1 !important; /* Readable light-grey on dark backgrounds */
}

/* Redesigned Footer Specific Typographies and Transitions */
footer p, footer p.text-sm, footer p.text-xs, footer p.text-slate-400 {
    color: #cbd5e1 !important; /* Crisp, highly readable light-grey on dark background */
}

.footer-link {
    color: #cbd5e1 !important; /* Crisp, readable light-grey */
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.footer-link:hover {
    color: #ffffff !important; /* Pure white on hover */
    transform: translateX(4px);
}

footer h4 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.glass-dark h3, .mobile-menu h4 {
    color: #ffffff !important;
}

/* Interactive Workflow Stepper Styles */
.workflow-step-btn.active-step {
    border-color: rgba(21, 46, 97, 0.25) !important;
    background: linear-gradient(135deg, rgba(21, 46, 97, 0.03) 0%, rgba(151, 29, 31, 0.03) 100%) !important;
    box-shadow: 0 10px 30px -10px rgba(21, 46, 97, 0.08);
}

.workflow-step-btn.active-step .step-num {
    background: linear-gradient(135deg, #152e61 0%, #971d1f 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(21, 46, 97, 0.25);
}

.workflow-step-btn.active-step .step-title {
    color: #152e61 !important;
}

.workflow-slide {
    animation: workflowSlideFade 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes workflowSlideFade {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Light Theme Overrides */
body {
    background-color: #ffffff !important;
    color: #0f172a;
}

.bg-dark-950 {
    background-color: #ffffff !important;
}

.bg-dark-900 {
    background-color: #f8fafc !important; /* Light slate bg */
}

.bg-dark-800 {
    background-color: #f1f5f9 !important;
}

.border-dark-800, .border-dark-800\/50, .border-dark-700\/50 {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

.text-dark-300, .text-dark-400 {
    color: #334155 !important; /* Darker slate for readability on white */
}

/* Ensure text on colored/dark accents stays readable (like gradients/buttons) */
.gradient-bg, .gradient-bg * {
    color: #ffffff !important;
}

.cta-button, a.gradient-bg, button.gradient-bg {
    color: #ffffff !important;
}

/* Glassmorphism elements adapted for white background */
.glass {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.1) !important;
    color: #0f172a !important;
}

.glass-light {
    background: rgba(248, 250, 252, 0.6) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(21, 46, 97, 0.08) !important;
    color: #0f172a !important;
}

.glass-light * {
    color: #334155 !important;
}

/* Tab contents and toggle buttons */
.platform-tab {
    background: rgba(21, 46, 97, 0.05) !important;
    color: #475569 !important;
    border: 1px solid rgba(21, 46, 97, 0.08) !important;
}
.platform-tab:hover {
    background: rgba(21, 46, 97, 0.1) !important;
    color: #152e61 !important;
}
.platform-tab.active {
    background: linear-gradient(135deg, #152e61, #971d1f) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 15px rgba(21, 46, 97, 0.15);
}

/* Original Transitions and Animations */
.gradient-text {
    background: linear-gradient(135deg, #152e61 0%, #971d1f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-bg {
    background: linear-gradient(135deg, #152e61 0%, #1e4796 100%);
}

.gradient-border {
    border-image: linear-gradient(135deg, #152e61, #971d1f) 1;
}

.card-hover {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(21, 46, 97, 0.08);
    border-color: rgba(21, 46, 97, 0.15);
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.pulse-dot {
    animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

.grid-bg {
    background-image:
        linear-gradient(rgba(21, 46, 97, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 46, 97, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.08; /* Lowered opacity for white theme */
    pointer-events: none;
}

.stat-counter {
    font-variant-numeric: tabular-nums;
}

.nav-blur {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(16px);
}

.pricing-popular {
    background: linear-gradient(135deg, rgba(21, 46, 97, 0.05), rgba(16, 185, 129, 0.05)) !important;
    border: 1px solid rgba(21, 46, 97, 0.15) !important;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

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

.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background: #ffffff !important;
    border-left: 1px solid rgba(15, 23, 42, 0.08) !important;
}
.mobile-menu.active {
    transform: translateX(0);
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f8fafc;
}
::-webkit-scrollbar-thumb {
    background: #152e61;
    border-radius: 4px;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ensure navbar items are readable */
#navbar a {
    color: #334155 !important;
}
#navbar a:hover {
    color: #971d1f !important;
}
#navbar a.gradient-bg:hover {
    color: #ffffff !important;
}
#navbar .gradient-bg {
    color: #ffffff !important;
}

/* SVGs and Icons contrast correction */
svg, i {
    stroke: currentColor;
}
.text-white svg {
    stroke: #ffffff !important;
}

/* Logo Image constraints */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 48px !important;
    width: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
}

/* Explicit stroke colors for Lucide Icons on White Background */
.lucide-activity {
    stroke: #152e61 !important;
}
.lucide-brain {
    stroke: #10b981 !important;
}
.lucide-layers {
    stroke: #d97706 !important; /* Amber/Yellow-600 */
}
.lucide-shield {
    stroke: #db2777 !important; /* Pink-600 */
}
.lucide-git-branch {
    stroke: #0891b2 !important; /* Cyan-600 */
}
.lucide-gauge {
    stroke: #ea580c !important; /* Orange-600 */
}
.lucide-sparkles {
    stroke: #152e61 !important;
}
.lucide-briefcase {
    stroke: #10b981 !important;
}

.lucide-menu, .lucide-x {
    stroke: #0f172a !important; /* Dark menu icons */
}

/* Infinite Scrolling Testimonials Marquee */
.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    cursor: grab;
}

.marquee-content {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: scrollMarquee 40s linear infinite;
}

.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.testimonial-card-marquee {
    width: 350px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Nav Link Sliding Underline Animation */
.nav-item-animated::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #152e61; /* Logo Blue */
    transition: width 0.3s ease;
}

.nav-item-animated:hover::after {
    width: 100%;
}

.nav-item-animated {
    display: inline-block;
    position: relative;
    color: #334155 !important;
}

.nav-item-animated:hover {
    color: #152e61 !important;
}

/* Header Squeeze & Layout Styles */
.nav-container-height {
    height: 76px;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-img {
    height: 20px;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#navbar.navbar-squeezed {
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px);
    border-bottom-color: rgba(15, 23, 42, 0.05) !important;
}

#navbar.navbar-squeezed .nav-container-height {
    height: 56px;
}

#navbar.navbar-squeezed .logo-img {
    height: 15px;
}

/* Force social media icons display and color visibility */
.lucide-twitter, .lucide-linkedin, .lucide-github {
    stroke: #152e61 !important; /* Force Logo Blue */
    display: inline-block !important;
    vertical-align: middle;
}

/* Tab switching fade-in slide-up animation */
.tab-content {
    opacity: 0;
    transform: scale(0.985) translateY(6px);
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.tab-content.active-content {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Logo Infinite Scrolling Marquee */
.logo-marquee-content {
    display: flex;
    gap: 64px;
    width: max-content;
    animation: scrollMarquee 25s linear infinite;
}

.logo-marquee-content:hover {
    animation-play-state: paused;
}

/* Hide scrollbar utility class */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Interactive Ecosystem Styling */
.pulse-line {
    stroke-dasharray: 8, 8;
    animation: dashFlow 1.5s linear infinite;
    transition: stroke 0.3s ease, stroke-width 0.3s ease;
}

@keyframes dashFlow {
    to {
        stroke-dashoffset: -24;
    }
}

.ecosystem-node {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ecosystem-node.active-node {
    transform: scale(1.1) translateY(-2px);
    border-color: #152e61 !important;
    box-shadow: 0 20px 25px -5px rgba(21, 46, 97, 0.15), 0 0 15px rgba(21, 46, 97, 0.15);
}

.ecosystem-node.active-node-accent {
    transform: scale(1.1) translateY(-2px);
    border-color: #971d1f !important;
    box-shadow: 0 20px 25px -5px rgba(151, 29, 31, 0.15), 0 0 15px rgba(151, 29, 31, 0.15);
}

.ecosystem-list-item {
    transition: all 0.3s ease;
}

.ecosystem-list-item:hover {
    background: rgba(21, 46, 97, 0.02);
}

/* Dark Theme Text Visibility Overrides */
.bg-slate-950 p,
.bg-slate-900 p,
.bg-\[\#0b1120\] p,
.glass-dark p,
.bg-slate-950 .workflow-slide p {
    color: rgba(255, 255, 255, 0.75) !important;
}

.bg-slate-950 .stat-counter,
.bg-slate-900 .stat-counter,
.glass-dark .stat-counter {
    color: #ffffff !important;
}

.bg-slate-950 .workflow-slide p.text-xs {
    color: rgba(255, 255, 255, 0.45) !important;
}

.bg-slate-950 .workflow-step-btn .step-title {
    color: rgba(255, 255, 255, 0.85) !important;
}

.bg-slate-950 .workflow-step-btn:not(.active-step) .step-title {
    color: rgba(255, 255, 255, 0.5) !important;
}

.bg-slate-950 .workflow-step-btn.active-step .step-title {
    color: #ffffff !important;
}

.bg-slate-950 .workflow-step-btn.active-step {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(30, 41, 59, 0.4) !important;
}

/* Footer Social Icons Neon Glow Styling */
.social-icon-glow {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px);
}
.social-icon-glow:hover {
    transform: translateY(-4px) !important;
    color: #ffffff !important;
}
.social-icon-glow:hover svg {
    stroke: #ffffff !important;
}
.social-icon-glow.fb {
    border: 1px solid rgba(24, 119, 242, 0.3) !important;
    color: rgba(24, 119, 242, 0.85) !important;
    box-shadow: 0 0 10px rgba(24, 119, 242, 0.15) !important;
}
.social-icon-glow.fb:hover {
    background-color: #1877f2 !important;
    border-color: #1877f2 !important;
    box-shadow: 0 0 20px rgba(24, 119, 242, 0.9) !important;
}
.social-icon-glow.ln {
    border: 1px solid rgba(10, 102, 194, 0.3) !important;
    color: rgba(10, 102, 194, 0.85) !important;
    box-shadow: 0 0 10px rgba(10, 102, 194, 0.15) !important;
}
.social-icon-glow.ln:hover {
    background-color: #0a66c2 !important;
    border-color: #0a66c2 !important;
    box-shadow: 0 0 20px rgba(10, 102, 194, 0.9) !important;
}
.social-icon-glow.wa {
    border: 1px solid rgba(37, 211, 102, 0.3) !important;
    color: rgba(37, 211, 102, 0.85) !important;
    box-shadow: 0 0 10px rgba(37, 211, 102, 0.15) !important;
}
.social-icon-glow.wa:hover {
    background-color: #25d366 !important;
    border-color: #25d366 !important;
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.9) !important;
}
.social-icon-glow.yt {
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
    color: rgba(255, 0, 0, 0.85) !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.15) !important;
}
.social-icon-glow.yt:hover {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.9) !important;
}
.social-icon-glow.mail {
    border: 1px solid rgba(234, 67, 53, 0.3) !important;
    color: rgba(234, 67, 53, 0.85) !important;
    box-shadow: 0 0 10px rgba(234, 67, 53, 0.15) !important;
}
.social-icon-glow.mail:hover {
    background-color: #ea4335 !important;
    border-color: #ea4335 !important;
    box-shadow: 0 0 20px rgba(234, 67, 53, 0.9) !important;
}