/* Alpine.js Cloak - Prevents flash of unstyled content */
[x-cloak] {
    display: none !important;
}

/* Standard Section Padding Class - Use this for all main content sections */
/* Ensure all sections respect z-index hierarchy */
section {
    position: relative;
    z-index: 1; /* Lower than navigation */
}

.section-padding {
    padding: 20px 16px; /* Mobile: py-5 px-4 */
}

@media (min-width: 640px) {
    .section-padding {
        padding: 32px 24px; /* Small: py-8 px-6 */
    }
}

@media (min-width: 768px) {
    .section-padding {
        padding: 40px 48px; /* Medium: py-10 px-12 */
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding: 48px 96px; /* Large: py-12 px-24 */
    }
}

@media (min-width: 1280px) {
    .section-padding {
        padding: 50px 150px; /* XL: py-[50px] px-[150px] */
    }
}

/* ==========================================
   MOBILE RESPONSIVE STYLES (375px viewport)
   ========================================== */

/* Mobile Typography Overrides (375px viewport) */
@media (max-width: 639px) {
    .h1-style {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    .h2-style {
        font-size: 25px !important;
        line-height: 1.3 !important;
    }
    
    .h3-style {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }
    
    .h4-style {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    
    .h5-style {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
    
    .h6-style {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    .h7-style {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    .b1-style {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    .b2-style {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
    
    .b3-style {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
}
/* 1. Root Variables */
:root {
    /* Primary Colors */
    --claryx-blue: #1D4EFF;
    --accent-1: #E8F1FF;
    --accent-2: #D3E2F9;

    /* Text Colors */
    --primary-text: #333333;
    --body-text: #525252;
    --secondary-text: #919191;
    --white-text: #FFFFFF;

    /* Background Colors */
    --border: #D3D8E0;
    --grey-bg: #f9fafb;
    --grey-fill: #E6E9EB;
    --green-fill: #E8F3DB;

    /* Traffic Light Colors */
    --traffic-red: #EA6464;
    --traffic-yellow: #DDB30B;
    --traffic-green: #73AD2F;
}

/* 2. Base Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: var(--body-text);
    background-color: #f9fafb;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 3. Custom Component Styles */

/* Typography Classes - Matching UI Library */
.h1-style {
    font-size: 52px;
    font-weight: 600; /* Semibold */
    color: var(--primary-text);
    line-height: 1.2;
}

.h2-style {
    font-size: 46px;
    font-weight: 600; /* Semibold */
    color: var(--primary-text);
    line-height: 1.25 !important;
}

.h3-style {
    font-size: 32px;
    font-weight: 600; /* Semibold */
    color: var(--primary-text);
    line-height: 1.3;
}

.h4-style {
    font-size: 24px;
    font-weight: 600; /* Semibold */
    color: var(--primary-text);
    line-height: 1.4;
}

.h5-style {
    font-size: 18px;
    font-weight: 600; /* Semibold */
    color: var(--primary-text);
    line-height: 1.4;
}

.h6-style {
    font-size: 18px;
    font-weight: 400; /* Regular */
    color: var(--body-text);
    line-height: 1.4;
}

.h7-style {
    font-size: 16px;
    font-weight: 600; /* Semibold */
    color: var(--primary-text);
    line-height: 1.5;
}

.b1-style {
    font-size: 20px;
    font-weight: 500; /* Medium */
    color: var(--body-text);
    line-height: 1.5;
}

.b2-style {
    font-size: 16px;
    font-weight: 500; /* Medium */
    color: var(--body-text);
    line-height: 1.7;
}

.b3-style {
    font-size: 14px;
    font-weight: 400; /* Regular */
    color: var(--body-text);
    line-height: 1.5;
}

/* Navigation Styles */
nav {
    isolation: isolate; /* Create a new stacking context to ensure nav stays above all other content */
}

.nav-glass {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1),
                0 4px 16px 0 rgba(0, 0, 0, 0.08),
                0 2px 8px 0 rgba(0, 0, 0, 0.05),
                inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.nav-link {
    color: var(--body-text);
    font-size: 14px;
    font-weight: 500; /* Medium */
    padding: 8px 12px;
    transition: color 200ms ease-out;
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.nav-link::before,
.nav-link::after {
    content: none !important;
    display: none !important;
    border: none !important;
}

.nav-link:visited {
    color: var(--body-text);
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.nav-link:hover,
.nav-link:visited:hover {
    color: var(--claryx-blue);
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.nav-link:focus,
.nav-link:active {
    color: var(--body-text);
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.nav-link:hover::before,
.nav-link:hover::after,
.nav-link:focus::before,
.nav-link:focus::after,
.nav-link:active::before,
.nav-link:active::after {
    content: none !important;
    display: none !important;
    border: none !important;
}

/* Navigation Dropdown Styles */
.nav-dropdown-container {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -60px;  /* Half of approximate width - adjust as needed */
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease-out, visibility 200ms ease-out;
    z-index: 100;
    white-space: nowrap;
    padding: 4px 0;
    border-radius: 12px;
    /* Glassmorphic background - matching nav-glass exactly */
    background: rgba(255, 255, 255, 0.3);  /* 30% white opacity for translucency */
    -webkit-backdrop-filter: blur(20px);   /* 20px blur for frosted glass */
    backdrop-filter: blur(20px);           /* 20px blur for frosted glass */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1),
                0 4px 16px 0 rgba(0, 0, 0, 0.08),
                0 2px 8px 0 rgba(0, 0, 0, 0.05),
                inset 0 0 0 1px rgba(255, 255, 255, 0.1);  /* Multiple shadow layers */
}

.nav-dropdown-container:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--body-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 200ms ease-out;
    border-bottom: 1px solid var(--border);
}

.nav-dropdown-item:last-child {
    border-bottom: none;
}

/* Icon styles */
.nav-dropdown-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.nav-dropdown-icon.icon-white {
    display: block;
}

.nav-dropdown-icon.icon-blue {
    display: none;
}

.nav-dropdown-item:hover .icon-white {
    display: none;
}

.nav-dropdown-item:hover .icon-blue {
    display: block;
}

.nav-dropdown-item:hover {
    color: var(--claryx-blue);
}

.nav-dropdown-item:visited {
    color: var(--body-text);
}

.nav-dropdown-item:visited:hover {
    color: var(--claryx-blue);
}

/* Button Styles - Responsive */
.btn-base {
    border-radius: 9999px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 200ms ease-out;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    outline: none;
}

.btn-base:focus-visible {
    outline: 2px solid var(--claryx-blue);
    outline-offset: 2px;
}

.btn-primary {
    background-color: var(--claryx-blue);
    color: white;
    border: 2px solid var(--claryx-blue);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(29, 78, 255, 0.3);
    background-color: #1942d4;
}

.btn-secondary {
    background-color: white;
    color: var(--claryx-blue);
    border: 2px solid var(--claryx-blue);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    background-color: var(--accent-1);
    box-shadow: 0 4px 12px rgba(29, 78, 255, 0.15);
}

/* Glassmorphic container for feature grid */
.glass-container {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1),
                0 4px 16px 0 rgba(0, 0, 0, 0.08),
                0 2px 8px 0 rgba(0, 0, 0, 0.05),
                inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

/* Hero Section Background */
.hero-background {
    position: relative;
    background-color: #f9fafb;
    background-image: linear-gradient(120deg, rgba(240, 244, 255, 0.7) 0%, rgba(230, 239, 255, 0.7) 50%, rgba(212, 228, 255, 0.7) 100%);
    overflow: hidden;
}

.mesh-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    pointer-events: none;
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.4;
}

/* Responsive shape sizes */
@media (max-width: 768px) {
    .shape {
        filter: blur(30px);
    }
}

.shape1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 179, 237, 0.5) 0%, transparent 70%);
    top: -100px;
    left: -100px;
    animation: float 15s infinite ease-in-out;
}

.shape2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.4) 0%, transparent 70%);
    bottom: -150px;
    right: -150px;
    animation: float2 18s infinite ease-in-out;
    animation-delay: -5s;
}

.shape3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.4) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: float3 20s infinite ease-in-out;
    animation-delay: -10s;
}

.shape4 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(237, 99, 166, 0.3) 0%, transparent 70%);
    top: 30%;
    right: 10%;
    animation: float 22s infinite ease-in-out;
    animation-delay: -15s;
}

.shape5 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(99, 237, 179, 0.3) 0%, transparent 70%);
    bottom: 20%;
    left: 15%;
    animation: float2 25s infinite ease-in-out;
    animation-delay: -8s;
}

.shape6 {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(237, 179, 99, 0.35) 0%, transparent 70%);
    top: 60%;
    right: 30%;
    animation: pulse 4s infinite ease-in-out, float3 28s infinite ease-in-out;
    animation-delay: -3s;
}

@media (min-width: 768px) {
    .shape1 {
        width: 600px;
        height: 600px;
        top: -200px;
        left: -200px;
    }

    .shape2 {
        width: 800px;
        height: 800px;
        bottom: -300px;
        right: -300px;
    }

    .shape3 {
        width: 500px;
        height: 500px;
    }

    .shape4 {
        width: 400px;
        height: 400px;
    }

    .shape5 {
        width: 700px;
        height: 700px;
    }

    .shape6 {
        width: 360px;
        height: 360px;
    }
}

/* ENHANCED FLOATING ANIMATIONS - MORE VISIBLE MOVEMENT */
@keyframes float {
    0%, 100% {
        transform: translateX(0px) translateY(0px) scale(1) rotate(0deg);
    }
    20% {
        transform: translateX(60px) translateY(-80px) scale(1.15) rotate(10deg);
    }
    40% {
        transform: translateX(-40px) translateY(-120px) scale(0.9) rotate(-8deg);
    }
    60% {
        transform: translateX(-80px) translateY(40px) scale(1.1) rotate(5deg);
    }
    80% {
        transform: translateX(40px) translateY(80px) scale(0.95) rotate(-3deg);
    }
}

@keyframes float2 {
    0%, 100% {
        transform: translateX(0px) translateY(0px) scale(1) rotate(0deg);
    }
    25% {
        transform: translateX(-70px) translateY(60px) scale(1.2) rotate(-12deg);
    }
    50% {
        transform: translateX(50px) translateY(-100px) scale(0.85) rotate(8deg);
    }
    75% {
        transform: translateX(90px) translateY(30px) scale(1.12) rotate(-5deg);
    }
}

@keyframes float3 {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(-30%, -70%) scale(1.18) rotate(15deg);
    }
    66% {
        transform: translate(-70%, -30%) scale(0.88) rotate(-10deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.6;
    }
}

/* Feature Box - Responsive */
.feature-box {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 200ms ease-out;
    cursor: pointer;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Mobile and tablet: content-fit boxes */
@media (max-width: 1023px) {
    .feature-box {
        aspect-ratio: auto;
        min-height: auto;
    }
}

/* Desktop: maintain square aspect ratio */
@media (min-width: 1024px) {
    .feature-box {
        aspect-ratio: 1 / 1;
    }
}

.feature-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: rgba(29, 78, 255, 0.4);
}

/* Selected state for feature boxes */
.feature-box.selected {
    border: 1.5px solid var(--claryx-blue);
    box-shadow: 0 0 0 2px rgba(29, 78, 255, 0.08);
}

.feature-icon {
    color: var(--claryx-blue);
}

/* 4. Animation Keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 600ms ease-out;
}

.grid-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    pointer-events: none;
}

/* Rotating Text Animation - Vertical Slide (Slack-style) */
.rotating-text-container {
    display: inline-block;
    position: relative;
    vertical-align: text-bottom; /* Align with bottom of text */
    overflow: hidden; /* Keep hidden for animation to work */
    color: var(--claryx-blue);
    font-weight: 600;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
    width: auto; /* Allow dynamic width adjustment */
}

/* Responsive heights matching h1 line-height */
@media (max-width: 374px) {
    .rotating-text-container {
        height: 31px;
        line-height: 31px;
        margin-left: auto;
        margin-right: auto;
        display: block; /* Make it its own row */
        text-align: center;
        margin-top: 4px;
        margin-bottom: 4px;
    }
    
    .rotating-text-word {
        height: 31px;
        line-height: 31px;
    }
}

@media (min-width: 375px) and (max-width: 639px) {
    .rotating-text-container {
        height: 34px;
        line-height: 34px;
        margin-left: auto;
        margin-right: auto;
        display: block; /* Make it its own row */
        text-align: center;
        margin-top: 4px;
        margin-bottom: 4px;
    }
    
    .rotating-text-word {
        height: 34px;
        line-height: 34px;
    }
}

@media (min-width: 640px) and (max-width: 768px) {
    .rotating-text-container {
        height: 36px;
        line-height: 36px;
    }
    
    .rotating-text-word {
        height: 36px;
        line-height: 36px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .rotating-text-container {
        height: 43px;
        line-height: 43px;
    }
    
    .rotating-text-word {
        height: 43px;
        line-height: 43px;
    }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .rotating-text-container {
        height: 58px;
        line-height: 58px;
    }
    
    .rotating-text-word {
        height: 58px;
        line-height: 58px;
    }
}

@media (min-width: 1280px) {
    .rotating-text-container {
        height: 62px;
        line-height: 62px;
    }
    
    .rotating-text-word {
        height: 62px;
        line-height: 62px;
    }
}

.rotating-text-inner {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.rotating-text-word {
    white-space: nowrap;
    color: var(--claryx-blue);
    font-weight: 600;
}

/* Tab Navigation Styles (pill-style like nav) */
.tab-pill {
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    transition: all 200ms ease-out;
    cursor: pointer;
    color: var(--body-text);
    white-space: nowrap;
}

/* Mobile tab adjustments */
@media (max-width: 639px) {
    .tab-pill {
        padding: 6px 12px;
        font-size: 12px;
    }
}

.tab-pill:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.tab-pill.active {
    background-color: white;
    color: var(--claryx-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Mobile Tab Scroll Container */
.tab-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tab-scroll-container::-webkit-scrollbar {
    display: none;
}

/* AI Chat Interface Styles */
.ai-chat-container {
    background: white;
    border: 2px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
                0 8px 10px -6px rgba(0, 0, 0, 0.1),
                0 4px 6px -2px rgba(0, 0, 0, 0.05);
    height: 340px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    animation: ai-container-breathe 4s ease-in-out infinite;
}

/* Mobile AI Chat adjustments */
@media (max-width: 639px) {
    .ai-chat-container {
        height: auto;
        min-height: 260px;
        max-height: none;
        border-radius: 12px;
        padding: 6px 8px 4px 8px; /* Reduced top and bottom padding */
    }
    
    /* AI Assistant header - reduce font size by 2px and reduce bottom padding */
    .ai-chat-container .font-semibold.text-sm {
        font-size: 12px !important;
    }
    
    /* Reduce padding below the AI Assistant header */
    .ai-chat-container .pb-4 {
        padding-bottom: 8px !important;
    }
    
    /* Make chat inner container flex column with auto height */
    .ai-chat-inner {
        height: auto;
        min-height: 230px;
    }
    
    /* Chat messages should be auto height, not flex-1 */
    .chat-messages {
        flex: 0 0 auto;
        min-height: 100px;
        max-height: 150px;
    }
    
    .ai-message {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .suggested-question {
        font-size: 11px;
        padding: 5px 10px;
    }
    
    /* Show 3 suggested questions on mobile (hide 4th onwards) */
    .suggested-questions-container .suggested-question:nth-child(n+4) {
        display: none;
    }
    
    /* Reduce spacing above suggested questions on mobile */
    .ai-chat-container .flex-shrink-0.pt-4 {
        padding-top: 4px;
    }
    
    .suggested-questions-container {
        padding: 4px;
        margin-bottom: 0; /* Remove any bottom margin */
    }
    
    .suggested-questions-container > p {
        margin-bottom: 3px;
        font-size: 9px;
    }
}

/* Inner content that stays still */
.ai-chat-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: ai-content-stabilize 4s ease-in-out infinite;
}

/* Taller on larger screens */
@media (min-width: 768px) {
    .ai-chat-container {
        height: 360px;
        max-width: 480px;
    }
}

/* Wider on large screens */
@media (min-width: 1024px) {
    .ai-chat-container {
        height: 380px;
        max-width: 520px;
    }
}

@keyframes ai-content-stabilize {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9901); /* 1/1.01 to counter the parent's scale(1.01) */
    }
}

@keyframes ai-container-breathe {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
                    0 8px 10px -6px rgba(0, 0, 0, 0.1),
                    0 4px 6px -2px rgba(0, 0, 0, 0.05),
                    0 0 0 0 rgba(29, 78, 255, 0);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.12),
                    0 10px 15px -6px rgba(0, 0, 0, 0.12),
                    0 6px 10px -2px rgba(0, 0, 0, 0.08),
                    0 0 0 3px rgba(29, 78, 255, 0.08);
        border-color: rgba(29, 78, 255, 0.3);
    }
}

.ai-message {
    padding: 8px 12px;
    border-radius: 14px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.4;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* User message - right aligned with speech bubble tail */
.ai-message.user {
    background-color: var(--grey-bg);
    margin-left: auto;
    max-width: 85%;
    border-bottom-right-radius: 4px;
}

.ai-message.user::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid var(--grey-bg);
    border-bottom: 5px solid transparent;
}

/* Assistant message - left aligned with speech bubble tail */
.ai-message.assistant {
    background-color: var(--accent-1);
    max-width: 92%;
    border-bottom-left-radius: 4px;
}

.ai-message.assistant::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -5px;
    width: 0;
    height: 0;
    border-right: 5px solid var(--accent-1);
    border-bottom: 5px solid transparent;
}

.suggested-question {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 200ms ease-out;
    background: white;
    border: 1px solid var(--border);
    color: var(--body-text);
    animation: suggest-float 3s ease-in-out infinite;
    position: relative;
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    transform: translateZ(0);
}

.suggested-question:nth-child(2) {
    animation-delay: 0.3s;
}

.suggested-question:nth-child(3) {
    animation-delay: 0.6s;
}

.suggested-question:nth-child(4) {
    animation-delay: 0.9s;
}

@keyframes suggest-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    50% {
        transform: translate3d(0, -3px, 0) scale(1.005);
        box-shadow: 0 4px 12px rgba(29, 78, 255, 0.12);
        border-color: rgba(29, 78, 255, 0.3);
    }
}

.suggested-question:hover {
    background-color: #E8F2FF;
    border: 1px solid var(--claryx-blue);
    color: var(--claryx-blue);
    animation: none;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 16px rgba(29, 78, 255, 0.2);
}

.suggested-question.active {
    background-color: #E8F2FF;
    border: 1px solid var(--claryx-blue);
    color: var(--claryx-blue);
    animation: none;
}

/* Suggested questions container */
.suggested-questions-container {
    background: var(--grey-bg);
    border-radius: 10px;
    padding: 8px;
}

.suggested-questions-container > p {
    font-size: 10px;
    margin-bottom: 6px;
}

/* Chat messages scrollbar styling */
.chat-messages {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    padding: 8px 6px 8px 0;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-text);
}

/* Pulsing green dot animation */
.pulse-green {
    animation: pulse-green 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-green {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(115, 173, 47, 0.7);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 4px rgba(115, 173, 47, 0);
    }
}

/* Waitlist Modal Styles */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content {
    background: white;
    border-radius: 20px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.3);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--grey-bg);
    border: none;
    cursor: pointer;
    transition: all 200ms ease-out;
    color: var(--body-text);
}

.modal-close-btn:hover {
    background: var(--border);
    transform: scale(1.1);
}

.modal-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: 9999px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    transition: border-color 200ms ease-out;
    outline: none;
    background: white;
    color: var(--body-text);
}

.modal-input:focus {
    border-color: var(--claryx-blue);
}

.modal-input::placeholder {
    color: var(--secondary-text);
}

.modal-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-text);
    margin-bottom: 6px;
    margin-left: 2px;
}

.modal-input-wrapper {
    position: relative;
}

.modal-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--claryx-blue);
    pointer-events: none;
}

.modal-error {
    background: #FEE2E2;
    color: #991B1B;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.success-checkmark {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--traffic-green);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: checkmark-pop 0.5s ease-out;
}

@keyframes checkmark-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Hide elements with x-cloak until Alpine.js initializes */
[x-cloak] {
    display: none !important;
}

/* Dashboard Carousel Styles */
.dashboard-carousel {
    position: relative;
    width: 100%;
    perspective: 1500px;
    overflow: visible;
}

.dashboard-slide {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.dashboard-slide:first-child {
    position: relative;
}

.dashboard-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.3),
                0 10px 30px -10px rgba(0, 0, 0, 0.2);
}

/* Active slide */
.dashboard-slide.active {
    opacity: 1;
    transform: translateX(0) rotateY(0deg) scale(1);
    z-index: 2;
}

/* Next slide (coming from right) */
.dashboard-slide.next {
    opacity: 0;
    transform: translateX(100%) rotateY(-45deg) scale(0.8);
    z-index: 1;
}

/* Previous slide (going to left) */
.dashboard-slide.prev {
    opacity: 0;
    transform: translateX(-100%) rotateY(45deg) scale(0.8);
    z-index: 1;
}

/* Dashboard indicator dots */
.dashboard-indicators {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.dashboard-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--border);
    transition: all 300ms ease;
    cursor: pointer;
}

.dashboard-indicator.active {
    background-color: var(--claryx-blue);
    width: 24px;
    border-radius: 4px;
}

.dashboard-indicator:hover {
    background-color: rgba(29, 78, 255, 0.5);
}

/* Report Walkthrough Animation Styles */
.report-image-container {
    position: relative;
    width: 100%;
}

.report-walkthrough-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.report-walkthrough-image.active {
    opacity: 1;
    z-index: 10;
}

/* Mouse Cursor for Report Animation */
.report-mouse-cursor {
    position: absolute;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.3s ease, left 1.5s cubic-bezier(0.4, 0, 0.2, 1), top 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top left;
}

.report-mouse-cursor.show {
    opacity: 1;
}

.report-mouse-cursor.clicking {
    animation: reportClickAnimation 0.3s ease-out;
}

/* Click ripple effect for report */
.report-click-ripple {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--claryx-blue);
    pointer-events: none;
    z-index: 19;
    opacity: 0;
    transform: translate(-50%, -50%);
}

.report-click-ripple.active {
    animation: reportRippleAnimation 0.6s ease-out;
}

/* Pulse animation for report mouse cursor */
.report-mouse-cursor.show:not(.clicking) {
    animation: reportPulse 1.5s ease-in-out infinite;
}

/* Click animation - cursor scales down briefly */
@keyframes reportClickAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.85);
    }
    100% {
        transform: scale(1);
    }
}

/* Ripple animation - expands and fades */
@keyframes reportRippleAnimation {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

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

/* Target Audience Section - Animated Graphics */
#bar-chart rect,
#bar-chart g,
#documents g {
    animation-iteration-count: infinite;
}

/* Audience Card Flip Animation */
/* Ensure audience section doesn't interfere with navigation */
.audience-row {
    position: relative;
    z-index: 1; /* Explicitly lower than navigation */
}

/* Perspective container - must have defined height */
.audience-card-perspective {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.audience-card-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/* Trigger flip on row hover */
.audience-row:hover .audience-card-flipper {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
}

.audience-card-front,
.audience-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audience-card-front {
    /* Front face styling is inherited from nav-glass */
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
}

.audience-card-back {
    background-color: var(--claryx-blue);
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
    padding: 24px;
}

/* Why Claryx Section Background Animations */
/* Wave animations for SVG paths */
.why-wave-1 {
    animation: whyWave1 25s infinite ease-in-out;
    transform-origin: 50% 50%;
}

@keyframes whyWave1 {
    0%, 100% {
        opacity: 0.5;
        transform: translateX(0);
    }
    50% {
        opacity: 0.6;
        transform: translateX(30px);
    }
}

.why-wave-2 {
    animation: whyWave2 28s infinite ease-in-out;
    transform-origin: 50% 50%;
}

@keyframes whyWave2 {
    0%, 100% {
        opacity: 0.35;
        transform: translateX(0);
    }
    50% {
        opacity: 0.45;
        transform: translateX(-25px);
    }
}

.why-wave-3 {
    animation: whyWave3 30s infinite ease-in-out;
    transform-origin: 50% 50%;
}

@keyframes whyWave3 {
    0%, 100% {
        opacity: 0.25;
        transform: translateX(0);
    }
    50% {
        opacity: 0.35;
        transform: translateX(35px);
    }
}

.why-wave-4 {
    animation: whyWave4 26s infinite ease-in-out;
    transform-origin: 50% 50%;
}

@keyframes whyWave4 {
    0%, 100% {
        opacity: 0.4;
        transform: translateX(0);
    }
    50% {
        opacity: 0.5;
        transform: translateX(28px);
    }
}

.why-wave-5 {
    animation: whyWave5 29s infinite ease-in-out;
    transform-origin: 50% 50%;
}

@keyframes whyWave5 {
    0%, 100% {
        opacity: 0.35;
        transform: translateX(0);
    }
    50% {
        opacity: 0.45;
        transform: translateX(-30px);
    }
}

.why-wave-6 {
    animation: whyWave6 27s infinite ease-in-out;
    transform-origin: 50% 50%;
}

@keyframes whyWave6 {
    0%, 100% {
        opacity: 0.3;
        transform: translateX(0);
    }
    50% {
        opacity: 0.4;
        transform: translateX(32px);
    }
}

.why-wave-7 {
    animation: whyWave7 31s infinite ease-in-out;
    transform-origin: 50% 50%;
}

@keyframes whyWave7 {
    0%, 100% {
        opacity: 0.28;
        transform: translateX(0);
    }
    50% {
        opacity: 0.38;
        transform: translateX(-28px);
    }
}

.why-wave-8 {
    animation: whyWave8 24s infinite ease-in-out;
    transform-origin: 50% 50%;
}

@keyframes whyWave8 {
    0%, 100% {
        opacity: 0.25;
        transform: translateX(0);
    }
    50% {
        opacity: 0.35;
        transform: translateX(35px);
    }
}

/* Animated circles */
.why-animated-circle {
    animation: whyPulse 20s infinite ease-in-out;
}

@keyframes whyPulse {
    0%, 100% {
        opacity: 0.04;
        transform: scale(1);
    }
    50% {
        opacity: 0.06;
        transform: scale(1.08);
    }
}

.why-animated-circle-2 {
    animation: whyPulse2 24s infinite ease-in-out;
}

@keyframes whyPulse2 {
    0%, 100% {
        opacity: 0.035;
        transform: scale(1);
    }
    50% {
        opacity: 0.055;
        transform: scale(1.06);
    }
}

.why-animated-circle-3 {
    animation: whyPulse3 28s infinite ease-in-out;
}

@keyframes whyPulse3 {
    0%, 100% {
        opacity: 0.04;
        transform: scale(1);
    }
    50% {
        opacity: 0.06;
        transform: scale(1.07);
    }
}

/* Floating shapes */
.why-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

/* Effortless Setup Animation Styles */
.claryx-setup-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.claryx-setup-image.active {
    display: block;
    position: relative;
}

.claryx-setup-mouse.clicking svg {
    transform: scale(0.9);
}

.claryx-setup-ripple.active {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(2) !important;
}

.why-shape1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(129, 199, 247, 0.4) 0%, transparent 70%);
    top: -200px;
    left: -200px;
    animation: whyFloat1 35s infinite ease-in-out;
}

@keyframes whyFloat1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(20px, -15px) scale(1.05);
    }
}

.why-shape2 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(159, 168, 252, 0.35) 0%, transparent 70%);
    bottom: -300px;
    right: -300px;
    animation: whyFloat2 40s infinite ease-in-out;
}

@keyframes whyFloat2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-15px, 12px) scale(1.03);
    }
}

.why-shape3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(187, 169, 255, 0.35) 0%, transparent 70%);
    top: 25%;
    left: 50%;
    animation: whyFloat3 45s infinite ease-in-out;
}

@keyframes whyFloat3 {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(calc(-50% + 18px), calc(-50% - 10px)) scale(1.04);
    }
}

.why-shape4 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(139, 189, 247, 0.38) 0%, transparent 70%);
    top: 50%;
    left: -250px;
    animation: whyFloat4 38s infinite ease-in-out;
}

@keyframes whyFloat4 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(15px, -18px) scale(1.04);
    }
}

.why-shape5 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(169, 159, 255, 0.36) 0%, transparent 70%);
    top: 75%;
    right: -200px;
    animation: whyFloat5 42s infinite ease-in-out;
}

@keyframes whyFloat5 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-20px, 10px) scale(1.03);
    }
}

.why-shape6 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(149, 179, 237, 0.32) 0%, transparent 70%);
    top: 15%;
    right: 10%;
    animation: whyFloat6 36s infinite ease-in-out;
}

@keyframes whyFloat6 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-12px, 15px) scale(1.03);
    }
}

.why-shape7 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(179, 149, 255, 0.3) 0%, transparent 70%);
    top: 60%;
    left: 15%;
    animation: whyFloat7 44s infinite ease-in-out;
}

@keyframes whyFloat7 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(18px, -12px) scale(1.04);
    }
}

.why-shape8 {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(139, 169, 247, 0.34) 0%, transparent 70%);
    top: 40%;
    right: 20%;
    animation: whyFloat8 48s infinite ease-in-out;
}

@keyframes whyFloat8 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-15px, 14px) scale(1.03);
    }
}

/* Bell Ring Animation for Coming Soon Card */
@keyframes bellRing {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(14deg);
    }
    20% {
        transform: rotate(-8deg);
    }
    30% {
        transform: rotate(14deg);
    }
    40% {
        transform: rotate(-4deg);
    }
    50% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Company Slider Styles */
.company-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    height: 20px;
    margin-top: -6px;
}

.company-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.company-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    border: none;
}

/* CTA Section Background Animations - Subtle Floating Shapes */
.cta-floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.cta-shape {
    position: absolute;
    will-change: transform, opacity;
}

/* Rounded Rectangle Shapes - Subtle and Modern */
.cta-shape-rect {
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Circle Shapes - Soft and Organic */
.cta-shape-circle {
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 70%, transparent 100%);
    filter: blur(50px);
}

/* Pill Shapes - Modern and Dynamic */
.cta-shape-pill {
    border-radius: 60px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.06) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Shape 1 - Large rounded rectangle - Top Right (moved from left) */
.cta-shape-1 {
    width: 240px;
    height: 180px;
    top: -40px;
    right: 15%;
    animation: ctaFloat1 20s ease-in-out infinite;
}

@keyframes ctaFloat1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.7;
    }
    25% {
        transform: translate(25px, -20px) rotate(12deg);
        opacity: 0.9;
    }
    50% {
        transform: translate(8px, 5px) rotate(6deg);
        opacity: 0.8;
    }
    75% {
        transform: translate(-15px, 15px) rotate(-8deg);
        opacity: 0.85;
    }
}

/* Shape 2 - Pill shape - Top Left (moved from right) */
.cta-shape-2 {
    width: 200px;
    height: 80px;
    top: 12%;
    left: 12%;
    animation: ctaFloat2 18s ease-in-out infinite;
    animation-delay: -6s;
}

@keyframes ctaFloat2 {
    0%, 100% {
        transform: translate(0, 0) rotate(-15deg);
        opacity: 0.65;
    }
    33% {
        transform: translate(-20px, 25px) rotate(-25deg);
        opacity: 0.85;
    }
    66% {
        transform: translate(15px, -10px) rotate(-5deg);
        opacity: 0.75;
    }
}

/* Shape 3 - Large soft circle - Center */
.cta-shape-3 {
    width: 280px;
    height: 280px;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    animation: ctaFloat3 25s ease-in-out infinite;
    animation-delay: -10s;
}

@keyframes ctaFloat3 {
    0%, 100% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateX(-50%) translateY(-30px) scale(1.15);
        opacity: 0.7;
    }
}

/* Shape 4 - Medium rounded square - Bottom Right (moved from left) */
.cta-shape-4 {
    width: 150px;
    height: 150px;
    bottom: 18%;
    right: 18%;
    animation: ctaFloat4 19s ease-in-out infinite;
    animation-delay: -5s;
}

@keyframes ctaFloat4 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.7;
    }
    40% {
        transform: translate(20px, -18px) rotate(18deg);
        opacity: 0.95;
    }
    80% {
        transform: translate(-8px, 10px) rotate(-6deg);
        opacity: 0.8;
    }
}

/* Shape 5 - Soft circle - Bottom Center (moved from right) */
.cta-shape-5 {
    width: 220px;
    height: 220px;
    bottom: 10%;
    left: 60%;
    animation: ctaFloat5 22s ease-in-out infinite;
    animation-delay: -12s;
}

@keyframes ctaFloat5 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.55;
    }
    50% {
        transform: translate(-25px, 20px) scale(1.12);
        opacity: 0.75;
    }
}

/* Shape 6 - Small pill - Mid Center-Left (moved from right) */
.cta-shape-6 {
    width: 140px;
    height: 60px;
    top: 55%;
    left: 35%;
    animation: ctaFloat6 17s ease-in-out infinite;
    animation-delay: -8s;
}

@keyframes ctaFloat6 {
    0%, 100% {
        transform: translate(0, 0) rotate(25deg);
        opacity: 0.6;
    }
    50% {
        transform: translate(15px, -15px) rotate(10deg);
        opacity: 0.85;
    }
}

/* Shape 7 - Medium circle - Mid-Left (adjusted position) */
.cta-shape-7 {
    width: 180px;
    height: 180px;
    top: 35%;
    left: 8%;
    animation: ctaFloat7 21s ease-in-out infinite;
    animation-delay: -6s;
}

@keyframes ctaFloat7 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(18px, 22px) scale(1.08);
        opacity: 0.7;
    }
}

/* Shape 8 - Small rounded rect - Top Center-Right (moved from left) */
.cta-shape-8 {
    width: 120px;
    height: 120px;
    top: 5%;
    right: 35%;
    animation: ctaFloat8 18s ease-in-out infinite;
    animation-delay: -3s;
}

@keyframes ctaFloat8 {
    0%, 100% {
        transform: translate(0, 0) rotate(-20deg);
        opacity: 0.65;
    }
    50% {
        transform: translate(-12px, 18px) rotate(-35deg);
        opacity: 0.85;
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .cta-shape-circle {
        filter: blur(35px);
    }

    .cta-shape-rect {
        backdrop-filter: blur(15px);
    }

    .cta-shape-pill {
        backdrop-filter: blur(12px);
    }

    .cta-shape-1 {
        width: 160px;
        height: 120px;
    }

    .cta-shape-2 {
        width: 130px;
        height: 55px;
    }

    .cta-shape-3 {
        width: 180px;
        height: 180px;
    }

    .cta-shape-4 {
        width: 100px;
        height: 100px;
    }

    .cta-shape-5 {
        width: 140px;
        height: 140px;
    }

    .cta-shape-6 {
        width: 90px;
        height: 40px;
    }

    .cta-shape-7 {
        width: 120px;
        height: 120px;
    }

    .cta-shape-8 {
        width: 80px;
        height: 80px;
    }
}

/* ==========================================
   Integration Animation Styles
   ========================================== */

.integration-logo {
    width: 120px;
    height: auto;
}

.integration-panel-left,
.integration-panel-right {
    transition: flex 0s;
}

.integration-animate-left {
    animation: leftPanel 4s ease-in-out infinite;
}

.integration-animate-right {
    animation: rightPanel 4s ease-in-out infinite;
}

/* Left Panel Animation: expand, hold, then contract */
@keyframes leftPanel {
    0% {
        flex: 1;
    }
    25% {
        flex: 3;
    }
    50% {
        flex: 3;
    }
    75% {
        flex: 0.5;
    }
    100% {
        flex: 0.5;
    }
}

/* Right Panel Animation: contract, hold, then expand */
@keyframes rightPanel {
    0% {
        flex: 1;
    }
    25% {
        flex: 0.5;
    }
    50% {
        flex: 0.5;
    }
    75% {
        flex: 3;
    }
    100% {
        flex: 3;
    }
}

/* ==========================================
   Blog Article Content Styles
   ========================================== */

.article-content {
    color: var(--body-text);
    font-size: 18px;
    line-height: 1.8;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content h2 {
    font-size: 28px;
    font-weight: 600;
    color: var(--primary-text);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.article-content h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-text);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-content ul {
    list-style-type: disc;
}

.article-content ol {
    list-style-type: decimal;
}

.article-content li {
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.article-content blockquote {
    border-left: 4px solid var(--claryx-blue);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--body-text);
    background-color: var(--accent-1);
    padding: 1.5rem;
    padding-left: 1.5rem;
    border-radius: 0 12px 12px 0;
}

.article-content strong {
    font-weight: 600;
    color: var(--primary-text);
}

.article-content a {
    color: var(--claryx-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 200ms ease-out;
}

.article-content a:hover {
    color: #1942d4;
}

.article-content img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 2rem 0;
}

.article-content code {
    background-color: var(--grey-bg);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.article-content pre {
    background-color: var(--grey-bg);
    padding: 1.5rem;
    border-radius: 12px;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.article-content pre code {
    background: none;
    padding: 0;
}

/* Responsive article content */
@media (max-width: 768px) {
    .article-content {
        font-size: 16px;
    }

    .article-content h2 {
        font-size: 24px;
    }

    .article-content h3 {
        font-size: 20px;
    }
}

/* Line clamp utility for blog cards */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* ==========================================
   COMPREHENSIVE MOBILE RESPONSIVE STYLES
   Target: 375px x 858px viewport
   ========================================== */

@media (max-width: 639px) {
    /* Hero Section Mobile */
    .hero-background {
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
    }
    
    /* Hero Background Shapes - smaller on mobile */
    .floating-shapes .shape {
        filter: blur(20px);
        opacity: 0.3;
    }
    
    .shape1, .shape2, .shape3, .shape4, .shape5, .shape6 {
        width: 150px !important;
        height: 150px !important;
    }
    
    /* Feature Selector Mobile */
    .glass-container {
        border-radius: 16px;
        padding: 12px;
    }
    
    .feature-box {
        padding: 8px 4px;
        border-radius: 8px;
        min-width: 56px;
    }
    
    .feature-box span {
        font-size: 9px !important;
    }
    
    .feature-box i {
        font-size: 18px !important;
    }
    
    /* Audience Section Mobile */
    .audience-card-perspective {
        min-height: 160px;
    }
    
    .audience-card-front,
    .audience-card-back {
        border-radius: 16px;
    }
    
    .audience-card-front svg,
    .audience-card-front img {
        width: 80px;
        height: 80px;
    }
    
    /* Why Claryx Section Mobile */
    section.section-padding[style*="rounded-t-[112.5px]"] {
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
    }
    
    /* Support Grid Mobile */
    .nav-glass.rounded-2xl {
        border-radius: 12px;
        padding: 16px;
    }
    
    /* Security Grid Mobile */
    .nav-glass.rounded-2xl h5 {
        font-size: 14px;
    }
    
    /* Dashboard Carousel Mobile */
    .dashboard-carousel {
        perspective: 800px;
    }
    
    .dashboard-slide img {
        border-radius: 8px;
    }
    
    .dashboard-indicators {
        bottom: -24px;
    }
    
    .dashboard-indicator {
        width: 6px;
        height: 6px;
    }
    
    .dashboard-indicator.active {
        width: 18px;
    }
    
    /* Dashboard carousel - add margin bottom to account for absolutely positioned indicators */
    .dashboard-carousel {
        margin-bottom: 32px;
    }
    
    /* CTA Section Mobile */
    .cta-section-background {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    /* Footer Mobile */
    footer {
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
    }
    
    /* Modal Mobile */
    .modal-content {
        max-width: calc(100vw - 32px);
        margin: 16px;
        border-radius: 16px;
    }
    
    /* Report Walkthrough Mobile */
    .report-mouse-cursor {
        width: 24px;
        height: 24px;
    }
    
    .report-mouse-cursor svg {
        width: 24px;
        height: 24px;
    }
}

/* Features Section Mobile - Tab Navigation */
@media (max-width: 639px) {
    /* Make tabs horizontally scrollable */
    .nav-glass.inline-flex {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px;
    }
    
    .nav-glass.inline-flex::-webkit-scrollbar {
        display: none;
    }
    
    /* Feature list items mobile */
    .space-y-4 > div.flex.gap-3 {
        gap: 8px;
    }
    
    .space-y-4 > div.flex.gap-3 .w-1\.5 {
        width: 3px;
        height: 20px;
    }
    
    /* Integrations Logo Boxes Mobile */
    .nav-glass.rounded-3xl[style*="w-[140px]"],
    .nav-glass.rounded-3xl[style*="w-[160px]"] {
        width: 100px !important;
        height: 100px !important;
        padding: 16px !important;
    }
    
    .nav-glass.rounded-3xl img[alt="QuickBooks"],
    .nav-glass.rounded-3xl img[alt="Xero"] {
        width: 60px !important;
        height: 60px !important;
    }
    
    /* Feature Section - Content height based on content, not fixed */
    /* Dashboard carousel needs proper height on mobile */
    .dashboard-carousel {
        min-height: auto;
        overflow: visible;
    }
    
    /* Feature tab content grid - ensure proper height */
    .grid.grid-cols-1.lg\:grid-cols-2.gap-6.items-start {
        min-height: auto;
    }
    
    /* Feature section - ensure no overflow clipping */
    section[style*="background-color: #f9fafb"] {
        overflow: visible;
    }
}

/* Extra Small Mobile Tweaks (< 375px) */
@media (max-width: 374px) {
    .section-padding {
        padding: 16px 12px;
    }
    
    .h1-style {
        font-size: 26px !important;
    }
    
    .h2-style {
        font-size: 23px !important;
    }
    
    .h3-style {
        font-size: 16px !important;
    }
    
    .h4-style {
        font-size: 15px !important;
    }
    
    .h5-style {
        font-size: 14px !important;
    }
    
    .h6-style {
        font-size: 13px !important;
    }
    
    .h7-style {
        font-size: 13px !important;
    }
    
    .btn-base {
        padding-left: 14px;
        padding-right: 14px;
        height: 36px !important;
        min-height: 36px !important;
        font-size: 13px !important;
    }
    
    .feature-box {
        min-width: 48px;
    }
    
    .feature-box i {
        font-size: 16px !important;
    }
    
    .feature-box span {
        font-size: 8px !important;
    }
}

/* Mobile AI Chat - Show 3 suggested questions (375px and smaller) */
@media (max-width: 375px) {
    /* Hide 4th suggested question onwards */
    .suggested-questions-container .suggested-question:nth-child(n+4) {
        display: none !important;
    }
    
    /* Further reduce spacing for compact layout */
    .ai-chat-container .flex-shrink-0.pt-4 {
        padding-top: 4px;
    }
    
    .suggested-questions-container {
        padding: 4px;
    }
    
    .suggested-questions-container > p {
        font-size: 9px;
        margin-bottom: 3px;
    }
}

/* Rotating Text Mobile - handled in main rotating-text-container media queries */

/* Why Teams Choose Section - Mobile rounded corners */
@media (max-width: 639px) {
    section[class*="rounded-t-[112.5px]"] {
        border-top-left-radius: 40px !important;
        border-top-right-radius: 40px !important;
    }
    
    /* Differentiators 2-column grid to single column */
    .grid.grid-cols-1.md\:grid-cols-2.gap-6.md\:gap-8 {
        gap: 24px;
    }
    
    /* Remove column offset on mobile */
    .md\:pt-16.lg\:pt-20 {
        padding-top: 0 !important;
    }
}

/* Integration Animation Mobile */
@media (max-width: 639px) {
    .integration-logo {
        width: 60px;
    }
}

/* ==========================================
   CBR-Process Section Mobile Styles
   ========================================== */

/* Mobile and Tablet: Vertical stack layout */
@media (max-width: 1023px) {
    /* CBR Process boxes - reduce overlay darkness on mobile since no hover */
    section[style*="background-color: #f9fafb"] .rounded-xl.relative.overflow-hidden > div.absolute.bg-black {
        opacity: 0.5 !important;
    }
    
    /* Adjust Coming Soon badge positioning on mobile */
    .alerts-bell-icon {
        animation: none; /* Disable bell animation on mobile for performance */
    }
}

/* Effortless Setup Animation Mobile */
@media (max-width: 639px) {
    .claryx-setup-mouse {
        display: none; /* Hide mouse cursor on mobile for cleaner look */
    }
}

/* Footer Blue Wrapper Mobile */
@media (max-width: 639px) {
    div[style*="background-color: #1D4EFF"][style*="padding-top: 5rem"] {
        padding-top: 3rem !important;
    }
}

/* Social Icons Mobile */
@media (max-width: 639px) {
    .flex.items-center.gap-4 svg {
        width: 18px;
        height: 18px;
    }
}

/* Hero Mockup Mobile Scaling */
@media (max-width: 639px) {
    .lg\:scale-110.xl\:scale-115 {
        transform: none !important;
    }
}

/* Feature Tab Content Grid Mobile */
@media (max-width: 639px) {
    .grid.grid-cols-1.lg\:grid-cols-2.gap-6 .space-y-6 {
        margin-bottom: 16px;
    }
}

/* Animated Video Containers Mobile */
@media (max-width: 639px) {
    div[style*="padding-bottom: 75%"] {
        border-radius: 8px;
    }
}

/* Audience Card Min Heights Mobile */
@media (max-width: 639px) {
    .audience-card-perspective {
        min-height: 140px !important;
    }
    
    .min-h-\[160px\] {
        min-height: 120px !important;
    }
    
    .min-h-\[200px\] {
        min-height: 140px !important;
    }
}

/* Button Touch Targets Mobile */
@media (max-width: 639px) {
    .btn-base {
        min-height: 40px;
        height: 40px !important;
        font-size: 13px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Hero Feature Points - reduce spacing and center align */
    .hero-background .grid.grid-cols-1.sm\:grid-cols-3 {
        gap: 8px !important;
    }
    
    .hero-background .grid.grid-cols-1.sm\:grid-cols-3 > div {
        justify-content: center !important;
    }
}

/* Fix horizontal overflow on mobile */
html, body {
    overflow-x: hidden;
}

@media (max-width: 639px) {
    .hero-background,
    section,
    footer {
        overflow-x: hidden;
    }
}

/* Scrollbar Hide Utility */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

/* ==========================================
   PRICING PAGE - MOBILE/TABLET CAROUSEL
   ========================================== */

/* Slider Label Responsive Sizes */
.slider-label {
    font-size: 14px; /* Default desktop */
}

@media (max-width: 1023px) {
    .slider-label {
        font-size: 11px !important;
    }
}

@media (max-width: 639px) {
    .slider-label {
        font-size: 10px !important;
    }
}

/* Plans Grid Container */
.plans-grid-container {
    position: relative;
    overflow: visible;
}

/* Mobile/Tablet Plans Carousel Wrapper */
.plans-carousel-wrapper {
    position: relative;
    overflow: visible; /* Ensure badge isn't clipped */
}

/* Plans Carousel - Horizontal Scroll */
.plans-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-left: calc(50% - 140px); /* Center first/last card with peeking edges */
    padding-right: calc(50% - 140px);
    padding-top: 36px; /* Space for recommended badge */
    padding-bottom: 12px;
}

.plans-carousel::-webkit-scrollbar {
    display: none;
}

/* Individual Plan Card - Mobile */
.plan-card-mobile {
    flex: 0 0 280px; /* Fixed width for consistent card size */
    min-width: 280px;
    max-width: 280px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Tablet adjustments (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
    .plans-carousel {
        padding-left: calc(50% - 160px);
        padding-right: calc(50% - 160px);
        padding-top: 36px;
        gap: 20px;
    }
    
    .plan-card-mobile {
        flex: 0 0 320px;
        min-width: 320px;
        max-width: 320px;
    }
}

/* Small mobile adjustments (< 375px) */
@media (max-width: 374px) {
    .plans-carousel {
        padding-left: calc(50% - 120px);
        padding-right: calc(50% - 120px);
        padding-top: 36px;
        gap: 12px;
    }
    
    .plan-card-mobile {
        flex: 0 0 240px;
        min-width: 240px;
        max-width: 240px;
    }
    
    .plan-card-mobile .p-5 {
        padding: 16px !important;
    }
}

/* Carousel Indicators */
.carousel-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--border);
    transition: all 0.3s ease;
    cursor: pointer;
}

.carousel-indicator.active {
    width: 24px;
    border-radius: 4px;
    background-color: var(--claryx-blue);
}

.carousel-indicator:hover {
    background-color: rgba(29, 78, 255, 0.5);
}

/* Slider Value Indicator - Smaller on mobile/tablet */
@media (max-width: 1023px) {
    /* Reduce slider value bubble size on tablet/mobile */
    .max-w-3xl .relative .absolute .w-12 {
        width: 40px !important;
        height: 34px !important;
    }
    
    .max-w-3xl .relative .absolute .w-12 span {
        font-size: 12px !important;
    }
    
    /* Reduce thumb size */
    .max-w-3xl .relative .w-5 {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ==========================================================================
   Compare Plans - Mobile Responsive (< 800px)
   ========================================================================== */

/* Default: Show desktop table, hide mobile table and selectors */
.compare-desktop-table {
    display: block;
}

.compare-mobile-table,
.compare-mobile-selectors {
    display: none;
}

/* Mobile breakpoint (< 800px): Show mobile table and selectors, hide desktop table */
@media (max-width: 799px) {
    .compare-desktop-table {
        display: none !important;
    }
    
    .compare-mobile-table,
    .compare-mobile-selectors {
        display: block !important;
    }
}

/* Mobile Compare Plan Selectors Styling */
.compare-mobile-selectors select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.compare-mobile-selectors select:focus {
    box-shadow: 0 0 0 3px rgba(29, 78, 255, 0.15);
}

/* Mobile Compare Table Styling */
.compare-mobile-table table {
    table-layout: fixed;
}

.compare-mobile-table th,
.compare-mobile-table td {
    word-wrap: break-word;
    vertical-align: top;
}

/* Smooth background color transitions for mobile table cells */
.compare-mobile-table td,
.compare-mobile-table th {
    transition: background-color 0.2s ease;
}

/* Mobile table column headers */
.compare-mobile-table thead th {
    position: relative;
}

/* Mobile Compare Table - Recommended Column Text Styling */
/* Keep text in body/primary colors (not blue) for better readability on mobile */
.compare-mobile-table .compare-recommended-cell span.b3-style {
    color: var(--body-text) !important;
    font-weight: 400 !important;
}

/* Header text for recommended column - use primary text color */
.compare-mobile-table thead th.compare-recommended-cell .h5-style {
    color: var(--primary-text) !important;
}

.compare-mobile-table thead th.compare-recommended-cell .h7-style {
    color: var(--secondary-text) !important;
}

/* Extra small screens (< 375px) - tighter spacing */
@media (max-width: 374px) {
    .compare-mobile-selectors .grid {
        gap: 8px;
    }
    
    .compare-mobile-selectors select {
        height: 44px;
        padding-left: 12px;
        padding-right: 32px;
        font-size: 12px;
    }
    
    .compare-mobile-table th,
    .compare-mobile-table td {
        padding: 10px 8px;
    }
    
    .compare-mobile-table .b3-style {
        font-size: 11px;
    }
    
    .compare-mobile-table i {
        font-size: 14px !important;
    }
}