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

html {
    /* Enables soft smooth scrolling for anchor links */
    scroll-behavior: smooth;
    
    /* Enables vertical scroll snapping (Soft/Proximity version) */
    scroll-snap-type: y proximity;
    
    /* Offsets the snap point so the Fixed Navbar (approx 80-100px) doesn't cover content */
    scroll-padding-top: 100px;
}

:root {
    /* New Premium Palette */
    --klaro-primary: #10B981;       /* Mint Tech Green */
    --klaro-primary-dark: #047857;  /* Deep Green */
    --klaro-accent: #064E3B;        /* Forest Green */
    --klaro-bg: #FAFAF9;            /* Warm Off-White */
    --klaro-surface: #FFFFFF;       /* Pure White */
    --klaro-danger: #FB7185;        /* Soft Coral */
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-glow: 0 0 40px -10px rgba(16, 185, 129, 0.2);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #4B5563;
    background-color: var(--klaro-bg);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    color: var(--klaro-accent);
    letter-spacing: -0.03em;
    font-weight: 800;
}

.navbar {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 1rem 0;
}

.navbar-brand {
    color: var(--klaro-primary) !important;
    font-size: 1.8rem;
}

.nav-link {
    font-weight: 500;
    color: var(--klaro-dark) !important;
}

.nav-link.active, .nav-link:hover {
    color: var(--klaro-primary) !important;
}

/* Modern Buttons */
.btn { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.btn:hover { transform: translateY(-2px); }
.btn-primary {
    background-color: var(--klaro-primary);
    border: none;
    box-shadow: var(--shadow-glow);
}

.btn-outline-light {
    color: #fff;
    border-color: #fff;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: #fff;
    color: var(--klaro-primary);
}

#hero {
    padding-top: 120px; /* Adjust for fixed navbar */
    padding-bottom: 80px;
    background-image: linear-gradient(135deg, var(--klaro-secondary) 0%, rgba(255,255,255,0) 100%);
}

#hero .display-3 {
    color: var(--klaro-primary);
}

section {
    padding-top: 80px;
    padding-bottom: 80px;
    /* Tells the browser to snap the top of this element to the top of the viewport */
    scroll-snap-align: start;
}

section:nth-child(even) {
    background-color: var(--klaro-light);
}

.list-unstyled li {
    padding-left: 0;
    margin-bottom: 0.5rem;
}

.list-unstyled li i {
    font-size: 1.2rem;
    vertical-align: middle;
}

.text-primary {
    color: var(--klaro-primary) !important;
}

.bg-primary {
    background-color: var(--klaro-primary) !important;
}

.bi-x-circle-fill {
    color: var(--klaro-danger) !important;
}

footer {
    background-color: var(--klaro-dark) !important;
    color: #fff !important;
}

.hero-glass-mockup {
    transform: perspective(1000px) rotateY(-10deg) rotateX(5deg);
    box-shadow: 
        20px 20px 60px rgba(0,0,0,0.1), /* Soft shadow */
        -5px -5px 20px rgba(255,255,255,0.5); /* Highlight */
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 24px;
    transition: transform 0.5s ease;
}

.hero-glass-mockup:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg); /* Flattens on hover */
}

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}
 @media (min-width: 992px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
        .span-2 { grid-column: span 2; }
    }
}
.bento-card {
    background-color: #F8FAFC; /* Light gray instead of white */
    border: 1px solid #E2E8F0; /* Subtle border */
    padding: 2.5rem;
    border-radius: 24px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}
.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--klaro-primary);
}
.icon-box {
    width: 60px; height: 60px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
}
.bg-green-soft { background: #ECFDF5; }
.bg-orange-soft { background: #FFF7ED; } /* Added missing class */
.bg-blue-soft { background: #EFF6FF; } /* Added missing class */

/* Dark Problem Section */
#the-problem {
    background-color: #111827;
    color: #F3F4F6;
    position: relative;
}
#the-problem h2 { color: #FFFFFF; }
#the-problem .lead { color: #9CA3AF; }
.problem-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 87, 87, 0.2);
    padding: 16px 24px;
    border-radius: 12px;
    margin-bottom: 12px;
    
    /* THE FIX: Flexbox Alignment */
    display: flex;
    align-items: center; /* Forces vertical centering */
    gap: 16px; /* Space between icon and text */
    transition: all 0.2s ease;

    /* 1. Fix the "Jagged" look on dark backgrounds */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* 2. Make text slightly thicker (Readable) */
    font-weight: 500; 
    
    /* 3. Use Off-White (Pure white causes visual blurry 'bleeding') */
    color: #F3F4F6;
}

.problem-item:hover {
    background: rgba(255, 87, 87, 0.1); /* Glow red on hover */
    border-color: rgba(255, 87, 87, 0.5);
    transform: translateX(5px);
}

/* Add this NEW rule to fix the icon specifically */
.problem-item i {
    font-size: 1.5rem; /* Make it slightly larger */
    line-height: 1;    /* Removes invisible font spacing */
    display: flex;     /* Removes baseline alignment quirks */
    flex-shrink: 0;    /* Prevents icon from squishing on mobile */
    color: #FB7185;    /* Ensure it uses your Coral/Red variable */
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(135deg, #047857 0%, #10B981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Feature Pill Badge */
.feature-pill {
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 600; color: #064E3B;
    transition: transform 0.2s ease;
}
.feature-pill:hover { transform: translateY(-3px); border-color: #10B981; }
.feature-pill i { color: #10B981; background: #ECFDF5; padding: 6px; border-radius: 50%; }

/* Vision Cards Grid */
.vision-card {
    background: white; padding: 2rem; border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.05); height: 100%; transition: all 0.3s ease;
}
.vision-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); border-color: #10B981; }
.vision-icon-wrapper {
    width: 50px; height: 50px; background: #ECFDF5; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; color: #10B981;
    font-size: 1.25rem; margin-bottom: 1.5rem;
}

/* Values Strip */
.values-strip {
    background: #064E3B; color: white; border-radius: 24px; padding: 3rem; margin-top: 4rem;
}

/* Premium Footer */
#join-waitlist {
    background: linear-gradient(135deg, #064E3B 0%, #065f46 100%);
    position: relative; overflow: hidden;
}

/* 3D Product Demo Section Styles */
.video-perspective-wrapper { perspective: 2000px; padding: 2rem 0; position: relative; max-width: 900px; margin: 0 auto; }
.mac-browser-frame { background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.08); transform: rotateX(2deg); box-shadow: 0 40px 80px -20px rgba(0,0,0,0.15); overflow: hidden; transition: all 0.5s ease; position: relative; z-index: 10; }
.mac-browser-frame:hover { transform: rotateX(0deg) translateY(-10px); box-shadow: 0 60px 100px -20px rgba(16, 185, 129, 0.2); }
.browser-header { background: #f3f4f6; padding: 12px 20px; display: flex; align-items: center; border-bottom: 1px solid #e5e7eb; }
.window-controls { display: flex; gap: 8px; margin-right: 20px; }
.control { width: 12px; height: 12px; border-radius: 50%; }
.control.red { background: #ef4444; } .control.yellow { background: #f59e0b; } .control.green { background: #10b981; }
.address-bar { background: #fff; flex-grow: 1; border-radius: 6px; padding: 4px 0; text-align: center; font-family: monospace; color: #6b7280; border: 1px solid #e5e7eb; }


.video-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(255,255,255,0) 70%); filter: blur(60px); z-index: 0; }

.video-mask {
    overflow: hidden;
    background: #000;
    border-radius: 0 0 16px 16px; /* Matches the frame corners */
}

/* Accessibility and Responsiveness for Demo */
@media (prefers-reduced-motion: reduce) {
  .mac-browser-frame {
    animation: none;
    transition: none;
  }
  .mac-browser-frame:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  .video-perspective-wrapper {
    perspective: none;
  }
  .mac-browser-frame {
    transform: none; /* Flatten the component on mobile */
  }
  .mac-browser-frame:hover {
    transform: translateY(-5px); /* Keep a simpler hover effect */
  }
}