* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #111827;
    background: #ffffff;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

/* Special container for AnecdoteIQ page */
.anecdote-hero .container {
    max-width: 1140px;
    padding: 0 5px;
}

/* Navigation - Clean Reset */
.navbar {
    background: #1a1a1a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logo:hover {
    transform: scale(1.02);
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-text {
    display: flex;
    align-items: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    margin-left: 4px;
}

.logo-name {
    font-size: 26px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.5px;
    font-family: 'Gabriola', 'Poppins', sans-serif;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 24px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-item {
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: #e5e7eb;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.15s ease;
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border-radius: 24px;
    gap: 4px;
}

.nav-link:hover,
.nav-link.active {
    color: #000000;
    background: rgba(255, 255, 255, 0.1);
}

.nav-link:hover img {
    filter: invert(0) !important;
}

.dropdown-arrow {
    width: 5px;
    height: 5px;
    border-right: 2px solid #d1d5db;
    border-bottom: 2px solid #d1d5db;
    transform: rotate(45deg);
    transition: all 0.15s ease;
    margin-left: 4px;
}

.dropdown:hover .nav-link .dropdown-arrow {
    transform: rotate(-135deg);
    border-color: #1a1a1a;
    border-width: 2px;
}

.nav-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s;
}

.nav-item:hover .nav-arrow {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 200px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown a {
    display: block;
    padding: 12px 20px;
    color: #334155;
    text-decoration: none;
    font-weight: 400;
    transition: all 0.3s;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.nav-dropdown a:hover {
    background: #f1f5f9;
    color: #1e40af;
    padding-left: 25px;
}

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

/* Teal Gradient Section */
.teal-gradient-section {
    background: #ffffff;
    padding: 80px 20px;
    position: relative;
    border-bottom: 1px solid #d1d5db;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

.teal-gradient-section .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.teal-gradient-section h2 {
    font-size: 0.95rem;
    font-weight: 400;
    color: #666666;
    margin-bottom: 22px;
    line-height: 1.5;
    letter-spacing: 0;
}

.teal-gradient-section p {
    font-size: 1.1rem;
    color: #1e293b;
    max-width: 800px;
    margin: 0 auto;
}

/* White Container Section */
.white-container-section {
    background: #f5f5f5;
    padding: 80px 20px;
    position: relative;
    border-top: 1px solid #e0e0e0;
}

/* Advantage Container Section - White Background */
.advantage-container-section {
    background: #ffffff;
    padding: 80px 20px;
    position: relative;
    border-top: 1px solid #e0e0e0;
}

/* Dark Container Section - Enhanced Mobile Responsiveness */
.dark-container-section {
    background: linear-gradient(180deg, 
        #1a1a1a 0%, 
        #2a2a2a 10%, 
        #1e3a3a 30%, 
        #1a4a4a 50%, 
        #1e4a5a 70%, 
        #2a4a6a 90%, 
        #354a7a 100%);
    position: relative;
    padding: 80px 20px;
    text-align: center;
}

.dark-section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 14px;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.dark-section-description {
    font-size: 0.95rem;
    color: #cccccc;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
    font-weight: 400;
}

/* Dark Tabs - Enhanced Mobile Responsiveness */
.dark-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.dark-tab {
    padding: 12px 24px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
    text-align: center;
    white-space: nowrap;
}

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

.dark-tab.active {
    background: linear-gradient(135deg, #a8e6cf -10%, #7ec8e3 25%, #5a9fd4 60%, #4a7fc4 110%);
    border-color: transparent;
    color: #ffffff;
    font-weight: 500;
    background-size: 120% 120%;
    background-position: center;
}

/* Dark Content Card - Enhanced Mobile Responsiveness */
.dark-content-card {
    background: #2a2a2a;
    border-radius: 16px;
    padding: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.dark-content-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    padding: 3px;
    background: linear-gradient(180deg, #6b9ff5 0%, #1e40af 50%, #6b9ff5 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.dark-card-left h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.dark-card-left p {
    font-size: 1rem;
    color: #cccccc;
    line-height: 1.6;
}

.dark-card-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dark-card-visual {
    width: 100%;
    height: 300px;
    background: #2a2a2a;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-placeholder {
    color: #666;
    font-size: 1.2rem;
}

/* Enhanced Mobile Responsiveness for Dark Section */
@media (max-width: 1024px) {
    .dark-container-section {
        padding: 60px 20px;
    }
    
    .dark-section-title {
        font-size: 1.9rem;
    }
    
    .dark-section-description {
        font-size: 0.9rem;
        margin-bottom: 35px;
    }
    
    .dark-tabs {
        gap: 10px;
        margin-bottom: 35px;
    }
    
    .dark-tab {
        padding: 10px 20px;
        font-size: 0.85rem;
        min-width: 120px;
    }
    
    .dark-content-card {
        padding: 40px;
        gap: 40px;
    }
    
    .dark-card-left h3 {
        font-size: 1.6rem;
    }
    
    .dark-card-left p {
        font-size: 0.95rem;
    }
    
    .dark-card-visual {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .dark-container-section {
        padding: 50px 16px;
    }
    
    .dark-section-title {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }
    
    .dark-section-description {
        font-size: 0.85rem;
        margin-bottom: 30px;
        padding: 0 10px;
    }
    
    .dark-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 30px;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .dark-tab {
        padding: 12px 16px;
        font-size: 0.8rem;
        min-width: auto;
        border-radius: 25px;
    }
    
    .dark-content-card {
        grid-template-columns: 1fr;
        padding: 30px 20px;
        gap: 30px;
        text-align: center;
    }
    
    .dark-card-left h3 {
        font-size: 1.4rem;
        margin-bottom: 16px;
    }
    
    .dark-card-left p {
        font-size: 0.9rem;
        line-height: 1.7;
    }
    
    .dark-card-visual {
        height: 200px;
        order: -1;
    }
}

@media (max-width: 480px) {
    .dark-container-section {
        padding: 40px 12px;
    }
    
    .dark-section-title {
        font-size: 1.4rem;
        line-height: 1.2;
        margin-bottom: 10px;
    }
    
    .dark-section-description {
        font-size: 0.8rem;
        margin-bottom: 25px;
        padding: 0 5px;
    }
    
    .dark-tabs {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 25px;
        max-width: 280px;
    }
    
    .dark-tab {
        padding: 14px 20px;
        font-size: 0.85rem;
        border-radius: 30px;
    }
    
    .dark-content-card {
        padding: 24px 16px;
        gap: 24px;
        border-radius: 12px;
    }
    
    .dark-card-left h3 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    
    .dark-card-left p {
        font-size: 0.85rem;
        line-height: 1.6;
    }
    
    .dark-card-visual {
        height: 180px;
    }
}

/* Three Tiles Section */
.three-tiles-section {
    background: #ffffff;
    padding: 80px 20px;
    position: relative;
    border-bottom: 1px solid #d1d5db;
}

.three-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
}

.grey-tile {
    background: #f5f5f5;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    display: inline-block;
}

.grey-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: #fafafa;
}

.grey-tile h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
}

.grey-tile p {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.6;
}

@media (max-width: 968px) {
    .three-tiles-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.white-container-section .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.advantage-container-section .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.section-main-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 14px;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.section-description {
    font-size: 0.95rem;
    color: #666666;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.5;
    font-weight: 400;
}

/* Enhanced Mobile Responsiveness for Section Titles */
@media (max-width: 1024px) {
    .section-main-title {
        font-size: 1.9rem;
        margin-bottom: 12px;
    }
    
    .section-description {
        font-size: 0.9rem;
        margin-bottom: 40px;
        max-width: 600px;
    }
}

@media (max-width: 768px) {
    .section-main-title {
        font-size: 1.6rem;
        margin-bottom: 10px;
        padding: 0 10px;
        line-height: 1.2;
    }
    
    .section-description {
        font-size: 0.85rem;
        margin-bottom: 35px;
        max-width: 500px;
        padding: 0 15px;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .section-main-title {
        font-size: 1.4rem;
        margin-bottom: 8px;
        padding: 0 5px;
        line-height: 1.3;
    }
    
    .section-description {
        font-size: 0.8rem;
        margin-bottom: 30px;
        max-width: 400px;
        padding: 0 10px;
        line-height: 1.7;
    }
}

.white-container-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000000 !important;
    margin-bottom: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.white-container-section p:not(.section-description) {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 800px;
    margin: 0 auto;
}

/* Five Layers Overview */
.layers-overview {
    background: #1a1a1a;
    padding: 120px 20px;
    position: relative;
    overflow: hidden;
}

.layers-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.top-decoration {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.deco-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.deco-dot {
    width: 6px;
    height: 6px;
    background: #666;
    border-radius: 50%;
}

.deco-line-vertical {
    width: 1px;
    height: 80px;
    background: #333;
}

.layers-title-box {
    position: relative;
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 60px 80px;
    border: 1px solid #333;
}

.corner-decoration {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid #666;
}

.corner-decoration.top-left {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}

.corner-decoration.top-right {
    top: -1px;
    right: -1px;
    border-left: none;
    border-bottom: none;
}

.corner-decoration.bottom-left {
    bottom: -1px;
    left: -1px;
    border-right: none;
    border-top: none;
}

.corner-decoration.bottom-right {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

.layers-main-title {
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 700;
    text-align: center;
    margin: 0;
    line-height: 1.2;
}

.layers-title {
    color: #000000;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 11;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.layers-subtitle {
    color: #999999;
    font-size: 1.125rem;
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 11;
}

.layers-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    z-index: 11;
}

.layer-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 30px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
    position: relative;
    min-width: 200px;
    z-index: 12;
}

.layer-node:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(102, 126, 234, 0.4);
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
}

.layer-number {
    position: absolute;
    top: 16px;
    right: 16px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.875rem;
    font-weight: 700;
}

.layer-icon-large {
    width: 100px;
    height: 100px;
}

.layer-icon-large svg {
    width: 100%;
    height: 100%;
}

.layer-title {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.layer-desc {
    color: #999999;
    font-size: 0.875rem;
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

.layer-connector {
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 12;
}

.layer-connector svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 1200px) {
    .layers-flow {
        flex-wrap: wrap;
        gap: 40px;
    }
    
    .layer-connector {
        display: none;
    }
    
    .layer-node {
        min-width: 180px;
    }
}

@media (max-width: 768px) {
    .layers-title {
        font-size: 2rem;
    }
    
    .layers-subtitle {
        font-size: 1rem;
        margin-bottom: 60px;
    }
    
    .layer-node {
        min-width: 150px;
        padding: 30px 20px;
    }
    
    .layer-icon-large {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .layers-flow {
        flex-direction: column;
    }
    
    .layer-node {
        width: 100%;
        min-width: auto;
    }
}

/* Hero Section */
.hero {
    background: transparent;
    position: relative;
    overflow: visible;
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 60px 0 80px;
    margin-top: 60px;
    border-bottom: 1px solid #d1d5db;
}

.hero-container {
    max-width: 1200px;
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    gap: 40px;
}

.hero-content {
    flex: 1;
    max-width: 40%;
    text-align: left;
    position: relative;
    z-index: 3;
}

.hero-content h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: #000000;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.hero-content p {
    font-size: 0.95rem;
    margin-bottom: 22px;
    color: #666666;
    line-height: 1.5;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
}

.btn-start {
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    color: #ffffff;
    padding: 10px 28px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.btn-start:hover {
    background: linear-gradient(135deg, #6bc4b0, #3b7dd6);
    box-shadow: 0 6px 20px rgba(125, 211, 192, 0.4);
    transform: translateY(-2px);
}

.btn-start:active {
    transform: translateY(0) scale(0.98);
}

.btn-secondary-custom {
    background: #ffffff !important;
    color: #4A90E2 !important;
    border: 1px solid #4A90E2 !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    padding: 10px 28px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-secondary-custom:hover {
    background: linear-gradient(135deg, #7DD3C0, #4A90E2) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(125, 211, 192, 0.4) !important;
}

.btn-demo-hero {
    background: transparent;
    color: #666666;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-demo-hero:hover {
    background: #f5f5f5;
    color: #000000;
}

.hero-visual {
    flex: 1;
    max-width: 50%;
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.8;
    overflow: visible;
}



.gradient-bg {
    display: none;
}

/* Scientific Bouncing Box Animation */
.bouncing-box {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.bouncing-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(0deg, transparent 24%, rgba(100, 100, 100, 0.25) 25%, rgba(100, 100, 100, 0.25) 26%, transparent 27%, transparent 74%, rgba(100, 100, 100, 0.25) 75%, rgba(100, 100, 100, 0.25) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(100, 100, 100, 0.25) 25%, rgba(100, 100, 100, 0.25) 26%, transparent 27%, transparent 74%, rgba(100, 100, 100, 0.25) 75%, rgba(100, 100, 100, 0.25) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg);
    transform-origin: center center;
    z-index: 0;
    opacity: 0.7;
}

.box-border {
    position: relative;
    width: 100%;
    height: 100%;
}

.center-plus {
    display: none;
}

.grid-overlay {
    display: none;
}

/* Animated Snake Lines on Grid */
.grid-snake-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    transform: perspective(500px) rotateX(60deg);
    transform-origin: center center;
}

.snake-line {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Services Section */
.services {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
    border-bottom: 1px solid #d1d5db;
}

.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 70% 30%, rgba(124, 58, 237, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(30, 64, 175, 0.03) 0%, transparent 50%);
}

.services .container {
    position: relative;
    z-index: 2;
}

.services h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 60px;
    color: #1e293b;
    font-weight: 700;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.05), rgba(124, 58, 237, 0.05));
    opacity: 0;
    transition: opacity 0.3s;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: rgba(30, 64, 175, 0.3);
    box-shadow: 0 20px 60px rgba(30, 64, 175, 0.15);
}

.service-icon {
    font-size: 3.5rem;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.service-card h3 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: #1e293b;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.service-card p {
    color: #64748b;
    line-height: 1.7;
    position: relative;
    z-index: 2;
}

/* Services Tiles Section */
.services-tiles-section {
    background: linear-gradient(180deg, #1a3a3a 0%, #1e4a4a 50%, #2a4a5a 100%);
    padding: 60px 20px 80px;
    position: relative;
    min-height: 100vh;
}

.services-tiles-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Search Bar */
.services-search-bar {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 auto 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: calc(100% - 600px);
    max-width: 800px;
}

.services-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    color: #1a1a1a;
    background: transparent;
    font-family: 'Inter', sans-serif;
}

.services-search-bar input::placeholder {
    color: #666666;
}

.search-submit-btn {
    width: 40px;
    height: 40px;
    background: #1a1a1a;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ffffff;
}

.search-submit-btn:hover {
    background: #333333;
    transform: scale(1.05);
}

/* Services Tiles Wrapper */
.services-tiles-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Service Tile Card */
.service-tile-card {
    background: #2a3a3a;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.service-tile-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    background: #2f4545;
}

/* Tile Header */
.tile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.tile-icon-circle {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7DD3C0;
    flex-shrink: 0;
}

.service-tile-card:hover .tile-icon-circle {
    background: rgba(125, 211, 192, 0.2);
}

.tile-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

/* Tile Description */
.service-tile-card p {
    font-size: 0.875rem;
    color: #b0b0b0;
    line-height: 1.5;
    margin-bottom: 16px;
    flex-grow: 1;
}

/* Tile Preview */
.tile-preview {
    margin-top: auto;
}

.preview-placeholder {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-icon {
    font-size: 2.5rem;
    opacity: 0.6;
}

.service-tile-card:hover .preview-placeholder {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 968px) {
    .services-tiles-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .services-search-bar {
        padding: 12px 16px;
    }
    
    .services-search-bar input {
        font-size: 0.9rem;
    }
}

@media (max-width: 640px) {
    .services-tiles-section {
        padding: 40px 16px 60px;
    }
    
    .service-tile-card {
        padding: 20px;
    }
}

/* Products Section */
.products {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

.products::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(30, 64, 175, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.03) 0%, transparent 50%);
}

.products .container {
    position: relative;
    z-index: 2;
}

.products h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 15px;
    color: #1e293b;
    font-weight: 700;
}

.products-subtitle {
    text-align: center;
    font-size: 1.3rem;
    color: #64748b;
    margin-bottom: 60px;
}

.dashboard-showcase {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.dashboard-item {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 40px;
    align-items: center;
}

.dashboard-item:nth-child(even) {
    grid-template-columns: 1fr 400px;
}

.dashboard-item:nth-child(even) .dashboard-screenshot {
    order: 2;
}

.dashboard-item:nth-child(even) .dashboard-description {
    order: 1;
}

.dashboard-screenshot {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.dashboard-screenshot:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
}

.screenshot-header {
    background: #f1f5f9;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.window-controls {
    display: flex;
    gap: 6px;
}

.control {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.control.red { background: #ef4444; }
.control.yellow { background: #f59e0b; }
.control.green { background: #10b981; }

.url-bar {
    background: #e2e8f0;
    padding: 4px 12px;
    border-radius: 0;
    color: #64748b;
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
}

.screenshot-content {
    padding: 20px;
    background: #ffffff;
    min-height: 200px;
}

.dashboard-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.nav-item {
    width: 60px;
    height: 6px;
    background: rgba(148, 163, 184, 0.4);
    border-radius: 0;
}

.nav-item.active {
    background: #1e40af;
}

.dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.metric-cards {
    display: flex;
    gap: 12px;
}

.metric-card {
    background: rgba(30, 64, 175, 0.08);
    border: 1px solid rgba(30, 64, 175, 0.2);
    border-radius: 0;
    padding: 12px;
    flex: 1;
    text-align: center;
}

.metric-value {
    color: #1e40af;
    font-size: 1.2rem;
    font-weight: 700;
}

.metric-label {
    color: #64748b;
    font-size: 0.7rem;
    margin-top: 4px;
}

.chart-area {
    background: #f1f5f9;
    border-radius: 0;
    padding: 16px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 80px;
}

.chart-bars {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 50px;
}

.bar {
    width: 8px;
    background: linear-gradient(to top, #7c3aed, #1e40af);
    border-radius: 0;
    animation: chartPulse 3s ease-in-out infinite;
}

.bar:nth-child(2) { animation-delay: 0.2s; }
.bar:nth-child(3) { animation-delay: 0.4s; }
.bar:nth-child(4) { animation-delay: 0.6s; }
.bar:nth-child(5) { animation-delay: 0.8s; }
.bar:nth-child(6) { animation-delay: 1s; }

@keyframes chartPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.sentiment-analysis {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sentiment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.sentiment-bar {
    height: 6px;
    border-radius: 0;
    transition: width 2s ease;
}

.sentiment-item.positive .sentiment-bar { background: #22c55e; }
.sentiment-item.neutral .sentiment-bar { background: #f59e0b; }
.sentiment-item.negative .sentiment-bar { background: #ef4444; }

.sentiment-item span {
    color: #64748b;
    min-width: 80px;
}

.text-cloud {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.keyword {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
    padding: 4px 8px;
    border-radius: 0;
    font-size: 0.7rem;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.dashboard-description h3 {
    color: #1e293b;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.dashboard-description p {
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.tech-stack {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tech-tag {
    background: rgba(255, 255, 255, 0.2);
    color: #cccccc;
    padding: 6px 12px;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* About Section */
.about {
    padding: 100px 0;
    background: #ffffff;
}

.about h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 40px;
    color: #1e293b;
    font-weight: 700;
}

.about p {
    text-align: center;
    font-size: 1.3rem;
    color: #64748b;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Contact Section */
.contact {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 50% 50%, rgba(30, 64, 175, 0.06) 0%, transparent 70%);
}

.contact .container {
    position: relative;
    z-index: 2;
}

.contact h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 20px;
    color: #1e293b;
    font-weight: 700;
}

.contact p {
    text-align: center;
    font-size: 1.3rem;
    color: #64748b;
    margin-bottom: 50px;
}

.contact-info {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}

.contact-item {
    text-align: center;
    font-size: 1.2rem;
    color: #334155;
    padding: 30px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.contact-item strong {
    color: #1e40af;
    display: block;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

/* Professional Footer */
.professional-footer {
    background: #000000 !important;
    color: #ffffff;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    position: relative;
    margin: 0;
    margin-bottom: 0 !important;
    padding: 0;
    padding-bottom: 0 !important;
    width: 100%;
    overflow: hidden;
}

.professional-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(30, 64, 175, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 60px 0 20px 0;
    align-items: start;
}

.logo-section {
    grid-column: 1 / -1; /* Span all columns */
    grid-row: 1;
    text-align: center;
    margin-bottom: 20px;
    background: #000000;
    padding: 30px 20px;
    margin-left: -20px;
    margin-right: -20px;
    position: relative;
}

.footer-section:nth-child(2) { /* Services */
    grid-column: 1;
    grid-row: 2;
}

.footer-section:nth-child(3) { /* Solutions */
    grid-column: 2;
    grid-row: 2;
}

.footer-section:nth-child(4) { /* Company */
    grid-column: 3;
    grid-row: 2;
}

.footer-section:nth-child(5) { /* Contact */
    grid-column: 4;
    grid-row: 2;
}

.footer-section h4.footer-title {
    color: #000000;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    text-align: left;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-logo .logo-icon svg {
    width: 28px;
    height: 28px;
}

.footer-logo-text {
    display: flex;
    align-items: center;
}

.footer-logo-name {
    font-size: 26px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.5px;
    font-family: 'Gabriola', 'Poppins', sans-serif;
}



.footer-description {
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 0.95rem;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

.footer-social {
    display: flex;
    gap: 12px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    color: #666666;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid transparent;
}

.social-link:hover {
    background: rgba(30, 64, 175, 0.2);
    color: #1e40af;
    transform: translateY(-2px);
    border: 1px solid #4A90E2;
}

.footer-write-btn {
    padding: 0 36px;
    height: 50px;
    background: linear-gradient(135deg, #a8e6cf 0%, #7ec8e3 25%, #5a9fd4 60%, #4a7fc4 100%);
    border: none;
    border-radius: 50px;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-write-btn:hover {
    box-shadow: 0 8px 16px rgba(122, 200, 227, 0.4);
    background: linear-gradient(135deg, #b8f6df 0%, #8ed8f3 25%, #6aafe4 60%, #5a8fd4 100%);
    transform: translateY(-2px);
}

.footer-write-btn:active {
    transform: scale(0.98);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.footer-links li {
    margin-bottom: 4px;
}

.footer-links a {
    color: #666666;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: block;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
}

.footer-links a:hover {
    color: #000000;
    border: 1px solid #1e40af;
    background: rgba(30, 64, 175, 0.1);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666666;
    font-size: 0.9rem;
}

.contact-item svg {
    color: #666666;
    flex-shrink: 0;
}

.footer-bottom {
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    padding: 0;
    position: relative;
}

.footer-watermark {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.footer-watermark img {
    height: 100%;
    width: auto;
    opacity: 0.08;
    filter: invert(1);
    transform: translate(25%, 20%);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom p {
    color: #ffffff;
    font-size: 0.9rem;
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: 25px;
}

.footer-legal a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #cccccc;
}

/* Responsive Footer */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 30px;
    }
    
    .footer-section:nth-child(4),
    .footer-section:nth-child(5) {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 0 30px;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .footer-legal {
        justify-content: center;
    }
}

/* Insights Page Specific Styles */
.insights-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    position: relative;
    overflow: hidden;
    color: white;
    padding: 150px 0 100px;
    text-align: center;
}

.insights-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 40%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
}

.insights-hero .container {
    position: relative;
    z-index: 2;
}

.insights-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #ffffff, #7c3aed, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.insights-hero p {
    font-size: 1.4rem;
    color: #cbd5e1;
}

.insights-overview {
    padding: 100px 0;
    background: #1e293b;
}

.insights-content h2 {
    font-size: 3rem;
    margin-bottom: 30px;
    color: #ffffff;
    font-weight: 700;
}

.insights-content p {
    font-size: 1.3rem;
    color: #cbd5e1;
    margin-bottom: 50px;
    line-height: 1.8;
}

.insights-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-item {
    padding: 40px 30px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 0;
    border: 1px solid rgba(148, 163, 184, 0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(0, 212, 255, 0.1));
    opacity: 0;
    transition: opacity 0.3s;
}

.feature-item:hover::before {
    opacity: 1;
}

.feature-item:hover {
    transform: translateY(-5px);
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 15px 40px rgba(124, 58, 237, 0.2);
}

.feature-item h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #ffffff;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.feature-item p {
    color: #cbd5e1;
    line-height: 1.7;
    position: relative;
    z-index: 2;
}

.insights-process {
    padding: 100px 0;
    background: #0f172a;
    position: relative;
}

.insights-process::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 25%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
}

.insights-process .container {
    position: relative;
    z-index: 2;
}

.insights-process h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 60px;
    color: #ffffff;
    font-weight: 700;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.step {
    text-align: center;
    padding: 40px 30px;
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 0;
    border: 1px solid rgba(148, 163, 184, 0.1);
    transition: all 0.4s ease;
}

.step:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.15);
}

.step-number {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #1e40af, #7c3aed);
    color: white;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 auto 25px;
    box-shadow: 0 10px 30px rgba(30, 64, 175, 0.3);
}

.step h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #ffffff;
    font-weight: 600;
}

.step p {
    color: #cbd5e1;
    line-height: 1.7;
}

.insights-cta {
    padding: 100px 0;
    text-align: center;
    background: #1e293b;
    position: relative;
}

.insights-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
}

.insights-cta .container {
    position: relative;
    z-index: 2;
}

.insights-cta h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #ffffff;
    font-weight: 700;
}

.insights-cta p {
    font-size: 1.3rem;
    color: #cbd5e1;
    margin-bottom: 40px;
}

/* Responsive Design for Dashboard */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    
    .hero-content {
        flex: none;
        max-width: 100%;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-visual {
        flex: none;
        max-width: 100%;
        width: 100%;
        height: 300px;
    }
}
    
    .nav-menu {
        gap: 15px;
    }
    
    .contact-info {
        flex-direction: column;
        gap: 20px;
    }
    
    .insights-hero h1 {
        font-size: 2.2rem;
    }
    
    .dashboard-item,
    .dashboard-item:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .dashboard-item:nth-child(even) .dashboard-screenshot,
    .dashboard-item:nth-child(even) .dashboard-description {
        order: unset;
    }
    
    .dashboard-screenshot {
        max-width: 100%;
    }
}/* 
Services Dropdown Styles */
.services-dropdown-container {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-btn {
    background: #ffffff;
    color: #666666;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 400;
    border: none;
    cursor: pointer;
    min-width: 120px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.15s ease;
    border-radius: 6px;
}

.dropdown-btn:hover {
    color: #000000;
}

.dropdown-arrow {
    transition: transform 0.3s;
}



.service-details {
    margin-top: 40px;
}

.service-detail {
    display: none;
}

.service-detail.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.feature-tag {
    background: rgba(255, 255, 255, 0.2);
    color: #cccccc;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-right: 8px;
    margin-bottom: 8px;
    display: inline-block;
}

.service-features {
    margin-top: 20px;
}

/* AnecdoteIQ Page Styles */
.anecdoteiq-hero {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
    position: relative;
    overflow: hidden;
    color: #1e293b;
    padding: 150px 0 80px;
    text-align: center;
}

.anecdoteiq-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 40%, rgba(30, 64, 175, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(124, 58, 237, 0.06) 0%, transparent 50%);
}

.anecdoteiq-hero .container {
    position: relative;
    z-index: 2;
}

.anecdoteiq-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #1e293b, #1e40af, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.anecdoteiq-hero p {
    font-size: 1.4rem;
    color: #64748b;
}

.upload-section {
    padding: 80px 0;
    background: #ffffff;
}

.upload-container {
    max-width: 800px;
    margin: 0 auto;
}

.upload-header {
    text-align: center;
    margin-bottom: 50px;
}

.upload-header h2 {
    font-size: 2.5rem;
    color: #1e293b;
    margin-bottom: 15px;
    font-weight: 700;
}

.upload-header p {
    font-size: 1.2rem;
    color: #64748b;
}

.upload-area {
    border: 3px dashed #cbd5e1;
    background: #f8fafc;
    padding: 60px 40px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    margin-bottom: 30px;
}

.upload-area:hover {
    border-color: #1e40af;
    background: #f1f5f9;
}

.upload-area.dragover {
    border-color: #1e40af;
    background: rgba(30, 64, 175, 0.05);
}

.upload-content .upload-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.upload-content h3 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 10px;
    font-weight: 600;
}

.upload-content p {
    color: #64748b;
    margin-bottom: 25px;
}

.browse-btn {
    background: #1e40af;
    color: white;
    padding: 12px 24px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.browse-btn:hover {
    background: #1e3a8a;
}

.file-info {
    margin-bottom: 40px;
}

.file-info h4 {
    color: #1e293b;
    margin-bottom: 15px;
    font-weight: 600;
}

.format-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.format-tag {
    background: #f1f5f9;
    color: #64748b;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
}

.uploaded-files {
    margin-bottom: 40px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.uploaded-files h4 {
    color: #1e293b;
    margin-bottom: 15px;
    font-weight: 600;
}

.file-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: white;
    border: 1px solid #e2e8f0;
}

.file-name {
    font-weight: 500;
    color: #1e293b;
}

.file-size {
    color: #64748b;
    font-size: 0.9rem;
}

.remove-file {
    background: #ef4444;
    color: white;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.8rem;
}

.remove-file:hover {
    background: #dc2626;
}

.analysis-options {
    margin-bottom: 40px;
}

.analysis-options h4 {
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 600;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.option-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 15px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
}

.option-item:hover {
    background: #f1f5f9;
    border-color: #1e40af;
}

.option-item input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    background: white;
    border: 2px solid #cbd5e1;
    margin-right: 12px;
    position: relative;
    transition: all 0.3s;
}

.option-item input[type="checkbox"]:checked + .checkmark {
    background: #1e40af;
    border-color: #1e40af;
}

.option-item input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    color: white;
    font-weight: bold;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
}

.generate-section {
    text-align: center;
}

.generate-btn {
    background: linear-gradient(135deg, #1e40af, #7c3aed);
    color: white;
    padding: 20px 40px;
    border: none;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.generate-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(30, 64, 175, 0.3);
}

.generate-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.generate-btn.processing {
    background: #f59e0b;
}

.generate-btn.processing .btn-icon {
    animation: spin 1s linear infinite;
}

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

.processing-note {
    color: #64748b;
    font-size: 0.9rem;
}

.features-preview {
    padding: 80px 0;
    background: #f8fafc;
}

.features-preview h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #1e293b;
    margin-bottom: 50px;
    font-weight: 700;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.preview-item {
    background: white;
    padding: 40px 30px;
    text-align: center;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.preview-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(30, 64, 175, 0.15);
}

.preview-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.preview-item h3 {
    font-size: 1.4rem;
    color: #1e293b;
    margin-bottom: 15px;
    font-weight: 600;
}

.preview-item p {
    color: #64748b;
    line-height: 1.6;
}

/* Responsive Design for AnecdoteIQ */
@media (max-width: 768px) {
    .anecdoteiq-hero h1 {
        font-size: 2.5rem;
    }
    
    .upload-area {
        padding: 40px 20px;
    }
    
    .options-grid {
        grid-template-columns: 1fr;
    }
    
    .generate-btn {
        padding: 16px 32px;
        font-size: 1.1rem;
    }
}/* Demo 
Button */
.btn-demo {
    background: #000000;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: background-color 0.15s ease;
}

.btn-demo:hover {
    background: #333333;
}

/* Dropdown for Services */
.dropdown {
    position: relative;
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 800px;
    max-width: 1000px;
    width: max-content;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 16px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-30px);
    transition: all 0.2s ease;
    pointer-events: none;
    margin-top: 2px;
    will-change: opacity, visibility, transform;
}

/* Mega Menu Styles */
.dropdown-content.mega-menu {
    width: auto;
    min-width: auto;
    max-width: none;
    padding: 0;
    overflow: visible;
}

.mega-menu-container {
    display: flex;
    min-height: auto;
    gap: 0;
}

.mega-menu-sidebar {
    width: 200px;
    background: #f3f4f6;
    border-right: none;
    padding: 8px;
    border-radius: 8px;
    margin: 8px;
    margin-right: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.mega-menu-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    border-radius: 6px;
    margin-bottom: 4px;
}

.mega-menu-category:hover {
    background: #e5e7eb;
    color: #000;
}

.mega-menu-category.active {
    background: #ffffff;
    color: #000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.mega-menu-category.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    border-radius: 6px 0 0 6px;
}

.mega-menu-category svg {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

.mega-menu-category.active svg {
    opacity: 1;
}

.mega-menu-content {
    flex: 0 1 auto;
    padding: 16px 20px 20px 20px;
    position: relative;
    overflow: visible;
    max-width: 350px;
}

.mega-menu-panel {
    display: none;
    animation: fadeIn 0.2s ease;
    width: 100%;
}

.mega-menu-panel.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mega-menu-panel .dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 150px));
    gap: 8px;
    margin-right: 0;
}

.mega-menu-panel .dropdown-column {
    gap: 0px;
}

.mega-menu-panel .dropdown-item {
    padding: 8px 10px 8px 18px;
    border-radius: 6px;
    transition: all 0.15s ease;
    min-height: auto;
    margin-bottom: 6px;
    position: relative;
}

.mega-menu-panel .dropdown-item::before {
    content: '•';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #4A90E2;
    font-size: 14px;
    line-height: 1;
}

.mega-menu-panel .dropdown-item:hover {
    background: transparent;
    transform: translateX(0);
}

/* Hide icons and descriptions in mega menu */
.mega-menu-panel .dropdown-icon {
    display: none;
}

.mega-menu-panel .dropdown-text p {
    display: none;
}

.mega-menu-panel .dropdown-text h4 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    color: #666;
    white-space: nowrap;
}

/* Add header styling for mega menu */
.mega-menu-panel .dropdown-header {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px 4px;
    margin-bottom: 4px;
}

/* Adjust dropdown content for mega menu */
.dropdown-content.mega-menu .dropdown-header {
    display: none;
}

/* Mega menu header styling */
.mega-menu-header {
    padding-top: 0px;
    padding-bottom: 12px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.mega-menu-header-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mega-menu-header-text {
    flex: 0;
}

.mega-menu-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: #000;
    margin: 0;
    white-space: nowrap;
}

.mega-menu-header p {
    display: none;
}

/* Overview section above menu items */
.mega-menu-overview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    margin-top: 0px;
    margin-right: 0;
    padding-top: 10px;
    padding-bottom: 4px;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, #7DD3C0 0%, #5FB1A9 50%, #4A90E2 100%) 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mega-menu-overview:hover span {
    color: #1a1a1a;
}

.mega-menu-overview:hover svg {
    stroke: #1a1a1a;
}

.mega-menu-overview span {
    font-size: 13px;
    font-weight: 500;
    color: #4A90E2;
    transition: color 0.3s ease;
}

.mega-menu-overview svg {
    width: 16px;
    height: 16px;
    stroke: #4A90E2;
    transition: stroke 0.3s ease;
}

/* Mega menu spotlight section */
.mega-menu-spotlight {
    background: linear-gradient(135deg, #dbeafe 0%, #c7d2fe 100%);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #93c5fd;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    margin-left: 8px;
    width: 220px;
    z-index: 10;
}

.mega-menu-spotlight:hover {
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
    transform: translateY(-1px);
}

/* Device mockup styling */
.spotlight-devices {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

/* Laptop mockup */
.device-laptop {
    flex: 1;
    position: relative;
    background: #1f2937;
    border-radius: 6px 6px 0 0;
    padding: 3px 3px 0 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.device-laptop::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: #374151;
    border-radius: 2px;
    z-index: 1;
}

.device-laptop::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: -4px;
    right: -4px;
    height: 4px;
    background: #111827;
    border-radius: 0 0 8px 8px;
}

.device-laptop .device-screen {
    background: #0a0a0a;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    margin-top: 6px;
    position: relative;
    aspect-ratio: 16 / 10;
}

/* Mobile mockup */
.device-mobile {
    width: 35px;
    position: relative;
    background: #1f2937;
    border-radius: 6px;
    padding: 4px 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.device-mobile::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 2px;
    background: #374151;
    border-radius: 1px;
}

.device-mobile::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 2px;
    background: #374151;
    border-radius: 1px;
}

.device-mobile .device-screen {
    background: #0a0a0a;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 9 / 16;
}

.device-screen {
    position: relative;
}

.device-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20%;
    width: 50%;
    height: 200%;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 45%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.15) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 2;
}

.device-screen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    filter: brightness(1.1) contrast(1.05);
    padding: 4px;
    mix-blend-mode: lighten;
}

.spotlight-badge {
    display: inline-block;
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    color: #ffffff;
    font-size: 9px;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.mega-menu-spotlight h4 {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin: 6px 0 4px 0;
    line-height: 1.2;
}

.mega-menu-spotlight p {
    font-size: 11px;
    color: #666;
    margin: 0;
    line-height: 1.3;
}

/* Enterprise Devices Container */
.enterprise-devices {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

/* Enterprise Laptop Display */
.enterprise-laptop {
    flex: 1;
    position: relative;
    background: #1f2937;
    border-radius: 4px 4px 0 0;
    padding: 2px 2px 0 2px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.enterprise-laptop::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: #374151;
    border-radius: 1px;
    z-index: 1;
}

.enterprise-laptop::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: -3px;
    right: -3px;
    height: 3px;
    background: #111827;
    border-radius: 0 0 6px 6px;
}

.enterprise-laptop .laptop-screen {
    background: #0a0a0a;
    border-radius: 2px 2px 0 0;
    overflow: hidden;
    margin-top: 4px;
    position: relative;
    width: 100%;
    height: 100px;
}

.enterprise-laptop .laptop-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20%;
    width: 50%;
    height: 200%;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.12) 45%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.12) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 2;
}

.enterprise-laptop .laptop-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.enterprise-logo-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* Enterprise Mobile Display */
.enterprise-mobile {
    width: 28px;
    position: relative;
    background: #1f2937;
    border-radius: 4px;
    padding: 3px 2px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.enterprise-mobile::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 1.5px;
    background: #374151;
    border-radius: 1px;
}

.enterprise-mobile::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 1.5px;
    background: #374151;
    border-radius: 1px;
}

.enterprise-mobile .mobile-screen {
    background: #0a0a0a;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    height: 50px;
}

.enterprise-mobile .mobile-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20%;
    width: 50%;
    height: 200%;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.12) 45%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.12) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 2;
}

.enterprise-laptop .enterprise-logo-screen img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3)) !important;
    mix-blend-mode: normal !important;
    padding: 0 !important;
}

.enterprise-mobile .enterprise-logo-screen img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.3)) !important;
    mix-blend-mode: normal !important;
    padding: 0 !important;
}

.dropdown:hover .dropdown-content,
.dropdown-content:hover,
.dropdown-content.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

/* Ensure dropdowns don't interfere with each other */
.dropdown:not(:hover) .dropdown-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.dropdown-content.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.dropdown-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
    width: max-content;
}

/* Dynamic dropdown widths based on content */
.dropdown-grid.two-columns {
    grid-template-columns: repeat(2, minmax(180px, max-content));
}

.dropdown-grid.three-columns {
    grid-template-columns: repeat(3, minmax(180px, max-content));
}

.dropdown-content.two-columns,
.dropdown-content.three-columns {
    width: max-content;
    min-width: 360px;
}

.dropdown-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 10px;
    transition: background-color 0.15s ease;
    cursor: pointer;
    min-height: 50px;
    height: auto;
    border-radius: 6px;
}

.dropdown-item:hover {
    background: transparent;
}

.dropdown-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dropdown-text {
    flex: 1;
    min-width: 0;
}

.dropdown-text h4 {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    margin: 0 0 2px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    /* Prevent layout shift on hover by reserving space for bold text */
    font-variation-settings: 'wght' 500;
    transition: font-variation-settings 0.2s ease;
}

.dropdown-text p {
    font-size: 11px;
    color: #666666;
    margin: 0;
    line-height: 1.2;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    word-wrap: break-word;
    overflow-wrap: break-word;
}/* 
Sign Up Button */
.btn-signup {
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.15s ease;
}

.btn-signup:hover {
    background: linear-gradient(135deg, #6bc4b0, #3b7dd6);
    box-shadow: 0 4px 12px rgba(125, 211, 192, 0.3);
}/* 
Simple Dropdown Styles */
.dropdown-simple {
    width: 300px;
}

.dropdown-simple-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dropdown-simple-item {
    padding: 12px 16px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.dropdown-simple-item:hover {
    background: #f8f9fa;
}

.dropdown-simple-item h4 {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    margin: 0 0 4px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.dropdown-simple-item p {
    font-size: 12px;
    color: #666666;
    margin: 0;
    line-height: 1.3;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Featured main service in dropdown */
.dropdown-item.featured-main {
    background: rgba(30, 64, 175, 0.05);
    border: 1px solid rgba(30, 64, 175, 0.2);
    cursor: pointer;
}

.dropdown-item.featured-main:hover {
    background: rgba(30, 64, 175, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.15);
}

.dropdown-item.featured-main .dropdown-text h4 {
    color: #000000;
    font-weight: 600;
}

.dropdown-item.featured-main .dropdown-text p {
    color: #666666;
}

/* Simple hover solution */
.dropdown {
    position: relative;
}

.dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    width: 840px;
    height: 8px;
    background: transparent;
    z-index: 1000;
}/*
 Bouncing Balls Animation */
.bouncing-balls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ball {
    border-radius: 50%;
    position: absolute;
    opacity: 1 !important;
    z-index: 10;
    background: #000000 !important;
}

/* Tiny balls - 1.5px */
.ball-tiny {
    width: 1.5px !important;
    height: 1.5px !important;
}

/* Small balls - 2px */
.ball-small {
    width: 2px !important;
    height: 2px !important;
}

/* Medium balls - 3px */
.ball-medium {
    width: 3px !important;
    height: 3px !important;
}

/* Large balls - 4px */
.ball-large {
    width: 4px !important;
    height: 4px !important;
}

/* Extra Large balls - 5px */
.ball-xlarge {
    width: 5px !important;
    height: 5px !important;
}

/* Huge balls - 6px */
.ball-huge {
    width: 6px !important;
    height: 6px !important;
}

/* All rope/line styles removed */



.ball-1 {
    background: #000000;
    animation: bounce1 15s infinite ease-in-out, fadeIn 15s infinite;
}

.ball-1::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ball-2 {
    background: #333333;
    animation: bounce2 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 0.8s;
}

.ball-2::before {
    transform: translate(-50%, -50%) rotate(135deg);
}

.ball-3 {
    background: #666666;
    animation: bounce3 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 1.6s;
}

.ball-3::before {
    transform: translate(-50%, -50%) rotate(225deg);
}

.ball-4 {
    background: #999999;
    animation: bounce4 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 2.4s;
}

.ball-4::before {
    transform: translate(-50%, -50%) rotate(315deg);
}

.ball-5 {
    background: #cccccc;
    animation: bounce5 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 3.2s;
}

.ball-5::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.ball-6 {
    background: #ffffff;
    border: 0.5px solid #ccc;
    animation: bounce6 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 4s;
}

.ball-6::before {
    transform: translate(-50%, -50%) rotate(180deg);
}

.ball-7 {
    background: #1a1a1a;
    animation: bounce7 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 4.8s;
}

.ball-7::before {
    transform: translate(-50%, -50%) rotate(270deg);
}

.ball-8 {
    background: #4d4d4d;
    animation: bounce8 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 5.6s;
}

.ball-8::before {
    transform: translate(-50%, -50%) rotate(0deg);
}

.ball-9 {
    background: #808080;
    animation: bounce9 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 6.4s;
}

.ball-9::before {
    transform: translate(-50%, -50%) rotate(60deg);
}

.ball-10 {
    background: #b3b3b3;
    animation: bounce10 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 7.2s;
}

.ball-10::before {
    transform: translate(-50%, -50%) rotate(120deg);
}

.ball-11 {
    background: #e6e6e6;
    animation: bounce11 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 8s;
}

.ball-11::before {
    transform: translate(-50%, -50%) rotate(240deg);
}

.ball-12 {
    background: #f5f5f5;
    animation: bounce12 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 8.8s;
}

.ball-12::before {
    transform: translate(-50%, -50%) rotate(300deg);
}

/* EXPANDED MOVEMENT AREA - BALLS COVER MORE SPACE */

/* Top area animations - covering 30% of rectangle height */
@keyframes topEdge1 {
    0% { left: 10%; top: 5%; }
    25% { left: 40%; top: 25%; }
    50% { left: 80%; top: 15%; }
    75% { left: 60%; top: 30%; }
    100% { left: 10%; top: 5%; }
}

@keyframes topEdge2 {
    0% { left: 70%; top: 20%; }
    25% { left: 20%; top: 10%; }
    50% { left: 50%; top: 35%; }
    75% { left: 90%; top: 25%; }
    100% { left: 70%; top: 20%; }
}

@keyframes topEdge3 {
    0% { left: 30%; top: 30%; }
    25% { left: 85%; top: 5%; }
    50% { left: 15%; top: 20%; }
    75% { left: 65%; top: 35%; }
    100% { left: 30%; top: 30%; }
}

@keyframes topEdge4 {
    0% { left: 90%; top: 15%; }
    25% { left: 25%; top: 35%; }
    50% { left: 75%; top: 10%; }
    75% { left: 35%; top: 25%; }
    100% { left: 90%; top: 15%; }
}

/* Right area animations - covering 30% of rectangle width */
@keyframes rightEdge1 {
    0% { left: 75%; top: 15%; }
    25% { left: 95%; top: 45%; }
    50% { left: 85%; top: 75%; }
    75% { left: 70%; top: 55%; }
    100% { left: 75%; top: 15%; }
}

@keyframes rightEdge2 {
    0% { left: 90%; top: 60%; }
    25% { left: 80%; top: 25%; }
    50% { left: 95%; top: 85%; }
    75% { left: 75%; top: 40%; }
    100% { left: 90%; top: 60%; }
}

@keyframes rightEdge3 {
    0% { left: 85%; top: 35%; }
    25% { left: 70%; top: 70%; }
    50% { left: 95%; top: 20%; }
    75% { left: 80%; top: 80%; }
    100% { left: 85%; top: 35%; }
}

@keyframes rightEdge4 {
    0% { left: 95%; top: 80%; }
    25% { left: 75%; top: 30%; }
    50% { left: 85%; top: 90%; }
    75% { left: 90%; top: 50%; }
    100% { left: 95%; top: 80%; }
}

/* Bottom area animations - covering 30% of rectangle height */
@keyframes bottomEdge1 {
    0% { left: 15%; top: 85%; }
    25% { left: 45%; top: 70%; }
    50% { left: 85%; top: 95%; }
    75% { left: 55%; top: 75%; }
    100% { left: 15%; top: 85%; }
}

@keyframes bottomEdge2 {
    0% { left: 60%; top: 75%; }
    25% { left: 25%; top: 90%; }
    50% { left: 75%; top: 65%; }
    75% { left: 90%; top: 85%; }
    100% { left: 60%; top: 75%; }
}

@keyframes bottomEdge3 {
    0% { left: 35%; top: 95%; }
    25% { left: 80%; top: 70%; }
    50% { left: 20%; top: 80%; }
    75% { left: 70%; top: 90%; }
    100% { left: 35%; top: 95%; }
}

@keyframes bottomEdge4 {
    0% { left: 85%; top: 80%; }
    25% { left: 30%; top: 65%; }
    50% { left: 90%; top: 95%; }
    75% { left: 40%; top: 85%; }
    100% { left: 85%; top: 80%; }
}

/* Left area animations - covering 30% of rectangle width */
@keyframes leftEdge1 {
    0% { left: 5%; top: 30%; }
    25% { left: 25%; top: 60%; }
    50% { left: 15%; top: 85%; }
    75% { left: 30%; top: 45%; }
    100% { left: 5%; top: 30%; }
}

@keyframes leftEdge2 {
    0% { left: 20%; top: 70%; }
    25% { left: 5%; top: 40%; }
    50% { left: 30%; top: 20%; }
    75% { left: 10%; top: 80%; }
    100% { left: 20%; top: 70%; }
}

@keyframes leftEdge3 {
    0% { left: 10%; top: 50%; }
    25% { left: 30%; top: 85%; }
    50% { left: 5%; top: 25%; }
    75% { left: 25%; top: 65%; }
    100% { left: 10%; top: 50%; }
}

@keyframes leftEdge4 {
    0% { left: 25%; top: 90%; }
    25% { left: 10%; top: 35%; }
    50% { left: 30%; top: 75%; }
    75% { left: 5%; top: 55%; }
    100% { left: 25%; top: 90%; }
}

@keyframes bounce2 {
    0% { left: 95%; top: 70%; }
    25% { left: 5%; top: 80%; }
    50% { left: 10%; top: 95%; }
    75% { left: 90%; top: 85%; }
    100% { left: 95%; top: 70%; }
}

@keyframes bounce3 {
    0% { left: 15%; top: 65%; }
    25% { left: 85%; top: 95%; }
    50% { left: 95%; top: 75%; }
    75% { left: 5%; top: 85%; }
    100% { left: 15%; top: 65%; }
}

@keyframes bounce4 {
    0% { left: 85%; top: 95%; }
    25% { left: 15%; top: 75%; }
    50% { left: 5%; top: 65%; }
    75% { left: 95%; top: 80%; }
    100% { left: 85%; top: 95%; }
}

@keyframes bounce5 {
    0% { left: 5%; top: 75%; }
    25% { left: 95%; top: 65%; }
    50% { left: 85%; top: 90%; }
    75% { left: 15%; top: 95%; }
    100% { left: 5%; top: 75%; }
}

@keyframes bounce6 {
    0% { left: 95%; top: 70%; }
    33% { left: 5%; top: 80%; }
    66% { left: 20%; top: 95%; }
    100% { left: 95%; top: 70%; }
}

@keyframes bounce7 {
    0% { left: 5%; top: 95%; }
    33% { left: 95%; top: 75%; }
    66% { left: 80%; top: 65%; }
    100% { left: 5%; top: 95%; }
}

@keyframes bounce8 {
    0% { left: 25%; top: 70%; }
    33% { left: 75%; top: 95%; }
    66% { left: 95%; top: 80%; }
    100% { left: 25%; top: 70%; }
}

@keyframes bounce9 {
    0% { left: 75%; top: 95%; }
    33% { left: 25%; top: 75%; }
    66% { left: 5%; top: 85%; }
    100% { left: 75%; top: 95%; }
}

@keyframes bounce10 {
    0% { left: 5%; top: 70%; }
    50% { left: 95%; top: 80%; }
    100% { left: 5%; top: 70%; }
}

@keyframes bounce11 {
    0% { left: 95%; top: 85%; }
    50% { left: 5%; top: 75%; }
    100% { left: 95%; top: 85%; }
}

@keyframes bounce12 {
    0% { left: 40%; top: 65%; }
    50% { left: 60%; top: 95%; }
    100% { left: 40%; top: 65%; }
}
}

@keyframes bounce4 {
    0% { left: 150px; top: 300px; }
    25% { left: 60px; top: 100px; }
    50% { left: 280px; top: 80px; }
    75% { left: 340px; top: 250px; }
    100% { left: 150px; top: 300px; }
}@key
frames fadeIn {
    0% { opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}@
keyframes bounce5 {
    0% { left: 25%; top: 50%; }
    25% { left: 85%; top: 25%; }
    50% { left: 92%; top: 12%; }
    75% { left: 12%; top: 38%; }
    100% { left: 25%; top: 50%; }
}

@keyframes bounce6 {
    0% { left: 250px; top: 250px; }
    20% { left: 80px; top: 80px; }
    40% { left: 320px; top: 180px; }
    60% { left: 150px; top: 320px; }
    80% { left: 300px; top: 60px; }
    100% { left: 250px; top: 250px; }
}

@keyframes bounce7 {
    0% { left: 45%; top: 25%; }
    30% { left: 88%; top: 62%; }
    60% { left: 15%; top: 75%; }
    90% { left: 95%; top: 8%; }
    100% { left: 45%; top: 25%; }
}

@keyframes bounce8 {
    0% { left: 120px; top: 320px; }
    25% { left: 300px; top: 120px; }
    50% { left: 80px; top: 60px; }
    75% { left: 340px; top: 280px; }
    100% { left: 120px; top: 320px; }
}

@keyframes bounce9 {
    0% { left: 320px; top: 160px; }
    20% { left: 100px; top: 300px; }
    40% { left: 60px; top: 120px; }
    60% { left: 280px; top: 40px; }
    80% { left: 200px; top: 280px; }
    100% { left: 320px; top: 160px; }
}

@keyframes bounce10 {
    0% { left: 40%; top: 15%; }
    30% { left: 8%; top: 60%; }
    60% { left: 85%; top: 75%; }
    90% { left: 95%; top: 25%; }
    100% { left: 40%; top: 15%; }
}

@keyframes bounce11 {
    0% { left: 18%; top: 45%; }
    25% { left: 65%; top: 20%; }
    50% { left: 92%; top: 55%; }
    75% { left: 120px; top: 340px; }
    100% { left: 80px; top: 180px; }
}

@keyframes bounce12 {
    0% { left: 55%; top: 50%; }
    20% { left: 93%; top: 20%; }
    40% { left: 20%; top: 8%; }
    60% { left: 8%; top: 80%; }
    80% { left: 88%; top: 85%; }
    100% { left: 55%; top: 50%; }
}.ba
ll-13 {
    background: #0d0d0d;
    animation: bounce13 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 12s;
}

.ball-14 {
    background: #262626;
    animation: bounce14 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 12.5s;
}

.ball-14::before {
    transform: translate(-50%, -50%) rotate(30deg);
}

.ball-15 {
    background: #404040;
    animation: bounce15 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 13s;
}

.ball-15::before {
    transform: translate(-50%, -50%) rotate(75deg);
}

.ball-16 {
    background: #595959;
    animation: bounce16 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 13.5s;
}

.ball-17 {
    background: #737373;
    animation: bounce17 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 14s;
}

.ball-18 {
    background: #8c8c8c;
    animation: bounce18 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 14.2s;
}

.ball-19 {
    background: #a6a6a6;
    animation: bounce19 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 14.4s;
}

.ball-20 {
    background: #d9d9d9;
    animation: bounce20 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 14.6s;
}

@keyframes bounce13 {
    0% { left: 90px; top: 90px; }
    25% { left: 290px; top: 150px; }
    50% { left: 180px; top: 310px; }
    75% { left: 60px; top: 200px; }
    100% { left: 90px; top: 90px; }
}

@keyframes bounce14 {
    0% { left: 270px; top: 70px; }
    20% { left: 110px; top: 280px; }
    40% { left: 330px; top: 200px; }
    60% { left: 50px; top: 110px; }
    80% { left: 240px; top: 320px; }
    100% { left: 270px; top: 70px; }
}

@keyframes bounce15 {
    0% { left: 140px; top: 280px; }
    30% { left: 310px; top: 90px; }
    60% { left: 70px; top: 50px; }
    90% { left: 300px; top: 270px; }
    100% { left: 140px; top: 280px; }
}

@keyframes bounce16 {
    0% { left: 200px; top: 150px; }
    25% { left: 350px; top: 300px; }
    50% { left: 100px; top: 350px; }
    75% { left: 30px; top: 80px; }
    100% { left: 200px; top: 150px; }
}

@keyframes bounce17 {
    0% { left: 130px; top: 50px; }
    20% { left: 320px; top: 140px; }
    40% { left: 250px; top: 330px; }
    60% { left: 40px; top: 250px; }
    80% { left: 180px; top: 30px; }
    100% { left: 130px; top: 50px; }
}

@keyframes bounce18 {
    0% { left: 300px; top: 200px; }
    30% { left: 80px; top: 320px; }
    60% { left: 340px; top: 60px; }
    90% { left: 120px; top: 180px; }
    100% { left: 300px; top: 200px; }
}

@keyframes bounce19 {
    0% { left: 170px; top: 320px; }
    25% { left: 40px; top: 140px; }
    50% { left: 280px; top: 50px; }
    75% { left: 350px; top: 240px; }
    100% { left: 170px; top: 320px; }
}

@keyframes bounce20 {
    0% { left: 240px; top: 120px; }
    20% { left: 60px; top: 300px; }
    40% { left: 310px; top: 180px; }
    60% { left: 150px; top: 40px; }
    80% { left: 320px; top: 310px; }
    100% { left: 240px; top: 120px; }
}.ball
-21 {
    background: #f0f0f0;
    animation: bounce21 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 14.8s;
}

.ball-22 {
    background: #1f1f1f;
    animation: bounce22 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 15s;
}

.ball-23 {
    background: #4a4a4a;
    animation: bounce23 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 15.2s;
}

.ball-24 {
    background: #6d6d6d;
    animation: bounce24 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 15.4s;
}

.ball-25 {
    background: #909090;
    animation: bounce25 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 15.6s;
}

.ball-26 {
    background: #b8b8b8;
    animation: bounce26 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 15.8s;
}

.ball-27 {
    background: #dcdcdc;
    animation: bounce27 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 16s;
}

.ball-28 {
    background: #2e2e2e;
    animation: bounce28 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 16.2s;
}

.ball-29 {
    background: #525252;
    animation: bounce29 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 16.4s;
}

.ball-30 {
    background: #757575;
    animation: bounce30 15s infinite ease-in-out, fadeIn 15s infinite;
    animation-delay: 16.6s;
}

@keyframes bounce21 {
    0% { left: 110px; top: 250px; }
    25% { left: 330px; top: 110px; }
    50% { left: 190px; top: 40px; }
    75% { left: 50px; top: 290px; }
    100% { left: 110px; top: 250px; }
}

@keyframes bounce22 {
    0% { left: 260px; top: 160px; }
    20% { left: 70px; top: 70px; }
    40% { left: 340px; top: 240px; }
    60% { left: 130px; top: 330px; }
    80% { left: 310px; top: 50px; }
    100% { left: 260px; top: 160px; }
}

@keyframes bounce23 {
    0% { left: 180px; top: 290px; }
    30% { left: 350px; top: 130px; }
    60% { left: 90px; top: 60px; }
    90% { left: 280px; top: 310px; }
    100% { left: 180px; top: 290px; }
}

@keyframes bounce24 {
    0% { left: 320px; top: 200px; }
    25% { left: 100px; top: 340px; }
    50% { left: 60px; top: 120px; }
    75% { left: 290px; top: 70px; }
    100% { left: 320px; top: 200px; }
}

@keyframes bounce25 {
    0% { left: 140px; top: 80px; }
    20% { left: 300px; top: 280px; }
    40% { left: 80px; top: 320px; }
    60% { left: 350px; top: 100px; }
    80% { left: 160px; top: 50px; }
    100% { left: 140px; top: 80px; }
}

@keyframes bounce26 {
    0% { left: 250px; top: 320px; }
    30% { left: 50px; top: 180px; }
    60% { left: 330px; top: 60px; }
    90% { left: 120px; top: 260px; }
    100% { left: 250px; top: 320px; }
}

@keyframes bounce27 {
    0% { left: 190px; top: 130px; }
    25% { left: 340px; top: 290px; }
    50% { left: 110px; top: 350px; }
    75% { left: 40px; top: 90px; }
    100% { left: 190px; top: 130px; }
}

@keyframes bounce28 {
    0% { left: 300px; top: 240px; }
    20% { left: 90px; top: 100px; }
    40% { left: 320px; top: 80px; }
    60% { left: 70px; top: 300px; }
    80% { left: 270px; top: 350px; }
    100% { left: 300px; top: 240px; }
}

@keyframes bounce29 {
    0% { left: 160px; top: 210px; }
    30% { left: 340px; top: 120px; }
    60% { left: 80px; top: 40px; }
    90% { left: 310px; top: 330px; }
    100% { left: 160px; top: 210px; }
}

@keyframes bounce30 {
    0% { left: 220px; top: 300px; }
    25% { left: 60px; top: 150px; }
    50% { left: 290px; top: 50px; }
    75% { left: 350px; top: 270px; }
    100% { left: 220px; top: 300px; }
}.gr
id-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, #999999 1px, transparent 1px),
        linear-gradient(to bottom, #999999 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 1;
    z-index: 1;
}/* Anecdote
IQ Page Styles */
.anecdote-hero {
    background: #ffffff;
    padding: 140px 0 80px;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.anecdote-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.anecdote-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #000000;
    letter-spacing: -0.02em;
}

.anecdote-hero h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 24px;
    color: #000000;
    line-height: 1.2;
}

.anecdote-hero p {
    font-size: 1.125rem;
    margin-bottom: 40px;
    color: #666666;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.anecdote-buttons {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    align-items: center;
}

.anecdote-features {
    padding: 80px 0;
    background: #f8f9fa;
}

.anecdote-features h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 60px;
    color: #000000;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.feature-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.feature-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #000000;
}

.feature-card p {
    color: #666666;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .anecdote-hero h1 {
        font-size: 2.5rem;
    }
    
    .anecdote-hero h2 {
        font-size: 1.5rem;
    }
    
    .anecdote-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}/
* Service Page Styles - Vercel Design */
.service-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 5px;
}

.service-hero {
    padding: 140px 0 100px;
    background: #ffffff;
}

.service-hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.service-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #000000;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.service-hero-content p {
    font-size: 1.25rem;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 0;
}

.service-hero-visual {
    display: flex;
    justify-content: center;
}

.chart-container {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    width: 300px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-title {
    font-size: 14px;
    color: #666666;
    font-weight: 500;
}

.chart-value {
    font-size: 14px;
    color: #10b981;
    font-weight: 600;
}

.simple-chart {
    display: flex;
    align-items: end;
    gap: 8px;
    height: 80px;
    margin-bottom: 12px;
}

.chart-bar {
    background: #3b82f6;
    width: 20px;
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #9ca3af;
}

.service-section {
    padding: 100px 0;
    background: #ffffff;
}

.service-content {
    max-width: 600px;
}

.service-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.service-content p {
    font-size: 1.125rem;
    color: #666666;
    line-height: 1.6;
}

.service-features {
    padding: 100px 0;
    background: #ffffff;
}

.features-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.feature-half h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 16px;
}

.feature-half p {
    font-size: 1rem;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 32px;
}

.feature-visual {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
}

.pattern-chart {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pattern-line {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pattern-label {
    font-size: 14px;
    color: #666666;
    width: 60px;
}

.pattern-bar {
    height: 8px;
    border-radius: 4px;
    flex: 1;
    max-width: 200px;
}

.pattern-bar.positive { background: #10b981; }
.pattern-bar.neutral { background: #6b7280; }
.pattern-bar.negative { background: #ef4444; }

.pattern-value {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
    width: 40px;
}

.recommendation-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rec-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.rec-status {
    font-size: 12px;
}

.rec-status.positive { color: #10b981; }
.rec-status.warning { color: #f59e0b; }
.rec-status.neutral { color: #6b7280; }

.rec-text {
    font-size: 14px;
    color: #374151;
}

.service-faq {
    padding: 100px 0;
    background: #ffffff;
}

.faq-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 48px;
}

.faq-list {
    max-width: 600px;
}

.faq-item {
    border: none;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    font-size: 1.125rem;
    color: #000000;
    cursor: pointer;
    transition: color 0.2s ease;
}



.faq-arrow {
    font-size: 12px;
    color: #9ca3af;
    transition: transform 0.2s ease;
}

/* Service Page Responsive Design */
@media (max-width: 768px) {
    .service-hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .service-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .features-row {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .chart-container {
        width: 100%;
        max-width: 300px;
    }
}/* E
xact Vercel Service Page Match */
.suggestions-chart {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    width: 280px;
}

.chart-title {
    font-size: 14px;
    color: #666666;
    margin-bottom: 16px;
    font-weight: 500;
}

.chart-bars {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 60px;
    margin-bottom: 8px;
}

.chart-bar {
    background: #3b82f6;
    width: 12px;
    border-radius: 1px;
    min-height: 2px;
}

.chart-timeline {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #9ca3af;
}

/* Feature Showcase Section */
.feature-showcase {
    padding: 80px 0 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.showcase-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.showcase-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.showcase-header p {
    font-size: 1.125rem;
    color: #64748b;
    line-height: 1.6;
}

.feature-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 100px;
    padding: 0 20px;
}

.feature-block.reverse {
    direction: rtl;
}

.feature-block.reverse > * {
    direction: ltr;
}

.feature-content {
    max-width: 540px;
}

.feature-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #000000;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 20px;
    margin-bottom: 20px;
}

.feature-content h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.feature-content p {
    font-size: 0.9375rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
}

.feature-list li:before {
    content: "▸";
    position: absolute;
    left: 0;
    top: 0;
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
}

.feature-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-mockup {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* Product Insights Section */
.product-insights-section {
    margin-top: 100px;
    padding-top: 80px;
    border-top: 1px solid #e2e8f0;
}

.product-insights-section h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    margin-bottom: 12px;
}

.product-insights-section > p {
    font-size: 1.0625rem;
    color: #64748b;
    text-align: center;
    margin-bottom: 50px;
}

.products-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.product-tab-item {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e2e8f0;
    padding: 30px 0;
}

.product-tab-item:last-child {
    border-bottom: none;
}

.tab-line {
    width: 4px;
    background: #3b82f6;
    flex-shrink: 0;
    margin-right: 30px;
}

.tab-content {
    flex: 1;
}

.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
}

.tab-header h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    flex: 1;
}

.product-status {
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.product-status.positive {
    background: #dcfce7;
    color: #166534;
}

.product-status.warning {
    background: #fef3c7;
    color: #854d0e;
}

.tab-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.metric-box {
    display: flex;
    flex-direction: column;
}

.metric-label {
    font-size: 0.8125rem;
    color: #64748b;
    margin-bottom: 6px;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.metric-value.success {
    color: #10b981;
}

.metric-value.warning {
    color: #f59e0b;
}

.tab-insights {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tab-insights p {
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* LLM Recommendations Section */
.llm-recommendations-section {
    margin-top: 100px;
    padding-top: 80px;
    border-top: 1px solid #e2e8f0;
}

.llm-recommendations-section h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    margin-bottom: 12px;
}

.llm-recommendations-section > p {
    font-size: 1.0625rem;
    color: #64748b;
    text-align: center;
    margin-bottom: 50px;
}

.llm-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.llm-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 28px;
    transition: all 0.3s ease;
}

.llm-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.llm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.priority-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.priority-badge.high {
    background: #fee2e2;
    color: #991b1b;
}

.priority-badge.medium {
    background: #fef3c7;
    color: #854d0e;
}

.priority-badge.low {
    background: #dbeafe;
    color: #1e40af;
}

.ai-icon {
    font-size: 1.5rem;
}

.llm-card h4 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 12px;
    line-height: 1.4;
}

.llm-card > p {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

.recommendation-details {
    background: #f8fafc;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.detail-row:last-child {
    margin-bottom: 0;
}

.detail-row .label {
    font-size: 0.8125rem;
    color: #64748b;
}

.detail-row .value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
}

.action-btn {
    width: 100%;
    padding: 10px 16px;
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: #333333;
    transform: translateY(-1px);
}

/* Holistic Dashboard */
.holistic-dashboard {
    text-align: center;
    margin-top: 100px;
    padding-top: 80px;
    border-top: 1px solid #e2e8f0;
}

.holistic-dashboard h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.holistic-dashboard p {
    font-size: 1.0625rem;
    color: #64748b;
    margin-bottom: 50px;
}

.dashboard-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-dashboard-mockup {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.12));
    border-radius: 12px;
}

/* Features Text Section */
.features-text-section {
    padding: 100px 0;
    background: #ffffff !important;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.feature-text-item {
    text-align: center;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.feature-text-item h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 12px;
}

.feature-text-item p {
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.6;
}

/* FAQ Section */
.faq-section {
    padding: 0;
    background: #ffffff;
}

.faq-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 80px;
}

.faq-sidebar h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #0f172a;
    position: sticky;
    top: 100px;
}

.faq-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    border: none;
    padding: 0;
    margin-bottom: 24px;
    background: transparent;
}

.faq-item:last-child {
    border: none;
    margin-bottom: 0;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 10px;
    transition: all 0.3s ease;
}



.faq-question span {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    transition: color 0.3s ease;
}



.faq-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: #64748b;
    transition: transform 0.3s ease, color 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
    color: #3b82f6;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding-top: 8px;
    padding-bottom: 0;
}

.faq-answer p {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.3;
    margin: 0;
}

/* Responsive Design for Feature Showcase */
@media (max-width: 968px) {
    .feature-block {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 80px;
    }
    
    .feature-block.reverse {
        direction: ltr;
    }
    
    .feature-content {
        max-width: 100%;
    }
    
    .feature-content h3 {
        font-size: 1.75rem;
    }
    
    .showcase-header h2 {
        font-size: 2rem;
    }
}

@media (max-width: 968px) {
    .llm-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .faq-sidebar h2 {
        position: static;
        font-size: 2.5rem;
    }
    
    .tab-line {
        width: 3px;
        margin-right: 20px;
    }
    
    .tab-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .feature-showcase {
        padding: 60px 0 0;
    }
    
    .showcase-header {
        margin-bottom: 60px;
    }
    
    .showcase-header h2 {
        font-size: 1.75rem;
    }
    
    .showcase-header p {
        font-size: 1rem;
    }
    
    .feature-content h3 {
        font-size: 1.5rem;
    }
    
    .feature-content p {
        font-size: 1rem;
    }
    
    .feature-list li {
        font-size: 0.875rem;
    }
    
    .dashboard-mockup {
        max-width: 100%;
    }
    
    .holistic-dashboard {
        margin-top: 60px;
        padding-top: 60px;
    }
    
    .holistic-dashboard h3 {
        font-size: 1.75rem;
    }
    
    .holistic-dashboard p {
        font-size: 1rem;
    }
    
    .product-insights-section h3,
    .llm-recommendations-section h3 {
        font-size: 1.75rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .faq-header h2 {
        font-size: 2rem;
    }
    
    .features-text-section {
        padding: 60px 0;
    }
    
    .faq-section {
        padding: 0;
    }
    
    .faq-sidebar h2 {
        font-size: 2rem;
    }
    
    .tab-metrics {
        grid-template-columns: 1fr;
    }
    
    .tab-header h4 {
        font-size: 1.125rem;
    }
}

.service-section {
    padding: 120px 0;
    background: #ffffff;
}

.service-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    max-width: 600px;
}

.service-section p {
    font-size: 1.125rem;
    color: #666666;
    line-height: 1.6;
    max-width: 600px;
}

.service-section-alt {
    padding: 120px 0;
    background: #ffffff;
}

.service-section-alt h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    max-width: 700px;
}

.service-section-alt p {
    font-size: 1.125rem;
    color: #666666;
    line-height: 1.6;
    max-width: 700px;
}

.service-features-alt {
    padding: 80px 0 120px;
    background: #ffffff;
}

.feature-left h3, .feature-right h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 16px;
}

.feature-left p, .feature-right p {
    font-size: 1rem;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 32px;
}

.spike-chart {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}

.chart-label {
    font-size: 14px;
    color: #000000;
    font-weight: 500;
    margin-bottom: 4px;
}

.chart-subtitle {
    font-size: 12px;
    color: #666666;
    margin-bottom: 16px;
}

.chart-line {
    margin-bottom: 12px;
}

.chart-footer {
    font-size: 12px;
    color: #9ca3af;
}

.investigation-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}

.investigation-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.bullet {
    color: #9ca3af;
    font-size: 8px;
    margin-top: 6px;
}

.investigation-footer {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.pr-table {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
}

.table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    font-size: 12px;
    color: #666666;
    font-weight: 500;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
}

.table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    font-size: 14px;
    color: #374151;
    padding: 8px 0;
    align-items: center;
}

.repo-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.repo-name::before {
    content: "●";
    color: #10b981;
    font-size: 8px;
}

.suggestion-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.suggestion-status {
    background: #10b981;
    color: #ffffff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.suggestion-text {
    font-size: 14px;
    color: #374151;
}

.suggestion-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #666666;
}

.avatar {
    width: 16px;
    height: 16px;
    background: #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.suggestion-footer {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}/* Anec
doteIQ Hero Banner */
.anecdote-hero {
    background: #ffffff;
    padding: 140px 0 80px;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.anecdote-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.anecdote-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #000000;
    letter-spacing: -0.02em;
}

.anecdote-hero h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 24px;
    color: #000000;
    line-height: 1.2;
}

.anecdote-hero p {
    font-size: 1.125rem;
    margin-bottom: 40px;
    color: #666666;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.anecdote-buttons {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    align-items: center;
}

/* Responsive */
@media (max-width: 768px) {
    .anecdote-hero h1 {
        font-size: 2.5rem;
    }
    
    .anecdote-hero h2 {
        font-size: 1.5rem;
    }
    
    .anecdote-buttons {
        flex-direction: column;
        align-items: center;
    }
}/* Hover Effects for Dropdown Items */

.dropdown-item:hover .dropdown-text h4 {
    color: #4A90E2;
    transition: color 0.2s ease;
}

.dropdown-item:hover .dropdown-icon svg rect {
    stroke: #4b5563;
    fill: rgba(75, 85, 99, 0.1);
    transition: all 0.2s ease;
}

.dropdown-item:hover .dropdown-icon svg path {
    stroke: #4b5563;
    fill: #4b5563;
    transition: all 0.2s ease;
}

.dropdown-item:hover .dropdown-icon svg circle {
    fill: #6b7280;
    transition: fill 0.2s ease;
}

/* Dropdown Headers */
.dropdown-header {
    padding: 8px 12px 4px 12px;
    font-weight: 500;
    font-size: 14px;
    color: #666666;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Grey hover for regular buttons (excluding black buttons) */
.btn-demo-hero:hover {
    background: rgba(107, 114, 128, 0.1);
    color: #374151;
    border: 1px solid #6b7280;
    transition: all 0.2s ease;
}



/* Navigation links hover */
.nav-link:hover {
    color: #000000;
    background: #e5e7eb;
    border-radius: 50px;
    transition: all 0.2s ease;
}

/* Feature cards hover */
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.15);
    border: 1px solid rgba(30, 64, 175, 0.2);
    transition: all 0.2s ease;
}

.feature-card:hover h3 {
    color: #374151;
    transition: color 0.2s ease;
}/
* Professional AnecdoteIQ Dashboard Hero */
.anecdote-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.anecdote-dashboard {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    position: relative;
}

.dashboard-box {
    width: 1100px;
    height: 640px;
    background: #ffffff;
    border: none;
    border-radius: 0;
    background-image: 
        linear-gradient(to right, #e5e7eb 1px, transparent 1px),
        linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
    background-size: 80px 80px;
    margin: 0 auto;
    position: relative;
}

.dashboard-box::before,
.dashboard-box::after {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    border: 0.5px solid #999999;
}

.dashboard-box::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.dashboard-box::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

.sentiment-chart {
    position: relative;
}

.chart-info {
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.chart-label {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

.chart-time {
    font-size: 12px;
    color: #9ca3af;
}

.insights-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
}

.panel-header {
    font-size: 14px;
    color: #374151;
    font-weight: 600;
    margin-bottom: 12px;
}

.source-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.source-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.source-icon {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #ffffff;
}

.source-icon.google { background: #4285f4; }
.source-icon.vercel { background: #000000; }
.source-icon.x { background: #1da1f2; }
.source-icon.hn { background: #ff6600; }
.source-icon.split { background: #8b5cf6; }
.source-icon.linear { background: #5e6ad2; }

.source-name {
    flex: 1;
    color: #374151;
}

.source-value {
    color: #6b7280;
    font-weight: 500;
}

.logs-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
}

.logs-header {
    font-size: 14px;
    color: #374151;
    font-weight: 600;
    margin-bottom: 12px;
}

.log-entries {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.log-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-family: 'Monaco', 'Menlo', monospace;
}

.log-time {
    color: #6b7280;
    width: 40px;
}

.log-method {
    color: #374151;
    width: 30px;
}

.log-status {
    width: 30px;
    font-weight: 600;
}

.log-status.positive { color: #10b981; }
.log-status.neutral { color: #6b7280; }

.log-path {
    color: #374151;
    flex: 1;
}

/* Update existing anecdote-hero styles */
.anecdote-hero-content {
    text-align: left;
}

/* Dashboard Responsive */
@media (max-width: 768px) {
    .anecdote-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .dashboard-main {
        grid-template-columns: 1fr;
    }
    
    .anecdote-hero-content {
        text-align: center;
    }
}.
hero-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    padding: 60px 0;
}

.content-overlay {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 10;
    max-width: 400px;
}

.content-overlay h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #000000;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.content-overlay p {
    font-size: 1.125rem;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 40px;
}

.hero-content h1 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #000000;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}

.hero-content p {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 22px;
}

.anecdote-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}.graph-
overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}/* Graph 
Hover Interactions */
.data-point {
    cursor: pointer;
    transition: all 0.2s ease;
}

.data-point:hover circle:first-child {
    opacity: 1 !important;
    stroke-width: 2;
}

.data-point:hover circle:last-child {
    r: 3;
}

.graph-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
}
/* Enhanced Analytics Box */
.analytics-box {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 280px;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.analytics-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.title-icon {
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #10b981;
    font-weight: 500;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.metrics-grid {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.metric-card.positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.metric-card.processing {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08) 0%, rgba(255, 193, 7, 0.04) 100%);
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.metric-card.alert {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.08) 0%, rgba(233, 30, 99, 0.04) 100%);
    border: 1px solid rgba(233, 30, 99, 0.2);
}

.metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.metric-info {
    flex: 1;
}

.metric-label {
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 1px;
}

.metric-trend {
    font-size: 9px;
    color: #6b7280;
    font-weight: 400;
}

.activity-feed {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 10px;
}

.feed-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    transition: all 0.2s ease;
}

.feed-item:hover {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
}

.feed-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.feed-icon.sentiment-positive {
    background: rgba(16, 185, 129, 0.1);
}

.feed-icon.data-processing {
    background: rgba(59, 130, 246, 0.1);
}

.feed-icon.trend-analysis {
    background: rgba(255, 193, 7, 0.1);
}

.feed-icon.alert-minor {
    background: rgba(245, 158, 11, 0.1);
}

.feed-text {
    font-size: 10px;
    color: #4b5563;
    font-weight: 400;
    line-height: 1.3;
}/* Anal
ysis Page Styles */
.analysis-hero {
    background: #ffffff;
    color: #1f2937;
    padding: 160px 0 10px;
    text-align: center;
    position: relative;
}



.analysis-cover h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 1.1;
    color: #1f2937;
}

.analysis-cover p {
    font-size: 1.125rem;
    margin-bottom: 0;
    color: #666666;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}



.analysis-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 500;
}

.upload-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.upload-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.upload-header h2 {
    font-size: 2.5rem;
    color: #1f2937;
    margin-bottom: 16px;
    font-weight: 600;
}

.upload-header p {
    font-size: 1.125rem;
    color: #6b7280;
    margin-bottom: 40px;
}

.upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 60px 40px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.upload-area:hover,
.upload-area.drag-over {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.02);
}

.upload-icon svg {
    opacity: 0.6;
}

.upload-text h3 {
    font-size: 1.5rem;
    color: #374151;
    margin-bottom: 8px;
    font-weight: 600;
}

.upload-text p {
    color: #6b7280;
    margin-bottom: 12px;
}

.file-info {
    font-size: 0.875rem;
    color: #9ca3af;
}

.file-preview {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.file-details {
    display: flex;
    align-items: center;
    gap: 16px;
}

.file-icon {
    flex-shrink: 0;
}

.file-info-text {
    flex: 1;
    text-align: left;
}

.file-name {
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.file-size {
    color: #6b7280;
    font-size: 0.875rem;
}

.remove-file {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.remove-file:hover {
    background: rgba(239, 68, 68, 0.1);
}

.upload-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
}

.btn-upload,
.btn-analyze {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn-upload {
    background: #3b82f6;
    color: white;
}

.btn-upload:hover:not(:disabled) {
    background: #2563eb;
    transform: translateY(-1px);
}

.btn-upload:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

.btn-analyze {
    background: #10b981;
    color: white;
}

.btn-analyze:hover:not(:disabled) {
    background: #059669;
    transform: translateY(-1px);
}

.btn-analyze:disabled {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

.btn-upload.success,
.btn-analyze.success {
    background: #10b981;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .analysis-cover h1 {
        font-size: 2.5rem;
    }
    
    .analysis-features {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .upload-area {
        padding: 40px 20px;
    }
    
    .upload-actions {
        flex-direction: column;
    }
}/* New Ma
in Content Section */
.main-content {
    padding: 0 0 40px 0;
    background: #ffffff;
    position: relative;
    min-height: 60vh;
}

/* Removed old decorative lines - using corner decorations instead */



.main-content .container {
    position: relative;
    z-index: 2;
}

/* Dashboard Section */
.dashboard-section {
    padding: 80px 0;
    background: transparent;
    position: relative;
    margin-top: 80px;
    border-top: 1px solid #e5e7eb;
}

.dashboard-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px;
    background: #ffffff;
    position: relative;
    z-index: 2;
}

.dashboard-header {
    margin-bottom: 40px;
}

.dashboard-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 30px;
    text-align: center;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-item {
    text-align: center;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.875rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.chart-section h3,
.insights-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
}

.sentiment-bars {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sentiment-bar {
    position: relative;
    height: 40px;
    background: #f1f5f9;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 20px;
    transition: width 1s ease;
}

.sentiment-bar.positive .bar-fill {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.sentiment-bar.neutral .bar-fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.sentiment-bar.negative .bar-fill {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.bar-label {
    position: relative;
    z-index: 2;
    font-weight: 500;
    color: #1f2937;
}

.insight-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.insight-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.insight-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.insight-icon.positive {
    background: #dcfce7;
    color: #16a34a;
}

.insight-icon.trending {
    background: #dbeafe;
    color: #2563eb;
}

.insight-icon.warning {
    background: #fef3c7;
    color: #d97706;
}

.insight-text strong {
    display: block;
    color: #1f2937;
    margin-bottom: 5px;
}

.insight-text p {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

/* Simple Text Section */
.simple-text-section {
    padding: 60px 0;
    background: #ffffff;
    text-align: center;
}

.simple-text-section p {
    font-size: 1.125rem;
    color: #6b7280;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}











.content-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 0;
    margin-top: 180px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.geometric-section {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    margin: 20px 0;
}

.upload-drop-zone {
    position: relative;
    width: 100%;
    height: 200px;
    background: #f5f5f5;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.upload-drop-zone:hover {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #bbf7d0 100%);
    border-color: #a7f3d0;
}

.upload-drop-zone.dragover {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #bbf7d0 100%);
    border-color: #a7f3d0;
    transform: scale(1.02);
}

.upload-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(135deg, #d1fae5 0%, #bbf7d0 100%);
    transition: width 0.3s ease;
    z-index: 1;
}

.upload-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #666;
    transition: color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-drop-zone:hover .upload-content {
    color: #6b7280;
}



.upload-text {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 2px;
}

.upload-subtext {
    font-size: 0.75rem;
    opacity: 0.7;
}

.upload-section-content {
    max-width: 400px;
}

.upload-section-content h2 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
    margin-bottom: 16px;
}

.upload-section-content p {
    font-size: 1.125rem;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 24px;
}

.button-container {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.choose-file-button {
    background: #000000;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    text-align: center;
}

.choose-file-button:hover {
    background: #333333;
    transform: translateY(-1px);
}

.generate-insights-button {
    background: transparent;
    color: #666666;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
    text-align: center;
}

.generate-insights-button:hover:not(:disabled) {
    background: rgba(107, 114, 128, 0.1);
    color: #374151;
    border: 1px solid #6b7280;
    transition: all 0.2s ease;
}

.generate-insights-button:disabled {
    background: transparent;
    color: #9ca3af;
    cursor: not-allowed;
}

.file-info-text {
    text-align: left;
}

.file-info-text small {
    color: #9ca3af;
    font-size: 0.875rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    text-align: center;
    padding: 32px 24px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    background: #f8fafc;
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    background: rgba(59, 130, 246, 0.2);
    transform: scale(1.1);
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.feature-card:hover h3 {
    color: #3b82f6;
}

.feature-card p {
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.hover-steps {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 20px;
    border-radius: 0 0 12px 12px;
}

.feature-card:hover .hover-steps {
    opacity: 1;
    transform: translateY(0);
}

.feature-card:hover p {
    opacity: 0;
    transform: translateY(-10px);
}

.step-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.step-item:last-child {
    margin-bottom: 0;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.75rem;
}

.step-text {
    font-weight: 500;
}

/* Responsive for new layout */
@media (max-width: 768px) {
    .content-layout {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .content-section h1 {
        font-size: 2.5rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .corner-decoration {
        width: 40px;
        height: 40px;
    }
}/* 
Highlighted text with red circle effect */
.highlight-text {
    position: relative;
    color: #1f2937;
}

.highlight-text::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -12px;
    right: -12px;
    bottom: -8px;
    border: 2px solid #ef4444;
    border-radius: 50px;
    pointer-events: none;
}

/* Step indicator */
.step-indicator {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.step-box {
    background: #ffffff;
    border: 2px solid #ef4444;
    padding: 8px 20px;
    border-radius: 4px;
    display: inline-block;
}

.step-text {
    color: #ef4444;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}



/* Insights counter - centered below text */
.highlight-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.insights-counter {
    display: inline-block;
    padding: 16px 20px;
    border: 1px solid transparent;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.05);
    background-clip: padding-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210px;
    height: 50px;
}

.insights-counter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    padding: 1px;
    background: linear-gradient(0deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #feca57 100%);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    animation: rotateBorder 3s linear infinite;
}

@keyframes rotateBorder {
    0% {
        background: linear-gradient(0deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #feca57 100%);
    }
    25% {
        background: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #feca57 100%);
    }
    50% {
        background: linear-gradient(180deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #feca57 100%);
    }
    75% {
        background: linear-gradient(270deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #feca57 100%);
    }
    100% {
        background: linear-gradient(360deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #feca57 100%);
    }
}

.digit-display {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seven-segment-display {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.digit {
    position: relative;
    width: 28px;
    height: 45px;
}

.segment {
    position: absolute;
    background: #d5d5d5;
    transition: background 0.2s;
}

.segment.active {
    background: #1a1a1a;
}

/* Horizontal segments with proper angled ends - BOLD */
.segment.a { 
    top: 0; 
    left: 5px; 
    width: 18px; 
    height: 6px;
    clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
}

.segment.d { 
    top: 19px; 
    left: 5px; 
    width: 18px; 
    height: 6px;
    clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
}

.segment.g { 
    bottom: 0; 
    left: 5px; 
    width: 18px; 
    height: 6px;
    clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
}

/* Vertical segments with proper angled ends - BOLD */
.segment.b { 
    top: 5px; 
    right: 0; 
    width: 6px; 
    height: 16px;
    clip-path: polygon(0% 15%, 50% 0%, 100% 15%, 100% 85%, 50% 100%, 0% 85%);
}

.segment.c { 
    bottom: 5px; 
    right: 0; 
    width: 6px; 
    height: 16px;
    clip-path: polygon(0% 15%, 50% 0%, 100% 15%, 100% 85%, 50% 100%, 0% 85%);
}

.segment.e { 
    bottom: 5px; 
    left: 0; 
    width: 6px; 
    height: 16px;
    clip-path: polygon(0% 15%, 50% 0%, 100% 15%, 100% 85%, 50% 100%, 0% 85%);
}

.segment.f { 
    top: 5px; 
    left: 0; 
    width: 6px; 
    height: 16px;
    clip-path: polygon(0% 15%, 50% 0%, 100% 15%, 100% 85%, 50% 100%, 0% 85%);
}/
* Models Page Styles */
.models-hero {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
    position: relative;
    overflow: hidden;
    color: #1e293b;
    padding: 150px 0 80px;
    text-align: center;
}

.models-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
}

.models-hero .container {
    position: relative;
    z-index: 2;
}

.models-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #1e293b, #1e40af, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.models-hero p {
    font-size: 1.4rem;
    color: #64748b;
}

.models-main {
    padding: 60px 0 100px;
    background: #ffffff;
}

.model-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.tab-btn:hover {
    background: #ffffff;
    border-color: #000000;
    color: #000000;
    cursor: pointer;
    transform: translateY(-1px);
}

.tab-btn.active {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}

.tab-btn svg {
    width: 18px;
    height: 18px;
}

.models-container {
    position: relative;
}

.model-category {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.model-category.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.category-header {
    text-align: center;
    margin-top: 90px;
    margin-bottom: 90px;
}

.category-header h2 {
    font-size: 3rem;
    color: #1e293b;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center;
}

.category-header p {
    font-size: 1.125rem;
    color: #666666;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.6;
}

.models-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.model-card {
    background: #ffffff;
    border: 1px solid #94a3b8;
    border-radius: 20px;
    padding: 20px 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
    min-height: 200px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.model-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.02), rgba(124, 58, 237, 0.02));
    opacity: 0;
    transition: opacity 0.3s;
}

.model-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 25px 60px rgba(102, 126, 234, 0.4),
        0 15px 35px rgba(245, 87, 108, 0.3),
        0 8px 20px rgba(118, 75, 162, 0.3),
        0 4px 12px rgba(240, 147, 251, 0.2);
}

.model-card:hover::before {
    opacity: 1;
}

.model-icon {
    font-size: 2rem;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
}

.model-icon svg {
    color: #000000 !important;
}

.model-icon svg path,
.model-icon svg circle,
.model-icon svg polyline,
.model-icon svg line,
.model-icon svg polygon,
.model-icon svg rect {
    stroke: #000000 !important;
    fill: #000000 !important;
}

.model-icon svg path[fill="none"],
.model-icon svg circle[fill="none"],
.model-icon svg polyline[fill="none"],
.model-icon svg line[fill="none"],
.model-icon svg polygon[fill="none"],
.model-icon svg rect[fill="none"] {
    fill: none !important;
}

.model-card h3 {
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 8px;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.model-card p {
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
    font-size: 0.8rem;
}

.model-tags {
    display: none;
}

.tag {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
}

.model-btn {
    width: auto !important;
    min-width: 100px !important;
    max-width: 140px !important;
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 12px 20px !important;
    border-radius: 8px;
    font-size: 12px !important;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    margin: 0 auto !important;
    display: block !important;
}

.model-btn:hover:not(:disabled) {
    background: #333333;
    transform: translateY(-1px);
}

.model-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
}

.model-search {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 30px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    display: block;
}

.model-search:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

/* Responsive Design for Models Page */
@media (max-width: 768px) {
    .models-hero h1 {
        font-size: 2.5rem;
    }
    
    .model-tabs {
        gap: 6px;
    }
    
    .tab-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .tab-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .models-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .category-header h2 {
        font-size: 2rem;
    }
}/*
 Additional ball connecting lines */
/* All ball line rotation styles removed *//* Dynam
ic connecting lines SVG */
.connecting-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 380px;
    height: 380px;
    pointer-events: none;
    z-index: 2;
}

.connecting-lines line {
    stroke: rgba(102, 102, 102, 0.4);
    stroke-width: 1;
    opacity: 0.6;
}/* Ove
rride all ball colors to be dark */
.ball-1, .ball-2, .ball-3, .ball-4, .ball-5, .ball-6, .ball-7, .ball-8, .ball-9, .ball-10,
.ball-11, .ball-12, .ball-13, .ball-14, .ball-15, .ball-16, .ball-17, .ball-18, .ball-19, .ball-20,
.ball-21, .ball-22, .ball-23, .ball-24, .ball-25, .ball-26, .ball-27, .ball-28, .ball-29, .ball-30 { 
    background: #000000 !important; 
    border: none !important; 
}

/* TOP EDGE BALLS - MIXED COLORS INCLUDING WHITE VARIANTS */

/* Top edge balls (10 balls) - Dark and white spectrum */
.ball-1 { animation: topEdge1 20s infinite linear !important; animation-delay: 0s !important; background: #000000 !important; }
.ball-1 { width: 6px !important; height: 6px !important; } /* Huge - Pure Black */

.ball-2 { animation: topEdge2 25s infinite linear !important; animation-delay: 0.3s !important; background: #ffffff !important; }
.ball-2 { width: 1.5px !important; height: 1.5px !important; } /* Tiny - Pure White */

.ball-3 { animation: topEdge3 18s infinite linear !important; animation-delay: 0.6s !important; background: #333333 !important; }
.ball-3 { width: 4px !important; height: 4px !important; } /* Large - Dark Grey */

.ball-4 { animation: topEdge4 22s infinite linear !important; animation-delay: 0.9s !important; background: #f0f0f0 !important; }
.ball-4 { width: 5px !important; height: 5px !important; } /* Extra Large - Light White */

.ball-5 { animation: topEdge1 16s infinite linear !important; animation-delay: 1.2s !important; background: #666666 !important; }
.ball-5 { width: 2px !important; height: 2px !important; } /* Small - Medium Grey */

.ball-6 { animation: topEdge2 24s infinite linear !important; animation-delay: 1.5s !important; background: #e8e8e8 !important; }
.ball-6 { width: 3px !important; height: 3px !important; } /* Medium - Very Light Grey */

.ball-7 { animation: topEdge3 19s infinite linear !important; animation-delay: 1.8s !important; background: #2d2d2d !important; }
.ball-7 { width: 6px !important; height: 6px !important; } /* Huge - Dark Grey */

.ball-8 { animation: topEdge4 21s infinite linear !important; animation-delay: 2.1s !important; background: #ffffff !important; }
.ball-8 { width: 1.5px !important; height: 1.5px !important; } /* Tiny - Pure White */

.ball-9 { animation: topEdge1 17s infinite linear !important; animation-delay: 2.4s !important; background: #404040 !important; }
.ball-9 { width: 5px !important; height: 5px !important; } /* Extra Large - Dark Grey */

.ball-10 { animation: topEdge2 23s infinite linear !important; animation-delay: 2.7s !important; background: #d4d4d4 !important; }
.ball-10 { width: 3px !important; height: 3px !important; } /* Medium - Light Grey */

/* Right edge balls (5 balls) - Mixed with white variants */
.ball-11 { animation: rightEdge1 19s infinite linear !important; animation-delay: 0.2s !important; background: #0d0d0d !important; }
.ball-11 { width: 5px !important; height: 5px !important; } /* Extra Large - Very Dark */

.ball-12 { animation: rightEdge2 21s infinite linear !important; animation-delay: 0.7s !important; background: #ffffff !important; }
.ball-12 { width: 2px !important; height: 2px !important; } /* Small - Pure White */

.ball-13 { animation: rightEdge3 17s infinite linear !important; animation-delay: 1.2s !important; background: #1f1f1f !important; }
.ball-13 { width: 6px !important; height: 6px !important; } /* Huge - Dark */

.ball-14 { animation: rightEdge4 23s infinite linear !important; animation-delay: 1.7s !important; background: #f5f5f5 !important; }
.ball-14 { width: 1.5px !important; height: 1.5px !important; } /* Tiny - Off White */

.ball-15 { animation: rightEdge1 15s infinite linear !important; animation-delay: 2.2s !important; background: #2a2a2a !important; }
.ball-15 { width: 4px !important; height: 4px !important; } /* Large - Dark Grey */

/* Bottom edge balls (8 balls) - Rich mix of dark and white variants */
.ball-16 { animation: bottomEdge1 24s infinite linear !important; animation-delay: 0.1s !important; background: #4a4a4a !important; }
.ball-16 { width: 3px !important; height: 3px !important; } /* Medium - Medium Grey */

.ball-17 { animation: bottomEdge2 18s infinite linear !important; animation-delay: 0.4s !important; background: #ffffff !important; }
.ball-17 { width: 6px !important; height: 6px !important; } /* Huge - Pure White */

.ball-18 { animation: bottomEdge3 22s infinite linear !important; animation-delay: 0.8s !important; background: #757575 !important; }
.ball-18 { width: 1.5px !important; height: 1.5px !important; } /* Tiny - Light Grey */

.ball-19 { animation: bottomEdge4 16s infinite linear !important; animation-delay: 1.3s !important; background: #363636 !important; }
.ball-19 { width: 5px !important; height: 5px !important; } /* Extra Large - Dark Grey */

.ball-20 { animation: bottomEdge1 25s infinite linear !important; animation-delay: 1.8s !important; background: #eeeeee !important; }
.ball-20 { width: 2px !important; height: 2px !important; } /* Small - Very Light Grey */

.ball-21 { animation: bottomEdge2 19s infinite linear !important; animation-delay: 2.3s !important; background: #141414 !important; }
.ball-21 { width: 6px !important; height: 6px !important; } /* Huge - Very Dark */

.ball-22 { animation: bottomEdge3 28s infinite linear !important; animation-delay: 2.8s !important; background: #ffffff !important; }
.ball-22 { width: 4px !important; height: 4px !important; } /* Large - Pure White */

.ball-23 { animation: bottomEdge4 20s infinite linear !important; animation-delay: 3.3s !important; background: #696969 !important; }
.ball-23 { width: 1.5px !important; height: 1.5px !important; } /* Tiny - Medium Light Grey */

/* Left edge balls (7 balls) - Complete spectrum with white highlights */
.ball-24 { animation: leftEdge1 21s infinite linear !important; animation-delay: 0.3s !important; background: #2f2f2f !important; }
.ball-24 { width: 5px !important; height: 5px !important; } /* Extra Large - Dark Grey */

.ball-25 { animation: leftEdge2 17s infinite linear !important; animation-delay: 0.6s !important; background: #ffffff !important; }
.ball-25 { width: 1.5px !important; height: 1.5px !important; } /* Tiny - Pure White */

.ball-26 { animation: leftEdge3 23s infinite linear !important; animation-delay: 1.1s !important; background: #121212 !important; }
.ball-26 { width: 6px !important; height: 6px !important; } /* Huge - Very Dark */

.ball-27 { animation: leftEdge4 14s infinite linear !important; animation-delay: 1.6s !important; background: #e0e0e0 !important; }
.ball-27 { width: 2px !important; height: 2px !important; } /* Small - Light Grey */

.ball-28 { animation: leftEdge1 27s infinite linear !important; animation-delay: 2.1s !important; background: #262626 !important; }
.ball-28 { width: 4px !important; height: 4px !important; } /* Large - Dark Grey */

.ball-29 { animation: leftEdge2 20s infinite linear !important; animation-delay: 2.6s !important; background: #ffffff !important; }
.ball-29 { width: 6px !important; height: 6px !important; } /* Huge - Pure White */

.ball-30 { animation: leftEdge3 18s infinite linear !important; animation-delay: 3.1s !important; background: #6a6a6a !important; }
.ball-30 { width: 3px !important; height: 3px !important; } /* Medium - Medium Grey */

/* All 30 balls are now active and distributed across 4 edges *//*
CONFLICTING RULES REMOVED - Using main ball definitions above */

/* All balls should be visible and animated *//* 
Force tabs to be clickable and white */






/* Ensure all backgrounds are pure white */
.models-hero, .models-main, .model-category, .models-container {
    background: #ffffff !important;
}

.models-hero::before, .models-main::before {
    background: #ffffff !important;
}/* DE
BUG: Force tabs to be visible */
.model-tabs {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 50px !important;
    flex-wrap: wrap !important;
    background: red !important; /* Temporary debug background */
    padding: 20px !important;
}

.tab-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    color: #000000 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
    visibility: visible !important;
    opacity: 1 !important;
}/*
 Model Tabs Styles */
.model-tabs-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 80px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.model-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.model-tab:hover {
    background: rgba(107, 114, 128, 0.1);
    color: #374151;
    border: 1px solid #6b7280;
    transition: all 0.2s ease;
}

.model-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border: 2px solid #667eea;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.model-tab.active:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    border: 2px solid #5a67d8;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    transition: all 0.2s ease;
}

.model-tab svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}

.model-tab span {
    white-space: nowrap;
    font-weight: 500;
}

/* Responsive tabs */
@media (max-width: 768px) {
    .model-tabs-container {
        gap: 8px;
        margin-top: 60px;
    }
    
    .model-tab {
        padding: 12px 16px;
        font-size: 13px;
    }
    
    .model-tab svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .model-tab span {
        display: none;
    }
    
    .model-tab {
        padding: 12px;
        min-width: 44px;
        justify-content: center;
    }
}/* 
Mobile responsive for model cards */
@media (max-width: 480px) {
    .models-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}/
* Model card content wrapper */
.model-card .model-btn {
    margin-top: auto;
    margin-bottom: 0;
}/
* Additional right-side focused animations */
@keyframes bounceRight1 {
    0% { left: 85%; top: 20%; }
    25% { left: 70%; top: 60%; }
    50% { left: 90%; top: 80%; }
    75% { left: 95%; top: 40%; }
    100% { left: 85%; top: 20%; }
}

@keyframes bounceRight2 {
    0% { left: 92%; top: 35%; }
    30% { left: 75%; top: 15%; }
    60% { left: 88%; top: 70%; }
    90% { left: 96%; top: 55%; }
    100% { left: 92%; top: 35%; }
}

@keyframes bounceRight3 {
    0% { left: 80%; top: 65%; }
    25% { left: 95%; top: 25%; }
    50% { left: 85%; top: 10%; }
    75% { left: 90%; top: 75%; }
    100% { left: 80%; top: 65%; }
}/* Ensure f
irst balls are darker for immediate impact */
/* All balls are now black - handled by the consolidated rule above *//* Remove al
l ball animations - now showing small balls from center *//* New smal
l balls that appear from center and move randomly */
.ball {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    animation-fill-mode: both;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Conflicting animations removed - using original bounce animations */

/* All ball animations are now handled by the earlier comprehensive rules *//
* Dummy Black Header */
.dummy-header {
    background: #1f2937 !important;
    color: #ffffff;
    padding: 60px 0;
    text-align: center;
    border: 2px solid #ef4444;
}

.dummy-header-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 5px;
    background: #1f2937 !important;
}

.dummy-header h2 {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.dummy-header p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
    opacity: 0.9;
}

.dummy-links {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.dummy-links a {
    color: #ffffff;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.dummy-links a:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}/
* Grey Container Section */
.grey-container {
    background: #374151 !important;
    padding: 80px 0;
    border: 5px solid #ef4444 !important;
}

.grey-container-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 5px;
    text-align: center;
}

.grey-container h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
}

.grey-container p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #ffffff;
    margin-bottom: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}/
* Professional Footer */
.professional-footer {
    background: #000000;
    color: #ffffff;
    padding: 0;
    margin: 0;
    width: 100%;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 60px;
    margin-bottom: 0;
    align-items: start;
}

/* Footer Brand Section */
.footer-brand {
    grid-column: 1 / -1;
    max-width: 100%;
    width: 100%;
    text-align: left;
    margin-bottom: 40px;
    margin-top: 0;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.footer-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 1px solid #ffffff;
}

.footer-table td {
    border: 1px solid #ffffff;
    padding: 20px;
    min-height: 50px;
    background: transparent;
}

.footer-logo-icon {
    margin-right: 8px;
}

.footer-logo-text .footer-logo-name {
    font-size: 26px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.5px;
    font-family: 'Gabriola', 'Poppins', sans-serif;
}

.footer-brand-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-description {
    font-size: 13px;
    line-height: 1.5;
    color: #cccccc;
    margin-bottom: 0;
    max-width: 100%;
}

.footer-mission {
    text-align: left;
}

.footer-mission a {
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    padding: 0;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-mission a:hover {
    color: #60a5fa;
    text-decoration: underline;
    text-decoration-color: #60a5fa;
}

.footer-cta {
    margin-top: 0;
    text-align: left;
}

.join-btn {
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    padding: 0;
    transition: all 0.3s ease;
    display: inline-block;
}

.join-btn:hover {
    color: #60a5fa;
    text-decoration: underline;
    text-decoration-color: #60a5fa;
}

/* Footer Navigation */
.footer-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
    margin-top: 0;
    width: 100%;
    justify-items: start;
}

.footer-nav .footer-column ul {
    text-align: left;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column h4 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: none;
    letter-spacing: 0.5px;
}

.footer-column li {
    margin-bottom: 8px;
}

.footer-column a {
    color: #cccccc;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.footer-column a:hover {
    color: #60a5fa;
    text-decoration: underline;
    text-decoration-color: #60a5fa;
}

/* Footer Contact */
.footer-contact {
    margin-top: 0;
    text-align: center;
    margin-left: 0;
}

.footer-contact h4 {
    color: #cccccc;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    margin-bottom: 8px;
}

.contact-email,
.contact-phone {
    color: #cccccc;
    font-size: 13px;
}

.social-links {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.social-link {
    color: #cccccc;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px;
}

.social-link:hover {
    color: #60a5fa;
    border: 1px solid #4A90E2;
}

.footer-social-extra {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-social-extra a {
    color: #cccccc;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-social-extra a:hover {
    color: #ffffff;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid #333333;
    padding: 30px 0 30px 0;
    margin-top: 40px;
    margin-bottom: 0;
    text-align: center;
}

.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
    justify-content: center;
}

.footer-bottom-links a {
    color: #cccccc;
    text-decoration: none;
    font-size: 11px;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: #60a5fa;
    text-decoration: underline;
    text-decoration-color: #60a5fa;
}

.footer-bottom-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 11px;
    color: #999999;
    justify-content: center;
}

.footer-bottom-info strong {
    color: #ffffff;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-nav {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-bottom-links,
    .footer-bottom-info {
        flex-direction: column;
        gap: 10px;
    }
}/
* Contact Page Styles */
.contact-hero {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
    padding: 150px 0 80px;
    text-align: center;
}

.contact-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #1e293b;
}

.contact-hero-content p {
    font-size: 1.4rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
}

.contact-main {
    padding: 80px 0;
    background: #ffffff;
}

.contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.form-header {
    margin-bottom: 40px;
}

.form-header h2 {
    font-size: 2.5rem;
    color: #1e293b;
    margin-bottom: 15px;
    font-weight: 700;
}

.form-header p {
    font-size: 1.1rem;
    color: #64748b;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #374151;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

.btn-submit {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-submit:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.contact-info-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 40px;
}

.contact-info-card h3 {
    font-size: 1.8rem;
    color: #1e293b;
    margin-bottom: 15px;
    font-weight: 700;
}

.contact-info-card > p {
    color: #64748b;
    margin-bottom: 30px;
    line-height: 1.6;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-text h4 {
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 8px;
    font-weight: 600;
}

.contact-text p {
    color: #64748b;
    margin: 4px 0;
    font-size: 0.95rem;
}

/* Auth Pages Styles */
.auth-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 100px 20px 50px;
}

.auth-container {
    width: 100%;
    max-width: 480px;
}

.auth-card {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.signup-card {
    max-width: 600px;
    margin: 0 auto;
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-header h1 {
    font-size: 2.5rem;
    color: #1e293b;
    margin-bottom: 12px;
    font-weight: 700;
}

.auth-header p {
    color: #64748b;
    font-size: 1.1rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.forgot-password {
    color: #3b82f6;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
}

.forgot-password:hover {
    text-decoration: underline;
}

.btn-auth {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-auth:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.auth-divider {
    text-align: center;
    margin: 24px 0;
    position: relative;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e5e7eb;
}

.auth-divider span {
    background: white;
    padding: 0 16px;
    color: #64748b;
    font-size: 0.9rem;
}

.social-login {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-social:hover {
    border-color: #d1d5db;
    background: #f9fafb;
    transform: translateY(-1px);
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.auth-footer p {
    color: #64748b;
    font-size: 0.95rem;
}

.signup-link,
.login-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
}

.signup-link:hover,
.login-link:hover {
    text-decoration: underline;
}

/* Signup specific styles */
.password-requirements {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

.password-requirements p {
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.password-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.password-requirements li {
    padding: 4px 0;
    color: #64748b;
    font-size: 0.85rem;
    position: relative;
    padding-left: 20px;
}

.password-requirements li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: #ef4444;
    font-weight: bold;
}

.password-requirements li.valid::before {
    content: '✓';
    color: #10b981;
}

.password-requirements li.valid {
    color: #10b981;
}

.terms-link,
.privacy-link {
    color: #3b82f6;
    text-decoration: none;
}

.terms-link:hover,
.privacy-link:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .contact-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .auth-card {
        padding: 24px;
        margin: 20px;
    }
    
    .auth-header h1 {
        font-size: 2rem;
    }
    
    .form-options {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .auth-section {
        padding: 80px 10px 30px;
    }
    
    .contact-hero-content h1 {
        font-size: 2rem;
    }
    
    .contact-hero-content p {
        font-size: 1.1rem;
    }
}/* Back 
to Home Button for Auth Pages */
.back-to-home {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
}

.back-home-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.95);
    color: #374151;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.back-home-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    color: #1f2937;
}

.back-home-btn svg {
    transition: transform 0.3s ease;
}

.back-home-btn:hover svg {
    transform: translateX(-2px);
}

/* Responsive adjustments for back button */
@media (max-width: 768px) {
    .back-to-home {
        top: 15px;
        left: 15px;
    }
    
    .back-home-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}/
* Contact Page Hero Styles */
.contact-info-brief {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-item-brief {
    color: #666666;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-item-brief strong {
    color: #000000;
    font-weight: 600;
    min-width: 120px;
}

/* Hero Form Styles */
.hero-form {
    flex: 1;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.contact-form-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    max-width: 500px;
}

.contact-form-container h3 {
    font-size: 1.8rem;
    color: #1e293b;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center;
}

.hero-contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hero-contact-form .form-group {
    display: flex;
    flex-direction: column;
}

.hero-contact-form input,
.hero-contact-form select,
.hero-contact-form textarea {
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    background: rgba(255, 255, 255, 0.9);
}

.hero-contact-form input:focus,
.hero-contact-form select:focus,
.hero-contact-form textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(255, 255, 255, 1);
}

.hero-contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.btn-contact-submit {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-contact-submit:hover {
    background: #2563eb;
    transform: translateY(-2px);
}

/* Responsive Design for Contact Hero */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    
    .hero-content,
    .hero-form {
        max-width: 100%;
        flex: none;
    }
    
    .contact-form-container {
        padding: 30px 20px;
    }
    
    .hero-contact-form .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .contact-info-brief {
        align-items: center;
    }
    
    .contact-item-brief {
        justify-content: center;
    }
}
/*
 Professional Contact Page Styles */
.professional-contact-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
}

.professional-contact-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(147, 51, 234, 0.1) 0%, transparent 50%);
}

.hero-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-text-content {
    color: white;
}

.hero-badge {
    display: inline-block;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.hero-text-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin-bottom: 40px;
}

.hero-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #60a5fa;
    display: block;
}

.stat-label {
    font-size: 0.875rem;
    color: #94a3b8;
    margin-top: 4px;
}

.hero-cta-buttons {
    display: flex;
    gap: 20px;
    align-items: center;
}

.btn-primary-hero {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

.btn-primary-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
}

.btn-secondary-hero {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e2e8f0;
    padding: 16px 24px;
    border: 1px solid rgba(226, 232, 240, 0.2);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.btn-secondary-hero:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(226, 232, 240, 0.3);
}

.hero-contact-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-method-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
}

.contact-method-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.contact-method-card .card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.email-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

.phone-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.location-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.card-content h3 {
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.primary-contact {
    color: #e2e8f0;
    font-weight: 500;
    margin-bottom: 4px;
}

.secondary-contact {
    color: #94a3b8;
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.availability {
    color: #60a5fa;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Professional Form Section */
.professional-form-section {
    padding: 100px 0;
    background: #f8fafc;
}

.section-header {
    text-align: center;
    margin-bottom: 80px;
}

.section-badge {
    display: inline-block;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 16px;
}

.section-header h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
}

.section-subtitle {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.form-layout-professional {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: start;
}

.main-form-container {
    background: white;
    padding: 40px;
}

.form-section {
    margin-bottom: 40px;
}

.form-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.form-field {
    position: relative;
}

.form-field label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #fafafa;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background: white;
}

.form-field textarea {
    resize: vertical;
    min-height: 120px;
}

.field-border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.form-field input:focus + .field-border,
.form-field select:focus + .field-border,
.form-field textarea:focus + .field-border {
    transform: scaleX(1);
}

.form-actions {
    text-align: center;
    margin-top: 40px;
}

.btn-submit-enterprise {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
    padding: 18px 40px;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

.btn-submit-enterprise:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
}

.form-disclaimer {
    margin-top: 16px;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
}

/* Form Sidebar */
.form-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sidebar-card {
    background: white;
    padding: 30px;
}

.card-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 20px;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.benefit-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.benefit-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-text h4 {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 4px;
}

.benefit-text p {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.4;
}

.contact-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white;
}

.contact-card .card-header h3 {
    color: white;
}

.contact-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
}

.contact-option:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.contact-option .contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-option h4 {
    font-weight: 600;
    margin-bottom: 2px;
}

.contact-option p {
    color: #cbd5e1;
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-content-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .form-layout-professional {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .hero-text-content h1 {
        font-size: 2.5rem;
    }
    
    .section-header h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .professional-contact-hero {
        padding: 80px 0 60px;
    }
    
    .hero-text-content h1 {
        font-size: 2rem;
    }
    
    .hero-stats {
        justify-content: center;
        gap: 30px;
    }
    
    .hero-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .main-form-container {
        padding: 30px 20px;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .hero-contact-cards {
        margin-top: 40px;
    }
}

@media (max-width: 480px) {
    .hero-text-content h1 {
        font-size: 1.75rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .contact-method-card {
        padding: 20px;
    }
    
    .main-form-container {
        padding: 20px;
    }
    
    .sidebar-card {
        padding: 20px;
    }
}/* Contact P
age Hero Floating Elements */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.floating-element {
    position: absolute;
    animation: float 6s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}/* Hero Con
tact Form Tile */
.hero-form-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.contact-form-container {
    background: white;
    padding: 40px;
    width: 100%;
    max-width: 420px;
}

/* Text Border Decoration */
.text-border-decoration {
    position: relative;
    padding: 20px 0;
}

.text-border-decoration::before,
.text-border-decoration::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 1px solid #666666;
}

.text-border-decoration::before {
    top: -40px;
    left: -20px;
    border-right: none;
    border-bottom: none;
}

.text-border-decoration::after {
    bottom: -20px;
    right: 0;
    border-left: none;
    border-top: none;
}



.contact-form-container h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    text-align: center;
}

.contact-form-container p {
    color: #64748b;
    text-align: center;
    margin-bottom: 24px;
    font-size: 0.875rem;
}

.hero-contact-form .form-group {
    margin-bottom: 16px;
}

.hero-contact-form input,
.hero-contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    background: #fafafa;
    font-family: inherit;
}

.hero-contact-form input:focus,
.hero-contact-form textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background: white;
}

.hero-contact-form textarea {
    resize: vertical;
    min-height: 80px;
}

.btn-form-submit {
    width: 100%;
    background: #000000;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.875rem;
}

.btn-form-submit:hover {
    background: #333333;
    transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-form-tile {
        margin-top: 40px;
    }
    
    .contact-form-container {
        padding: 24px;
        margin: 0 20px;
    }
}/* Hero Mark
 Image */
.hero-mark {
    width: 60px;
    height: auto;
    margin-bottom: 20px;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .hero-mark {
        width: 50px;
        margin-bottom: 16px;
    }
}/* P
rofessional Login Page Styles */
.login-hero {
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-container-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    width: 100%;
}

/* Centered Login Form */
.login-form-section-centered {
    width: 100%;
    background: white;
    padding: 40px 35px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.login-form-container {
    width: 100%;
    max-width: 400px;
}

.form-header-login {
    text-align: center;
    margin-bottom: 32px;
}

.form-header-login h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.form-header-login p {
    color: #64748b;
    font-size: 0.9rem;
}

.professional-login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-form-group input {
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #fafafa;
    font-family: inherit;
}

.login-form-group input:focus {
    outline: none;
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.login-form-group input::placeholder {
    color: #94a3b8;
}

.login-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
}

.remember-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #64748b;
    cursor: pointer;
}

.remember-checkbox input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.remember-checkbox input[type="checkbox"]:checked + .checkbox-custom {
    background: #3b82f6;
    border-color: #3b82f6;
}

.remember-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.forgot-link {
    color: #3b82f6;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.forgot-link:hover {
    color: #1d4ed8;
}

.btn-login-professional {
    width: 100%;
    background: #000000;
    color: white;
    padding: 14px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.9rem;
    margin-top: 12px;
}

.btn-login-professional:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.btn-login-professional svg {
    transition: transform 0.3s ease;
}

.btn-login-professional:hover svg {
    transform: translateX(4px);
}

.login-footer {
    text-align: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.login-footer p {
    color: #64748b;
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.signup-link-professional {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.signup-link-professional:hover {
    color: #1d4ed8;
}

.back-home-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.back-home-link:hover {
    color: #374151;
}

/* Responsive Design */
@media (max-width: 768px) {
    .login-hero {
        padding: 20px;
    }
    
    .login-container-centered {
        max-width: 100%;
    }
    
    .login-form-section-centered {
        padding: 40px 30px;
        border-radius: 12px;
    }
    
    .form-header-login h2 {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .login-form-section-centered {
        padding: 30px 20px;
    }
    
    .login-form-group input {
        padding: 14px 16px;
    }
    
    .btn-login-professional {
        padding: 16px 20px;
    }
    
    .login-logo img {
        width: 150px;
        height: auto;
    }
}/* Top
 Left Logo */
.top-left-logo {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 1000;
}

@media (max-width: 768px) {
    .top-left-logo {
        top: 20px;
        left: 20px;
    }
    
    .top-left-logo img {
        width: 150px;
        height: auto;
    }
}/* Beaut
iful Signup Page Styles - Matching Login Design */
.signup-hero {
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.signup-container-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    width: 100%;
}

/* Centered Signup Form */
.signup-form-section-centered {
    width: 100%;
    background: white;
    padding: 40px 35px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.signup-form-container-clean {
    width: 100%;
}

.form-header-signup {
    text-align: center;
    margin-bottom: 32px;
}

.form-header-signup h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.form-header-signup p {
    color: #64748b;
    font-size: 0.9rem;
}

.professional-signup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.signup-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.signup-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.signup-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.signup-form-group input,
.signup-form-group select {
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #fafafa;
    font-family: inherit;
}

.signup-form-group input:focus,
.signup-form-group select:focus {
    outline: none;
    border-color: #3b82f6;
    background: white;
    transform: translateY(-1px);
}

.signup-form-group input::placeholder {
    color: #94a3b8;
}

.password-requirements {
    background: #f8fafc;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.password-requirements p {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 12px;
    font-weight: 500;
}

.requirements-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.requirement {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    background: #e2e8f0;
    color: #64748b;
    transition: all 0.3s ease;
}

.requirement.valid {
    background: #dcfce7;
    color: #166534;
}

.signup-form-options {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0;
}

.signup-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.875rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1.4;
}

.signup-checkbox input[type="checkbox"] {
    display: none;
}

.signup-checkbox .checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.signup-checkbox input[type="checkbox"]:checked + .checkbox-custom {
    background: #3b82f6;
    border-color: #3b82f6;
}

.signup-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.terms-link,
.privacy-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.terms-link:hover,
.privacy-link:hover {
    color: #1d4ed8;
}

.btn-signup-professional {
    width: 100%;
    background: #000000;
    color: white;
    padding: 14px 20px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.9rem;
    margin-top: 4px;
}

.btn-signup-professional:hover {
    background: #333333;
    transform: translateY(-2px);
}

.btn-signup-professional svg {
    transition: transform 0.3s ease;
}

.btn-signup-professional:hover svg {
    transform: translateX(4px);
}

.signup-footer {
    text-align: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.signup-footer p {
    color: #64748b;
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.login-link-professional {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.login-link-professional:hover {
    color: #1d4ed8;
}

.signup-footer .back-home-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.signup-footer .back-home-link:hover {
    color: #374151;
}

/* Responsive Design for Signup */
@media (max-width: 768px) {
    .signup-hero {
        padding: 20px;
    }
    
    .signup-container-centered {
        max-width: 100%;
    }
    
    .signup-form-section-centered {
        padding: 40px 30px;
    }
    
    .form-header-signup h2 {
        font-size: 1.5rem;
    }
    
    .signup-form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .signup-form-section-centered {
        padding: 30px 20px;
    }
    
    .signup-form-group input,
    .signup-form-group select {
        padding: 12px 14px;
    }
    
    .btn-signup-professional {
        padding: 12px 18px;
    }
    
    .requirements-list {
        flex-direction: column;
        gap: 8px;
    }
}/* 
Upload Success State */
.upload-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s ease;
}

.upload-success.show {
    opacity: 1;
    transform: scale(1);
}

.success-icon {
    margin-bottom: 12px;
}

.success-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: #10b981;
    margin-bottom: 8px;
}

.file-name {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}/* En
hanced Dashboard Styles */
.dashboard-hero-header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.dashboard-title-section h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 16px;
    line-height: 1.2;
}

.dashboard-description {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.6;
    max-width: 600px;
}

.dashboard-actions {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.btn-export-pdf {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.btn-export-pdf:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-reset {
    background: #6b7280;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.btn-reset:hover {
    background: #4b5563;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.dashboard-stats-section {
    margin-bottom: 40px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon.positive {
    background: #dcfce7;
    color: #16a34a;
}

.stat-icon.neutral {
    background: #fef3c7;
    color: #d97706;
}

.stat-icon.negative {
    background: #fee2e2;
    color: #dc2626;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
    margin-top: 4px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .dashboard-hero-header {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    
    .dashboard-actions {
        justify-content: flex-start;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-hero-header {
        padding: 30px 24px;
    }
    
    .dashboard-title-section h1 {
        font-size: 2rem;
    }
    
    .dashboard-description {
        font-size: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .dashboard-actions {
        flex-direction: column;
    }
}

/* Professional E-commerce Analytics Dashboard */
/* Main Dashboard Tile Container */
.dashboard-main-tile {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 32px;
    margin: 0 auto;
    max-width: 1200px;
    border: 1px solid #e5e7eb;
}

.dashboard-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding: 32px;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-radius: 12px;
    border: 1px solid #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dashboard-title h1 {
    font-size: 2.75rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 12px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.1;
}

.dashboard-title p {
    font-size: 1.125rem;
    color: #d1d5db;
    margin: 0;
    font-weight: 500;
    line-height: 1.6;
    max-width: 600px;
}

.dashboard-actions {
    display: flex;
    gap: 12px;
}

.btn-export, .btn-reset {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #4b5563;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.btn-export:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #6b7280;
    transform: translateY(-1px);
}

.btn-reset:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #fca5a5;
    transform: translateY(-1px);
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    width: 100%;
    box-sizing: border-box;
}

.metric-card {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.metric-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #d1d5db;
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.metric-title {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.metric-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon.reviews { background: #eff6ff; color: #2563eb; }
.metric-icon.rating { background: #fef3c7; color: #d97706; }
.metric-icon.returns { background: #fef2f2; color: #dc2626; }
.metric-icon.satisfaction { background: #f0fdf4; color: #16a34a; }

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.metric-change {
    font-size: 0.875rem;
    font-weight: 500;
}

.metric-change.positive { color: #16a34a; }
.metric-change.negative { color: #dc2626; }

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

.dashboard-card {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.dashboard-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
}

.card-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.card-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Sentiment Analysis */
.sentiment-chart {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sentiment-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sentiment-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.sentiment-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.sentiment-dot.positive { background: #16a34a; }
.sentiment-dot.neutral { background: #d97706; }
.sentiment-dot.negative { background: #dc2626; }

.sentiment-bar {
    flex: 1;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.sentiment-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.sentiment-fill.positive { background: #16a34a; }
.sentiment-fill.neutral { background: #d97706; }
.sentiment-fill.negative { background: #dc2626; }

.sentiment-percent {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    min-width: 40px;
    text-align: right;
}

/* Defects List */
.defects-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.defect-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.defect-rank {
    width: 24px;
    height: 24px;
    background: #3b82f6;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.defect-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.defect-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
}

.defect-count {
    font-size: 0.75rem;
    color: #6b7280;
}

.defect-percentage {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

/* Return Reasons */
.return-reasons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reason-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reason-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reason-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reason-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
}

.reason-bar {
    height: 6px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
}

.reason-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.reason-percent {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    min-width: 40px;
    text-align: right;
}

/* Customer Insights */
.insights-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.insight-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.insight-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.insight-icon.positive { background: #f0fdf4; color: #16a34a; }
.insight-icon.warning { background: #fef3c7; color: #d97706; }
.insight-icon.info { background: #eff6ff; color: #2563eb; }

.insight-content h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.insight-content p {
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

/* Performance Trends */
.trends-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trend-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trend-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.trend-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.trend-value.positive { color: #16a34a; }
.trend-value.negative { color: #dc2626; }

.trend-bar {
    height: 6px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
}

.trend-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.trend-fill.positive { background: #16a34a; }
.trend-fill.negative { background: #dc2626; }

/* Action Items */
.actions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid;
}

.action-item.high {
    background: #fef2f2;
    border-left-color: #dc2626;
}

.action-item.medium {
    background: #fef3c7;
    border-left-color: #d97706;
}

.action-item.low {
    background: #eff6ff;
    border-left-color: #2563eb;
}

.action-priority {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    align-self: flex-start;
}

.action-item.high .action-priority {
    background: #dc2626;
    color: #ffffff;
}

.action-item.medium .action-priority {
    background: #d97706;
    color: #ffffff;
}

.action-item.low .action-priority {
    background: #2563eb;
    color: #ffffff;
}

.action-content h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.action-content p {
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .dashboard-actions {
        justify-content: flex-start;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-card {
        padding: 20px;
    }
}/* Login Req
uired Popup */
.login-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.login-popup {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8f9fa;
}

.popup-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.popup-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.popup-close:hover {
    background: #e5e7eb;
    color: #374151;
}

.popup-content {
    padding: 32px;
    text-align: center;
}

.popup-icon {
    margin-bottom: 20px;
}

.popup-message {
    font-size: 1.125rem;
    color: #111827;
    margin: 0 0 12px 0;
    line-height: 1.6;
}

.popup-submessage {
    font-size: 1rem;
    color: #6b7280;
    margin: 0 0 32px 0;
    line-height: 1.5;
}

.popup-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-login {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #3b82f6;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-login:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-continue-guest {
    background: #ffffff;
    color: #6b7280;
    border: 1px solid #d1d5db;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-continue-guest:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #374151;
}

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

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive popup */
@media (max-width: 768px) {
    .login-popup {
        width: 95%;
        margin: 20px;
    }
    
    .popup-header {
        padding: 20px 24px;
    }
    
    .popup-content {
        padding: 24px;
    }
    
    .popup-actions {
        flex-direction: column;
    }
    
    .btn-login,
    .btn-continue-guest {
        width: 100%;
        justify-content: center;
    }
}
/* Prici
ng Page Styles */
.pricing-hero {
    background: #ffffff;
    padding: 100px 0 60px 0;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

.pricing-hero-content h1 {
    font-size: 3rem;
    font-weight: 800;
    color: #000000;
    margin: 0 0 16px 0;
}

.pricing-hero-content p {
    font-size: 1.125rem;
    color: #4b5563;
    max-width: 600px;
    margin: 0 auto 32px auto;
}

/* Pricing Section */
.pricing-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.pricing-card {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: #d1d5db;
}

.pricing-card.popular {
    border-color: #000000;
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #ffffff;
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #000000;
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-card-header {
    margin-bottom: 24px;
}

.pricing-card-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 6px 0;
}

.pricing-subtitle {
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0;
}

.pricing-price {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.price-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
}

.price-period {
    font-size: 1rem;
    color: #6b7280;
    font-weight: 500;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    flex: 1;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.875rem;
}

.feature-included {
    color: #111827;
}

.feature-excluded {
    color: #9ca3af;
}

.pricing-button {
    width: 100%;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.pricing-button.primary {
    background: #000000;
    color: #ffffff;
}

.pricing-button.primary:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
}

.pricing-button.secondary {
    background: #ffffff;
    color: #000000;
    border: 2px solid #e5e7eb;
}

.pricing-button.secondary:hover {
    background: #f9fafb;
    border-color: #000000;
}

/* FAQ Section */
.pricing-faq {
    padding: 80px 0;
    background: #f8f9fa;
}

.pricing-faq h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 60px 0;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item {
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
}

.faq-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
}

.faq-item p {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pricing-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-hero {
        padding: 80px 0 60px 0;
    }
}

/* Service Selector */
.service-selector {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.service-selector label {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
}

.service-dropdown {
    padding: 14px 24px;
    font-size: 1rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
    min-width: 350px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.service-dropdown:hover {
    border-color: #9ca3af;
}

.service-dropdown:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* KPI Badge */
.kpi-badge {
    display: inline-block;
    background: #f3f4f6;
    color: #111827;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
}

.kpi-badge.premium {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}

/* Service Pricing Grid */
.service-pricing {
    display: none;
}

.service-pricing.active {
    display: grid;
}

/* Update pricing grid for 3 columns */
.pricing-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .service-dropdown {
        min-width: 300px;
    }
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .service-dropdown {
        min-width: 100%;
        max-width: 350px;
    }
}


/* Clean Minimal FAQ Section */
.faq-section {
    background: #f8fafc;
    padding: 60px 0;
}

.faq-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.faq-title {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    margin-bottom: 40px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

.faq-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.faq-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 12px 0;
}

.faq-card p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}


/* What We Do Section */
.what-we-do-section {
    background: #ffffff;
    padding: 100px 20px;
    position: relative;
    overflow: visible;
    border-bottom: 1px solid #d1d5db;
}

.what-we-do-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.what-we-do-header-center {
    text-align: center;
    margin-bottom: 60px;
}

.what-we-do-header-center h2 {
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
    line-height: 1.2;
}

.what-we-do-header-center p {
    font-size: 18px;
    color: #666666;
    max-width: 700px;
    margin: 0 auto;
}

/* New Carousel Styles */
.carousel-container {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0 60px 0;
}

.carousel-wrapper {
    overflow: hidden;
    width: 100%;
    max-width: 1000px;
}

.carousel-track {
    display: flex;
    gap: 24px;
    transition: transform 0.3s ease;
    width: fit-content;
}

.carousel-btn {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b7280;
    flex-shrink: 0;
}

.carousel-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

.carousel-btn:active {
    transform: scale(0.95);
}

.carousel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Scroll Indicator */
.scroll-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    padding: 20px;
}

.scroll-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.scroll-dot.active {
    background: #000000;
    width: 12px;
    height: 12px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.case-card {
    min-width: 320px;
    max-width: 320px;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    position: relative;
    padding: 1.5px;
    transform: scale(0.95);
    opacity: 0.7;
    scroll-snap-align: start;
}

.case-card.center {
    transform: scale(1.08);
    opacity: 1;
    z-index: 10;
}

.case-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}



.case-top {
    background: #ffffff;
    padding: 20px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 8px 8px 0 0;
}

.case-bottom {
    background: #ffffff;
    padding: 20px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 8px 8px;
}

.case-bottom .case-badge {
    margin-bottom: 20px;
    align-self: flex-start;
}

.case-header {
    display: none;
}

.case-badge {
    display: inline-block;
    padding: 6px 14px;
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #2563eb;
    margin-bottom: 20px;
}

.case-number {
    font-size: 64px;
    font-weight: 800;
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    line-height: 1;
}

.case-logo {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-logo svg {
    width: 48px;
    height: 48px;
    opacity: 1;
}

.case-title {
    font-size: 22px;
    font-weight: 700;
    color: #000000 !important;
    margin: 0;
}

.case-metric {
    font-size: 18px;
    font-weight: 700;
    color: #000000 !important;
    margin-bottom: 12px;
}

.case-description {
    font-size: 14px;
    color: #000000 !important;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.case-read-more {
    display: inline-flex;
    align-items: center;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.case-read-more::after {
    content: '→';
    margin-left: 8px;
    transition: margin-left 0.2s ease;
}

.case-read-more:hover {
    color: #3b82f6;
}

.case-read-more:hover::after {
    margin-left: 12px;
}

/* Scroll Dots */
.scroll-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.scroll-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scroll-dots .dot.active {
    background: #000000;
    width: 24px;
    border-radius: 4px;
}

.scroll-dots .dot:hover {
    background: #666666;
}

/* Service Containers */
.service-container {
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
}

.service-black {
    background: #000000;
}

.service-white {
    background: #ffffff;
}

/* Watermark styles removed */

.service-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 1;
    gap: 80px;
    align-items: center;
}

.service-inner.service-reverse {
    flex-direction: row-reverse !important;
}

@media (min-width: 769px) {
    .service-inner {
        flex-direction: row !important;
    }
    
    .service-inner.service-reverse {
        flex-direction: row-reverse !important;
    }
}

.service-text {
    flex: 1;
    min-width: 0;
}

.service-image-placeholder {
    flex: 1;
    min-height: 400px;
    min-width: 0;
    background: #f5f5f5;
    border-radius: 8px;
    border: 2px solid #ddd;
}

.service-name {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    opacity: 0.6;
}

.service-black .service-name {
    color: #ffffff;
}

.service-white .service-name {
    color: #000000;
}

.service-text h2 {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
}

.service-black .service-text h2 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-white .service-text h2 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-bullet {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: inline-block;
    flex-shrink: 0;
}

.service-text p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.service-black .service-text p {
    color: #999999;
}

.service-white .service-text p {
    color: #666666;
}

.service-learn-more {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: 10px;
}

.service-black .service-learn-more {
    color: #ffffff;
}

.service-white .service-learn-more {
    color: #000000;
}

.service-learn-more:hover {
    transform: translateX(5px);
}

.service-black .service-learn-more:hover {
    color: #cccccc;
}

.service-white .service-learn-more:hover {
    color: #333333;
}

.service-graphic {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Isometric Illustration Container */
.isometric-container {
    width: 100%;
    max-width: 700px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.isometric-container svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.4));
}

/* Smooth animations for SVG elements */
.isometric-container svg circle,
.isometric-container svg path,
.isometric-container svg rect,
.isometric-container svg line {
    transition: all 0.3s ease;
}

.service-diagram {
    width: 100%;
    height: 100%;
    max-width: 400px;
}

.infographic {
    width: 100%;
    height: 100%;
    max-width: 400px;
}

/* Story Animation Styles */
.story-animation {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

/* LLM & AI - Clustering Animation */
.cluster-animation {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shape-container {
    position: relative;
    width: 300px;
    height: 300px;
    perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LLM - Rotating Cube */
.llm-shape-container {
    perspective: 1200px;
}

.rotating-cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate-cube-service 10s linear infinite;
}

@keyframes rotate-cube-service {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

.rotating-cube .cube-face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
}

.rotating-cube .cube-front  { transform: rotateY(0deg) translateZ(100px); }
.rotating-cube .cube-back   { transform: rotateY(180deg) translateZ(100px); }
.rotating-cube .cube-right  { transform: rotateY(90deg) translateZ(100px); }
.rotating-cube .cube-left   { transform: rotateY(-90deg) translateZ(100px); }
.rotating-cube .cube-top    { transform: rotateX(90deg) translateZ(100px); }
.rotating-cube .cube-bottom { transform: rotateX(-90deg) translateZ(100px); }

/* AI Agents - Rotating Sphere */
.agent-shape-container {
    perspective: 1000px;
}

.rotating-sphere {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate-sphere-service 8s linear infinite;
}

@keyframes rotate-sphere-service {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

.sphere-inner {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(0,0,0,0.4), rgba(0,0,0,0.8));
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

.sphere-ring {
    position: absolute;
    border: 3px solid rgba(0,0,0,0.4);
    border-radius: 50%;
    top: 50%;
    left: 50%;
}

.ring-1 {
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
    transform: rotateX(70deg);
}

.ring-2 {
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    transform: rotateX(110deg);
}

.ring-3 {
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    transform: rotateY(90deg);
}

/* Sentiment - Rotating Pyramid */
.sentiment-shape-container {
    perspective: 1000px;
}

.rotating-pyramid {
    width: 180px;
    height: 180px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate-pyramid-service 8s linear infinite;
}

@keyframes rotate-pyramid-service {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

.pyramid-side {
    position: absolute;
    width: 0;
    height: 0;
}

.pyramid-front {
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 156px solid rgba(255, 255, 255, 0.3);
    transform: translateZ(52px) translateY(26px);
}

.pyramid-back {
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 156px solid rgba(255, 255, 255, 0.2);
    transform: translateZ(-52px) translateY(26px) rotateY(180deg);
}

.pyramid-left {
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 156px solid rgba(255, 255, 255, 0.25);
    transform: rotateY(-90deg) translateZ(52px) translateY(26px);
}

.pyramid-right {
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 156px solid rgba(255, 255, 255, 0.25);
    transform: rotateY(90deg) translateZ(52px) translateY(26px);
}

.pyramid-base {
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transform: rotateX(90deg) translateZ(-78px);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -90px;
    margin-top: -12px;
}

/* Data Science - Rotating Diamond */
.datascience-shape-container {
    perspective: 1000px;
}

.rotating-diamond {
    width: 160px;
    height: 160px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate-diamond-service 10s linear infinite;
}

@keyframes rotate-diamond-service {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

.diamond-side {
    position: absolute;
    width: 0;
    height: 0;
}

.diamond-front {
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 138px solid rgba(0, 0, 0, 0.3);
    transform: translateZ(69px);
}

.diamond-back {
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 138px solid rgba(0, 0, 0, 0.2);
    transform: translateZ(-69px) rotateY(180deg);
}

.diamond-left {
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 138px solid rgba(0, 0, 0, 0.25);
    transform: rotateY(-90deg) translateZ(69px);
}

.diamond-right {
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 138px solid rgba(0, 0, 0, 0.25);
    transform: rotateY(90deg) translateZ(69px);
}

.diamond-top {
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-top: 138px solid rgba(0, 0, 0, 0.3);
    transform: translateY(-138px);
}

.diamond-bottom {
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-top: 138px solid rgba(0, 0, 0, 0.2);
    transform: translateY(138px) rotateX(180deg);
}

.tiny-shape {
    position: absolute;
    width: 10px;
    height: 10px;
    transition: all 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 0.8;
}

/* Single shake animation */
@keyframes shake-tiny {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-2px, 2px); }
}

.tiny-shape {
    animation: shake-tiny 0.3s ease-in-out 0s 1;
}

/* AI Agents - Processing */
.input-numbers {
    font-size: 24px;
    color: #000000;
    font-weight: 600;
    letter-spacing: 6px;
}

.processing-box {
    width: 150px;
    height: 150px;
    border: 3px solid #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: process-pulse 2s ease-in-out infinite;
}

@keyframes process-pulse {
    0%, 100% { transform: scale(1); border-color: #000000; }
    50% { transform: scale(1.05); border-color: #333333; }
}

.agent-icon {
    font-size: 48px;
    animation: rotate-gear 3s linear infinite;
}

@keyframes rotate-gear {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.process-text {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
}

.output-symbols {
    display: flex;
    gap: 20px;
}

.symbol {
    font-size: 36px;
    color: #000000;
    animation: appear 3s ease-in-out infinite;
}

.symbol:nth-child(1) { animation-delay: 0s; }
.symbol:nth-child(2) { animation-delay: 0.2s; }
.symbol:nth-child(3) { animation-delay: 0.4s; }
.symbol:nth-child(4) { animation-delay: 0.6s; }
.symbol:nth-child(5) { animation-delay: 0.8s; }

@keyframes appear {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Sentiment Analysis - Symbols to Emotions */
.symbols-input {
    font-size: 28px;
    color: #ffffff;
    letter-spacing: 10px;
}

.sentiment-faces {
    display: flex;
    gap: 30px;
}

.face {
    font-size: 48px;
    animation: face-pulse 3s ease-in-out infinite;
}

.face.happy { animation-delay: 0s; }
.face.neutral { animation-delay: 1s; }
.face.sad { animation-delay: 2s; }

@keyframes face-pulse {
    0%, 66%, 100% { transform: scale(1); opacity: 0.5; }
    33% { transform: scale(1.3); opacity: 1; }
}

.sentiment-wave {
    width: 200px;
    height: 3px;
    background: linear-gradient(90deg, #ffffff 0%, transparent 50%, #ffffff 100%);
    animation: wave-move 2s linear infinite;
}

@keyframes wave-move {
    0% { transform: translateX(-50px); }
    100% { transform: translateX(50px); }
}

/* Data Science - Charts */
.chart-container {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    height: 150px;
}

.bar {
    width: 40px;
    background: #000000;
    animation: grow-bar 2s ease-in-out infinite;
}

.bar-1 { height: 60px; animation-delay: 0s; }
.bar-2 { height: 100px; animation-delay: 0.2s; }
.bar-3 { height: 80px; animation-delay: 0.4s; }
.bar-4 { height: 120px; animation-delay: 0.6s; }
.bar-5 { height: 140px; animation-delay: 0.8s; }

@keyframes grow-bar {
    0%, 100% { transform: scaleY(0.8); opacity: 0.6; }
    50% { transform: scaleY(1); opacity: 1; }
}

.trend-line {
    width: 250px;
    height: 3px;
    background: #000000;
    position: relative;
    margin-top: -80px;
    transform: rotate(-10deg);
}

.trend-line::after {
    content: '→';
    position: absolute;
    right: -20px;
    top: -10px;
    font-size: 20px;
    color: #000000;
}

.insight-label {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin-top: 20px;
}

/* Software Development - Code to App */
.code-window {
    width: 250px;
    border: 2px solid #ffffff;
}

.window-header {
    background: #ffffff;
    padding: 10px;
    display: flex;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #000000;
}

.code-content {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
}

.code-line {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    color: #ffffff;
    margin: 8px 0;
    animation: type-line 3s ease-in-out infinite;
}

.code-line.indent {
    margin-left: 20px;
}

@keyframes type-line {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.deploy-arrow {
    font-size: 48px;
    color: #ffffff;
    animation: slide-arrow 2s ease-in-out infinite;
}

@keyframes slide-arrow {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(20px); }
}

.app-icon {
    font-size: 64px;
    animation: app-bounce 2s ease-in-out infinite;
}

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

/* AI Network Animation */
.ai-network-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.network-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.connection-line {
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1;
    animation: pulse-line 3s ease-in-out infinite;
}

.line-1 { animation-delay: 0s; }
.line-2 { animation-delay: 0.3s; }
.line-3 { animation-delay: 0.6s; }
.line-4 { animation-delay: 0.9s; }
.line-5 { animation-delay: 1.2s; }
.line-6 { animation-delay: 1.5s; }
.line-7 { animation-delay: 1.8s; }
.line-8 { animation-delay: 2.1s; }

@keyframes pulse-line {
    0%, 100% {
        stroke: rgba(255, 255, 255, 0.1);
        stroke-width: 1;
    }
    50% {
        stroke: rgba(255, 255, 255, 0.3);
        stroke-width: 2;
    }
}

.agent-nodes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.agent-node {
    position: absolute;
    width: 40px;
    height: 40px;
}

.node-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

.node-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    animation: pulse-node 2s ease-out infinite;
}

@keyframes pulse-node {
    0% {
        width: 16px;
        height: 16px;
        opacity: 1;
    }
    100% {
        width: 60px;
        height: 60px;
        opacity: 0;
    }
}

/* Node positions and animations */
.node-1 {
    top: 20%;
    left: 15%;
    animation: float-node-1 8s ease-in-out infinite;
}

.node-2 {
    top: 30%;
    left: 85%;
    animation: float-node-2 10s ease-in-out infinite;
}

.node-3 {
    top: 60%;
    left: 10%;
    animation: float-node-3 9s ease-in-out infinite;
}

.node-4 {
    top: 70%;
    left: 80%;
    animation: float-node-4 11s ease-in-out infinite;
}

.node-5 {
    top: 15%;
    left: 50%;
    animation: float-node-5 7s ease-in-out infinite;
}

.node-6 {
    top: 80%;
    left: 45%;
    animation: float-node-6 9.5s ease-in-out infinite;
}

.node-7 {
    top: 45%;
    left: 25%;
    animation: float-node-7 8.5s ease-in-out infinite;
}

.node-8 {
    top: 50%;
    left: 70%;
    animation: float-node-8 10.5s ease-in-out infinite;
}

@keyframes float-node-1 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(30px, -20px); }
    50% { transform: translate(50px, 10px); }
    75% { transform: translate(20px, 30px); }
}

@keyframes float-node-2 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-40px, 25px); }
    50% { transform: translate(-20px, -15px); }
    75% { transform: translate(-50px, 20px); }
}

@keyframes float-node-3 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(40px, -30px); }
    66% { transform: translate(25px, 20px); }
}

@keyframes float-node-4 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-35px, -25px); }
    50% { transform: translate(-60px, 5px); }
    75% { transform: translate(-30px, -15px); }
}

@keyframes float-node-5 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-20px, 40px); }
}

@keyframes float-node-6 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -35px); }
}

@keyframes float-node-7 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-25px, 30px); }
    66% { transform: translate(35px, -20px); }
}

@keyframes float-node-8 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(20px, 35px); }
    50% { transform: translate(-30px, 25px); }
    75% { transform: translate(15px, -20px); }
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.features-header {
    text-align: center;
    margin-bottom: 60px;
}

.features-header h2 {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.features-header p {
    font-size: 18px;
    color: #999999;
    max-width: 600px;
    margin: 0 auto;
}



/* Stats Section - White Container */
.stats-section {
    background: #ffffff;
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #d1d5db;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* CTA Heading - Large "Ready to deploy?" */
.cta-heading {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: #000000;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.cta-question {
    color: #000000;
    font-weight: 700;
}

/* CTA Description - Smaller text */
.cta-description {
    font-size: 0.95rem;
    margin-bottom: 22px;
    color: #666666;
    line-height: 1.5;
    font-weight: 400;
}

.cta-subtext {
    font-size: 0.95rem;
    margin-bottom: 22px;
    color: #666666;
    line-height: 1.5;
    font-weight: 400;
}

.highlight-blue {
    color: #3b82f6;
    font-weight: 600;
}

.highlight-purple {
    color: #8b5cf6;
    font-weight: 600;
}

/* CTA Buttons - Matching Hero Style */
.cta-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
}

.btn-cta-primary {
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    color: #ffffff;
    padding: 10px 28px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.btn-cta-primary:hover {
    background: linear-gradient(135deg, #6bc4b0, #3b7dd6);
    box-shadow: 0 6px 20px rgba(125, 211, 192, 0.4);
    transform: translateY(-2px);
}

.btn-cta-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-cta-secondary {
    background: transparent;
    color: #666666;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-cta-secondary:hover {
    background: #f5f5f5;
    color: #000000;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: #000000;
    background: #ffffff;
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: #666666;
    font-weight: 400;
}

.stats-visual {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cube-container {
    perspective: 1200px;
    width: 350px;
    height: 350px;
    position: relative;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 25s infinite linear;
}

.cube-face {
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(250, 250, 250, 0.4);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cube-front  { 
    transform: rotateY(0deg) translateZ(175px); 
    border: 1px solid rgba(0, 0, 0, 0.8);
}
.cube-back   { 
    transform: rotateY(180deg) translateZ(175px); 
    border: 1px solid rgba(0, 0, 0, 0.8);
}
.cube-right  { 
    transform: rotateY(90deg) translateZ(175px); 
    border: 1px solid rgba(0, 0, 0, 0.8);
}
.cube-left   { 
    transform: rotateY(-90deg) translateZ(175px); 
    border: 1px solid rgba(0, 0, 0, 0.8);
}
.cube-top    { 
    transform: rotateX(90deg) translateZ(175px); 
    border: 1px solid rgba(0, 0, 0, 0.8);
}
.cube-bottom { 
    transform: rotateX(-90deg) translateZ(175px); 
    border: 1px solid rgba(0, 0, 0, 0.8);
}

.math-formula {
    position: absolute;
    font-size: 18px;
    font-weight: 500;
    font-family: 'Times New Roman', serif;
    font-style: italic;
}

.cube-front .math-formula { color: rgba(236, 72, 153, 0.7); }
.cube-back .math-formula { color: rgba(59, 130, 246, 0.7); }
.cube-right .math-formula { color: rgba(0, 0, 0, 0.6); }
.cube-left .math-formula { color: rgba(236, 72, 153, 0.7); }
.cube-top .math-formula { color: rgba(59, 130, 246, 0.7); }
.cube-bottom .math-formula { color: rgba(0, 0, 0, 0.6); }

.math-formula.top-left {
    top: 15px;
    left: 15px;
}

.math-formula.bottom-right {
    bottom: 15px;
    right: 15px;
}

.cube-equations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.equation {
    position: absolute;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Times New Roman', serif;
    font-style: italic;
    animation: float-equation 4s ease-in-out infinite;
}

.eq-1 {
    top: 10%;
    left: -10%;
    animation-delay: 0s;
    color: rgba(236, 72, 153, 0.6);
}

.eq-2 {
    top: 20%;
    right: -15%;
    animation-delay: 1s;
    color: rgba(59, 130, 246, 0.6);
}

.eq-3 {
    bottom: 15%;
    left: -12%;
    animation-delay: 2s;
    color: rgba(0, 0, 0, 0.5);
}

.eq-4 {
    bottom: 10%;
    right: -10%;
    animation-delay: 3s;
    color: rgba(236, 72, 153, 0.6);
}

@keyframes rotateCube {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

@keyframes float-equation {
    0%, 100% {
        transform: translateY(0px);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-15px);
        opacity: 0.8;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    
    .stats-container {
        grid-template-columns: 1fr;
    }
    
    .features-header h2,
    .stats-content h2 {
        font-size: 32px;
    }
    
    .stats-visual {
        height: 300px;
        order: -1;
    }
    
    .cube-container {
        width: 250px;
        height: 250px;
    }
    
    .cube-face {
        width: 250px;
        height: 250px;
    }
    
    .cube-front  { transform: rotateY(0deg) translateZ(125px); }
    .cube-back   { transform: rotateY(180deg) translateZ(125px); }
    .cube-right  { transform: rotateY(90deg) translateZ(125px); }
    .cube-left   { transform: rotateY(-90deg) translateZ(125px); }
    .cube-top    { transform: rotateX(90deg) translateZ(125px); }
    .cube-bottom { transform: rotateX(-90deg) translateZ(125px); }
    
    .math-formula {
        font-size: 14px;
    }
    
    .equation {
        font-size: 13px;
    }
    
    .agent-container {
        width: 300px;
        height: 300px;
    }
    
    .agent-core {
        width: 40px;
        height: 40px;
    }
    
    .ring-1 {
        width: 100px;
        height: 100px;
    }
    
    .ring-2 {
        width: 180px;
        height: 180px;
    }
    
    .ring-3 {
        width: 260px;
        height: 260px;
    }
    
    .stats-cta {
        flex-direction: column;
    }
    
    .btn-stats-primary,
    .btn-stats-secondary {
        text-align: center;
    }
}


/* Service Containers Responsive */
@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding: 80px 0 60px;
    }
    
    .what-we-do-header-center h2 {
        font-size: 32px;
    }
    
    .what-we-do-header-center p {
        font-size: 16px;
    }
    
    .case-studies-scroll {
        margin-left: -150px;
        padding-left: 150px;
    }
    
    .case-card {
        min-width: 300px;
        max-width: 300px;
    }
    
    .service-inner {
        flex-direction: column !important;
        gap: 40px;
    }
    
    .service-inner.service-reverse {
        flex-direction: column !important;
    }
    
    .service-graphic {
        order: -1;
        height: 300px;
    }
    
    .service-text h2 {
        font-size: 32px;
    }
    
    .service-text p {
        font-size: 16px;
    }
}


/* Pricing Tiles - Same style as Research tiles */
.pricing-scroll {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 20px 0 40px 0;
    scroll-behavior: smooth;
    margin-left: -175px;
    padding-left: 175px;
}

.pricing-scroll::-webkit-scrollbar {
    display: none;
}

.price-card {
    min-width: 330px;
    max-width: 330px;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    background: #ffffff;
}

.price-card:nth-child(2) {
    min-width: 360px;
    max-width: 360px;
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1);
    border-color: #e5e7eb;
    z-index: 1;
}

.price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.12);
}

.price-card:nth-child(2):hover {
    transform: scale(1.05) translateY(-4px);
}

.price-top {
    background: #000000;
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
}

.price-bottom {
    background: #ffffff;
    padding: 20px 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.price-header {
    margin-bottom: 20px;
}

.price-badge {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.price-number {
    font-size: 64px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 8px;
    line-height: 1;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
}

/* Grey shades for professional look - matching homepage */
.price-card:nth-child(1) .price-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.price-card:nth-child(2) .price-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.price-card:nth-child(3) .price-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.price-card:nth-child(4) .price-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.price-card:nth-child(5) .price-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.price-card:nth-child(6) .price-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.price-top .tier-name {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 8px;
    margin-bottom: 10px;
    line-height: 1.1;
}

/* KPI Highlight Styles - Progressive tier badges */
.kpi-highlight {
    font-weight: 600 !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
}

/* 8 KPIs - Free tier (Gray text) */
.kpi-basic {
    background: transparent !important;
    color: #6b7280 !important;
    border: none !important;
}

/* 20 KPIs - Pro tier (Blue text) */
.kpi-pro {
    background: transparent !important;
    color: #1e40af !important;
    border: none !important;
}

/* 35 KPIs - Premium tier (Purple text) */
.kpi-premium {
    background: transparent !important;
    color: #7c3aed !important;
    border: none !important;
}

.price-top .tier-price {
    font-size: 38px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    margin: 0;
    padding-bottom: 2px;
}

.price-top .currency {
    font-size: 24px;
    font-weight: 600;
}

.price-top .period {
    font-size: 20px;
    font-weight: 500;
    opacity: 0.8;
}

.price-bottom .tier-description {
    font-size: 13px;
    color: #666666;
    margin-bottom: 14px;
    line-height: 1.4;
}

.price-bottom .feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    flex-grow: 1;
}

.price-bottom .feature-list li {
    font-size: 13px;
    color: #333333;
    padding: 7px 0;
    padding-left: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.price-bottom .feature-list li::before {
    content: none;
}

.price-cta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
    background: transparent;
    color: #000000;
    text-align: left;
    text-decoration: none;
    border: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
}

.price-cta::after {
    content: '→';
    margin-left: 8px;
    transition: margin-left 0.2s ease;
}

.price-cta:hover {
    color: #333333;
}

.price-cta:hover::after {
    margin-left: 12px;
}

@media (max-width: 768px) {
    .pricing-scroll {
        margin-left: -150px;
        padding-left: 150px;
    }
    
    .price-card {
        min-width: 300px;
        max-width: 300px;
    }
}

/* Dashboard Window Style */
.dashboard-window {
    width: 100%;
    max-width: 550px;
    height: auto;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
}

/* LLM - Rotating Cube */
@keyframes rotate-cube {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

.llm-cube-3d {
    animation: rotate-cube 10s linear infinite;
}

.cube-face-3d {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.front-3d { transform: translateZ(100px); }
.back-3d { transform: translateZ(-100px) rotateY(180deg); }
.right-3d { transform: rotateY(90deg) translateZ(100px); }
.left-3d { transform: rotateY(-90deg) translateZ(100px); }
.top-3d { transform: rotateX(90deg) translateZ(100px); background: rgba(255, 255, 255, 0.3); }
.bottom-3d { transform: rotateX(-90deg) translateZ(100px); }

/* AI Agents - Sphere with Rings */
@keyframes rotate-sphere {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

.agent-sphere-3d {
    animation: rotate-sphere 8s linear infinite;
}

.sphere-3d {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(0,0,0,0.4), rgba(0,0,0,0.8));
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

.ring-3d {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 3px solid rgba(0,0,0,0.4);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin: -90px 0 0 -90px;
}

.ring-3d-1 { transform: rotateX(70deg); }
.ring-3d-2 { transform: rotateX(110deg); }
.ring-3d-3 { transform: rotateY(90deg); }

/* Sentiment - Pyramid */
@keyframes rotate-pyramid {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

.sentiment-pyramid-3d {
    animation: rotate-pyramid 8s linear infinite;
    width: 180px;
    height: 180px;
}

.pyramid-3d-face {
    position: absolute;
}

.pyramid-front-3d {
    width: 0;
    height: 0;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 156px solid rgba(255, 255, 255, 0.3);
    transform: translateZ(52px) translateY(26px);
}

.pyramid-back-3d {
    width: 0;
    height: 0;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 156px solid rgba(255, 255, 255, 0.2);
    transform: translateZ(-52px) translateY(26px) rotateY(180deg);
}

.pyramid-left-3d {
    width: 0;
    height: 0;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 156px solid rgba(255, 255, 255, 0.25);
    transform: rotateY(-90deg) translateZ(52px) translateY(26px);
}

.pyramid-right-3d {
    width: 0;
    height: 0;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 156px solid rgba(255, 255, 255, 0.25);
    transform: rotateY(90deg) translateZ(52px) translateY(26px);
}

.pyramid-base-3d {
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.15);
    transform: rotateX(90deg) translateZ(-78px);
}

/* Data Science - Diamond/Octahedron */
@keyframes rotate-diamond {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

.datascience-diamond-3d {
    animation: rotate-diamond 10s linear infinite;
    width: 160px;
    height: 160px;
}

.diamond-3d-face {
    position: absolute;
}

.diamond-front-3d {
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 138px solid rgba(0, 0, 0, 0.3);
    transform: translateZ(69px);
}

.diamond-back-3d {
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 138px solid rgba(0, 0, 0, 0.2);
    transform: translateZ(-69px) rotateY(180deg);
}

.diamond-left-3d {
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 138px solid rgba(0, 0, 0, 0.25);
    transform: rotateY(-90deg) translateZ(69px);
}

.diamond-right-3d {
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 138px solid rgba(0, 0, 0, 0.25);
    transform: rotateY(90deg) translateZ(69px);
}

.diamond-top-3d {
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-top: 138px solid rgba(0, 0, 0, 0.3);
    transform: translateY(-138px);
}

.diamond-bottom-3d {
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-top: 138px solid rgba(0, 0, 0, 0.2);
    transform: translateY(138px) rotateX(180deg);
}

/* Software - Rectangular Prism */
@keyframes rotate-prism {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

.software-prism-3d {
    animation: rotate-prism 12s linear infinite;
    width: 180px;
    height: 240px;
}

.prism-3d-face {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.prism-front-3d {
    width: 180px;
    height: 240px;
    transform: translateZ(60px);
}

.prism-back-3d {
    width: 180px;
    height: 240px;
    transform: translateZ(-60px) rotateY(180deg);
}

.prism-left-3d {
    width: 120px;
    height: 240px;
    transform: rotateY(-90deg) translateZ(60px);
}

.prism-right-3d {
    width: 120px;
    height: 240px;
    transform: rotateY(90deg) translateZ(60px);
}

.prism-top-3d {
    width: 180px;
    height: 120px;
    transform: rotateX(90deg) translateZ(120px);
    background: rgba(255, 255, 255, 0.3);
}

.prism-bottom-3d {
    width: 180px;
    height: 120px;
    transform: rotateX(-90deg) translateZ(120px);
}

/* Software - Rotating Cone */
.software-shape-container {
    perspective: 1000px;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rotating-cone {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate-cone 8s linear infinite;
}

@keyframes rotate-cone {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}

.cone-side {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 173px solid rgba(255, 255, 255, 0.25);
    transform-origin: 50% 100%;
}

.cone-front {
    transform: translateZ(58px) translateY(13px);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.cone-back {
    transform: translateZ(-58px) translateY(13px) rotateY(180deg);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.cone-left {
    transform: rotateY(-90deg) translateZ(58px) translateY(13px);
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

.cone-right {
    transform: rotateY(90deg) translateZ(58px) translateY(13px);
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

.cone-base {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transform: rotateX(90deg) translateZ(-86px);
    bottom: 0;
    left: 50%;
    margin-left: -100px;
}

/* LLM - Cube Animation */
@keyframes llm-float {
    0%, 100% { transform: translateY(0) rotateY(0deg); }
    50% { transform: translateY(-10px) rotateY(5deg); }
}

.llm-shape .llm-cube {
    animation: llm-float 4s ease-in-out infinite;
    transform-origin: center;
}

.llm-shape line {
    animation: llm-pulse 2s ease-in-out infinite;
}

@keyframes llm-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* AI Agents - Sphere with Orbits */
@keyframes agent-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.agent-shape .orbit-1 {
    transform-origin: center;
    animation: agent-rotate 8s linear infinite;
}

.agent-shape .orbit-2 {
    transform-origin: center;
    animation: agent-rotate 6s linear infinite reverse;
}

.agent-shape .orbit-3 {
    transform-origin: center;
    animation: agent-rotate 10s linear infinite;
}

.agent-shape .particle-1,
.agent-shape .particle-2,
.agent-shape .particle-3 {
    animation: particle-pulse 2s ease-in-out infinite;
}

@keyframes particle-pulse {
    0%, 100% { opacity: 0.6; r: 6; }
    50% { opacity: 1; r: 8; }
}

/* Sentiment - Cylinder with Waves */
@keyframes wave-flow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 200; }
}

.sentiment-shape .wave-1,
.sentiment-shape .wave-2,
.sentiment-shape .wave-3 {
    stroke-dasharray: 10 5;
    animation: wave-flow 3s linear infinite;
}

.sentiment-shape .wave-2 {
    animation-delay: 0.5s;
}

.sentiment-shape .wave-3 {
    animation-delay: 1s;
}

/* Data Science - 3D Bar Chart */
@keyframes bar-grow {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.1); }
}

.datascience-shape .bar-1 {
    transform-origin: bottom;
    animation: bar-grow 3s ease-in-out infinite;
}

.datascience-shape .bar-2 {
    transform-origin: bottom;
    animation: bar-grow 3s ease-in-out infinite 0.3s;
}

.datascience-shape .bar-3 {
    transform-origin: bottom;
    animation: bar-grow 3s ease-in-out infinite 0.6s;
}

.datascience-shape .trend-line {
    stroke-dasharray: 200;
    animation: trend-draw 4s ease-in-out infinite;
}

@keyframes trend-draw {
    0%, 100% { stroke-dashoffset: 200; }
    50% { stroke-dashoffset: 0; }
}

/* Software - Server Stack */
@keyframes server-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.software-shape .server-1 {
    animation: server-pulse 2s ease-in-out infinite;
}

.software-shape .server-2 {
    animation: server-pulse 2s ease-in-out infinite 0.3s;
}

.software-shape .server-3 {
    animation: server-pulse 2s ease-in-out infinite 0.6s;
}

/* Blog Layout Styles */
.blog-header {
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.blog-header h1 {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-align: center;
}

.blog-quote {
    font-size: 1.125rem;
    font-style: normal;
    color: #4b5563;
    padding: 32px 40px;
    border-left: none;
    background: transparent;
    border-radius: 0;
    line-height: 1.75;
    box-shadow: none;
    position: relative;
    text-align: center;
}

.blog-quote::before {
    content: '❝';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 4rem;
    font-weight: 900;
    color: #1f2937;
    line-height: 1;
    opacity: 0.15;
}

.blog-quote::after {
    content: '❞';
    position: absolute;
    right: 0;
    bottom: -20px;
    font-size: 4rem;
    font-weight: 900;
    color: #1f2937;
    line-height: 1;
    opacity: 0.15;
}

.blog-quote .highlight-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    padding: 0;
    border-radius: 0;
    position: static;
}

.blog-quote .highlight-text::after {
    display: none;
}

.blog-layout {
    display: flex;
    max-width: 1300px;
    margin: 130px auto 80px;
    padding: 0 40px;
    gap: 0;
    position: relative;
    min-height: calc(100vh - 200px);
}

/* Blog layout watermark removed */

/* Left Sidebar Index */
.blog-index {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 190px;
    width: 240px;
    padding: 0 0 0 10px;
    background: transparent;
    z-index: 500;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

/* Divider between sidebar and content */
.blog-divider {
    width: 1px;
    background: #e5e7eb;
    flex-shrink: 0;
    margin: 0 50px 0 270px;
}

.blog-index::before {
    content: '';
    position: absolute;
    left: 13.5px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: #e5e7eb;
    z-index: 0;
}

.index-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    text-decoration: none;
    color: #9ca3af;
    transition: all 0.2s ease;
    position: relative;
}

.index-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #d1d5db;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 4px rgba(209, 213, 219, 0.25);
}

.index-item.active .index-dot {
    background: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
    transform: scale(1.15);
}

.index-item:hover .index-dot {
    background: #764ba2;
    box-shadow: 0 0 0 4px rgba(118, 75, 162, 0.25);
}

.index-text {
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    line-height: 1.5;
}

.index-item.active .index-text {
    color: #667eea;
    font-weight: 600;
}

.index-item:hover .index-text {
    color: #764ba2;
}

/* Right Content Area */
.blog-content {
    flex: 1;
    max-width: 800px;
    margin-left: 0;
}

.blog-section {
    margin-bottom: 56px;
    scroll-margin-top: 190px;
}

.blog-content {
    counter-reset: section-counter;
}

.blog-section h2 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    padding-bottom: 12px;
    border-bottom: 2px solid #f3f4f6;
    counter-increment: section-counter;
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.blog-section h2::before {
    content: "0" counter(section-counter) ".";
    font-size: 2.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
    line-height: 1;
}

.blog-section p {
    font-size: 1rem;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 16px;
    text-align: justify;
}

.blog-section ul {
    list-style: none;
    padding: 0;
    margin: 22px 0 22px 20px;
}

.blog-section ul li {
    padding-left: 28px;
    margin-bottom: 10px;
    position: relative;
    font-size: 1rem;
    line-height: 1.65;
    color: #374151;
}

.blog-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* Blog CTA Section */
.blog-cta {
    background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%);
    color: #ffffff;
    padding: 56px 48px;
    border-radius: 12px;
    text-align: center;
    margin-top: 64px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.blog-cta h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.blog-cta p {
    font-size: 1.125rem;
    margin-bottom: 32px;
    color: #d1d5db;
}

.blog-cta-button {
    display: inline-block;
    padding: 12px 24px;
    background: #ffffff;
    color: #000000;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    border: none;
}

.blog-cta-button:hover {
    background: #f5f5f5;
    transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .blog-layout {
        flex-direction: column;
        gap: 40px;
        padding: 0 30px;
    }
    
    .blog-sidebar {
        position: static;
        flex: none;
        width: 100%;
    }
    
    .blog-index {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 10px;
        gap: 15px;
    }
    
    .blog-index::before {
        left: 12px;
        right: 12px;
        top: 8px;
        bottom: auto;
        width: auto;
        height: 2px;
    }
    
    .index-item {
        flex-direction: column;
        text-align: center;
        min-width: 120px;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    .index-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    /* Back to Home mobile adjustments */
    div[style*="padding: 50px 0 2px 40px"] {
        padding: 20px 0 2px 20px !important;
    }

    /* Blog layout mobile overrides */
    .blog-layout {
        flex-direction: column !important;
        padding: 0 20px !important;
        gap: 0 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Hide blog index on mobile */
    .blog-index {
        display: none !important;
    }

    /* Hide blog divider on mobile */
    .blog-divider {
        display: none !important;
    }

    /* Blog content mobile adjustments */
    .blog-content {
        flex: 1 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Blog header mobile */
    .blog-header {
        margin-bottom: 30px !important;
        padding-bottom: 20px !important;
    }

    .blog-header h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    .blog-quote {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        padding: 20px !important;
        margin-bottom: 30px !important;
        border-radius: 12px !important;
        position: relative !important;
        padding-left: 40px !important;
        padding-top: 30px !important;
    }

    .blog-quote::before {
        font-size: 2.5rem !important;
        line-height: 1 !important;
        top: 10px !important;
        left: 15px !important;
        position: absolute !important;
    }

    .blog-quote::after {
        font-size: 2.5rem !important;
        line-height: 1 !important;
    }

    /* Blog sections mobile */
    .blog-section {
        margin-bottom: 40px !important;
        padding: 0 !important;
        scroll-margin-top: 100px !important;
    }

    .blog-section h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
    }

    .blog-section h2::before {
        font-size: 1.75rem !important;
    }

    .blog-section p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 16px !important;
    }

    .blog-section ul {
        margin-bottom: 20px !important;
    }

    .blog-section ul li {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
        padding-left: 28px !important;
    }

    /* CTA section mobile */
    .blog-cta {
        padding: 30px 20px !important;
        text-align: center !important;
        border-radius: 12px !important;
        margin-top: 40px !important;
    }

    .blog-cta h3 {
        font-size: 1.375rem !important;
        margin-bottom: 15px !important;
    }

    .blog-cta p {
        font-size: 1rem !important;
        margin-bottom: 20px !important;
    }

    .blog-cta-button {
        padding: 14px 28px !important;
        font-size: 1rem !important;
        width: auto !important;
        max-width: 300px !important;
        display: inline-block !important;
    }

    /* Navigation mobile adjustments for blog pages */
    .nav-right {
        gap: 12px !important;
    }

    .nav-right .nav-link {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    .nav-right .nav-link img {
        width: 16px !important;
        height: 16px !important;
        margin-right: 6px !important;
    }

    #selectedLanguage {
        font-size: 11px !important;
        margin-right: 6px !important;
    }

    .language-dropdown-menu {
        min-width: 200px !important;
        right: 0 !important;
    }

    /* Logo adjustments */
    .logo-icon img {
        width: 40px !important;
        height: 40px !important;
    }

    .logo-name {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    div[style*="padding: 50px 0 2px 40px"] {
        padding: 15px 0 2px 15px !important;
    }

    .blog-layout {
        padding: 0 15px !important;
    }

    /* Smaller content for mobile */
    .blog-header h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .blog-quote {
        font-size: 0.9rem !important;
        padding: 16px !important;
        margin-bottom: 25px !important;
        padding-left: 35px !important;
        padding-top: 25px !important;
    }

    .blog-quote::before {
        font-size: 2rem !important;
        top: 8px !important;
        left: 12px !important;
    }

    .blog-quote::after {
        font-size: 2rem !important;
    }

    .blog-section {
        margin-bottom: 35px !important;
    }

    .blog-section h2 {
        font-size: 1.25rem !important;
        margin-bottom: 16px !important;
    }

    .blog-section h2::before {
        font-size: 1.5rem !important;
    }

    .blog-section p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 14px !important;
    }

    .blog-section ul li {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
        padding-left: 24px !important;
    }

    .blog-cta {
        padding: 25px 15px !important;
        margin-top: 35px !important;
    }

    .blog-cta h3 {
        font-size: 1.25rem !important;
        margin-bottom: 12px !important;
    }

    .blog-cta p {
        font-size: 0.9rem !important;
        margin-bottom: 18px !important;
    }

    .blog-cta-button {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
        width: 100% !important;
        max-width: 280px !important;
    }
}


/* Prevent footer from overlapping fixed index */
.professional-footer {
    position: relative;
    z-index: 1000;
}

/* Smooth scrollbar for index */
.blog-index::-webkit-scrollbar {
    width: 6px;
}

.blog-index::-webkit-scrollbar-track {
    background: transparent;
}

.blog-index::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.blog-index::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.layers-subtitle {
    color: #999999;
    font-size: 1.125rem;
    text-align: center;
    margin-bottom: 80px;
}

.layers-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 20px;
    line-height: 1.2;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.layers-features {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.layer-feature-card {
    text-align: center;
    padding: 40px 25px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e0e0e0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.layer-feature-card .feature-icon {
    margin: 0 auto 16px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.layer-feature-card .feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
}

.layer-feature-card h3 {
    color: #000000;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 15px;
}

.layer-feature-card h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #7DD3C0 0%, #5FB1A9 50%, #4A90E2 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.layer-feature-card p {
    color: #666666 !important;
    font-size: 0.9rem !important;
    line-height: 1.5;
    margin: 0 0 15px 0;
    transition: color 0.3s ease !important;
}

.layer-explore-more {
    color: #000000;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 15px;
    transition: color 0.3s ease;
}

.layer-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    border-color: rgba(125, 211, 192, 0.3);
}

.layer-feature-card:hover .feature-icon {
    background: transparent;
    transform: scale(1.1);
}

.layer-feature-card:hover h3::after {
    width: 80px;
}

.layer-feature-card:hover .layer-explore-more {
    color: #4A90E2;
}

/* Enhanced Mobile Responsiveness for Five Layers */
@media (max-width: 1200px) {
    .layers-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

@media (max-width: 1024px) {
    .layers-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 50px;
    }
    
    .layer-feature-card {
        padding: 32px 20px;
    }
    
    .layer-feature-card h3 {
        font-size: 1rem;
    }
    
    .layer-feature-card p {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 768px) {
    .layers-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 40px;
    }
    
    .layer-feature-card {
        padding: 28px 18px;
    }
    
    .layer-feature-card .feature-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }
    
    .layer-feature-card h3 {
        font-size: 0.95rem;
        margin-bottom: 8px;
        padding-bottom: 12px;
    }
    
    .layer-feature-card h3::after {
        width: 50px;
        height: 3px;
    }
    
    .layer-feature-card p {
        font-size: 0.8rem !important;
        margin-bottom: 12px !important;
    }
    
    .layer-explore-more {
        font-size: 0.8rem;
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    .layers-features {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 30px;
    }
    
    .layer-feature-card {
        padding: 32px 24px;
        margin: 0 auto;
        max-width: 320px;
        width: 100%;
    }
    
    .layer-feature-card .feature-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 16px;
    }
    
    .layer-feature-card h3 {
        font-size: 1.1rem;
        margin-bottom: 10px;
        padding-bottom: 15px;
    }
    
    .layer-feature-card h3::after {
        width: 60px;
        height: 4px;
    }
    
    .layer-feature-card p {
        font-size: 0.9rem !important;
        margin-bottom: 15px !important;
        line-height: 1.6 !important;
    }
    
    .layer-explore-more {
        font-size: 0.85rem;
        margin-top: 15px;
    }
}
}

/* Explore Solutions Title - Enhanced Mobile Responsiveness */
.explore-solutions-title {
    text-align: left;
    margin-bottom: 40px;
    margin-left: 14px;
    font-size: 1.8rem;
    line-height: 1.3;
    color: #000000;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .explore-solutions-title {
        font-size: 1.6rem;
        margin-bottom: 35px;
        margin-left: 10px;
    }
}

@media (max-width: 768px) {
    .explore-solutions-title {
        font-size: 1.4rem;
        margin-bottom: 30px;
        margin-left: 8px;
        text-align: center;
        margin-right: 8px;
    }
}

@media (max-width: 480px) {
    .explore-solutions-title {
        font-size: 1.2rem;
        margin-bottom: 25px;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        padding: 0 10px;
        line-height: 1.4;
    }
}

/* Explore Solutions Tiles - Enhanced Mobile Responsiveness */
.explore-solutions-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0 14px;
    width: calc(100% - 28px);
}

.explore-solutions-tiles .layer-feature-card {
    padding: 32px 20px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    cursor: pointer;
}

.explore-solutions-tiles .layer-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-color: rgba(125, 211, 192, 0.4);
}

.explore-solutions-tiles .layer-feature-card .feature-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    background: rgba(125, 211, 192, 0.1);
    border-radius: 50%;
}

.explore-solutions-tiles .layer-feature-card h3 {
    font-size: 1rem;
    margin-bottom: 8px;
    padding-bottom: 12px;
}

.explore-solutions-tiles .layer-feature-card h3::after {
    width: 50px;
    height: 3px;
}

.explore-solutions-tiles .layer-feature-card p {
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
}

/* Enhanced Mobile Responsiveness for Explore Solutions */
@media (max-width: 1200px) {
    .explore-solutions-tiles {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin: 0 10px;
        width: calc(100% - 20px);
    }
}

@media (max-width: 1024px) {
    .explore-solutions-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin: 0 8px;
        width: calc(100% - 16px);
    }
    
    .explore-solutions-tiles .layer-feature-card {
        padding: 28px 18px;
    }
    
    .explore-solutions-tiles .layer-feature-card .feature-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }
    
    .explore-solutions-tiles .layer-feature-card h3 {
        font-size: 0.95rem;
        margin-bottom: 6px;
        padding-bottom: 10px;
    }
    
    .explore-solutions-tiles .layer-feature-card p {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    .explore-solutions-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin: 0 5px;
        width: calc(100% - 10px);
    }
    
    .explore-solutions-tiles .layer-feature-card {
        padding: 24px 16px;
    }
    
    .explore-solutions-tiles .layer-feature-card .feature-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 10px;
    }
    
    .explore-solutions-tiles .layer-feature-card h3 {
        font-size: 0.9rem;
        margin-bottom: 5px;
        padding-bottom: 8px;
    }
    
    .explore-solutions-tiles .layer-feature-card h3::after {
        width: 40px;
        height: 2px;
    }
    
    .explore-solutions-tiles .layer-feature-card p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }
}

@media (max-width: 480px) {
    .explore-solutions-tiles {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 0;
        width: 100%;
    }
    
    .explore-solutions-tiles .layer-feature-card {
        padding: 28px 20px;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .explore-solutions-tiles .layer-feature-card .feature-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 14px;
    }
    
    .explore-solutions-tiles .layer-feature-card h3 {
        font-size: 1rem;
        margin-bottom: 8px;
        padding-bottom: 12px;
    }
    
    .explore-solutions-tiles .layer-feature-card h3::after {
        width: 50px;
        height: 3px;
    }
    
    .explore-solutions-tiles .layer-feature-card p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
}

/* Central Contact Form */
.layers-contact-center {
    text-align: center;
    margin-top: -20px;
    margin-bottom: 40px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.contact-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.center-input {
    width: 100%;
    padding: 14px 180px 14px 28px;
    background: #ffffff;
    border: 2px solid #4A90E2;
    border-radius: 50px;
    color: #000000;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    outline: none;
    height: 56px;
    box-sizing: border-box;
}

.center-input::placeholder {
    color: #666666;
}

.center-input:focus {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.center-btn {
    position: absolute;
    right: 3px;
    top: 3px;
    padding: 0 36px;
    height: 50px;
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    border: none;
    border-radius: 50px;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-btn:hover {
    box-shadow: 0 8px 16px rgba(74, 144, 226, 0.3);
    background: linear-gradient(135deg, #5BA0F2, #8B78FE);
}

.center-btn:active {
    transform: scale(0.98);
}

@media (max-width: 768px) {
    .layers-contact-center {
        max-width: 90%;
        margin: 0 auto;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    
    .contact-form-wrapper {
        flex-direction: column;
        gap: 16px;
        max-width: 320px;
        width: 100%;
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .center-input {
        width: 100%;
        padding: 16px 20px;
        font-size: 1rem;
        height: auto;
        border-radius: 12px;
        text-align: center;
        margin: 0 auto;
    }
    
    .center-btn {
        width: 100%;
        padding: 16px 24px;
        height: auto;
        font-size: 1rem;
        border-radius: 12px;
        position: static;
        right: auto;
        top: auto;
        margin: 0 auto;
        text-align: center;
    }
}

@media (max-width: 1024px) {
    .layers-features {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .layers-main-title {
        font-size: 2.5rem;
    }
    
    .layers-title-box {
        padding: 40px 40px;
    }
    
    .layers-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .layers-features {
        grid-template-columns: 1fr;
    }
    
    .foundation-tiles {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


/* Service Section Styles */
.service-section {
    padding: 80px 0;
    background: #ffffff;
}

.service-section.alt {
    background: #f8f9fa;
}

.section-content {
    max-width: 900px;
    margin: 0 auto;
}

.section-number {
    font-size: 1rem;
    font-weight: 700;
    color: #0ea5e9;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.section-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0c4a6e;
    margin-bottom: 24px;
    line-height: 1.2;
}

.section-intro {
    font-size: 1.125rem;
    color: #334155;
    line-height: 1.8;
    margin-bottom: 16px;
}

.section-description {
    font-size: 1.125rem;
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 40px;
    font-weight: 500;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.capability-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #0ea5e9;
    transition: all 0.3s ease;
}

.capability-item:hover {
    background: #e0f2fe;
    transform: translateX(5px);
}

.capability-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: #0ea5e9;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.capability-text {
    font-size: 1rem;
    color: #334155;
    line-height: 1.6;
}

/* Responsive Design for Service Sections */
@media (max-width: 768px) {
    .service-section {
        padding: 60px 0;
    }
    
    .section-content h2 {
        font-size: 1.875rem;
    }
    
    .section-intro,
    .section-description {
        font-size: 1rem;
    }
    
    .capabilities-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Grey Container Section */
.grey-container-section {
    background: #e5e7eb !important;
    padding: 80px 20px !important;
    border-bottom: 1px solid #d1d5db;
    border-top: 1px solid #d1d5db;
    min-height: 200px;
    display: block !important;
    visibility: visible !important;
}

.grey-container-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.grey-container-content {
    text-align: center;
}

.grey-container-content h2 {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin-bottom: 16px !important;
}

.grey-container-content p {
    font-size: 0.875rem !important;
    color: #666666 !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

/* FAQ Section Styles */
.faq-section {
    background: #f5f5f5;
    padding: 80px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.faq-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: flex-start;
}

.faq-left h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 24px;
    margin-top: 12px;
    line-height: 1.2;
}

.faq-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 8px;
}

.faq-contact {
    font-size: 1rem;
    color: #111827;
    margin-bottom: 24px;
}

.faq-right {
    background: transparent;
    padding: 32px 0;
}

.faq-search {
    position: relative;
    margin-bottom: 32px;
}

.faq-search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font-size: 0.875rem;
    color: #111827;
    background: #f9fafb;
    outline: none;
    transition: all 0.2s ease;
}

.faq-search-input:focus {
    border-color: #9ca3af;
    background: white;
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1);
}

.faq-search-input::placeholder {
    color: #9ca3af;
}

.faq-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #3b82f6;
}

.faq-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    background: transparent;
    border: none;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 400;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
}

.faq-plus-icon {
    width: 16px;
    height: 16px;
    margin-right: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: #6b7280;
}

.faq-item.active .faq-plus-icon {
    transform: rotate(45deg);
}

.faq-question span {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.faq-answer {
    padding: 0 16px 0 48px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: transparent;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 12px 16px 12px 48px;
}

.faq-answer p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 8px;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .faq-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .faq-left h2 {
        font-size: 2rem;
    }
    
    .faq-right {
        padding: 24px 0;
    }
    
    .faq-question {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
    
    .faq-question span {
        white-space: normal;
    }
    
    .faq-item.active .faq-answer {
        padding: 10px 16px 10px 44px;
    }
}

/* Case icon styles */
.case-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.case-icon img {
    width: 32px;
    height: 32px;
}/* New
 Working Slider Styles */
.new-slider-section {
    background: #ffffff;
    padding: 80px 0;
    border-bottom: 1px solid #e5e7eb;
}

.new-slider-section .container {
    max-width: none !important;
    width: 100% !important;
}

.new-slider-header {
    text-align: center;
    margin-bottom: 60px;
}

.new-slider-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 16px;
}

.new-slider-header p {
    font-size: 1.125rem;
    color: #6b7280;
}

.new-slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}

.new-slider-btn {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b7280;
    flex-shrink: 0;
    z-index: 10;
}

.new-slider-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

.new-slider-viewport {
    overflow: hidden;
    width: 1008px;
}

.new-slider-track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s ease;
}

.new-card {
    min-width: 320px;
    max-width: 320px;
    background: #ffffff;
    border-radius: 16px;
    border: 2px solid #d1d5db;
    overflow: hidden;
    flex-shrink: 0;
}

.new-card-top {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
}

.new-card-badge {
    display: inline-block;
    padding: 6px 14px;
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #2563eb;
    margin-bottom: 16px;
}

.new-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
}

.new-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #000000 !important;
    margin: 0;
}

.new-card-bottom {
    padding: 20px;
}

.new-card-metric {
    font-size: 18px;
    font-weight: 700;
    color: #000000 !important;
    margin-bottom: 12px;
}

.new-card-description {
    font-size: 14px;
    color: #000000 !important;
    line-height: 1.6;
    margin-bottom: 20px;
}

.new-card-link {
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.new-card-link:hover {
    color: #3b82f6;
}

.new-card-link::after {
    content: ' →';
    margin-left: 4px;
}/* White C
ontainer Section */
.white-container-section {
    background: #f5f5f5;
    padding: 60px 0;
}

.white-container-content {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.white-container-content h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 40px;
}

.advantage-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.advantage-tile {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.advantage-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.advantage-tile:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.3);
}

.advantage-tile:hover::before {
    opacity: 1;
}

.advantage-tile h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 16px;
    color: #1f2937;
    position: relative;
    z-index: 2;
}

.advantage-tile p {
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.tile-preview {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 24px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.tile-preview::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.advantage-tile:hover .tile-preview::after {
    animation: shimmer 1.5s ease-in-out;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
}

.feature-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 16px;
}

.feature-item p {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.6;
}

/* Grey Container Section with Separators */
.grey-separator-section {
    background: #2a2a2a;
    padding: 80px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.grey-separator-section .container {
    max-width: 100% !important;
    width: 100% !important;
}

.grey-separator-content {
    text-align: center;
    max-width: 1800px;
    margin: 0 auto;
    width: 95%;
}

.grey-separator-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 24px;
}

.grey-separator-content p {
    font-size: 1.125rem;
    color: #6b7280;
    margin-bottom: 40px;
    line-height: 1.6;
}

.grey-separator-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary {
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    color: #ffffff;
    padding: 12px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.btn-secondary {
    background: transparent;
    color: #4A90E2;
    padding: 12px 32px;
    border: 2px solid #4A90E2;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-secondary:hover {
    background: #4A90E2;
    color: #ffffff;
}

/* Responsive Design for New Containers */
@media (max-width: 768px) {
    .white-container-content h2,
    .grey-separator-content h2 {
        font-size: 2rem;
    }
    
    .white-container-features {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .foundation-tiles {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    
    .grey-separator-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 200px;
        text-align: center;
    }
}/
/* Empty tiles container */
.grey-separator-section .tiles-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    column-gap: 150px;
    row-gap: 150px;
    margin: 80px auto;
    width: 95%;
    max-width: 2000px;
}

.grey-separator-section .grey-tile {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 60px 48px;
    transition: all 0.2s ease;
    min-height: 320px;
}

.grey-separator-section .grey-tile:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.grey-separator-section .grey-tile h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

.grey-separator-section .grey-tile p {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.6;
}

/* AI Agent Section */
.ai-agent-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #2a2a3a 50%, #1e1e3e 100%);
    padding: 80px 0;
}

.ai-agent-section .container {
    max-width: 100% !important;
    width: 100% !important;
}

.ai-agent-content {
    text-align: center;
    max-width: 2000px;
    margin: 0 auto;
    width: 95%;
}

.ai-agent-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 24px;
}

.ai-agent-section .tiles-container {
    display: flex !important;
    gap: 30px;
    margin: 80px auto;
    width: 70%;
    max-width: 1200px;
    align-items: stretch;
}

.ai-agent-section .grey-tile {
    background: #2a2a2a;
    border: 1px solid #3b82f6;
    border-radius: 12px;
    padding: 50px 40px;
    transition: all 0.2s ease;
    min-height: 300px;
}

.ai-agent-section .grey-tile:hover {
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
    border-color: #60a5fa;
}

.ai-agent-section .grey-tile h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
}

.ai-agent-section .grey-tile p {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.6;
}

.ai-agent-section .grey-tile {
    flex: 1;
}

.ai-agent-section .grey-tile-small {
    flex: 0.75;
    padding: 40px 30px;
    min-height: 280px;
}

.ai-agent-section .tile-visual img {
    filter: invert(1);
}

.btn-playground {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #ffffff;
    padding: 14px 36px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-playground:hover {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

.btn-playground:active {
    transform: translateY(0) scale(0.98);
}

/* ========================================
   MOBILE MENU STYLES
   ======================================== */

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px;
    z-index: 10000;
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }
    
    .nav-right .nav-link,
    .nav-right .btn-signup {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .logo-name {
        display: none;
    }
    
    .logo-text {
        display: none;
    }
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: #ffffff;
    transition: all 0.3s ease;
    border-radius: 1px;
    display: block;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10001;
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
    display: flex;
    opacity: 1;
}

.mobile-menu-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 80px 20px 40px;
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}

.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    padding: 12px;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 400px;
    padding: 20px 0;
    box-sizing: border-box;
}

.mobile-nav > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu-overlay.active .mobile-nav > * {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-overlay.active .mobile-nav > *:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-overlay.active .mobile-nav > *:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu-overlay.active .mobile-nav > *:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-nav > *:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu-overlay.active .mobile-nav > *:nth-child(5) { transition-delay: 0.3s; }
.mobile-menu-overlay.active .mobile-nav > *:nth-child(6) { transition-delay: 0.35s; }
.mobile-menu-overlay.active .mobile-nav > *:nth-child(7) { transition-delay: 0.4s; }
.mobile-menu-overlay.active .mobile-nav > *:nth-child(8) { transition-delay: 0.45s; }

.mobile-nav-section {
    margin: 12px 0;
    width: 100%;
}

.mobile-nav-header {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-header:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.mobile-nav-header .toggle-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.mobile-nav-header.active .toggle-icon {
    transform: rotate(180deg);
}

.mobile-nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-nav-submenu.active {
    max-height: 500px;
}

.mobile-nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    padding: 14px 20px;
    text-align: left;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 1px 0;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.mobile-nav-sub {
    font-size: 1rem;
    padding: 12px 24px 12px 40px;
    color: #d1d5db;
}

.mobile-nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transform: translateX(8px);
}

.mobile-nav-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-login {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-login:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.mobile-nav-cta {
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    min-height: 44px;
    box-shadow: 0 4px 12px rgba(125, 211, 192, 0.3);
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-cta:hover {
    background: linear-gradient(135deg, #6bc4b0, #3b7dd6);
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(125, 211, 192, 0.4);
    color: #ffffff;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Touch-friendly enhancements for all mobile devices */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .layer-feature-card:hover,
    .advantage-tile:hover,
    .grey-tile:hover {
        transform: none;
    }
    
    /* Increase touch targets */
    .btn-start,
    .btn-demo-hero,
    .center-btn,
    .btn-playground,
    .layer-explore-more {
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Better touch feedback */
    .layer-feature-card,
    .advantage-tile,
    .grey-tile,
    .new-card {
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }
    
    .layer-feature-card:active,
    .advantage-tile:active,
    .grey-tile:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Tablet and below (768px) */
@media (max-width: 768px) {
    
    /* Universal box-sizing for mobile stability */
    *, *::before, *::after {
        box-sizing: border-box;
    }
    
    /* Fix body padding for fixed navbar */
    body {
        padding-top: 72px !important;
        overflow-x: hidden;
        position: relative;
        width: 100%;
        max-width: 100vw;
        margin: 0;
    }
    
    /* Ensure no horizontal scroll */
    html {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    /* Navigation */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background: rgba(26, 26, 26, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-sizing: border-box;
    }
    
    .nav-container {
        padding: 0 20px;
        height: 72px;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .nav-left {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 16px;
    }
    
    .nav-menu {
        display: none;
    }
    
    .nav-right .nav-link,
    .nav-right .btn-signup {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
        position: relative;
        z-index: 10002;
    }
    
    .logo {
        transform: scale(0.9);
        flex-shrink: 0;
    }
    
    .logo-name {
        display: none !important;
    }
    
    .logo-text {
        display: none !important;
    }
    
    .footer-logo-text {
        display: none !important;
    }
    
    .footer-logo-name {
        display: none !important;
    }
    
    /* Mega menu - hide on mobile */
    .mega-menu {
        display: none !important;
    }
    
    .dropdown-content {
        display: none !important;
    }
    
    /* Hero Section */
    .hero {
        padding: 100px 20px 60px;
        min-height: auto;
        margin-top: 0;
        display: flex;
        align-items: center;
    }
    
    .hero-container {
        flex-direction: column;
        gap: 50px;
        width: 100%;
        max-width: 100%;
    }
    
    .hero-content {
        max-width: 100%;
        text-align: center;
        order: 1;
    }
    
    .hero-content h1 {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 24px;
    }
    
    .hero-content p {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 32px;
        max-width: 100%;
    }
    
    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        width: 100%;
    }
    
    .btn-start,
    .btn-demo-hero {
        width: 100%;
        max-width: 280px;
        padding: 16px 24px;
        font-size: 1rem;
        text-align: center;
        justify-content: center;
    }
    
    /* Hero Animation - Show but simplified on mobile */
    .hero-visual {
        max-width: 100%;
        height: 200px;
        display: flex;
        opacity: 0.6;
        order: 2;
        margin: 20px 0 40px 0;
    }
    
    .bouncing-box {
        display: block;
        width: 80%;
        height: 80%;
        margin: 0 auto;
    }
    
    .bouncing-box::before {
        background-size: 30px 30px;
        opacity: 0.4;
    }
    
    .bouncing-balls {
        display: block;
    }
    
    /* Simplify grid lines on mobile */
    .grid-snake-lines {
        opacity: 0.3;
    }
    
    /* White Container Section */
    .white-container-section {
        padding: 80px 20px;
        overflow: hidden;
    }
    
    .section-main-title {
        font-size: 2rem;
        line-height: 1.3;
        margin-bottom: 24px;
        text-align: center;
    }
    
    .section-description {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 40px;
        text-align: center;
        max-width: 100%;
    }
    
    /* Contact Form */
    .layers-contact-center {
        margin: 40px auto 60px;
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .contact-form-wrapper {
        flex-direction: column;
        gap: 16px;
        max-width: 100%;
        width: 100%;
        max-width: 320px;
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .center-input {
        width: 100%;
        padding: 16px 20px;
        font-size: 1rem;
        border-radius: 12px;
        height: auto;
        text-align: center;
        margin: 0 auto;
    }
    
    .center-btn {
        width: 100%;
        padding: 16px 24px;
        font-size: 1rem;
        border-radius: 12px;
        position: static;
        right: auto;
        top: auto;
        height: auto;
        margin: 0 auto;
        text-align: center;
    }
    
    /* Layer Features */
    .layers-features {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 60px;
    }
    
    .layer-feature-card {
        padding: 32px 24px;
        text-align: center;
        border-radius: 16px;
        transition: all 0.3s ease;
    }
    
    .layer-feature-card h3 {
        font-size: 1.3rem;
        margin: 20px 0 12px;
    }
    
    .layer-feature-card p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 20px;
    }
    
    .layer-explore-more {
        font-size: 0.95rem;
        padding: 12px 20px;
    }
    
    /* Dark Container Section */
    .dark-container-section {
        padding: 80px 20px;
        overflow: hidden;
    }
    
    .dark-section-title {
        font-size: 2rem;
        line-height: 1.3;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .dark-section-description {
        font-size: 1.1rem;
        line-height: 1.6;
        text-align: center;
        margin-bottom: 40px;
    }
    
    .dark-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 40px;
    }
    
    .dark-tab {
        font-size: 0.9rem;
        padding: 12px 16px;
        min-width: auto;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .dark-content-card {
        grid-template-columns: 1fr;
        padding: 40px 24px;
        gap: 40px;
        border-radius: 16px;
    }
    
    .dark-card-left {
        text-align: center;
    }
    
    .dark-card-left h3 {
        font-size: 1.6rem;
        margin-bottom: 16px;
    }
    
    .dark-card-left p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .dark-card-right {
        order: -1;
    }
    
    .dark-card-visual {
        height: 200px;
        border-radius: 12px;
    }
    
    /* Advantage Container */
    .advantage-container-section {
        padding: 80px 20px;
    }
    
    .white-container-content h2 {
        font-size: 2rem;
        line-height: 1.3;
        text-align: center;
        margin-bottom: 24px;
    }
    
    .white-container-content p {
        font-size: 1.1rem;
        line-height: 1.6;
        text-align: center;
        margin-bottom: 50px;
    }
    
    .advantage-tiles {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 50px;
    }
    
    .advantage-tile {
        padding: 40px 24px;
        text-align: center;
        border-radius: 16px;
    }
    
    .advantage-tile h3 {
        font-size: 1.4rem;
        margin-bottom: 16px;
    }
    
    .advantage-tile p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 24px;
    }
    
    .tile-preview {
        height: 180px;
        border-radius: 12px;
        overflow: hidden;
    }
    
    /* AI Agent Section */
    .ai-agent-section {
        padding: 80px 20px;
        overflow: hidden;
        background: linear-gradient(135deg, #1a1a2e 0%, #2a2a3a 50%, #1e1e3e 100%);
    }
    
    .ai-agent-section .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .ai-agent-content {
        width: 100%;
        padding: 0;
        max-width: 100%;
        text-align: center;
    }
    
    .ai-agent-content h2 {
        font-size: 2rem;
        line-height: 1.3;
        margin-bottom: 20px;
        color: #ffffff;
    }
    
    .ai-agent-content p {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 50px;
        color: #d1d5db;
    }
    
    .ai-agent-section .tiles-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin: 50px 0 !important;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .ai-agent-section .grey-tile {
        padding: 40px 24px;
        min-height: auto;
        border-radius: 16px;
        text-align: center;
        background: #2a2a2a;
        border: 1px solid #3b82f6;
        box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2);
        transition: all 0.3s ease;
    }
    
    .ai-agent-section .grey-tile:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
    }
    
    .ai-agent-section .grey-tile h3 {
        font-size: 1.3rem;
        margin: 20px 0 12px;
        color: #ffffff;
    }
    
    .ai-agent-section .grey-tile p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 0;
        color: #d1d5db;
    }
    
    .ai-agent-section .tile-visual img {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 16px !important;
    }
    
    .btn-playground {
        display: inline-block;
        padding: 16px 32px;
        font-size: 1rem;
        border-radius: 12px;
        margin-top: 40px;
    }
    
    /* Slider Section */
    .new-slider-section {
        padding: 60px 20px;
        overflow: hidden;
    }
    
    .new-slider-header {
        margin-bottom: 40px;
    }
    
    .new-slider-header h2 {
        font-size: 1.8rem;
    }
    
    .new-slider-header p {
        font-size: 1rem;
    }
    
    .new-slider-container {
        flex-direction: column;
        gap: 20px;
    }
    
    /* Hide slider buttons on mobile */
    .new-slider-btn {
        display: none;
    }
    
    .new-slider-viewport {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    .new-slider-viewport::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    .new-slider-track {
        gap: 20px;
        padding: 0 20px;
    }
    
    .new-card {
        min-width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        scroll-snap-align: start;
        flex-shrink: 0;
    }
    
    .new-card-image {
        height: 180px;
    }
    
    .new-card h3 {
        font-size: 1.1rem;
    }
    
    .new-card p {
        font-size: 0.9rem;
    }
    
    /* FAQ Section */
    .faq-section {
        padding: 80px 20px;
        overflow: hidden;
    }
    
    .faq-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .faq-left {
        width: 100%;
        text-align: center;
    }
    
    .faq-left h2 {
        font-size: 2rem;
        line-height: 1.3;
        margin-bottom: 16px;
    }
    
    .faq-subtitle {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }
    
    .faq-contact {
        font-size: 1rem;
    }
    
    .faq-right {
        width: 100%;
    }
    
    .faq-search {
        margin-bottom: 32px;
    }
    
    .faq-search-input {
        width: 100%;
        padding: 16px 20px 16px 50px;
        font-size: 1rem;
        border-radius: 12px;
    }
    
    .faq-items {
        gap: 16px;
    }
    
    .faq-item {
        border-radius: 12px;
        overflow: hidden;
    }
    
    .faq-question {
        padding: 20px;
        font-size: 1rem;
        text-align: left;
    }
    
    .faq-answer {
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 20px 20px;
        max-height: 500px;
    }
    
    .faq-answer p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    /* Stats Section */
    .stats-section {
        padding: 80px 20px;
        overflow: hidden;
    }
    
    .stats-container {
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }
    
    .stats-visual {
        width: 100%;
        order: -1;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .cube-container {
        width: 120px;
        height: 120px;
        perspective: 600px;
    }
    
    .cube-face {
        width: 120px;
        height: 120px;
    }
    
    .cube-front  { transform: rotateY(0deg) translateZ(60px); }
    .cube-back   { transform: rotateY(180deg) translateZ(60px); }
    .cube-right  { transform: rotateY(90deg) translateZ(60px); }
    .cube-left   { transform: rotateY(-90deg) translateZ(60px); }
    .cube-top    { transform: rotateX(90deg) translateZ(60px); }
    .cube-bottom { transform: rotateX(-90deg) translateZ(60px); }
    
    .math-formula {
        font-size: 0.7rem;
    }
    
    .equation {
        font-size: 0.8rem;
    }
    
    /* Models Page Mobile Styles - 768px */
    
    /* Models Page Header */
    .navbar[style*="height: 40px"] .nav-left {
        display: flex !important;
    }
    
    .navbar[style*="height: 40px"] .mobile-menu-toggle {
        display: flex !important;
    }
    
    .navbar[style*="height: 40px"] div[style*="gap: 36px"] {
        display: none !important;
    }
    
    /* Fixed Navigation Bar - Hide on mobile */
    div[style*="position: fixed; top: 60px"] {
        display: none !important;
    }
    
    /* Breadcrumb - Hide completely on mobile */
    div[style*="padding: 130px 0 0 12%"] {
        display: none !important;
    }
    
    /* Additional breadcrumb selectors */
    #breadcrumb {
        display: none !important;
    }
    
    /* Hide any horizontal rectangle tiles on mobile */
    div[style*="border-radius: 30px"][style*="position: fixed"] {
        display: none !important;
    }
    
    /* Models Page Body - Consistent with main mobile navbar */
    body {
        padding-top: 72px !important;
    }
    
    /* Models Main Section */
    .models-main {
        padding: 40px 20px 80px !important;
        margin-top: 0 !important;
    }
    
    .models-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Category Headers */
    .category-header {
        text-align: center !important;
        margin-bottom: 40px !important;
        padding: 0 !important;
    }
    
    .category-header h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }
    
    .category-header p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        color: #666 !important;
        max-width: 100% !important;
    }
    
    /* Model Cards Grid */
    .models-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        padding: 0 !important;
    }
    
    .model-card {
        padding: 24px 20px !important;
        border-radius: 12px !important;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .model-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
    }
    
    .model-card h3 {
        font-size: 1.2rem !important;
        margin: 16px 0 12px !important;
    }
    
    .model-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }
    
    .model-tags {
        margin: 16px 0 !important;
        gap: 8px !important;
    }
    
    .tag {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }
    
    .model-btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
        border-radius: 8px !important;
    }

    
    /* Mobile Category Navigation - 768px */
    .mobile-category-nav {
        display: block !important;
        padding: 0 !important;
        margin-bottom: 30px !important;
    }
    
    .mobile-category-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    
    .mobile-category-tab {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 25px !important;
        padding: 14px 12px !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        color: #64748b !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        text-align: center !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-category-tab.active,
    .mobile-category-tab:hover {
        background: linear-gradient(135deg, #a7f3d0 0%, #7dd3fc 100%) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(125, 211, 192, 0.3) !important;
    }
    
    /* Contact Page Header - 768px */
    .navbar[style*="height: 40px"] {
        height: 72px !important;
        min-height: 72px !important;
    }
    
    .navbar[style*="height: 40px"] .nav-container {
        height: 72px !important;
        padding: 0 20px !important;
        justify-content: space-between !important;
    }
    
    .navbar[style*="height: 40px"] .nav-left {
        display: flex !important;
    }
    
    .navbar[style*="height: 40px"] .mobile-menu-toggle {
        display: flex !important;
    }
    
    .navbar[style*="height: 40px"] div[style*="gap: 36px"] {
        display: none !important;
    }
    
    /* Back to home button */
    div[style*="padding: 50px 0 2px 40px"] {
        padding: 20px 0 2px 20px !important;
    }
    
    div[style*="padding: 50px 0 2px 40px"] span {
        font-size: 11px !important;
    }
    
    /* ========================================
       COMPREHENSIVE MOBILE LAYOUT FIXES
       ======================================== */
    
    /* Ensure all containers don't overflow */
    .container, .nav-container, .hero-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Fix any potential text overflow */
    h1, h2, h3, h4, h5, h6, p, span, div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Prevent horizontal scroll from images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix button and link sizing for touch */
    button, a, .btn {
        min-height: 44px !important;
        touch-action: manipulation !important;
    }
    
    /* Ensure mobile menu is always on top */
    .mobile-menu-overlay {
        z-index: 10001 !important;
    }
    
    .mobile-menu-toggle {
        z-index: 10002 !important;
    }
    
    /* Contact Page Mobile Styles - 768px */
    body {
        padding-top: 72px !important;
    }
    
    .contact-main {
        padding: 40px 20px 60px !important;
        margin-top: 0 !important;
    }
    
    .contact-header {
        padding: 30px 20px !important;
        margin-bottom: 10px !important;
        margin-top: 15px !important;
    }
    
    .contact-header h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }
    
    .contact-header p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    .contact-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        grid-template-columns: none !important;
        align-items: center !important;
    }
    
    /* Hide envelope illustration on mobile */
    .contact-illustration {
        display: none !important;
    }
    
    .contact-illustration {
        order: 2 !important;
        width: 100% !important;
        max-width: 400px !important;
    }
    
    .contact-illustration svg {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
    }
    
    .contact-form-section {
        order: 1 !important;
        max-width: 100% !important;
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        padding: 32px !important;
    }
    
    .contact-form input,
    .contact-form textarea {
        padding: 14px 18px !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    
    .contact-form button {
        padding: 16px 24px !important;
        font-size: 15px !important;
    }
    
    .stats-content {
        width: 100%;
    }
    
    .cta-heading {
        font-size: 2rem;
        line-height: 1.3;
        margin-bottom: 24px;
    }
    
    .cta-description {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 40px;
    }
    
    .cta-buttons {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
    
    .cta-buttons .btn-start,
    .cta-buttons .btn-demo-hero {
        width: 100%;
        max-width: 280px;
        padding: 16px 24px;
        font-size: 1rem;
        text-align: center;
        justify-content: center;
    }
    
    /* Footer */
    .professional-footer {
        padding: 40px 0;
        overflow: hidden;
    }
    
    .footer-container {
        padding: 0 20px;
    }
    
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 30px;
        padding: 40px 0 20px 0;
    }
    
    .footer-brand,
    .footer-brand-content,
    .footer-nav,
    .footer-contact {
        margin-top: 0 !important;
        width: 100%;
    }
    
    .footer-brand {
        text-align: center;
    }
    
    .footer-logo {
        justify-content: center;
    }
    
    .footer-description {
        font-size: 0.9rem;
        text-align: center;
    }
    
    .footer-mission {
        display: none !important;
    }
    
    .footer-cta {
        display: none !important;
    }
    
    .footer-nav {
        display: none !important;
    }
    
    .footer-column {
        display: none !important;
    }
    
    .footer-contact {
        text-align: center;
    }
    
    .social-links {
        justify-content: center !important;
        flex-wrap: wrap;
    }
    
    .footer-write-btn {
        width: auto;
        padding: 12px 30px;
    }
    
    /* Hide any absolute positioned decorative elements */
    .footer-watermark {
        display: none !important;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 20px 0;
    }
    
    .footer-bottom-links {
        display: none !important;
    }
    
    .footer-bottom-info {
        flex-direction: column;
        gap: 5px;
        font-size: 0.85rem;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    
    /* Fix body padding for fixed navbar */
    body {
        padding-top: 72px;
    }
    
    /* Navigation */
    .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9999;
    }
    
    .nav-container {
        padding: 0 16px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .nav-left {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .logo {
        transform: scale(0.85);
        flex-shrink: 0;
    }
    
    .logo-name {
        font-size: 20px;
    }
    
    .logo-icon img {
        width: 40px;
        height: 40px;
    }
    
    /* Hero Section */
    .hero {
        padding: 80px 16px 60px;
        min-height: 90vh;
    }
    
    .hero-content h1 {
        font-size: 1.8rem;
        line-height: 1.2;
    }
    
    .hero-content p {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .hero-visual {
        height: 180px;
        opacity: 0.4;
    }
    
    .bouncing-box {
        width: 70%;
        height: 70%;
    }
    
    .bouncing-box::before {
        background-size: 25px 25px;
        opacity: 0.3;
    }
    
    .hero-visual {
        height: 250px;
        opacity: 0.7;
    }
    
    /* Buttons */
    .btn-start,
    .btn-demo-hero,
    .center-btn,
    .btn-playground {
        padding: 14px 20px;
        font-size: 0.95rem;
        width: 100%;
        max-width: 260px;
    }
    
    /* Sections */
    .white-container-section,
    .dark-container-section,
    .advantage-container-section,
    .ai-agent-section,
    .new-slider-section,
    .faq-section,
    .stats-section {
        padding: 60px 16px;
        overflow: hidden;
    }
    
    /* Typography */
    .section-main-title,
    .dark-section-title,
    .ai-agent-content h2,
    .white-container-content h2,
    .faq-left h2,
    .cta-heading {
        font-size: 1.75rem;
        line-height: 1.2;
        margin-bottom: 20px;
    }
    
    .section-description,
    .dark-section-description,
    .ai-agent-content p,
    .white-container-content p,
    .cta-description {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 30px;
    }
    
    /* Dark tabs - stack vertically on very small screens */
    .dark-tabs {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .dark-tab {
        font-size: 0.85rem;
        padding: 10px 14px;
    }
    
    /* Cards and tiles */
    .layer-feature-card,
    .advantage-tile,
    .ai-agent-section .grey-tile {
        padding: 24px 16px;
    }
    
    .layer-feature-card h3,
    .advantage-tile h3 {
        font-size: 1.2rem;
    }
    
    /* FAQ */
    .faq-question {
        padding: 16px;
        font-size: 0.95rem;
    }
    
    .faq-answer {
        padding: 0;
        max-height: 0;
        overflow: hidden;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 16px 16px;
        max-height: 500px;
    }
    
    .faq-answer p {
        font-size: 0.9rem;
    }
    
    /* Container fixes */
    .container {
        padding: 0 15px;
        overflow: hidden;
    }
    
    /* Stats section cube - make even smaller */
    .stats-visual {
        height: 120px;
    }
    
    .cube-container {
        width: 100px;
        height: 100px;
        perspective: 500px;
    }
    
    .cube-face {
        width: 100px;
        height: 100px;
    }
    
    .cube-front  { transform: rotateY(0deg) translateZ(50px); }
    .cube-back   { transform: rotateY(180deg) translateZ(50px); }
    .cube-right  { transform: rotateY(90deg) translateZ(50px); }
    .cube-left   { transform: rotateY(-90deg) translateZ(50px); }
    .cube-top    { transform: rotateX(90deg) translateZ(50px); }
    .cube-bottom { transform: rotateX(-90deg) translateZ(50px); }
    
    .math-formula {
        font-size: 0.6rem;
    }
    
    .equation {
        font-size: 0.7rem;
    }
    
    /* Contact Page Header - 480px */
    .navbar[style*="height: 40px"] {
        height: 72px !important;
        min-height: 72px !important;
    }
    
    .navbar[style*="height: 40px"] .nav-container {
        height: 72px !important;
        padding: 0 16px !important;
        justify-content: space-between !important;
    }
    
    .navbar[style*="height: 40px"] .nav-left {
        display: flex !important;
    }
    
    .navbar[style*="height: 40px"] .logo {
        transform: scale(0.8) !important;
    }
    
    .navbar[style*="height: 40px"] .mobile-menu-toggle {
        display: flex !important;
    }
    
    .navbar[style*="height: 40px"] div[style*="gap: 36px"] {
        display: none !important;
    }
    
    /* Back to home button */
    div[style*="padding: 50px 0 2px 40px"] {
        padding: 20px 0 2px 16px !important;
    }
    
    div[style*="padding: 50px 0 2px 40px"] span {
        font-size: 10px !important;
    }
    
    /* Models Page Mobile Styles - 480px */
    
    /* Models Page Header */
    .navbar[style*="height: 40px"] .nav-left {
        display: flex !important;
    }
    
    .navbar[style*="height: 40px"] .logo {
        transform: scale(0.8) !important;
    }
    
    .navbar[style*="height: 40px"] .mobile-menu-toggle {
        display: flex !important;
    }
    
    .navbar[style*="height: 40px"] div[style*="gap: 36px"] {
        display: none !important;
    }
    
    /* Fixed Navigation Bar */
    div[style*="position: fixed; top: 60px"] {
        display: none !important;
    }
    
    /* Breadcrumb - Hide completely on mobile */
    div[style*="padding: 130px 0 0 12%"] {
        display: none !important;
    }
    
    /* Additional breadcrumb selectors */
    #breadcrumb {
        display: none !important;
    }
    
    /* Hide any horizontal rectangle tiles on mobile */
    div[style*="border-radius: 30px"][style*="position: fixed"] {
        display: none !important;
    }
    
    /* Models Page Body - Consistent with main mobile navbar */
    body {
        padding-top: 72px !important;
    }
    
    /* Models Main Section */
    .models-main {
        padding: 40px 16px 60px !important;
    }
    
    .models-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Category Headers */
    .category-header {
        text-align: center !important;
        margin-bottom: 30px !important;
        padding: 0 !important;
    }
    
    .category-header h2 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
    
    .category-header p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        color: #666 !important;
    }
    
    /* Model Cards Grid */
    .models-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 !important;
    }
    
    .model-card {
        padding: 20px 16px !important;
        border-radius: 12px !important;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .model-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    .model-card h3 {
        font-size: 1.1rem !important;
        margin: 12px 0 8px !important;
    }
    
    .model-card p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }
    
    .model-tags {
        margin: 12px 0 !important;
        gap: 6px !important;
    }
    
    .tag {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }
    
    .model-btn {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
    }
    

    
    /* Mobile Category Navigation */
    .mobile-category-nav {
        display: block !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
    }
    
    .mobile-category-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 !important;
    }
    
    .mobile-category-tab {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 25px !important;
        padding: 12px 8px !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        color: #64748b !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        text-align: center !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-category-tab.active,
    .mobile-category-tab:hover {
        background: linear-gradient(135deg, #a7f3d0 0%, #7dd3fc 100%) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(125, 211, 192, 0.3) !important;
    }
    
    /* Contact Page Mobile Styles */
    body {
        padding-top: 72px !important;
    }
    
    /* Back to home button - 480px */
    div[style*="padding: 50px 0 2px 40px"] {
        padding: 15px 0 2px 16px !important;
    }
    
    .contact-main {
        padding: 20px 16px 60px !important;
        margin-top: 0 !important;
    }
    
    .contact-header {
        padding: 20px 16px !important;
        margin-bottom: 20px !important;
        margin-top: 10px !important;
    }
    
    .contact-header h2 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
    
    .contact-header p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    .contact-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        grid-template-columns: none !important;
    }
    
    /* Hide envelope illustration on mobile */
    .contact-illustration {
        display: none !important;
    }
    
    .contact-illustration svg {
        width: 280px !important;
        height: 200px !important;
    }
    
    .contact-form-section {
        order: 1 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 24px !important;
        border-radius: 12px !important;
    }
    
    .contact-form-section h3 {
        font-size: 1.2rem !important;
    }
    
    .contact-form input,
    .contact-form textarea {
        padding: 14px 18px !important;
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    
    .contact-form button {
        padding: 16px 20px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
    }
    
    .ai-agent-section .container {
        padding: 0 !important;
    }
    
    /* Dark Tabs */
    .dark-tabs {
        gap: 8px;
    }
    
    .dark-tab {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
    
    /* Tiles */
    .ai-agent-section .tiles-container {
        row-gap: 15px;
        margin: 30px auto;
    }
    
    .ai-agent-section .grey-tile {
        padding: 20px 15px;
        border-radius: 8px;
        background: #2a2a2a;
        border: 1px solid #3b82f6;
    }
    
    .ai-agent-section .grey-tile h3 {
        font-size: 1rem;
        color: #ffffff;
    }
    
    .ai-agent-section .grey-tile p {
        font-size: 0.8rem;
        color: #d1d5db;
    }
    
    .ai-agent-section .tile-visual img {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 12px !important;
    }
    
    /* FAQ */
    .faq-left h2 {
        font-size: 1.5rem;
    }
    
    .faq-item h3 {
        font-size: 1rem;
    }
    
    .faq-item p {
        font-size: 0.85rem;
    }
    
    /* Slider Section */
    .new-slider-header h2 {
        font-size: 1.5rem;
    }
    
    .new-slider-header p {
        font-size: 0.9rem;
    }
    
    .new-card {
        min-width: calc(100% - 30px);
        max-width: calc(100% - 30px);
    }
    
    .new-card h3 {
        font-size: 1rem;
    }
    
    .new-card p {
        font-size: 0.85rem;
    }
    
    .new-slider-track {
        padding: 0 15px;
        gap: 15px;
    }
    
    .new-slider-viewport {
        padding: 10px 0;
    }
    
    /* Footer */
    .footer-description {
        font-size: 0.85rem;
    }
    
    .footer-mission {
        display: none !important;
    }
    
    .footer-cta {
        display: none !important;
    }
    
    .footer-nav {
        display: none !important;
    }
    
    .footer-column {
        display: none !important;
    }
    
    .footer-bottom-links {
        display: none !important;
    }
    
    .footer-bottom-info {
        font-size: 0.8rem;
    }
}


/* Services Page Section */
.services-page-section {
    background: #ffffff;
    padding: 100px 20px 80px;
    min-height: 100vh;
}

.services-page-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Services Header */
.services-header {
    text-align: center;
    margin-bottom: 50px;
}

.services-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 14px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.services-header h2 {
    font-size: 0.95rem;
    font-weight: 400;
    color: #666666;
    margin-bottom: 22px;
    line-height: 1.5;
}

/* Services Buttons */
.services-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 50px;
}

.btn-primary-services {
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    color: #ffffff;
    padding: 10px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary-services:hover {
    background: linear-gradient(135deg, #6bc4b0, #3b7dd6);
    box-shadow: 0 6px 20px rgba(125, 211, 192, 0.4);
    transform: translateY(-2px);
}

.btn-secondary-services {
    background: #ffffff;
    color: #4A90E2;
    padding: 10px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #4A90E2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary-services:hover {
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    color: #ffffff;
    border: 1px solid transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(125, 211, 192, 0.4);
}

/* Big Dark Container */
.services-big-container {
    background: transparent;
    border-radius: 20px;
    padding: 80px 40px 80px;
    position: relative;
}

/* Services Layers Conveyor */
.services-layers-conveyor {
    margin-top: 40px;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.services-layers-conveyor svg {
    width: 100%;
    height: auto;
}

.layer-bullet {
    cursor: pointer;
}

.layer-bullet circle {
    transform-origin: center;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.layer-bullet.active circle {
    fill: #7DD3C0;
    filter: drop-shadow(0 0 10px rgba(125, 211, 192, 0.8)) drop-shadow(0 0 20px rgba(125, 211, 192, 0.5));
    animation: popOut 0.5s ease-out;
}

@keyframes popOut {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.8);
    }
    100% {
        transform: scale(1.5);
    }
}

.layer-bullet.active text {
    fill: #4A90E2;
    font-weight: 700;
}

.connection-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 0.8s ease-in-out;
}

.connection-line.active {
    stroke: #7DD3C0;
    stroke-dashoffset: 0;
}

.tile-card {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 450px;
    border-radius: 16px;
    transform: translateX(-50%);
}

.tile-card-1 {
    z-index: 5;
    background: #2a3a4a;
}

.tile-card-2 {
    z-index: 4;
    background: #3a4a5a;
    bottom: 15px;
    width: calc(100% - 30px);
}

.tile-card-3 {
    z-index: 3;
    background: #4a5a6a;
    bottom: 30px;
    width: calc(100% - 60px);
}

.tile-card-4 {
    z-index: 2;
    background: #5a6a7a;
    bottom: 45px;
    width: calc(100% - 90px);
}

.tile-card-5 {
    z-index: 1;
    background: #6a7a8a;
    bottom: 60px;
    width: calc(100% - 120px);
}

.service-tile-card {
    background: #2a3a3a;
    border-radius: 16px;
    padding: 36px;
    display: flex;
    align-items: center;
    gap: 28px;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: absolute;
    left: 50%;
    bottom: 0;
    min-height: 200px;
}

.service-tile-card:nth-child(1) {
    bottom: 0;
    z-index: 5;
    width: 100%;
    transform: translateX(-50%);
    padding: 44px;
}

.service-tile-card:nth-child(2) {
    bottom: 40px;
    z-index: 4;
    width: 92%;
    transform: translateX(-50%);
}

.service-tile-card:nth-child(3) {
    bottom: 80px;
    z-index: 3;
    width: 84%;
    transform: translateX(-50%);
}

.service-tile-card:nth-child(4) {
    bottom: 120px;
    z-index: 2;
    width: 76%;
    transform: translateX(-50%);
}

.service-tile-card:nth-child(5) {
    bottom: 160px;
    z-index: 1;
    width: 68%;
    transform: translateX(-50%);
}

.service-tile-card:hover {
    transform: translateX(-50%) translateY(-12px) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
    background: #2f4545;
    z-index: 10 !important;
}

/* Tile Left Side */
.tile-left {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.tile-icon-badge {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7DD3C0;
    flex-shrink: 0;
}

.tile-content {
    flex: 1;
}

.tile-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.tile-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.875rem;
    color: #b0b0b0;
}

.meta-icon {
    font-size: 1rem;
}

.tile-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Tile Right Side */
.tile-right {
    flex-shrink: 0;
}

.tile-preview-large {
    width: 280px;
    height: 180px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.preview-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.preview-header {
    background: rgba(255, 255, 255, 0.08);
    padding: 12px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seat-icon {
    font-size: 3rem;
    opacity: 0.5;
}

@media (max-width: 968px) {
    .services-header h1 {
        font-size: 2rem;
    }
    
    .services-header h2 {
        font-size: 1.5rem;
    }
    
    .services-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-primary-services,
    .btn-secondary-services {
        width: 100%;
        text-align: center;
    }
    
    .service-tile-card {
        flex-direction: column;
        align-items: stretch;
    }
    
    .tile-left {
        flex-direction: column;
    }
    
    .tile-preview-large {
        width: 100%;
        height: 200px;
    }
}

@media (max-width: 640px) {
    .services-page-section {
        padding: 80px 16px 60px;
    }
    
    .services-header h1 {
        font-size: 1.75rem;
    }
    
    .services-header h2 {
        font-size: 1.25rem;
    }
}


/* Tile Layer Names */
.tile-layer-name {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.tile-card-1 .tile-layer-name {
    opacity: 1;
}

/* Tile Animation Classes */
.tile-card {
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile-card.active {
    z-index: 10 !important;
    bottom: 0 !important;
    width: 100% !important;
    transform: translateX(-50%) scale(1) !important;
}

.tile-card.active .tile-layer-name {
    opacity: 1;
}

.tile-card.moving-back {
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Grey Container Two-Column Layout */
.grey-container-two-column {
    display: flex;
    align-items: center;
    gap: 60px;
    text-align: left;
}

.grey-container-left {
    flex: 1;
}

.grey-container-right {
    flex: 1;
    max-width: 400px;
}

.image-placeholder {
    width: 100%;
    height: 300px;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
}

/* Responsive Design for Grey Container */
@media (max-width: 768px) {
    .grey-container-content[style*="display: flex"] {
        flex-direction: column !important;
        gap: 40px !important;
        text-align: center !important;
    }
    
    .grey-container-content div[style*="padding-right"] {
        padding-right: 0 !important;
    }
    
    .grey-container-content div[style*="padding-left"] {
        padding-left: 0 !important;
    }
    
    .grey-container-content div[style*="height: 350px"] {
        height: 250px !important;
    }
}
/* Clean Minimal Popup Styles */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.popup-container {
    background: #ffffff;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: popupSlideIn 0.3s ease-out;
    border: 1px solid #f1f5f9;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.popup-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 24px 6px;
    text-align: center;
    position: relative;
}

.popup-icon {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-icon img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    width: 32px;
    height: 32px;
}

.popup-header h3 {
    margin: 0 0 6px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    letter-spacing: -0.025em;
}

.popup-header p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    font-weight: 400;
}

.popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    padding: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.popup-close:hover {
    background: #f3f4f6;
    color: #6b7280;
}

.popup-content {
    padding: 20px 24px 24px;
}

.form-group {
    margin-bottom: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #374151;
    font-size: 12px;
    text-align: left;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.2s ease;
    box-sizing: border-box;
    background: #ffffff;
    color: #1f2937;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
    font-size: 13px;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group input[readonly] {
    background: #f9fafb;
    color: #6b7280;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

.form-group textarea {
    resize: vertical;
    min-height: 70px;
    font-family: inherit;
    line-height: 1.4;
}

.popup-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #7DD3C0 0%, #4A90E2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
    letter-spacing: 0.025em;
    box-shadow: 
        0 6px 20px rgba(74, 144, 226, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.popup-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.popup-submit-btn:hover::before {
    left: 100%;
}

.popup-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 8px 25px rgba(74, 144, 226, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.popup-submit-btn:active {
    transform: translateY(0);
}

.popup-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.popup-submit-btn:hover::before {
    left: 100%;
}

.popup-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 12px 35px rgba(74, 144, 226, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.popup-submit-btn:active {
    transform: translateY(0);
}

/* Compact OTP Input Styles */
.otp-input-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
}

.otp-input {
    width: 40px !important;
    height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #d1d5db !important;
    border-radius: 6px;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #1f2937;
}

.otp-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none;
}

.otp-input:not(:placeholder-shown) {
    border-color: #10b981;
    background: #ffffff;
}

.resend-text {
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: #6b7280;
}

.resend-text a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.resend-text a:hover {
    text-decoration: underline;
}

/* Professional Success Popup Styles */
.success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: white;
    margin: 0 auto 24px;
    font-weight: bold;
    box-shadow: 
        0 20px 40px rgba(16, 185, 129, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
    animation: successPulse 0.6s ease-out;
}

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

#successPopup .popup-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
    letter-spacing: -0.025em;
}

#successPopup .popup-content p {
    color: #64748b;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* OTP Popup Specific Styles */
#otpPopup .popup-content {
    text-align: center;
    padding: 16px 24px 24px;
}

/* Ensure form labels are always left-aligned */
.form-group label {
    text-align: left !important;
}

#otpPopup .popup-content p {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 6px;
}

#otpPopup .popup-content strong {
    color: #1f2937;
    font-weight: 500;
}

/* Enhanced Professional Touches */
.popup-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #7DD3C0, #4A90E2, #7DD3C0);
    border-radius: 24px 24px 0 0;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* Floating Label Effect */
.form-group {
    position: relative;
}

.form-group input:focus + label,
.form-group textarea:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label {
    transform: translateY(-8px) scale(0.85);
    color: #4A90E2;
}

/* Professional Loading State */
.popup-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.popup-submit-btn.loading {
    position: relative;
    color: transparent;
}

.popup-submit-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .popup-container {
        width: 95%;
        margin: 20px;
        border-radius: 20px;
    }
    
    .popup-header {
        padding: 24px 24px 20px;
    }
    
    .popup-header h3 {
        font-size: 1.25rem;
    }
    
    .popup-content {
        padding: 24px;
        padding-top: 20px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .otp-input-container {
        gap: 10px;
        padding: 0 10px;
    }
    
    .otp-input {
        width: 44px !important;
        height: 44px;
        font-size: 18px;
        border-radius: 12px;
    }
    
    .popup-submit-btn {
        padding: 16px 28px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .popup-container {
        width: 98%;
        margin: 10px;
    }
    
    .otp-input-container {
        gap: 8px;
        padding: 0 5px;
    }
    
    .otp-input {
        width: 38px !important;
        height: 38px;
        font-size: 16px;
    }
}

/* About Us Page Mobile Responsive Styles */
@media (max-width: 768px) {
    /* About Us specific mobile styles */
    .about-us-page .hero {
        min-height: auto !important;
        padding: 40px 0 60px 0 !important;
        margin-top: 0 !important;
    }
    
    .about-us-page .hero-container {
        flex-direction: column !important;
        height: auto !important;
        padding: 0 20px !important;
        gap: 30px !important;
    }
    
    .about-us-page .hero-content {
        max-width: 100% !important;
        text-align: center !important;
    }
    
    .about-us-page .hero-content h1 {
        font-size: 2.5rem !important;
    }
    
    /* Content tile section responsive */
    .about-us-page .content-section {
        margin-bottom: 30px !important;
    }
    
    .about-us-page .content-section p {
        font-size: 0.95rem !important;
        text-align: left !important;
    }
    
    /* Values grid mobile */
    .about-us-page .values-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 30px !important;
    }
    
    .about-us-page .value-card {
        width: 160px !important;
        height: 160px !important;
        padding: 20px !important;
        margin: 0 auto !important;
    }
    
    .about-us-page .value-card h3 {
        font-size: 0.85rem !important;
    }
    
    .about-us-page .icon-circle {
        width: 50px !important;
        height: 50px !important;
    }
    
    .about-us-page .icon-circle svg {
        width: 25px !important;
        height: 25px !important;
    }
    
    /* CTA section mobile */
    .about-us-page .cta-section {
        padding: 60px 20px !important;
    }
    
    .about-us-page .cta-section h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .about-us-page .cta-section p {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }
    
    .about-us-page .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .about-us-page .btn-start,
    .about-us-page .btn-secondary-custom {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        padding: 12px 24px !important;
    }
}
/* Company Pages Mobile Responsive Styles */
@media (max-width: 768px) {
    /* Our Story, Mission, Vision, Team, Careers Pages Mobile Styles */
    
    /* Hide desktop navigation on mobile */
    .navbar[style*="height: 40px"] .nav-container > div:last-child {
        display: none !important;
    }
    
    .navbar[style*="height: 40px"] .mobile-menu-toggle {
        display: flex !important;
    }
    
    /* Hide fixed navigation bar on mobile */
    div[style*="position: fixed"][style*="top: 60px"] {
        display: none !important;
    }
    
    /* Adjust breadcrumb for mobile */
    div[style*="padding: 130px 0 0 12%"] {
        padding: 80px 20px 0 20px !important;
    }
    
    /* Hero section mobile */
    .hero {
        padding: 40px 0 60px 0 !important;
        margin-top: 0 !important;
    }
    
    .hero-container {
        padding: 0 20px !important;
        height: auto !important;
    }
    
    .hero-content h1 {
        font-size: 2.5rem !important;
        text-align: center;
    }
    
    .hero-content p {
        text-align: center;
        font-size: 1rem;
    }
    
    /* Content tile section mobile */
    section[style*="background: #ffffff; padding: 60px 40px 80px"] {
        padding: 40px 20px 60px !important;
    }
    
    div[style*="background: white; border-radius: 20px; padding: 60px"] {
        padding: 30px 20px !important;
        border-radius: 16px !important;
    }
    
    /* Floating quote box mobile */
    span[style*="float: right"][style*="width: 250px"] {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 20px 0 !important;
        padding: 16px !important;
        display: block !important;
    }
    
    /* Content paragraphs mobile */
    p[style*="font-size: 1rem; color: #4b5563"] {
        text-align: left !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    /* Drop cap mobile adjustment */
    span[style*="float: left; font-size: 4rem"] {
        font-size: 3rem !important;
        line-height: 2.5rem !important;
        padding-right: 6px !important;
    }
    
    /* CTA section mobile */
    .cta-section {
        padding: 60px 20px !important;
    }
    
    .cta-section h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .cta-section p {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .btn-start,
    .btn-secondary-custom {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        padding: 12px 24px !important;
    }
    
    /* Footer mobile adjustments */
    .professional-footer {
        margin: 0 !important;
        width: 100% !important;
    }
    
    .footer-container {
        padding: 0 20px !important;
    }
    
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }
    
    .footer-brand-content,
    .footer-nav,
    .footer-contact {
        margin-top: 0 !important;
    }
    
    .footer-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .footer-column {
        margin-bottom: 20px !important;
    }
}

/* Specific Page Classes for Better Targeting */
.our-story-page,
.mission-page,
.vision-page,
.team-page,
.careers-page {
    /* Base styles for company pages */
}

@media (max-width: 768px) {
    /* Page-specific mobile styles */
    .our-story-page .hero,
    .mission-page .hero,
    .vision-page .hero,
    .team-page .hero,
    .careers-page .hero {
        min-height: auto !important;
        padding: 40px 0 60px 0 !important;
        margin-top: 0 !important;
    }
    
    .our-story-page .hero-container,
    .mission-page .hero-container,
    .vision-page .hero-container,
    .team-page .hero-container,
    .careers-page .hero-container {
        flex-direction: column !important;
        height: auto !important;
        padding: 0 20px !important;
        gap: 30px !important;
    }
    
    .our-story-page .hero-content,
    .mission-page .hero-content,
    .vision-page .hero-content,
    .team-page .hero-content,
    .careers-page .hero-content {
        max-width: 100% !important;
        text-align: center !important;
    }
    
    .our-story-page .hero-content h1,
    .mission-page .hero-content h1,
    .vision-page .hero-content h1,
    .team-page .hero-content h1,
    .careers-page .hero-content h1 {
        font-size: 2.5rem !important;
    }
    
    /* Content sections mobile */
    .our-story-page .content-section,
    .mission-page .content-section,
    .vision-page .content-section,
    .team-page .content-section,
    .careers-page .content-section {
        margin-bottom: 30px !important;
    }
    
    .our-story-page .content-section p,
    .mission-page .content-section p,
    .vision-page .content-section p,
    .team-page .content-section p,
    .careers-page .content-section p {
        font-size: 0.95rem !important;
        text-align: left !important;
    }
    
    /* CTA sections mobile */
    .our-story-page .cta-section,
    .mission-page .cta-section,
    .vision-page .cta-section,
    .team-page .cta-section,
    .careers-page .cta-section {
        padding: 60px 20px !important;
    }
    
    .our-story-page .cta-section h2,
    .mission-page .cta-section h2,
    .vision-page .cta-section h2,
    .team-page .cta-section h2,
    .careers-page .cta-section h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .our-story-page .cta-section p,
    .mission-page .cta-section p,
    .vision-page .cta-section p,
    .team-page .cta-section p,
    .careers-page .cta-section p {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }
    
    .our-story-page .hero-buttons,
    .mission-page .hero-buttons,
    .vision-page .hero-buttons,
    .team-page .hero-buttons,
    .careers-page .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .our-story-page .btn-start,
    .our-story-page .btn-secondary-custom,
    .mission-page .btn-start,
    .mission-page .btn-secondary-custom,
    .vision-page .btn-start,
    .vision-page .btn-secondary-custom,
    .team-page .btn-start,
    .team-page .btn-secondary-custom,
    .careers-page .btn-start,
    .careers-page .btn-secondary-custom {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        padding: 12px 24px !important;
    }
}
/* Layer Pages Mobile Responsive Styles */
@media (max-width: 768px) {
    /* Intelligence, Prediction, Decision, Automation, Engineering Layer Pages Mobile Styles */
    
    /* Hide desktop navigation on mobile */
    .navbar[style*="height: 40px"] .nav-container > div:last-child {
        display: none !important;
    }
    
    .navbar[style*="height: 40px"] .mobile-menu-toggle {
        display: flex !important;
        position: absolute !important;
        left: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .navbar[style*="height: 40px"] .nav-container {
        justify-content: center !important;
        position: relative !important;
    }
    
    /* Hide fixed navigation bar on mobile */
    div[style*="position: fixed"][style*="top: 60px"] {
        display: none !important;
    }
    
    /* Adjust breadcrumb for mobile */
    div[style*="padding: 130px 0 0 12%"] {
        padding: 80px 20px 0 20px !important;
    }
    
    /* Hero section mobile */
    .hero {
        padding: 40px 0 60px 0 !important;
        margin-top: 0 !important;
    }
    
    .hero-container {
        padding: 0 20px !important;
        height: auto !important;
    }
    
    .hero-content {
        text-align: center !important;
        max-width: 100% !important;
    }
    
    .hero-content h1 {
        font-size: 2.5rem !important;
        text-align: center;
    }
    
    .hero-content p {
        text-align: center;
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    .btn-start,
    .btn-demo-hero,
    .btn-secondary-custom {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        padding: 12px 24px !important;
    }
    
    /* Grey container section mobile */
    .grey-container-section {
        padding: 40px 20px 60px 20px !important;
    }
    
    .grey-container-content {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }
    
    .grey-container-content > div {
        flex: none !important;
        padding: 0 !important;
    }
    
    .grey-container-content h2 {
        text-align: center !important;
        margin-left: 0 !important;
        font-size: 1.5rem !important;
        white-space: normal !important;
    }
    
    .grey-container-content p {
        text-align: center !important;
        margin-left: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
    
    /* Visual container mobile */
    div[style*="width: 100%; height: 280px"] {
        height: 200px !important;
        margin: 0 auto !important;
    }
    
    /* Capsule button navigation mobile - 2x2 grid */
    div[style*="display: inline-flex"][style*="border-radius: 50px"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 0 20px 24px 20px !important;
        padding: 0 !important;
        width: auto !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
    
    .capsule-btn {
        flex: none !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        text-align: center !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        padding: 8px 12px !important;
        border-radius: 24px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow: hidden !important;
        border: 1px solid #d1d5db !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        min-width: 140px !important;
    }
    
    .capsule-btn.active {
        background: linear-gradient(135deg, #a7f3d0, #7dd3fc) !important;
        color: white !important;
        border-color: transparent !important;
    }
    
    .capsule-btn:not(.active) {
        background: #f8f9fa !important;
        color: #374151 !important;
        border-color: #d1d5db !important;
    }
    
    /* Four column solution tiles mobile */
    div[style*="display: flex; gap: 24px; margin-left: 14px;"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin: 0 20px !important;
    }
    
    div[style*="flex: 1; background: #f8f9fa"] {
        flex: none !important;
        min-height: 120px !important;
        padding: 20px !important;
    }
    
    /* Two column content sections mobile */
    div[style*="display: flex; align-items: flex-start; gap: 60px;"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
    }
    
    div[style*="flex: 1; display: flex; flex-direction: column; padding-right: 30px;"] {
        flex: none !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    div[style*="flex: 1; display: flex; padding-left: 30px;"] {
        flex: none !important;
        padding-left: 0 !important;
        width: 100% !important;
    }
    
    /* Content text adjustments */
    p[style*="margin-left: 14px"] {
        margin-left: 0 !important;
        text-align: center !important;
        padding: 0 20px !important;
    }
    
    h2[style*="margin-left: 14px"] {
        margin-left: 0 !important;
        text-align: center !important;
        padding: 0 20px !important;
    }
    
    /* CTA section mobile */
    .cta-section {
        padding: 60px 20px !important;
    }
    
    .cta-section h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .cta-section p {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }
    
    .cta-section .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .cta-section .btn-start,
    .cta-section .btn-secondary-custom {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        padding: 12px 24px !important;
    }
}

/* Specific Page Classes for Better Targeting */
.intelligence-layer-page,
.prediction-layer-page,
.decision-layer-page,
.automation-layer-page,
.engineering-layer-page {
    /* Base styles for layer pages */
}

@media (max-width: 768px) {
    /* Page-specific mobile styles */
    .intelligence-layer-page .hero,
    .prediction-layer-page .hero,
    .decision-layer-page .hero,
    .automation-layer-page .hero,
    .engineering-layer-page .hero {
        min-height: auto !important;
        padding: 40px 0 60px 0 !important;
        margin-top: 0 !important;
    }
    
    .intelligence-layer-page .hero-container,
    .prediction-layer-page .hero-container,
    .decision-layer-page .hero-container,
    .automation-layer-page .hero-container,
    .engineering-layer-page .hero-container {
        flex-direction: column !important;
        height: auto !important;
        padding: 0 20px !important;
        gap: 30px !important;
    }
    
    .intelligence-layer-page .hero-content,
    .prediction-layer-page .hero-content,
    .decision-layer-page .hero-content,
    .automation-layer-page .hero-content,
    .engineering-layer-page .hero-content {
        max-width: 100% !important;
        text-align: center !important;
    }
    
    .intelligence-layer-page .hero-content h1,
    .prediction-layer-page .hero-content h1,
    .decision-layer-page .hero-content h1,
    .automation-layer-page .hero-content h1,
    .engineering-layer-page .hero-content h1 {
        font-size: 2.5rem !important;
    }
    
    /* Content sections mobile */
    .intelligence-layer-page .grey-container-section,
    .prediction-layer-page .grey-container-section,
    .decision-layer-page .grey-container-section,
    .automation-layer-page .grey-container-section,
    .engineering-layer-page .grey-container-section {
        padding: 40px 20px 60px 20px !important;
    }
    
    /* Remove bottom padding from solutions section to prevent blank space below footer */
    .intelligence-layer-page #solutions.grey-container-section,
    .prediction-layer-page #solutions.grey-container-section,
    .decision-layer-page #solutions.grey-container-section,
    .automation-layer-page #solutions.grey-container-section,
    .engineering-layer-page #solutions.grey-container-section {
        padding-bottom: 20px !important;
    }
    
    .intelligence-layer-page .grey-container-content,
    .prediction-layer-page .grey-container-content,
    .decision-layer-page .grey-container-content,
    .automation-layer-page .grey-container-content,
    .engineering-layer-page .grey-container-content {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }
    
    /* CTA sections mobile */
    .intelligence-layer-page .cta-section,
    .prediction-layer-page .cta-section,
    .decision-layer-page .cta-section,
    .automation-layer-page .cta-section,
    .engineering-layer-page .cta-section {
        padding: 60px 20px !important;
    }
    
    .intelligence-layer-page .cta-section h2,
    .prediction-layer-page .cta-section h2,
    .decision-layer-page .cta-section h2,
    .automation-layer-page .cta-section h2,
    .engineering-layer-page .cta-section h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .intelligence-layer-page .cta-section p,
    .prediction-layer-page .cta-section p,
    .decision-layer-page .cta-section p,
    .automation-layer-page .cta-section p,
    .engineering-layer-page .cta-section p {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }
    
    .intelligence-layer-page .hero-buttons,
    .prediction-layer-page .hero-buttons,
    .decision-layer-page .hero-buttons,
    .automation-layer-page .hero-buttons,
    .engineering-layer-page .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .intelligence-layer-page .btn-start,
    .intelligence-layer-page .btn-secondary-custom,
    .prediction-layer-page .btn-start,
    .prediction-layer-page .btn-secondary-custom,
    .decision-layer-page .btn-start,
    .decision-layer-page .btn-secondary-custom,
    .automation-layer-page .btn-start,
    .automation-layer-page .btn-secondary-custom,
    .engineering-layer-page .btn-start,
    .engineering-layer-page .btn-secondary-custom {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        padding: 12px 24px !important;
    }
}
/* Additional Layer Pages Mobile Fixes */
@media (max-width: 768px) {
    /* Fix for all flex containers in layer pages */
    .intelligence-layer-page div[style*="display: flex"],
    .prediction-layer-page div[style*="display: flex"],
    .decision-layer-page div[style*="display: flex"],
    .automation-layer-page div[style*="display: flex"],
    .engineering-layer-page div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    
    /* Fix for content containers */
    .intelligence-layer-page .container,
    .prediction-layer-page .container,
    .decision-layer-page .container,
    .automation-layer-page .container,
    .engineering-layer-page .container {
        padding: 0 20px !important;
        max-width: 100% !important;
    }
    
    /* Fix for section headers */
    .intelligence-layer-page h2,
    .prediction-layer-page h2,
    .decision-layer-page h2,
    .automation-layer-page h2,
    .engineering-layer-page h2 {
        text-align: center !important;
        margin-left: 0 !important;
        padding: 0 20px !important;
        font-size: 1.5rem !important;
        white-space: normal !important;
    }
    
    /* Fix for all paragraphs */
    .intelligence-layer-page p,
    .prediction-layer-page p,
    .decision-layer-page p,
    .automation-layer-page p,
    .engineering-layer-page p {
        text-align: center !important;
        margin-left: 0 !important;
        padding: 0 20px !important;
        font-size: 0.9rem !important;
    }
    
    /* Fix for image containers */
    .intelligence-layer-page div[style*="background: #f8f9fa"],
    .prediction-layer-page div[style*="background: #f8f9fa"],
    .decision-layer-page div[style*="background: #f8f9fa"],
    .automation-layer-page div[style*="background: #f8f9fa"],
    .engineering-layer-page div[style*="background: #f8f9fa"] {
        width: 100% !important;
        max-width: 300px !important;
        height: 200px !important;
        margin: 0 auto !important;
    }
    
    /* Fix for solution tiles grid */
    .intelligence-layer-page div[style*="display: flex; gap: 24px"],
    .prediction-layer-page div[style*="display: flex; gap: 24px"],
    .decision-layer-page div[style*="display: flex; gap: 24px"],
    .automation-layer-page div[style*="display: flex; gap: 24px"],
    .engineering-layer-page div[style*="display: flex; gap: 24px"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin: 0 20px !important;
        padding: 0 !important;
    }
    
    /* Fix for capsule buttons - 2x2 grid style */
    .intelligence-layer-page .capsule-btn,
    .prediction-layer-page .capsule-btn,
    .decision-layer-page .capsule-btn,
    .automation-layer-page .capsule-btn,
    .engineering-layer-page .capsule-btn {
        flex: none !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        padding: 8px 12px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        border-radius: 24px !important;
        text-align: center !important;
        overflow: hidden !important;
        border: 1px solid #d1d5db !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        min-width: 140px !important;
    }
    
    .intelligence-layer-page .capsule-btn.active,
    .prediction-layer-page .capsule-btn.active,
    .decision-layer-page .capsule-btn.active,
    .automation-layer-page .capsule-btn.active,
    .engineering-layer-page .capsule-btn.active {
        background: linear-gradient(135deg, #a7f3d0, #7dd3fc) !important;
        color: white !important;
        border-color: transparent !important;
    }
    
    .intelligence-layer-page .capsule-btn:not(.active),
    .prediction-layer-page .capsule-btn:not(.active),
    .decision-layer-page .capsule-btn:not(.active),
    .automation-layer-page .capsule-btn:not(.active),
    .engineering-layer-page .capsule-btn:not(.active) {
        background: #f8f9fa !important;
        color: #374151 !important;
        border-color: #d1d5db !important;
    }
    
    /* Fix for capsule container - 2x2 grid */
    .intelligence-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"],
    .prediction-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"],
    .decision-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"],
    .automation-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"],
    .engineering-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 0 20px 24px 20px !important;
        width: auto !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
    }
}

/* Mobile responsive fixes for 480px and smaller */
@media (max-width: 480px) {
    /* Even smaller screens adjustments */
    .intelligence-layer-page .capsule-btn,
    .prediction-layer-page .capsule-btn,
    .decision-layer-page .capsule-btn,
    .automation-layer-page .capsule-btn,
    .engineering-layer-page .capsule-btn {
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
        padding: 6px 4px !important;
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
    
    .intelligence-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"],
    .prediction-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"],
    .decision-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"],
    .automation-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"],
    .engineering-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"] {
        grid-template-columns: repeat(2, 1fr) !important;
        margin: 0 16px 20px 16px !important;
        gap: 8px !important;
    }
    
    /* General capsule button container for smaller screens */
    div[style*="display: inline-flex"][style*="border-radius: 50px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        margin: 0 16px 20px 16px !important;
        gap: 8px !important;
    }
    
    .intelligence-layer-page .container,
    .prediction-layer-page .container,
    .decision-layer-page .container,
    .automation-layer-page .container,
    .engineering-layer-page .container {
        padding: 0 16px !important;
    }
}
/* Very small screens - single column for capsule buttons */
@media (max-width: 360px) {
    /* Single column layout for very small screens */
    .intelligence-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"],
    .prediction-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"],
    .decision-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"],
    .automation-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"],
    .engineering-layer-page div[style*="border-radius: 50px"][style*="display: inline-flex"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    div[style*="display: inline-flex"][style*="border-radius: 50px"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .intelligence-layer-page .capsule-btn,
    .prediction-layer-page .capsule-btn,
    .decision-layer-page .capsule-btn,
    .automation-layer-page .capsule-btn,
    .engineering-layer-page .capsule-btn {
        font-size: 0.75rem !important;
        padding: 10px 14px !important;
    }
}
/* Hide desktop navigation elements on all pages except homepage */
body:not(.homepage) .nav-left .nav-menu {
    display: none !important;
}

body:not(.homepage) .nav-right .nav-link,
body:not(.homepage) .nav-right .btn-signup {
    display: none !important;
}

/* Show simple header for non-homepage pages on desktop */
body:not(.homepage) .navbar {
    height: 40px !important;
    min-height: 40px !important;
}

body:not(.homepage) .nav-container {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 20px !important;
}

body:not(.homepage) .nav-left {
    display: none !important;
}

body:not(.homepage) .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 36px !important;
}

body:not(.homepage) .nav-right .nav-link {
    display: inline-block !important;
    color: white !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

body:not(.homepage) .nav-right .nav-link:hover {
    color: #000000 !important;
}

body:not(.homepage) .nav-right .nav-link:hover img {
    filter: invert(0) !important;
}

/* Removed - hamburger should be visible on mobile */

/* Mobile responsive - show logo and hamburger for all pages */
@media (max-width: 768px) {
    body:not(.homepage) .nav-left {
        display: flex !important;
    }
    
    body:not(.homepage) .nav-left .nav-menu {
        display: none !important;
    }
    
    body:not(.homepage) .nav-right .nav-link,
    body:not(.homepage) .nav-right .btn-signup {
        display: none !important;
    }
    
    body:not(.homepage) .mobile-menu-toggle {
        display: flex !important;
    }
    
    body:not(.homepage) .nav-container {
        justify-content: space-between !important;
        padding: 0 20px !important;
    }
}
/* Consistent header height for all pages in mobile responsive */
@media (max-width: 768px) {
    /* Make all headers the same height as homepage in mobile */
    body:not(.homepage) .navbar {
        height: 72px !important;
        min-height: 72px !important;
    }
    
    body:not(.homepage) .nav-container {
        height: 72px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 20px !important;
    }
    
    /* Ensure homepage header maintains consistent height */
    .homepage .navbar {
        height: 72px !important;
        min-height: 72px !important;
    }
    
    .homepage .nav-container {
        height: 72px !important;
    }
    
    /* Adjust logo size for consistent appearance */
    body:not(.homepage) .logo-icon img {
        width: 46px !important;
        height: 46px !important;
    }
    
    body:not(.homepage) .logo-name {
        font-size: 26px !important;
    }
    
    /* Ensure mobile menu toggle is properly positioned */
    body:not(.homepage) .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 24px !important;
        height: 18px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }
    
    body:not(.homepage) .mobile-menu-toggle span {
        display: block !important;
        height: 2px !important;
        width: 100% !important;
        background: #ffffff !important;
        border-radius: 1px !important;
        transition: all 0.3s ease !important;
    }
}
/* Fix hamburger menu visibility and positioning for ALL pages in mobile */
@media (max-width: 768px) {
    /* Show hamburger menu for all pages */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 1000 !important;
        padding: 6px !important;
        border-radius: 4px !important;
        transition: background-color 0.3s ease !important;
    }
    
    /* Hamburger menu image */
    .mobile-menu-toggle img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
        filter: brightness(0) invert(1) !important; /* Make image white */
    }
    
    /* Hover effect for mobile menu toggle */
    .mobile-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Nav container layout for mobile */
    .nav-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 20px !important;
        position: relative !important;
    }
    
    /* Logo on left side */
    .nav-left {
        display: flex !important;
        align-items: center !important;
    }
    
    /* Nav-right with hamburger on right side */
    .nav-right {
        display: flex !important;
        align-items: center !important;
    }
    
    /* Hide other nav-right items on mobile */
    .nav-right .nav-link,
    .nav-right .btn-signup {
        display: none !important;
    }
    
    /* Ensure hamburger is visible in nav-right */
    .nav-right .mobile-menu-toggle {
        display: flex !important;
        margin-left: auto;
        position: relative;
    }
}
/* Ensure hamburger image is properly styled on all pages */
@media (max-width: 768px) {
    /* Style hamburger image for all pages */
    .mobile-menu-toggle img,
    body:not(.homepage) .mobile-menu-toggle img,
    .homepage .mobile-menu-toggle img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
        filter: brightness(0) invert(1) !important; /* Make image white */
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure hamburger container is properly sized */
    .mobile-menu-toggle,
    body:not(.homepage) .mobile-menu-toggle,
    .homepage .mobile-menu-toggle {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        padding: 6px !important;
        margin: 0 !important;
        border-radius: 4px !important;
    }
}
/* Make logo links maintain styling and add hover effects */
.logo,
.footer-logo {
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.logo:hover,
.footer-logo:hover {
    text-decoration: none !important;
    opacity: 0.8 !important;
    transform: scale(1.02) !important;
}

.logo:visited,
.footer-logo:visited {
    text-decoration: none !important;
}

/* Ensure logo text maintains WHITE color in header and footer */
.logo .logo-name,
.footer-logo .footer-logo-name {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    font-family: 'Gabriola', 'Poppins', sans-serif !important;
}

/* Maintain logo layout */
.logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.footer-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Ensure logo links don't change text color on hover/visited states */
.logo:hover .logo-name,
.logo:visited .logo-name,
.footer-logo:hover .footer-logo-name,
.footer-logo:visited .footer-logo-name {
    color: #ffffff !important;
}/* Back t
o Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(13, 148, 136, 0.3);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 10000;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    /* No hover effects - keep button static */
}

.back-to-top svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* Chatbot Button */
.chatbot-button {
    position: fixed;
    bottom: 30px;
    right: 100px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
    transition: all 0.3s ease;
    z-index: 10001 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.chatbot-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(99, 102, 241, 0.4);
}

.chatbot-button svg {
    width: 24px;
    height: 24px;
    fill: white;
}
    fill: white;
}

/* Chatbot Window */
.chatbot-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.chatbot-overlay.active {
    opacity: 1;
    visibility: visible;
}

.chatbot-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 400px;
    height: 600px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.chatbot-window.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.chatbot-header {
    padding: 20px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
}

.chatbot-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.chatbot-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.chatbot-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.chatbot-tabs {
    display: flex;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.chatbot-tab {
    flex: 1;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s ease;
}

.chatbot-tab.active {
    background: white;
    color: #6366f1;
    border-bottom: 2px solid #6366f1;
}

.chatbot-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-message {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message-bubble {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
}

.message-bubble.user {
    background: #6366f1;
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 6px;
}

.message-bubble.bot {
    background: #f3f4f6;
    color: #374151;
    align-self: flex-start;
    border-bottom-left-radius: 6px;
}

.message-actions {
    display: flex;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
}

.message-action {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: #6b7280;
    transition: color 0.2s ease;
}

.message-action:hover {
    color: #374151;
}

.feedback-section {
    background: #f9fafb;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
}

.feedback-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px;
}

.feedback-emojis {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.feedback-emoji {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.feedback-emoji:hover {
    background: #e5e7eb;
}

.feedback-button {
    background: #6366f1;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.feedback-button:hover {
    background: #5856eb;
}

.chatbot-input {
    padding: 20px;
    border-top: 1px solid #e5e7eb;
    background: white;
}

.input-container {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    font-size: 14px;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    outline: none;
    transition: border-color 0.2s ease;
}

.chat-input:focus {
    border-color: #6366f1;
}

.send-button {
    background: #6366f1;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.send-button:hover {
    background: #5856eb;
}

.send-button svg {
    width: 16px;
    height: 16px;
    fill: white;
}

.disclaimer {
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
    margin-top: 8px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .chatbot-window {
        width: 90%;
        height: 80%;
        max-width: 350px;
        max-height: 500px;
    }
    
    .floating-btn {
        width: 48px;
        height: 48px;
    }
}/* 
Clean Floating Buttons */
.floating-buttons {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    gap: 12px;
    align-items: center;
    z-index: 999;
}

.floating-btn {
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.chat-btn {
    width: 120px;
    height: 52px;
    border-radius: 26px;
    background: linear-gradient(135deg, #7DD3C0, #4A90E2);
    gap: 8px;
    padding: 0 20px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .floating-buttons {
        bottom: 20px;
        right: 20px;
        gap: 10px;
    }
    
    .chat-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        padding: 0;
        justify-content: center;
    }
    
    .chat-btn span {
        display: none;
    }
    
    .chat-btn img {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Enhanced Mobile Responsive Styles for Chatbot */
@media (max-width: 480px) {
    .floating-buttons {
        bottom: 15px;
        right: 15px;
        gap: 8px;
    }
    
    .chat-btn {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        padding: 0;
        justify-content: center;
    }
    
    .chat-btn span {
        display: none;
    }
    
    .chat-btn img {
        width: 26px !important;
        height: 26px !important;
    }
}

/* Mobile Chatbot Keyboard Handling */
@media (max-width: 768px) {
    .chatbot-mobile-input {
        transition: all 0.3s ease !important;
        position: relative !important;
    }
    
    .chatbot-mobile-input.keyboard-visible {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999999 !important;
        background: white !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    
    #chatbot-window-js {
        transition: transform 0.3s ease !important;
    }
    
    #chatbot-window-js.keyboard-active {
        transform: translateY(0) !important;
        padding-bottom: 0 !important;
    }
    
    /* Ensure input is always visible above keyboard */
    #chat-input {
        font-size: 16px !important; /* Prevents zoom on iOS */
        -webkit-appearance: none !important;
        border-radius: 25px !important;
    }
    
    #chat-input:focus {
        outline: none !important;
        border-color: #7DD3C0 !important;
        box-shadow: 0 0 0 3px rgba(125, 211, 192, 0.1) !important;
    }
    
    /* Fix for viewport height changes */
    .chatbot-window.keyboard-active {
        height: calc(100vh - 60px) !important;
    }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        #chatbot-window-js {
            height: 100vh !important;
            height: -webkit-fill-available !important;
        }
        
        .chatbot-mobile-input {
            padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        }
    }

/* Chatbot Window Mobile Styles */
@media (max-width: 768px) {
    /* These styles will be applied via JavaScript for dynamic chatbot window */
    .chatbot-mobile-header {
        padding: 12px 16px !important;
    }
    
    .chatbot-mobile-nav {
        padding: 10px 16px !important;
    }
    
    .chatbot-mobile-messages {
        padding: 16px !important;
    }
    
    .chatbot-mobile-input {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    .chatbot-mobile-header {
        padding: 10px 12px !important;
    }
    
    .chatbot-mobile-nav {
        padding: 8px 12px !important;
    }
    
    .chatbot-mobile-messages {
        padding: 12px !important;
    }
    
    .chatbot-mobile-input {
        padding: 12px !important;
    }
}

/* EMERGENCY FIX: Force mobile menu toggle to show on ALL pages */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 99999 !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 32px !important;
        height: 32px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 4px !important;
        gap: 3px !important;
    }
    
    .mobile-menu-toggle span {
        display: block !important;
        width: 18px !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 1px !important;
        transition: all 0.3s ease !important;
    }
    
    .nav-right .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: auto;
        flex-shrink: 0;
    }
    
    /* Hide language dropdown and other complex elements on mobile */
    .language-dropdown {
        display: none !important;
    }
    
    .nav-right .nav-link:not(.mobile-menu-toggle) {
        display: none !important;
    }
}/
* FINAL FIX: Ensure mobile menu overlay works on all pages */
@media (max-width: 768px) {
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        z-index: 99999 !important;
        display: none !important;
        opacity: 0 !important;
        transition: all 0.3s ease !important;
        padding: 20px !important;
        overflow-y: auto !important;
    }

    .mobile-menu-overlay.active {
        display: block !important;
        opacity: 1 !important;
    }

    .mobile-menu-content {
        background: #1a1a1a !important;
        border-radius: 12px !important;
        padding: 30px 20px !important;
        margin-top: 80px !important;
        position: relative !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        color: white !important;
    }

    .mobile-menu-close {
        position: absolute !important;
        top: 15px !important;
        right: 20px !important;
        background: none !important;
        border: none !important;
        color: white !important;
        cursor: pointer !important;
        padding: 5px !important;
        z-index: 100000 !important;
    }

    .mobile-nav-link {
        color: white !important;
        text-decoration: none !important;
        display: block !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: color 0.2s ease !important;
    }

    .mobile-nav-link:hover {
        color: #7DD3C0 !important;
    }

    .mobile-nav-section {
        margin-bottom: 20px !important;
    }

    .mobile-nav-sub {
        padding-left: 16px !important;
        font-size: 14px !important;
    }

    .mobile-nav-actions {
        margin-top: 30px !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .mobile-nav-login,
    .mobile-nav-cta {
        display: block !important;
        text-align: center !important;
        padding: 12px 20px !important;
        margin: 10px 0 !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        transition: all 0.2s ease !important;
    }

    .mobile-nav-login {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: white !important;
    }

    .mobile-nav-cta {
        background: #7DD3C0 !important;
        color: #1a1a1a !important;
    }
}/
* Enhanced Mobile Navigation Styling */
@media (max-width: 768px) {
    .mobile-nav-home {
        background: linear-gradient(135deg, rgba(125, 211, 192, 0.1), rgba(74, 144, 226, 0.1)) !important;
        border-left: 3px solid #7DD3C0 !important;
        font-weight: 600 !important;
    }
    
    .mobile-nav-premium {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1)) !important;
        border-left: 3px solid #FFD700 !important;
        color: #FFD700 !important;
    }
    
    .mobile-nav-blog {
        background: linear-gradient(135deg, rgba(139, 69, 19, 0.1), rgba(160, 82, 45, 0.1)) !important;
        border-left: 3px solid #8B4513 !important;
        color: #D2B48C !important;
    }
    
    .mobile-nav-contact {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.1)) !important;
        border-left: 3px solid #22C55E !important;
        color: #22C55E !important;
    }
    
    .mobile-nav-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        color: #7DD3C0 !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        margin-bottom: 8px !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(125, 211, 192, 0.3) !important;
    }
    
    .mobile-nav-header .mobile-nav-label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-nav-header .mobile-nav-label svg {
        flex-shrink: 0 !important;
    }
    
    .mobile-nav-header svg {
        color: #7DD3C0 !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-nav-header .toggle-icon {
        flex-shrink: 0 !important;
        margin-left: 8px !important;
    }
    
    .mobile-nav-icon {
        margin-right: 8px !important;
        font-size: 16px !important;
        width: 20px !important;
        display: inline-block !important;
        text-align: center !important;
    }
    
    .mobile-nav-sub {
        display: flex !important;
        align-items: center !important;
        padding: 10px 24px 10px 40px !important;
        border-left: 2px solid rgba(255, 255, 255, 0.1) !important;
        margin-left: 16px !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-nav-sub:hover {
        border-left-color: #7DD3C0 !important;
        background: rgba(125, 211, 192, 0.1) !important;
        transform: translateX(4px) !important;
    }
    
    .mobile-nav-link {
        display: flex !important;
        align-items: center !important;
        padding: 12px 24px !important;
        margin: 4px 0 !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
        font-size: 1rem !important;
    }
    
    .mobile-nav-link:hover {
        transform: translateX(4px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .mobile-nav-link svg {
        color: currentColor !important;
        opacity: 0.8 !important;
    }
    
    .mobile-nav-actions {
        margin-top: 24px !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .mobile-nav-login {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        margin-bottom: 8px !important;
    }
    
    .mobile-nav-cta {
        background: linear-gradient(135deg, #7DD3C0, #4A90E2) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 12px rgba(125, 211, 192, 0.3) !important;
    }
    
    .mobile-nav-cta:hover {
        box-shadow: 0 6px 16px rgba(125, 211, 192, 0.4) !important;
        transform: translateY(-2px) !important;
    }
}

/* ========================================
   HEADER ALIGNMENT FIXES
   ======================================== */

/* Force single line navigation */
@media (min-width: 769px) {
    .navbar {
        overflow: visible;
    }
    
    .nav-container {
        max-width: 1400px;
        width: 100%;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        overflow: visible;
        height: 72px;
    }
    
    .nav-left {
        display: flex !important;
        align-items: center !important;
        flex: 0 1 auto;
        min-width: 0;
        overflow: visible;
        flex-wrap: nowrap !important;
    }
    
    .nav-logo {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0;
    }
    
    .nav-menu {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow: visible;
        white-space: nowrap;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 20px !important;
    }
    
    .nav-menu li {
        flex-shrink: 0;
        display: inline-block !important;
    }
    
    .nav-right {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    .nav-right .nav-link,
    .nav-right .btn-signup {
        display: inline-block !important;
    }
    
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* Prevent navigation wrapping on medium screens */
@media (max-width: 1200px) and (min-width: 769px) {
    .navbar {
        white-space: nowrap;
    }
    
    .nav-container {
        flex-wrap: nowrap;
        overflow: visible;
    }
    
    .nav-left {
        flex: 0 1 auto;
        min-width: 0;
    }
    
    .nav-menu {
        gap: 16px;
        flex-wrap: nowrap;
    }
    
    .nav-link {
        font-size: 13px;
        padding: 4px 6px;
        white-space: nowrap;
    }
    
    .nav-right {
        gap: 12px;
        flex-shrink: 0;
    }
    
    .logo {
        transform: scale(0.95);
    }
    
    .logo-name {
        font-size: 24px;
    }
}

/* Desktop and larger screens */
@media (min-width: 1025px) {
    .nav-container {
        padding: 0 24px;
        flex-wrap: nowrap;
    }
    
    .nav-left {
        gap: 28px;
    }
    
    .nav-menu {
        gap: 24px;
    }
    
    .nav-right {
        gap: 20px;
    }
    
    .logo {
        transform: scale(1);
    }
}

/* Tablet screens */
@media (max-width: 1024px) and (min-width: 769px) {
    .nav-container {
        padding: 0 20px;
        flex-wrap: nowrap;
    }
    
    .nav-left {
        gap: 20px;
    }
    
    .nav-menu {
        gap: 16px;
    }
    
    .nav-right {
        gap: 14px;
    }
    
    .nav-link {
        font-size: 13px;
        padding: 4px 8px;
    }
}

/* Mobile screens - ensure proper alignment */
@media (max-width: 768px) {
    .nav-container {
        padding: 0 20px;
        position: relative;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .nav-left {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 16px;
    }
    
    .nav-right {
        flex-shrink: 0;
        margin-left: auto;
        display: flex !important;
        align-items: center !important;
    }
    
    .logo {
        transform: scale(0.9);
        flex-shrink: 0;
    }
    
    .mobile-menu-toggle {
        margin-left: 16px !important;
        flex-shrink: 0 !important;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .nav-container {
        padding: 0 16px;
    }
    
    .nav-left {
        gap: 12px;
    }
    
    .logo {
        transform: scale(0.85);
    }
    
    .mobile-menu-toggle {
        margin-left: 12px !important;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .nav-container {
        padding: 0 12px;
    }
    
    .nav-left {
        gap: 8px;
    }
    
    .logo {
        transform: scale(0.8);
    }
    
    .logo-name {
        font-size: 22px;
    }
    
    .mobile-menu-toggle {
        margin-left: 8px !important;
        width: 40px !important;
        height: 40px !important;
    }
}

/* Ensure consistent vertical alignment */
.nav-container,
.nav-left,
.nav-right,
.logo,
.mobile-menu-toggle {
    display: flex;
    align-items: center;
}

/* Fix any flexbox issues */
.nav-container {
    box-sizing: border-box;
    width: 100%;
}

.nav-left {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
}

.nav-right {
    flex-grow: 0;
    flex-shrink: 0;
}
/* CRITICAL FIX: Ensure navigation is visible on desktop */
@media (min-width: 769px) {
    .nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .nav-right .nav-link,
    .nav-right .btn-signup {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
    }
}

/* FINAL OVERRIDE: Force desktop navigation to be visible */
@media screen and (min-width: 769px) {
    .navbar .nav-menu {
        display: flex !important;
    }
    
    .navbar .nav-right .nav-link {
        display: inline-block !important;
    }
    
    .navbar .nav-right .btn-signup {
        display: inline-block !important;
    }
}