/* webbuilder.css — builder UI + landing-page CSS.
   Auto-generated by scripts/extract-webbuilder-assets.js from the
   canonical builder page. Do not hand-edit. */

:root {
    --primary-color: #2d2d2d;
    --accent-color: #4a90e2;
    --blue-color: #4a90e2;
    
    /* Dark theme colors (default and only theme) */
    --bg-color: #000000;
    --surface-color: #2d2d2d;
    --text-color: #e0e0e0;
    --border-color: #404040;
    --input-bg: #2d2d2d;
    --input-border: #404040;
    --pill-bg: #333333;
    --button-bg: #404040;
    --shadow: rgba(0, 0, 0, 0.3);
    --header-border: #404040;
    --footer-bg: #2d2d2d;
    --card-bg: #333333;
    --bg-secondary: #444444;
    --text-secondary: #cccccc;
    --blue-hover: #3a7bc8;
}

/* Scrollbar width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track (background) */
::-webkit-scrollbar-track {
  background: #1a1a1a; /* dark background */
}

/* Handle (thumb) */
::-webkit-scrollbar-thumb {
  background: #555; /* dark gray */
  border-radius: 6px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #777;
}
/* Base chat bubble styles for dark theme */
.chat-bubble.ai {
    align-self: flex-start;
    background-color: #3a3a3a; /* More specific than --surface-color */
    color: var(--text-color);
    border: 1px solid #505050; /* More specific than --border-color */
    border-bottom-left-radius: 4px;
    margin-left: 15px;
    transition: all 0.3s ease;
}

.chat-bubble.ai::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -8px;
    width: 8px;
    height: 8px;
    background-color: #3a3a3a; /* Matches the bubble background */
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    transition: background-color 0.3s ease;
}

.github-stars,
.github-label {
    color: var(--text-color);
}

.badge-together {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    opacity: 0.8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* WordPress Theme Compatibility - Full Page Background */
body, html {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    background: #000000 !important;
    background-color: #000000 !important;
}

/* WordPress container adjustments - Full width */
.container, .container-fluid, .wrapper, .content, .main, 
.site-content, .entry-content, .page-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
}

/* Ensure our content works within WordPress */
#landingSection {
    background: #000000;
    color: #e0e0e0;
}

/* Fix hero section content centering - keep content centered but background full-width */
.hero-section {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-content, .hero-text {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 800px !important;
    width: 100% !important;
    padding: 0 20px !important;
}

/* Fix star logo positioning - keep it centered */
.hero-section h1 {
    text-align: center !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
}

.hero-section p {
    text-align: center !important;
    margin: 0 auto !important;
}

/* Fix the actual input container classes from HTML */
.input-outer-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 10px !important;
}

.input-inner-container {
    width: 50% !important;
    max-width: 50% !important;
    margin: 0 auto !important;
}

.input-inner-container.vertical {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
}

.input-controls-row {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 50px !important;
    gap: 12px !important;
    padding: 6px 10px !important;
    justify-content: flex-end !important;
}

/* Fix prompt input styling to match original */
.prompt-input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: none !important;
    min-height: 60px !important;
    max-height: 200px !important;
    outline: none !important;
    display: block !important;
}



/* Fix suggested apps section - centered with proper width */
.suggested-apps {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

.suggested-app {
    margin: 5px !important;
    flex-shrink: 0 !important;
}

/* Fix features grid - 3 cards in a row, centered */
.features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 280px) !important;
    gap: 20px !important;
    max-width: fit-content !important;
    margin: 0 auto !important;
    padding: 20px !important;
    justify-content: center !important;
}

.feature-card {
    width: 280px !important;
    max-width: 280px !important;
}

/* Ensure all sections are properly centered */
.features-section, .how-it-works-section, .possibilities-section,
.demo-section, .capabilities-section, .testimonials-section, .cta-section {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px !important;
    width: 100% !important;
}

/* WordPress page-specific styling - Full background coverage */
body.page-id-59363 {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #e0e0e0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
}

body.page-id-59363 .app-container,
body.page-id-59363 #landingSection {
    background: #000000 !important;
    color: #e0e0e0 !important;
    margin-top: -40px !important;
    margin-bottom: -150px !important;
    padding-top: 40px !important;
    padding-bottom: 150px !important;
    min-height: calc(100vh + 190px) !important;
}

/* WordPress-specific centering for How It Works section */
body.page-id-59363 .how-it-works-section {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    max-width: 1000px !important;
    width: 100% !important;
}

/* Force center only the subtitle text */
body.page-id-59363 .how-it-works-subtitle {
    text-align: center !important;
}

/* Center ALL section subtitles in WordPress */
body.page-id-59363 .hero-subtitle,
body.page-id-59363 .how-it-works-subtitle,
body.page-id-59363 .endless-subtitle,
body.page-id-59363 .action-subtitle,
body.page-id-59363 .more-subtitle,
body.page-id-59363 .loved-subtitle,
body.page-id-59363 .cta-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure WordPress containers don't add white space */
body.page-id-59363 .container,
body.page-id-59363 .wrapper,
body.page-id-59363 .content,
body.page-id-59363 .main,
body.page-id-59363 .site-content,
body.page-id-59363 .entry-content,
body.page-id-59363 .page-content {
    background: #000000 !important;
    background-color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove excessive WordPress overrides - keep minimal */

/* WordPress container compatibility */
body.page-id-59363 .container,
body.page-id-59363 .wrapper,
body.page-id-59363 .content,
body.page-id-59363 .main,
body.page-id-59363 .site-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Responsive Design Improvements */
/* For screens 900px and below - STACK VERTICALLY */
@media (max-width: 900px) {
    .steps-container { 
        flex-direction: column !important; 
        gap: 1.5rem !important; 
        padding: 0 1rem !important;
        max-width: 100% !important;
    }
    .step-arrow { 
        transform: rotate(90deg) !important; 
        font-size: 1.2rem !important;
    }
    .step-card { 
        max-width: 90% !important; 
        width: 90% !important; 
        min-width: auto !important;
        padding: 1.5rem 1rem !important;
        margin: 0 auto !important;
    }
    .step-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }
    .step-description {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .app-container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* Mobile footer background fix - increased extension */
    body {
        margin-top: 40px;
        min-height: calc(100vh + 400px) !important;
        background: #000000 !important;
        background-color: #000000 !important;
        padding-bottom: 300px !important;
    }
    
    #landingSection {
        min-height: calc(100vh + 400px) !important;
        background: #000000 !important;
        background-color: #000000 !important;
        padding-bottom: 300px !important;
    }
    
    .app-container {
        min-height: calc(100vh + 400px) !important;
        background: #000000 !important;
        background-color: #000000 !important;
        padding-bottom: 300px !important;
    }
    
    /* Extend background pattern down significantly */
    #landingSection::before {
        height: calc(100% + 300px) !important;
    }
    
    /* Mobile hero section improvements */
    .hero-section {
        padding: 20px 15px !important;
        min-height: auto !important;
    }
    
    .inside-hero-section {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 0 5px !important;
    }
    
    .hero-icon img {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    .hero-title {
        font-size: 1.8rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin: 10px 0 !important;
        padding: 0 5px !important;
    }
    
    .hero-description {
        font-size: 0.9rem !important;
        margin: 10px 0 !important;
        padding: 0 5px !important;
        line-height: 1.4 !important;
    }
    
    .powered-pill {
        padding: 8px 15px !important;
        font-size: 0.85rem !important;
        margin: 10px auto !important;
        display: block !important;
        text-align: center !important;
        width: fit-content !important;
        left: auto !important;
        transform: none !important;
    }
    
    /* Mobile input section fixes */
    .input-section {
        max-width: 100% !important;
        padding: 0 15px !important;
        margin-top: 1rem !important;
    }
    
    .input-outer-container {
        padding: 10px 5px !important;
    }
    
    .input-inner-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .input-container, .prompt-input, .input-group {
        max-width: 100% !important;
    }
    
    /* Mobile hero content */
    .hero-content, .hero-text {
        max-width: 100% !important;
        padding: 0 20px !important;
    }
    
    /* Mobile features grid - single column */
    .features-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        padding: 10px !important;
    }
    
    .feature-card {
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto !important;
    }
    
    /* Mobile input containers */
    .input-outer-container {
        padding: 10px !important;
    }
    
    .input-inner-container {
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    .prompt-input {
        max-width: 100% !important;
    }
    
    /* Mobile suggested apps */
    .suggested-apps {
        padding: 0 20px !important;
        justify-content: center !important;
    }
    
    /* Mobile-specific background height reduction */
    body.page-id-59363 .app-container,
    body.page-id-59363 #landingSection {
        margin-top: -20px !important;
        padding-top: 20px !important;
        min-height: calc(100vh + 170px) !important;
    }
    
    /* Further reduction for very small screens */
    @media (max-width: 480px) {
        body.page-id-59363 .app-container,
        body.page-id-59363 #landingSection {
            margin-top: -10px !important;
            padding-top: 10px !important;
            min-height: calc(100vh + 160px) !important;
        }
    }
}

@media (max-width: 480px) {
    /* Extra small screens - improved hero responsiveness */
    .hero-section h1 {
        font-size: 1.6rem !important;
    }
    
    .hero-section p {
        font-size: 0.85rem !important;
    }
    
    .hero-title {
        font-size: 1.5rem !important;
        line-height: 1.1 !important;
    }
    
    .hero-subtitle {
        font-size: 0.9rem !important;
        padding: 0 5px !important;
        margin: 8px 0 !important;
    }
    
    .hero-description {
        font-size: 0.8rem !important;
        padding: 0 5px !important;
        margin: 8px 0 !important;
        line-height: 1.3 !important;
    }
    
    .hero-icon img {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    .powered-pill {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
        margin: 8px auto !important;
        display: block !important;
        text-align: center !important;
        width: fit-content !important;
        left: auto !important;
        transform: none !important;
    }
    
    /* Extra small screens - improved testimonial responsiveness */
    .testimonial-container {
        min-height: 300px;
        padding: 0 0.5rem;
        margin: 0 auto 1.5rem;
    }
    
    .testimonial-nav {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .testimonial-nav.prev-btn {
        left: 5px;
    }
    
    .testimonial-nav.next-btn {
        right: 5px;
    }
    
    .testimonial-card {
        padding: 1rem;
        margin: 0 5px;
    }
    
    .testimonial-avatar {
        width: 35px;
        height: 35px;
    }
    
    .testimonial-quote {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }
    
    .testimonial-author-name {
        font-size: 1rem;
    }
    
    .testimonial-author-title {
        font-size: 0.85rem;
    }
    
    .testimonial-author-company {
        font-size: 0.8rem;
    }
    
    .testimonial-dots {
        margin-bottom: 1.5rem;
        gap: 0.5rem;
    }
    
    .testimonial-dots .dot {
        width: 8px;
        height: 8px;
    }
    
    .features-grid, .possibilities-grid, .capabilities-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Adjust top margin for very small screens - increased extension */
    body {
        margin-top: 50px;
        min-height: calc(100vh + 600px) !important;
        background: #000000 !important;
        background-color: #000000 !important;
        padding-bottom: 400px !important;
    }
    
    #landingSection {
        min-height: calc(100vh + 600px) !important;
        background: #000000 !important;
        background-color: #000000 !important;
        padding-bottom: 400px !important;
    }
    
    .app-container {
        min-height: calc(100vh + 600px) !important;
        background: #000000 !important;
        background-color: #000000 !important;
        padding-bottom: 400px !important;
    }
    
    /* Extend background pattern down further on small screens */
    #landingSection::before {
        height: calc(100% + 600px) !important;
    }
}

body {
    background: #000000;
    color: var(--text-color);
    min-height: 100vh;
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

/* Hide main page scrollbar when app is active */
body.app-active {
    /* overflow: hidden;
    height: 100vh; */
    min-height: 100vh;
}

/* Mobile body handling */
@media (max-width: 767px) {
    body.app-active {
        overflow: visible;
        height: auto;
        min-height: 100vh;
    }
}

/* Desktop screens above 768px - remove white spaces */
@media (min-width: 769px) {
    .header {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 1rem 0;
    }
    
    .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .header-flex {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
}

.container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.header {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
    position: relative;
    transition: all 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    display: none; /* Hidden by default on landing page */
    opacity: 0;
    transform: translateY(-100%);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    width: 100%;
    margin: 0;
}

/* Show header only when conversation has started */
body.app-active .header {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Full-width header fix only when app is active (during generation) - above 1024px */
@media (min-width: 1025px) {
    body.app-active .header,
    body.app-active #wrapper .header,
    body.app-active .fusion-wrapper .header,
    body.app-active .fusion-page-wrapper .header,
    body.app-active .fusion-page-wrapper-row .header {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        background: #000000 !important;
        background-color: #000000 !important;
        padding-top: calc(1rem + 50px) !important;
        margin-top: -50px !important;
    }
}

.header-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    padding: 8px 16px;
    border-radius: 12px;
    background: rgba(74, 144, 226, 0.1);
    border: 1px solid rgba(74, 144, 226, 0.2);
}

.logo-group:hover {
    background: rgba(74, 144, 226, 0.15);
    border-color: rgba(74, 144, 226, 0.3);
    transform: translateY(-1px);
}

.logo-icon {
    font-size: 1.5rem;
    color: var(--blue-color);
    font-weight: bold;
    text-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
    font-family: 'Courier New', monospace;
    letter-spacing: -1px;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.logo-text .bold {
    font-weight: bold;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: absolute;
    right: 20px;
}

.github-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: var(--text-color);
    font-size: 0.95rem;
}

.download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, #4a90e2, #357abd);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 10px;
    min-width: 40px;
    height: 36px;
    z-index: 9999;
    position: relative;
}

.download-btn:hover {
    background: linear-gradient(135deg, #357abd, #2a6aa0);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.download-btn:active {
    transform: translateY(0);
}

.deploy-netlify-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, #00ad9f, #00d4aa);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 10px;
    min-width: 40px;
    height: 36px;
    z-index: 9999;
    position: relative;
    gap: 6px;
    font-weight: 500;
    white-space: nowrap;
}

.deploy-netlify-btn:hover {
    background: linear-gradient(135deg, #00947f, #00b394);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 173, 159, 0.3);
}

.deploy-netlify-btn:active {
    transform: translateY(0);
}

/* Set Token button styled to match Deploy to Netlify */
.set-token-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, #00ad9f, #00d4aa);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 10px;
    min-width: 40px;
    height: 36px;
    z-index: 9999;
    position: relative;
    gap: 6px;
    font-weight: 500;
    white-space: nowrap;
}

.set-token-btn:hover {
    background: linear-gradient(135deg, #00947f, #00b394);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 173, 159, 0.3);
}

.set-token-btn:active {
    transform: translateY(0);
}

.download-icon {
    font-size: 1.1rem;
    display: block;
}

.powered-pill {
    text-align: center;
    margin: 2rem auto;
    font-size: 0.95rem;
    border-radius: 50px;
    padding: 8px 20px;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Merged dark theme styles */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.9);
}

.main-heading {
    text-align: center;
    font-size: 2.7rem;
    margin-bottom: 2.5rem;
    font-weight: 500;
    color: var(--text-color);
    transition: color 0.3s ease;
}

/* Typing animation styles */
#animated-word {
    position: relative;
    display: inline-block;
    min-width: 120px;
    text-align: left;
}

#animated-word::after {
    content: '|';
    color: var(--blue-color);
    animation: blink 1s infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.main-heading .blue {
    color: var(--blue-color);
}

/* Landing page input styling - Extended top and bottom coverage */
#landingSection {
    min-height: calc(100vh + 230px) !important;
    background: #000000 !important;
    background-color: #000000 !important;
    position: relative;
    overflow: hidden;
    padding: 80px 0 150px 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: -80px !important;
    margin-bottom: -150px !important;
}

/* Animated starry background */
#landingSection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 100px);
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #4a90e2, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(74, 144, 226, 0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #6b73ff, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(107, 115, 255, 0.6), transparent),
        radial-gradient(2px 2px at 160px 30px, #4a90e2, transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: twinkle 3s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 0.8; }
}

/* Hero Section */
.hero-section {
    text-align: center;
    padding: 0rem 0 0rem;
    position: relative;
    z-index: 1;
}
.inside-hero-section{
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: #4a90e2;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

.hero-icon img {
    width: 4rem;
    height: 2.5rem;
    object-fit: contain;
    display: block;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    text-shadow: 0 0 20px rgba(74, 144, 226, 0.3);
}

.hero-subtitle {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Update input section for dark theme */
#landingSection .input-outer-container {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* Merged styles */
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    max-width: 700px;
}

#landingSection .input-inner-container.vertical {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 100%;
}

#landingSection .prompt-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border-bottom: none;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    min-height: 60px;
    max-height: 200px;
    outline: none;
    display: block;
}

#landingSection .input-controls-row {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: none;
    border-radius: 0 0 12px 12px;
    width: 100%;
    box-sizing: border-box;
    min-height: 50px;
    gap: 12px;
    /* Merged/updated styles */
    padding: 6px 10px;
    justify-content: flex-end;
}

#landingSection .prompt-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.generate-code-btn {
    background: linear-gradient(135deg, #4a90e2, #6b73ff) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    min-width: fit-content !important;
    max-width: 150px !important;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3) !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.generate-code-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4) !important;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 4rem 0;
    position: relative;
    z-index: 1;
}

.feature-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.1), transparent);
    transition: left 0.5s ease;
}

.feature-card:hover::before {
    left: 100%;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(74, 144, 226, 0.3);
    box-shadow: 0 10px 30px rgba(74, 144, 226, 0.2);
}

.feature-icon {
    font-size: 2.5rem;
    color: #4a90e2;
    margin-bottom: 1rem;
    display: inline-block;
}

.feature-icon img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    display: block;
}

/* Aggressive WordPress white space removal */
body.page-id-59363 .header,
body.page-id-59363 header,
body.page-id-59363 .header-flex,
body.page-id-59363 .container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: rgba(0, 0, 0, 0.9) !important;
}

/* Force remove any WordPress container constraints */
body.page-id-59363 #main,
body.page-id-59363 .layout-boxed-mode #main,
body.page-id-59363 .layout-wide-mode #main,
body.page-id-59363 .layout-wide-mode #wrapper,
body.page-id-59363 .wrapper,
body.page-id-59363 .content,
body.page-id-59363 .site-content {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
}

/* Remove any WordPress theme padding/margins */
body.page-id-59363 * {
    box-sizing: border-box !important;
}

/* Target specific WordPress theme elements causing white spaces */
body.page-id-59363 .fusion-header,
body.page-id-59363 .fusion-header-wrapper,
body.page-id-59363 .fusion-secondary-header,
body.page-id-59363 .fusion-main-header,
body.page-id-59363 .avada-header,
body.page-id-59363 .header-wrapper,
body.page-id-59363 .site-header,
body.page-id-59363 .main-header {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.9) !important;
}

/* Remove any WordPress theme container padding */
body.page-id-59363 .fusion-container,
body.page-id-59363 .fusion-row,
body.page-id-59363 .fusion-column,
body.page-id-59363 .fusion-builder-row,
body.page-id-59363 .fusion-builder-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force header to break out of any container constraints */
body.page-id-59363 .header {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

body.page-id-59363 .header *,
body.page-id-59363 header * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Override WordPress background color for main elements */
#main, 
.layout-boxed-mode #main, 
.layout-boxed-mode.avada-footer-fx-sticky .above-footer-wrapper, 
.layout-boxed-mode.avada-footer-fx-sticky-with-parallax-bg-image .above-footer-wrapper, 
.layout-wide-mode #main, 
.layout-wide-mode #wrapper, 
body, 
html, 
html body.custom-background {
    background-color: #000000 !important;
}

/* Fix WordPress template elements - remove unwanted lines and backgrounds */
body.page-id-59363 * {
    border: none !important;
}

/* Remove white line at top of WordPress interface */
body.page-id-59363::before,
body.page-id-59363::after,
body.page-id-59363 *::before,
body.page-id-59363 *::after {
    border: none !important;
    background: transparent !important;
    content: none !important;
}

/* Remove top borders and lines from WordPress elements */
body.page-id-59363 body,
body.page-id-59363 html,
body.page-id-59363 #page,
body.page-id-59363 .site,
body.page-id-59363 .site-header,
body.page-id-59363 .site-main,
body.page-id-59363 .site-footer,
body.page-id-59363 .wp-site-blocks,
body.page-id-59363 .wp-block-group,
body.page-id-59363 .wp-container {
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove specific borders from WordPress elements */
body.page-id-59363 div,
body.page-id-59363 section,
body.page-id-59363 article,
body.page-id-59363 main,
body.page-id-59363 header,
body.page-id-59363 footer,
body.page-id-59363 nav,
body.page-id-59363 aside {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* Remove backgrounds from WordPress template elements */
body.page-id-59363 .wp-container,
body.page-id-59363 .wp-block-group,
body.page-id-59363 .wp-block-column,
body.page-id-59363 .wp-block-columns,
body.page-id-59363 .entry-content,
body.page-id-59363 .site-content,
body.page-id-59363 .content-area {
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove WordPress admin bar and top elements */
body.page-id-59363 #wpadminbar,
body.page-id-59363 .admin-bar,
body.page-id-59363 .wp-admin-bar,
body.page-id-59363 [id*="admin"],
body.page-id-59363 [class*="admin"] {
    display: none !important;
    border: none !important;
    background: transparent !important;
}

/* Force remove any top-level borders */
body.page-id-59363 > * {
    border-top: none !important;
    border: none !important;
    outline: none !important;
}

/* WordPress-specific mobile footer background fixes - increased */
body.page-id-59363 {
    min-height: calc(100vh + 800px) !important;
    background: #000000 !important;
    background-color: #000000 !important;
}

body.page-id-59363 #landingSection {
    min-height: calc(100vh + 800px) !important;
    background: #000000 !important;
    background-color: #000000 !important;
}

body.page-id-59363 .app-container {
    min-height: calc(100vh + 200px) !important;
    background: #000000 !important;
    background-color: #000000 !important;
}

/* WordPress mobile footer background extension - increased */
@media (max-width: 768px) {
    body.page-id-59363 {
        min-height: calc(100vh + 200px) !important;
    }
    
    body.page-id-59363 #landingSection {
        min-height: calc(100vh + 200px) !important;
    }
    
    body.page-id-59363 .app-container {
        min-height: calc(100vh + 200px) !important;
    }
    
    body.page-id-59363 #landingSection::before {
        height: calc(100% + 200px) !important;
    }
}

/* Additional WordPress overrides for feature cards */
body.page-id-59363 .feature-card h3,
body.page-id-59363 .capability-card h3,
body.page-id-59363 .possibility-card h3 {
    color: #4a90e2 !important;
    font-weight: 600 !important;
}

/* WordPress-specific heading color fixes */
/* WordPress-specific heading color fixes - only for our app content */
body.page-id-59363 #landingSection h1,
body.page-id-59363 #landingSection h2,
body.page-id-59363 #landingSection h3,
body.page-id-59363 #landingSection h4,
body.page-id-59363 #landingSection h5,
body.page-id-59363 #landingSection h6,
body.page-id-59363 .app-container h1,
body.page-id-59363 .app-container h2,
body.page-id-59363 .app-container h3,
body.page-id-59363 .app-container h4,
body.page-id-59363 .app-container h5,
body.page-id-59363 .app-container h6 {
    color: #ffffff !important;
}

/* Specific WordPress overrides for feature titles */
body.page-id-59363 .feature-title,
body.page-id-59363 .capability-title,
body.page-id-59363 .possibility-title,
body.page-id-59363 .feature-card h3,
body.page-id-59363 .capability-card h3,
body.page-id-59363 .possibility-card h3 {
    color: #4a90e2 !important;
    font-weight: 600 !important;
}

/* Ensure feature titles are blue in WordPress */
.feature-title {
    color: #4a90e2 !important;
    font-weight: 600 !important;
}

.feature-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.5;
}

/* Fusion Builder and WordPress h1 color override */
fusion-modal h1, .fusion-post-content h1, .fusion-tb-footer h1, .fusion-tb-page-title-bar h1, .fusion-widget-area h1, .post-content h1, .search-page-search-form h1, .title h1, h1 {
    color: #ffffff !important;
}

/* Fusion Builder and WordPress h3 color override */
.fusion-author .fusion-author-title, .fusion-modal .modal-title, .fusion-widget-area h3, .post-content h3, .project-content h3, .sidebar .widget h3, .main-flex .slide-content h3, h3 {
    color: #ffffff !important;
}

.quick-apps {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
}

.quick-app-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.quick-app-btn:hover {
    background: rgba(74, 144, 226, 0.2);
    border-color: rgba(74, 144, 226, 0.4);
    color: #ffffff;
    transform: translateY(-2px);
}

/* How It Works Section */
.how-it-works-section {
    margin: 6rem auto 4rem !important;
    text-align: center !important;
    max-width: 1000px !important;
    padding: 0 2rem !important;
    width: 100% !important;
    display: block !important;
}

.how-it-works-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.how-it-works-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.text-white{
    color: white;
}

.steps-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 4rem;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    padding: 0 1rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.step-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    max-width: 280px;
    flex: 1;
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(74, 144, 226, 0.3);
}

.step-number {
    position: absolute;
    top: -15px;
    left: -5px;
    background: #2A41E7;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.step-icon {
    font-size: 2.5rem;
    margin: 1rem 0;
    display: block;
}

.step-icon img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.step-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.step-description {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.step-arrow {
    color: var(--blue-color);
    font-size: 2rem;
    font-weight: bold;
    flex: 0 0 auto;
}

.try-now-btn {
    background: #2A41E7;
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(42, 65, 231, 0.3);
}

.try-now-btn:hover {
    background: #1e2eb3;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(42, 65, 231, 0.4);
}

/* Endless Possibilities Section */
.endless-possibilities-section {
    margin: 6rem auto 4rem;
    text-align: center;
    max-width: 1200px;
    padding: 0 2rem;
}

.endless-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.endless-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.possibilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 5rem;
}

.possibility-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    text-align: left;
}

.possibility-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(74, 144, 226, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.possibility-icon {
    width: 48px;
    height: 48px;
    background: rgba(74, 144, 226, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(74, 144, 226, 0.2);
}

.possibility-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.possibility-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.8rem;
}

.possibility-description {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.popular-prompts-section {
    margin-top: 4rem;
}

.popular-prompts-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2rem;
}

.popular-prompts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto;
}

.popular-prompt-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    text-align: left;
}

.popular-prompt-btn:hover {
    background: rgba(74, 144, 226, 0.1);
    border-color: rgba(74, 144, 226, 0.3);
    color: #ffffff;
    transform: translateY(-2px);
}

/* See It In Action Section */
.see-it-in-action-section {
    margin: 6rem auto 4rem;
    text-align: center;
    max-width: 1200px;
    padding: 0 2rem;
}

.action-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.action-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.demo-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 3rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 4px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
}

.demo-tab {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
    gap: 0.5rem;
    flex: 1;
    justify-content: center;
    min-width: 195px;
}

.demo-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.demo-tab.active {
    background: #2A41E7;
    color: white;
    box-shadow: 0 2px 8px rgba(42, 65, 231, 0.3);
}

.tab-icon {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.tab-text {
    font-weight: 500;
}

.demo-content {
    position: relative;
    min-height: 600px;
}

.demo-pane {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.demo-pane.active {
    display: block;
    opacity: 1;
}

.demo-prompt {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.prompt-icon {
    background: rgba(74, 144, 226, 0.1);
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 1.2rem;
}

.demo-prompt span {
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    font-size: 1rem;
}

.demo-code-container {
    background: transparent;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.code-header {
    background: transparent;
    border-bottom: none;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.code-dots {
    display: flex;
    gap: 0.5rem;
}

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

.dot.red {
    background: #ff5f56;
}

.dot.yellow {
    background: #ffbd2e;
}

.dot.green {
    background: #27ca3f;
}

.code-title {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.copy-btn {
    background: rgba(74, 144, 226, 0.1);
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.copy-btn:hover {
    background: rgba(74, 144, 226, 0.2);
    color: white;
}

.code-image-container {
    padding: 1rem;
    background: #1a1a1a;
}

.code-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile UI Demo Styles */
.code-preview {
    padding: 2rem;
    background: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.mobile-mockup {
    background: #2d2d2d;
    border-radius: 20px;
    padding: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.profile-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 250px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    background: var(--blue-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1rem;
}

.profile-card h3 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.profile-card p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.profile-btn {
    background: var(--blue-color);
    border: none;
    border-radius: 25px;
    padding: 0.8rem 2rem;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-btn:hover {
    background: #3a7bc8;
    transform: translateY(-2px);
}

/* More Capabilities Section */
.more-capabilities-section {
    margin: 6rem auto 4rem;
    text-align: center;
    max-width: 1200px;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
}
.flex{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.more-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--blue-color);
    margin-bottom: 1rem;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.more-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.capability-card {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.capability-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 16px;
}

.capability-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

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

.capability-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 1;
}

.web-icon {
    background: white;
}

.web-icon img {
    width: 60% !important;
    height: 60% !important;
}

.python-icon {
    background: white;
}

.data-icon {
    background: white;
}

.api-icon {
    background: white;
}

.mobile-icon {
    background: white;
}

.devops-icon {
    background: white;
}

.capability-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.capability-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.capability-description {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient( 45deg, #ff8a80, #80deea, #81d4fa, #a5d6a7, #fff59d, #e1bee7, #b2dfdb );
    background-size: 400% 400%; background-clip: text; -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; animation: gradientFlow 4s ease-in-out infinite;
    font-weight: inherit; display: inline-block;
}
@keyframes gradientFlow { 0% { background-position: 0% 50%; } 25% { background-position: 100% 50%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 50%; } }

/* Footer */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #000000;
    color: var(--text-color);
    padding: 0.6rem 2rem;
    font-size: 0.85rem;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    opacity: 1;
}
.footer-left a { color: var(--blue-color); text-decoration: none; font-weight: 500; }
.footer-right { display: flex; gap: 12px; }
.footer-icon { font-size: 1.3rem; color: var(--text-color); text-decoration: none; transition: color 0.3s ease; }
.footer-icon:hover { color: var(--blue-color); }

/* --- CHAT & APP INTERFACE STYLES --- */

/* Initially hide chat interface */
#chatInterface {
    display: none;
}

/* Chat interface container */
.chat-interface {
    display: flex;
    flex-direction: column;
    height: 100%; /* Changed from calc() to take full height of parent */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: var(--bg-color);
    transition: background-color 0.3s ease;
    position: relative;
}

.chat-messages {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 300px;
    max-height: 60vh;
}

.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 10px;
}

.chat-message.user {
    flex-direction: row-reverse;
}

.chat-message .avatar {
    font-size: 1.7rem;
    margin-bottom: 2px;
}

/* Consolidated Chat Bubble Styles */
.chat-bubble {
    padding: 14px 18px;
    margin: 10px 0;
    border-radius: 18px;
    line-height: 1.5;
    position: relative;
    font-size: 1.05rem;
    word-wrap: break-word;
    max-width: 90%;
}

.chat-bubble.user {
    align-self: flex-end;
    background-color: var(--blue-color);
    color: white;
    border-bottom-right-radius: 4px;
    margin-right: 15px;
    transition: background-color 0.3s ease;
}

.chat-bubble.user::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: -8px;
    width: 8px;
    height: 8px;
    background-color: var(--blue-color);
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    transition: background-color 0.3s ease;
}

/* Input container at the bottom of the chat view */
.input-container {
    position: sticky;
    bottom: 0;
    background-color: var(--surface-color);
    padding: 10px 20px;
    z-index: 1000;
    width: 100%;
    box-shadow: 0 -2px 10px var(--shadow);
    transition: all 0.3s ease;
}

#chatInterface .input-inner-container.vertical {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 12px;
    box-shadow: 0 2px 16px var(--shadow);
    width: 100%;
    max-width: 1200px;
    padding: 0;
    gap: 0;
    margin: 0 auto;
    transition: all 0.3s ease;
}

#chatInterface .input-controls-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    padding: 8px 16px;
    min-height: 46px;
    background: transparent;
    border-radius: 0 0 12px 12px;
    box-sizing: border-box;
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
}

#chatInterface .submit-btn:hover {
    background: #3a80d2;
}

/* Loading Box Styles */
.loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.98) 100%);
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(74, 144, 226, 0.1);
    width: 70%;
    max-width: 450px;
    min-height: 140px;
    margin: 2rem auto;
    padding: 40px 30px 35px 30px;
    position: relative;
    z-index: 9999;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    animation: loadingBoxEntrance 0.7s ease-out, loadingBoxPulse 3s ease-in-out infinite;
    overflow: hidden;
}

.loading-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.1), transparent);
    animation: loadingShimmer 2s infinite;
    z-index: 1;
}

.loading-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #4a90e2, #357abd, #4a90e2);
    background-size: 200% 100%;
    animation: loadingProgress 2.5s ease-in-out infinite, gradientMove 1.5s linear infinite;
    border-radius: 0 0 20px 20px;
    z-index: 2;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.97) 0%, rgba(20, 20, 20, 0.99) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 8px;
    backdrop-filter: blur(15px);
    overflow: hidden;
}

/* Hi-tech loading animation */
.hitech-loader {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px auto;
}

/* Code Matrix Effect */
.code-matrix {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.matrix-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, #00ff41 50%, transparent 100%);
    animation: matrixRain 2s linear infinite;
    opacity: 0.7;
}

.matrix-line:nth-child(1) { left: 20%; animation-delay: 0s; }
.matrix-line:nth-child(2) { left: 40%; animation-delay: 0.4s; }
.matrix-line:nth-child(3) { left: 60%; animation-delay: 0.8s; }
.matrix-line:nth-child(4) { left: 80%; animation-delay: 1.2s; }
.matrix-line:nth-child(5) { left: 100%; animation-delay: 1.6s; }

/* Central Core */
.central-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
}

.core-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-radius: 50%;
    animation: coreRotate 3s linear infinite;
}

.core-ring:nth-child(1) {
    border-top: 2px solid #4a90e2;
    border-right: 2px solid #4a90e2;
    animation-duration: 2s;
}

.core-ring:nth-child(2) {
    border-bottom: 2px solid #00ff41;
    border-left: 2px solid #00ff41;
    animation-duration: 3s;
    animation-direction: reverse;
}

.core-ring:nth-child(3) {
    border: 1px solid #ff6b6b;
    animation-duration: 4s;
    transform: scale(0.7);
}

.core-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}

.pulse-dot {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #4a90e2 0%, transparent 70%);
    border-radius: 50%;
    animation: corePulse 1.5s ease-in-out infinite;
}

/* Data Streams */
.data-streams {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.stream {
    position: absolute;
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent 0%, #4a90e2 50%, transparent 100%);
    animation: streamFlow 1.5s ease-in-out infinite;
}

.stream-1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
    transform: rotate(45deg);
}

.stream-2 {
    top: 10%;
    right: 10%;
    animation-delay: 0.3s;
    transform: rotate(-45deg);
}

.stream-3 {
    bottom: 10%;
    left: 10%;
    animation-delay: 0.6s;
    transform: rotate(-45deg);
}

.stream-4 {
    bottom: 10%;
    right: 10%;
    animation-delay: 0.9s;
    transform: rotate(45deg);
}

/* Geometric Patterns */
.geometric-patterns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hex-pattern {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid #4a90e2;
    transform: rotate(45deg);
    animation: hexFloat 4s ease-in-out infinite;
    opacity: 0.3;
}

.hex-pattern:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.hex-pattern:nth-child(2) {
    top: 60%;
    right: 20%;
    animation-delay: 1.3s;
    border-color: #00ff41;
}

.hex-pattern:nth-child(3) {
    bottom: 20%;
    left: 50%;
    animation-delay: 2.6s;
    border-color: #ff6b6b;
}

.sandpack-wrapper.loading {
    position: relative;
}

.sandpack-wrapper.loading .loading-overlay {
    display: flex;
    animation: loadingOverlayFadeIn 0.5s ease-out;
}

.sandpack-wrapper.loading .sandpack-container {
    opacity: 0.2;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.loading-message {
    color: var(--text-color);
    opacity: 0.95;
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 25px;
    transition: all 0.4s ease;
    animation: textFadeIn 1s ease-out, textBreath 4s ease-in-out infinite;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 3;
    position: relative;
}

.loading-spinner {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    z-index: 3;
}

.loading-spinner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border: 4px solid transparent;
    border-top: 4px solid #4a90e2;
    border-right: 4px solid #4a90e2;
    border-radius: 50%;
    animation: spinMain 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.3);
}

.loading-spinner::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 34px;
    height: 34px;
    border: 3px solid transparent;
    border-bottom: 3px solid #357abd;
    border-left: 3px solid #357abd;
    border-radius: 50%;
    animation: spinReverse 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    opacity: 0.8;
}

.loading-box .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #4a90e2;
    border-radius: 50%;
    opacity: 0.7;
    z-index: 2;
}
.loading-box .particle:nth-child(1) { top: 15%; left: 10%; animation: floatParticle1 4s ease-in-out infinite; }
.loading-box .particle:nth-child(2) { top: 20%; right: 15%; animation: floatParticle2 3.5s ease-in-out infinite 0.5s; background: #357abd; }
.loading-box .particle:nth-child(3) { bottom: 25%; left: 20%; animation: floatParticle3 5s ease-in-out infinite 1s; background: #5ba3f5; }
.loading-box .particle:nth-child(4) { bottom: 30%; right: 25%; animation: floatParticle4 3.8s ease-in-out infinite 1.5s; }

/* Loading Animations */
@keyframes loadingBoxEntrance {
    0% { opacity: 0; transform: translateY(-30px) scale(0.8) rotateX(15deg); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
    50% { opacity: 0.8; transform: translateY(-5px) scale(1.02) rotateX(0deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4); }
}
@keyframes loadingBoxPulse {
    0%, 100% { box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(74, 144, 226, 0.1); transform: scale(1); }
    50% { box-shadow: 0 16px 56px rgba(74, 144, 226, 0.15), 0 0 0 1px rgba(74, 144, 226, 0.3); transform: scale(1.01); }
}
@keyframes loadingShimmer { 0% { left: -100%; } 100% { left: 100%; } }
@keyframes loadingProgress { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 100%; } }
@keyframes gradientMove { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }
@keyframes loadingOverlayFadeIn { 0% { opacity: 0; backdrop-filter: blur(0px); } 100% { opacity: 1; backdrop-filter: blur(15px); } }
@keyframes textFadeIn { 0% { opacity: 0; transform: translateY(15px); text-shadow: 0 0 0 rgba(0, 0, 0, 0); } 100% { opacity: 0.95; transform: translateY(0); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } }
@keyframes textBreath { 0%, 100% { opacity: 0.95; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } }
@keyframes spinMain {
    0% { transform: rotate(0deg) scale(1); box-shadow: 0 0 20px rgba(74, 144, 226, 0.3); }
    50% { transform: rotate(180deg) scale(1.1); box-shadow: 0 0 30px rgba(74, 144, 226, 0.5); }
    100% { transform: rotate(360deg) scale(1); box-shadow: 0 0 20px rgba(74, 144, 226, 0.3); }
}
@keyframes spinReverse {
    0% { transform: rotate(360deg) scale(0.9); opacity: 0.8; }
    50% { transform: rotate(180deg) scale(1); opacity: 1; }
    100% { transform: rotate(0deg) scale(0.9); opacity: 0.8; }
}

/* Particle floating animations */
@keyframes floatParticle1 {
    0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.7; }
    25% { transform: translateY(-10px) translateX(5px); opacity: 1; }
    50% { transform: translateY(-5px) translateX(-3px); opacity: 0.8; }
    75% { transform: translateY(-15px) translateX(8px); opacity: 0.9; }
}

@keyframes floatParticle2 {
    0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.7; }
    30% { transform: translateY(-8px) translateX(-4px); opacity: 1; }
    60% { transform: translateY(-12px) translateX(6px); opacity: 0.8; }
    90% { transform: translateY(-3px) translateX(-2px); opacity: 0.9; }
}

@keyframes floatParticle3 {
    0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.7; }
    20% { transform: translateY(-6px) translateX(7px); opacity: 1; }
    40% { transform: translateY(-14px) translateX(-5px); opacity: 0.8; }
    80% { transform: translateY(-2px) translateX(3px); opacity: 0.9; }
}

@keyframes floatParticle4 {
    0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.7; }
    35% { transform: translateY(-9px) translateX(-6px); opacity: 1; }
    70% { transform: translateY(-7px) translateX(4px); opacity: 0.8; }
    85% { transform: translateY(-11px) translateX(-1px); opacity: 0.9; }
}
/* Hi-tech animation keyframes */
@keyframes matrixRain {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes coreRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes corePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.3;
    }
}

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

@keyframes hexFloat {
    0%, 100% {
        transform: rotate(45deg) translateY(0px);
        opacity: 0.3;
    }
    25% {
        transform: rotate(45deg) translateY(-10px);
        opacity: 0.6;
    }
    50% {
        transform: rotate(45deg) translateY(-5px);
        opacity: 0.8;
    }
    75% {
        transform: rotate(45deg) translateY(-15px);
        opacity: 0.4;
    }
}

/* New styles for app container and Sandpack */
/* Base layout (for screens > 767px) */
.app-container {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    min-height: 600px;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    /* Ensure full coverage during content generation */
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: -40px !important;
    margin-bottom: -80px !important;
    padding-top: 40px !important;
    padding-bottom: 80px !important;
    padding: 40px 0 80px 0 !important;
    background: #000000 !important;
    background-color: #000000 !important;
    min-height: calc(100vh + 120px) !important;
}

/* Ensure seamless transition during content generation */
.app-container[style*="display: flex"],
.app-container[style*="display:block"] {
    margin-top: -40px !important;
    margin-bottom: -80px !important;
    padding-top: 40px !important;
    padding-bottom: 80px !important;
    background: #000000 !important;
    background-color: #000000 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    min-height: calc(100vh + 120px) !important;
}

/* Ensure chat interface also has full coverage */
.chat-interface {
    background: #000000 !important;
    background-color: #000000 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Aggressive Sandpack Layout Fixes - Remove all empty space */
.sandpack-wrapper {
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
}

.sandpack-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    position: relative;
    z-index: 1;
    padding: 0 !important;
    margin: 0 !important;
}

/* Aggressive Sandpack internal layout fixes */
.sp-wrapper {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.sp-layout {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.sp-layout .sp-layout {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
}

/* Remove all spacing from editor */
.sp-editor {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 !important;
    border: none !important;
}

.sp-code-editor {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Remove spacing from editor content */
.sp-editor .sp-editor-content,
.sp-code-editor .sp-editor-content,
.sp-editor .cm-editor,
.sp-code-editor .cm-editor {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
}

/* Remove spacing from Monaco editor */
.monaco-editor {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
}

.monaco-editor .monaco-editor-background {
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Additional aggressive spacing removal */
.sp-wrapper, .sp-layout, .sp-layout .sp-layout {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.sp-editor, .sp-code-editor {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 !important;
    border: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
}

/* Target Sandpack's internal structure more aggressively */
.sp-wrapper > div,
.sp-layout > div,
.sp-layout .sp-layout > div {
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remove spacing from Sandpack's file tabs area */
.sp-tabs,
.sp-tab,
.sp-file-list,
.sp-file-list-item {
    padding: 0 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove spacing from Sandpack's editor container */
.sp-editor-container,
.sp-code-editor-container,
.sp-editor-wrapper,
.sp-code-editor-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    height: 100% !important;
}

/* Target CodeMirror specifically */
.cm-editor,
.cm-editor .cm-scroller,
.cm-editor .cm-content,
.cm-editor .cm-line {
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Target Monaco editor specifically */
.monaco-editor,
.monaco-editor .monaco-editor-background,
.monaco-editor .view-lines,
.monaco-editor .view-line {
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Ultra-aggressive spacing removal for Sandpack */
.sandpack-container * {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
}

/* Specifically target the gap between tabs and editor */
.sp-layout > div:not(.sp-tabs):not(.sp-tab) {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
}

/* Force editor to start immediately after tabs */
.sp-editor,
.sp-code-editor,
.cm-editor,
.monaco-editor {
    position: relative !important;
    top: 0 !important;
    transform: translateY(0) !important;
}

/* EXACT COPY from style.css - Sandpack layout fix */
.sp-wrapper,
.sp-layout {
    width: 100% !important;
    height: 100% !important;
}

.sp-layout {
    min-height: auto !important;
    display: block !important;
}

.sandpack-container * {
    max-width: 100% !important;
    max-height: 100% !important;
    visibility: visible !important;
}

.sandpack-container>* {
    transition: none !important;
}

/* Force Sandpack tabs to be horizontal - AGGRESSIVE */
.sp-tabs,
.sp-file-list,
[class*="sp-tab"],
[class*="sp-file"],
.sp-layout > div:first-child,
.sp-layout > div:first-child > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

.sp-tab,
.sp-file-list-item,
.sp-layout > div:first-child > div > div {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Simple fix for Sandpack spacing - LESS AGGRESSIVE */
.sp-layout {
    display: block !important;
    min-height: auto !important;
}

/* Only target the specific navigator element */
.sp-c-bxeRRt.sp-c-gMfcns {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* Force file tabs to have no bottom spacing */
.sp-tabs,
.sp-file-list {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* Force editor to stick to file tabs with no gap */
.sp-layout > div:last-child,
.sp-editor,
.sp-code-editor {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    flex: 1 !important;
}

/* Target the specific gap between file list and editor */
.sp-layout > div:not(.sp-tabs):not(.sp-file-list) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: translateY(0) !important;
}

/* Fix line number offset issue */
.cm-editor .cm-gutters,
.cm-editor .cm-lineNumbers,
.monaco-editor .margin,
.monaco-editor .line-numbers {
    padding-top: 0 !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
}

/* Force line numbers to align with code */
.cm-editor .cm-lineNumbers .cm-gutterElement,
.monaco-editor .line-numbers .line-number {
    padding-top: 0 !important;
    margin-top: 0 !important;
    height: auto !important;
    line-height: 1.5 !important;
}

/* Remove any offset from the editor content */
.cm-editor .cm-content,
.monaco-editor .view-lines {
    padding-top: 0 !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
}

/* Force the first line to start at the top */
.cm-editor .cm-content .cm-line:first-child,
.monaco-editor .view-lines .view-line:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Force Monaco editor to start at the very top */
.monaco-editor .view-lines {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.monaco-editor .view-line {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.monaco-editor .view-line:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove any empty lines at the start of code */
.cm-activeLine:first-child,
.cm-line:first-child {
    min-height: 0 !important;
    height: auto !important;
}

/* Target Sandpack's code wrapper */
.sp-code-editor,
.sp-editor {
    line-height: 1.5 !important;
}

/* Remove padding from the first line container */
.cm-editor .cm-content > div:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hide Sandpack navigator bar completely - EXACT FIX FROM index.html */
.sp-c-bxeRRt.sp-c-gMfcns {
    display: none !important;
}

.sp-navigator,
.sp-navigator-wrapper,
[class*="sp-navigator"],
[class*="navigator"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
}

/* Remove ALL negative margins - find the real issue */
.sp-layout > div:not(.sp-tabs):not(.sp-file-list) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: translateY(0) !important;
    z-index: 10 !important;
}

/* Force the editor content to start at the very top */
.sp-editor .cm-editor,
.sp-code-editor .cm-editor,
.sp-editor .monaco-editor,
.sp-code-editor .monaco-editor {
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: translateY(0) !important;
}
.sandpack-container > div:not(iframe) { overflow: hidden !important; }
.sandpack-container iframe { overflow: auto !important; }

/* Chat container takes remaining width */
.chat-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    background: var(--bg-color);
    transition: background-color 0.3s ease;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    position: relative; /* For absolute positioning of input section on mobile */
}

/* Chat input section styles */
.chat-input-section {
    width: 100%;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-top: auto;
    transition: all 0.3s ease;
}

.chat-input-section.loading {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.chat-input-section .input-outer-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.chat-input-section .input-inner-container {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.chat-prompt-input {
    min-height: 45px;
    max-height: 100px;
    padding: 12px 16px;
    font-size: 0.95rem;
    resize: none;
    background: transparent;
    border: none;
    color: #ffffff;
    outline: none;
}

.chat-prompt-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.chat-submit-btn {
    margin-right: 8px !important;
    background: linear-gradient(135deg, #4a90e2, #6b73ff) !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3) !important;
    transition: all 0.3s ease !important;
}

.chat-submit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4) !important;
}

/* Quality Selector Styles */
.quality-selector {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 8px;
    transition: all 0.3s ease;
}

/* Disabled state styles */
.prompt-input:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    pointer-events: none;
}

.quality-selector:disabled,
.quality-dropdown:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background: rgba(58, 54, 54, 0.5) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    pointer-events: none;
}

.submit-btn:disabled,
.generate-code-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background: rgba(74, 144, 226, 0.3) !important;
    pointer-events: none;
}

.submit-btn:disabled:hover,
.generate-code-btn:disabled:hover {
    background: rgba(74, 144, 226, 0.3) !important;
    transform: none !important;
}

.quality-dropdown {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: #3a3636;
    color: #ffffff;
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    min-width: 60px;
    width: auto;
}

.quality-dropdown:hover {
    border-color: rgba(74, 144, 226, 0.5);
}

.quality-dropdown:focus {
    border-color: rgba(74, 144, 226, 0.7);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.25);
}

.quality-tooltip {
    position: relative;
    margin-left: 8px;
}

.tooltip-icon {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0.7;
    cursor: help;
    transition: color 0.3s ease;
}

.tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(10px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    margin-bottom: 8px;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.quality-tooltip:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* Chat Buttons */
.chat-button {
    background-color: var(--button-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    margin-top: 10px;
    align-self: flex-start;
}
.chat-button:hover {
    background-color: var(--border-color);
    border-color: var(--blue-color);
    transform: translateY(-1px);
}
.fix-button {
    display: block;
    margin-left: 0;
}
.fix-button:before {
    content: "🔧 ";
}

/* Sandpack View Toggle */
.view-toggle-container {
    display: flex;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
    margin: 0 auto;
    border-radius: 0;
    max-width: 400px;
    justify-content: center;
}
.view-toggle-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: var(--button-bg);
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 0;
    border-right: 1px solid var(--border-color);
    position: relative;
    z-index: 10;
}
.view-toggle-btn:last-child {
    border-right: none;
}
.view-toggle-btn:hover {
    background: var(--border-color);
}
.view-toggle-btn.active {
    background: var(--blue-color) !important;
    color: white !important;
    opacity: 1 !important;
}

/* Ensure inactive buttons are clearly different */
.view-toggle-btn:not(.active) {
    background: var(--button-bg) !important;
    color: var(--text-color) !important;
    opacity: 0.7 !important;
}

/* Force active state to be visible - using hardcoded colors */
#codeToggle.active,
#previewToggle.active {
    background: #4a90e2 !important;
    color: white !important;
    border: 2px solid #4a90e2 !important;
}

/* Force inactive state to be visible - using hardcoded colors */
#codeToggle:not(.active),
#previewToggle:not(.active) {
    background: #404040 !important;
    color: #e0e0e0 !important;
    border: 2px solid #404040 !important;
}
.sandpack-wrapper .sandpack-container {
    height: calc(100% - 47px); /* Subtract toggle button height */
    flex: 1;
}

/* Sandpack Fixes - Hide duplicate inputs and fix preview */
.sp-c-bxeRRt.sp-c-gMfcns { display: none !important; }
.sp-wrapper, .sp-layout { width: 100% !important; height: 100% !important; }
.sp-layout { min-height: auto !important; display: block !important; }
.sandpack-container * { max-width: 100% !important; max-height: 100% !important; visibility: visible !important; }
.sandpack-container > * { transition: none !important; }

/* Hide ALL possible input elements in Sandpack */
.sp-console, .sp-console-wrapper, .sp-console-container,
.sp-terminal, .sp-terminal-wrapper, .sp-terminal-container,
.sp-input, .sp-input-wrapper, .sp-input-container,
.sp-run-button, .sp-run-wrapper, .sp-run-container,
.sp-generate-button, .sp-generate-wrapper, .sp-generate-container,
.sp-button, .sp-button-wrapper, .sp-button-container,
.sp-action, .sp-action-wrapper, .sp-action-container,
.sp-toolbar, .sp-toolbar-wrapper, .sp-toolbar-container,
.sp-controls, .sp-controls-wrapper, .sp-controls-container,
[class*="sp-console"], [class*="sp-terminal"], [class*="sp-input"],
[class*="sp-run"], [class*="sp-generate"], [class*="sp-button"],
[class*="sp-action"], [class*="sp-toolbar"], [class*="sp-controls"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide any remaining input elements */
.sp-wrapper input[type="text"],
.sp-wrapper input[type="textarea"],
.sp-wrapper textarea,
.sp-wrapper .input-field,
.sp-wrapper .prompt-input,
.sp-wrapper .generate-input,
.sp-wrapper button[type="submit"],
.sp-wrapper .submit-button,
.sp-wrapper .run-button,
.sp-wrapper .generate-button {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove all spacing from Sandpack elements */
.sp-wrapper * {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
}

.sp-layout * {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
}

/* Ensure no empty space above code */
.sp-editor .sp-editor-content,
.sp-code-editor .sp-editor-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
}

.sp-editor .cm-editor,
.sp-code-editor .cm-editor {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
}

/* Sandpack Preview/Code Mode Toggling */
.preview-mode [class*="sp-code"],
.preview-mode [class*="sp-editor"],
.preview-mode [class*="sp-file"],
.preview-mode [class*="sp-tab"],
.preview-mode [class*="editor"],
.preview-mode [class*="cm-"],
.preview-mode [class*="monaco"],
.preview-mode [class*="sp-console"],
.preview-mode [class*="sp-terminal"],
.preview-mode [class*="sp-input"] {
    display: none !important;
}
.preview-mode iframe, .preview-mode [class*="preview"] {
    width: 100% !important; height: 100% !important; display: block !important;
    pointer-events: all !important; position: relative !important; z-index: 1 !important;
    border: none !important; background: white; cursor: default !important;
}

/* Code mode - show editor, hide preview */
.code-mode [class*="preview"],
.code-mode iframe {
    display: none !important;
}
.code-mode [class*="sp-code"],
.code-mode [class*="sp-editor"],
.code-mode [class*="sp-file"],
.code-mode [class*="sp-tab"],
.code-mode [class*="editor"],
.code-mode [class*="cm-"],
.code-mode [class*="monaco"] {
    display: block !important;
}

/* Force code editor to show actual code, not preview */
.sandpack-container:not(.preview-mode) [class*="sp-layout"] {
    display: flex !important;
}
.sandpack-container:not(.preview-mode) [class*="sp-editor"] {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.sandpack-container:not(.preview-mode) iframe {
    display: none !important;
}
.preview-mode [class*="overlay"], .preview-mode [class*="loading"] { display: none !important; }
.preview-mode [class*="preview"] { overflow: hidden !important; }
.preview-mode iframe { overflow: auto !important; min-height: 500px !important; }

/* Misc & Animated Elements */
.file-updated { animation: fileUpdate 1s ease-in-out; }
@keyframes fileUpdate { 0% { background-color: rgba(74, 144, 226, 0.1); } 50% { background-color: rgba(74, 144, 226, 0.2); } 100% { background-color: transparent; } }

#userCount { display: inline-block; font-weight: bold; color: var(--blue-color); transition: transform 0.2s ease; font-variant-numeric: tabular-nums; }
#userCount.counting { animation: countPulse 0.1s ease-in-out; }
@keyframes countPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.flex-lgega { display: flex; }

/* Mobile view toggle button */
.toggle-view-btn {
    display: none;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
    white-space: nowrap;
    min-width: 120px;
    text-align: center;
}
.toggle-view-btn:hover { background: #357abd; transform: translateY(-1px); }
.toggle-view-btn:active { transform: translateY(1px); }

/* Loved by Developers Section */
.loved-by-developers-section {
    margin: 6rem auto 4rem;
    text-align: center;
    max-width: 1200px;
    padding: 0 2rem;
}

.loved-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.loved-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Testimonial Container */
.testimonial-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto 4rem;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--blue-color);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.testimonial-nav:hover {
    background: #3a7bc8;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

.testimonial-nav.prev-btn {
    left: -25px;
}

.testimonial-nav.next-btn {
    right: -25px;
}

/* Testimonial Card */
.testimonial-card {
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

.testimonial-card.active {
    opacity: 1;
    transform: translateX(0);
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(42, 65, 231, 0.4);
    flex-shrink: 0;
    position: relative;
}

.testimonial-avatar::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: #2A41E7;
    border-radius: 50%;
    border: 2px solid rgba(30, 30, 30, 0.9);
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-rating {
    display: flex;
    gap: 0.2rem;
    margin-left: auto;
}

.star {
    font-size: 1.1rem;
    color: #FFD700;
}

.testimonial-quote {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    font-style: italic;
    margin: 0 0 2rem 0;
    text-align: left;
}

.testimonial-author {
    text-align: left;
}

.testimonial-author-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
}

.testimonial-author-title {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
}

.testimonial-author-company {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Author information styling */
.author-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.author-role {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.author-company {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Testimonial Dots */
.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 4rem;
}

.testimonial-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonial-dots .dot.active {
    background: #2A41E7;
    transform: scale(1.3);
}

.testimonial-dots .dot:hover {
    background: rgba(42, 65, 231, 0.6);
}

/* Developer Stats */
.developer-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 4rem 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

.stat-item-old {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(74, 144, 226, 0.3);
    box-shadow: 0 10px 30px rgba(74, 144, 226, 0.2);
}

.stat-icon {
    width: 40px;
    height: 40px;
    background: var(--blue-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2A41E7;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* Ready to Code Faster Section */
.ready-to-code-section {
    margin: 4rem auto 4rem;
    text-align: center;
    max-width: 800px;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(74, 144, 226, 0.05) 50%, rgba(0, 0, 0, 0.1) 100%);
    border-radius: 24px;
    border: 1px solid rgba(74, 144, 226, 0.2);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.ready-to-code-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(74, 144, 226, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.cta-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.cta-icon {
    font-size: 2rem;
    color: var(--blue-color);
}

.cta-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.features-checklist {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
    text-align: left;
    position: relative;
    z-index: 1;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    padding: 0.75rem 0;
}

.feature-check {
    color: var(--blue-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.feature-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.cta-primary-btn {
    background: #2A41E7;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 8px 25px rgba(74, 144, 226, 0.3);
}

.cta-primary-btn:hover {
    background: #3a7bc8;
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(74, 144, 226, 0.4);
}

.cta-secondary-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.cta-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
    transform: translateY(-2px);
}

.trusted-by {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trusted-by-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
}

.company-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    opacity: 0.7;
}

.company-logo {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: default;
}

.company-logo:hover {
    color: var(--blue-color);
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
}

.company-name {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.company-name:hover {
    color: var(--blue-color);
    transform: translateY(-2px);
}

/* Powered by Writecream styling - Yellow gradient animation */
.writecream-highlight {
    background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700, #FFFF00, #FFD700);
    background-size: 400% 400%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: yellowGradientFlow 3s ease-in-out infinite;
    font-weight: 600;
    display: inline-block;
}

@keyframes yellowGradientFlow {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

#userCount {
    color: var(--blue-color); /* Blue color for the user count */
    font-weight: 700;
}

/* Desktop view (>= 768px) */
@media screen and (min-width: 768px) {
    .app-container {
        flex-direction: row !important;
        /* height: calc(100vh - 60px) !important; */
        min-height: auto !important;
    }
    .chat-interface {
        width: 50% !important;
        height: 90% !important;
        min-height: auto !important;
        max-height: none !important;
        border-right: 1px solid var(--border-color) !important;
        order: initial !important;
    }
    .sandpack-wrapper {
        width: 50% !important;
        height: 90% !important;
        min-height: auto !important;
        order: initial !important;
        display: flex !important;
    }

}

/* Global styles for all section subtitles - ensure centering */
.how-it-works-subtitle,
.endless-subtitle,
.action-subtitle,
.more-subtitle,
.loved-subtitle,
.cta-subtitle {
    max-width: 700px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Global styles for all section titles - ensure centering */
.how-it-works-title,
.endless-title,
.action-title,
.more-title,
.loved-title,
.cta-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
}

/* Tablet and smaller (<= 767px) */
@media (max-width: 767px) {
    .container { max-width: 95vw; }
    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .features-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .how-it-works-section, .endless-possibilities-section, .see-it-in-action-section, .more-capabilities-section, .loved-by-developers-section, .ready-to-code-section { margin: 4rem auto 3rem; padding: 0 1rem; }
    .how-it-works-title, .endless-title, .action-title, .loved-title { font-size: 2rem; }
    
    /* Mobile Quality Selector Improvements */
    .quality-selector {
        margin-right: 6px !important;
        flex-shrink: 0;
    }
    
    .quality-dropdown {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        min-width: 55px !important;
        width: auto !important;
        max-width: 60px !important;
        border-radius: 6px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    .quality-dropdown option {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
    
    .quality-tooltip {
        margin-left: 4px !important;
    }
    
    .tooltip-icon {
        font-size: 0.9rem !important;
        width: 18px !important;
        height: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .input-controls-row {
        gap: 6px !important;
        padding: 6px 8px !important;
        flex-wrap: nowrap !important;
    }
    
    .generate-code-btn {
        padding: 0.6rem 1rem !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
        max-width: 140px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .steps-container { 
        flex-direction: column !important; 
        gap: 1rem !important; 
        padding: 0 0.5rem !important;
    }
    .step-arrow { transform: rotate(90deg) !important; }
    .step-card { 
        max-width: 100% !important; 
        width: 100% !important; 
        min-width: auto !important;
        padding: 1.5rem 1rem !important;
    }
    .possibilities-grid, .capabilities-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .popular-prompts-grid { grid-template-columns: 1fr; }
    .demo-tabs { flex-direction: column; align-items: center; max-width: 200px; }
    .demo-tab { width: 100%; }
    .more-title, .cta-title { font-size: 2.2rem; }
    .testimonial-container { 
        min-height: 350px; 
        padding: 0 1rem; 
        margin: 0 auto 2rem;
    }
    
    .testimonial-nav { 
        width: 40px; 
        height: 40px; 
        font-size: 1rem;
    }
    
    .testimonial-nav.prev-btn {
        left: 10px;
    }
    
    .testimonial-nav.next-btn {
        right: 10px;
    }
    
    .testimonial-card {
        padding: 1.5rem;
        margin: 0 10px;
    }
    
    .testimonial-header { 
        flex-direction: column; 
        text-align: center; 
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .testimonial-avatar {
        width: 40px;
        height: 40px;
        margin: 0 auto;
    }
    
    .testimonial-rating {
        margin-left: 0;
        justify-content: center;
    }
    
    .testimonial-quote { 
        text-align: center; 
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .testimonial-author { 
        text-align: center; 
    }
    
    .testimonial-dots {
        margin-bottom: 2rem;
    }
    
    /* Additional mobile testimonial improvements */
    .loved-by-developers-section {
        padding: 2rem 1rem;
    }
    
    .loved-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    
    .loved-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    .stats-grid { grid-template-columns: 1fr; gap: 2rem; }
    .features-checklist { grid-template-columns: 1fr; }
    .cta-buttons { flex-direction: column; }
    .cta-primary-btn, .cta-secondary-btn { width: 100%; max-width: 280px; justify-content: center; }
    .footer { flex-direction: column; gap: 10px; padding: 1rem 0.5rem; }

    /* Main App Layout for Mobile */
    .app-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        padding-bottom: 20px;
    }
    .chat-interface {
        width: 100%;
        height: calc(100vh - 60px);
        overflow-y: auto;
    }
    .sandpack-wrapper {
        width: 100%;
        height: calc(100vh - 60px);
        display: none;
    }
    /* Header Mobile Responsive Styles */
    .header {
        padding: 0.75rem 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .header-flex {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 10px !important;
        gap: 8px;
        align-items: center;
        position: relative;
        width: 100%;
        max-width: 100%;
    }
    
    .logo-group {
        padding: 5px 8px !important;
        gap: 6px !important;
        margin: 0;
        border-radius: 6px;
        flex-shrink: 0;
    }
    
    .logo-icon {
        font-size: 1.1rem !important;
        font-family: 'Courier New', monospace;
        letter-spacing: -1px;
    }
    
    .logo-text {
        font-size: 1.1rem !important;
        white-space: nowrap;
    }
    
    .header-right {
        position: relative !important;
        right: auto !important;
        display: flex;
        align-items: center;
        gap: 6px !important;
        padding: 4px 6px !important;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        flex-wrap: nowrap;
        flex-shrink: 1;
        min-width: 0;
    }
    
    .toggle-view-btn {
        display: inline-flex !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-width: auto !important;
        max-width: 90px !important;
        border-radius: 5px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .download-btn,
    .deploy-netlify-btn,
    .set-token-btn {
        padding: 6px 8px !important;
        font-size: 0 !important;
        min-width: 32px !important;
        width: 32px !important;
        height: 32px !important;
        margin-right: 0 !important;
        gap: 0 !important;
    }
    
    .download-btn span:not(.download-icon),
    .deploy-netlify-btn span:not(.deploy-icon),
    .set-token-btn span:not(.set-token-icon) {
        display: none !important;
    }
    
    .download-icon,
    .deploy-icon,
    .set-token-icon {
        width: 18px !important;
        height: 18px !important;
        display: flex !important;
    }
    
    .download-icon svg,
    .deploy-icon svg,
    .set-token-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .github-btn {
        display: none !important;
    }
    
    /* Very small screens (below 480px) */
    @media (max-width: 480px) {
        .header-flex {
            padding: 0 8px !important;
            gap: 4px;
        }
        
        /* Extra small mobile quality selector */
        .quality-dropdown {
            padding: 6px 8px !important;
            font-size: 0.75rem !important;
            min-width: 50px !important;
            width: auto !important;
            max-width: 55px !important;
            white-space: nowrap !important;
            overflow: visible !important;
        }
        
        .quality-dropdown option {
            padding: 8px 10px !important;
            font-size: 0.8rem !important;
        }
        
        .tooltip-icon {
            font-size: 0.85rem !important;
            width: 16px !important;
            height: 16px !important;
        }
        
        .generate-code-btn {
            padding: 0.55rem 0.85rem !important;
            font-size: 0.75rem !important;
            max-width: 120px !important;
        }
        
        .input-controls-row {
            gap: 4px !important;
            padding: 5px 6px !important;
        }
        
        .logo-text {
            font-size: 1rem !important;
        }
        
        .logo-icon {
            font-size: 1rem !important;
        }
        
        .toggle-view-btn {
            font-size: 10px !important;
            padding: 5px 8px !important;
            max-width: 75px !important;
        }
        
        .header-right {
            gap: 4px !important;
            padding: 3px 4px !important;
        }
        
        .download-btn,
        .deploy-netlify-btn,
        .set-token-btn {
            min-width: 28px !important;
            width: 28px !important;
            height: 28px !important;
            padding: 4px !important;
        }
        
        .download-icon,
        .deploy-icon,
        .set-token-icon {
            width: 16px !important;
            height: 16px !important;
        }
        
        .download-icon svg,
        .deploy-icon svg,
        .set-token-icon svg {
            width: 16px !important;
            height: 16px !important;
        }
    }
    
    /* Tablet screens (481px to 768px) */
    @media (min-width: 481px) and (max-width: 768px) {
        .header-flex {
            padding: 0 15px !important;
        }
        
        .toggle-view-btn {
            font-size: 11px !important;
            padding: 6px 12px !important;
            max-width: 110px !important;
        }
        
        .header-right {
            gap: 8px !important;
        }
    }
    
    /* Ensure header doesn't overflow on mobile when app is active */
    body.app-active .header {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 0.75rem !important;
        margin-top: 0 !important;
    }
    
    /* Prevent horizontal overflow on mobile */
    body.app-active .header-flex {
        overflow-x: hidden;
    }
    
    body.app-active .header-right {
        max-width: calc(100% - 120px);
        overflow: hidden;
    }
    
    /* Mobile spacing fixes */
    .powered-pill {
        padding: 8px 15px !important;
        font-size: 0.85rem !important;
        margin: 10px auto !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
        display: block !important;
        text-align: center !important;
        width: calc(100% - 30px) !important;
        max-width: calc(100% - 30px) !important;
        box-sizing: border-box !important;
        left: auto !important;
        transform: none !important;
    }
    
    #landingSection {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    
    #landingSection .powered-pill {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .chat-container {
        padding: 10px 8px;
    }
    .chat-messages {
        height: calc(100% - 70px);
        padding-bottom: 10px;
    }
    .chat-input-section {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 100;
    }
    .view-toggle-container {
        position: sticky;
        top: 0;
        z-index: 10;
        backdrop-filter: blur(10px);
        margin: 0 !important;
        max-width: none !important;
        justify-content: flex-start !important;
    }
}

/* ============================================================== */
/* VS Code-Style IDE — Code tab + Preview tab (custom, not Sandpack) */
/* ============================================================== */
.vscode-ide {
    --vsc-bg: #1e1e1e;
    --vsc-sidebar-bg: #252526;
    --vsc-tab-bg: #2d2d30;
    --vsc-tab-active-bg: #1e1e1e;
    --vsc-tab-inactive-bg: #2d2d30;
    --vsc-titlebar-bg: #323233;
    --vsc-statusbar-bg: #007acc;
    --vsc-border: #3c3c3c;
    --vsc-text: #cccccc;
    --vsc-text-dim: #858585;
    --vsc-accent: #007acc;
    --vsc-accent-hover: #1177bb;
    --vsc-line-number: #858585;
    --vsc-active-line: #2a2d2e;
    --vsc-hover: #2a2d2e;
    --vsc-selection: #264f78;

    width: 100%;
    /* fill remaining height of the (flex column) wrapper instead of relying
       on a percentage chain — the page's outer container only sets min-height,
       so height: 100% never resolves */
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    background: var(--vsc-bg);
    color: var(--vsc-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Top tab switcher: Code | Preview */
.ide-view-tabs {
    display: flex;
    align-items: center;
    background: var(--vsc-titlebar-bg);
    border-bottom: 1px solid var(--vsc-border);
    padding: 0 8px;
    height: 38px;
    flex-shrink: 0;
    gap: 2px;
    user-select: none;
}
.ide-traffic-lights {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 4px;
    margin-right: 6px;
}
.ide-traffic-lights .tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.ide-traffic-lights .tl-dot.red { background: #ff5f57; }
.ide-traffic-lights .tl-dot.yellow { background: #febc2e; }
.ide-traffic-lights .tl-dot.green { background: #28c840; }

.ide-view-tab {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--vsc-text-dim);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}
.ide-view-tab:hover {
    background: rgba(255,255,255,0.04);
    color: var(--vsc-text);
}
.ide-view-tab.active {
    background: var(--vsc-bg);
    color: #ffffff;
}
.ide-view-tab.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: var(--vsc-accent);
    border-radius: 2px 2px 0 0;
}
.ide-view-tab svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.ide-view-spacer { flex: 1; }
.ide-view-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--vsc-text-dim);
}
.ide-view-action-btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--vsc-text-dim);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.ide-view-action-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--vsc-text);
}
.ide-view-action-btn svg { width: 14px; height: 14px; }

/* Body — the area below the top tabs */
.ide-body {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    overflow: hidden;
}

/* Code view — sidebar + editor */
.ide-code-view {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    display: flex;
    background: var(--vsc-bg);
}
.ide-code-view[hidden] { display: none !important; }

/* Sidebar */
.ide-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--vsc-sidebar-bg);
    border-right: 1px solid var(--vsc-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ide-sidebar-header {
    padding: 10px 16px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--vsc-text-dim);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ide-sidebar-header svg { width: 14px; height: 14px; }
.ide-file-tree {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 12px;
    font-size: 13px;
}
.ide-file-tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px 4px 24px;
    cursor: pointer;
    color: var(--vsc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    transition: background 0.1s ease;
    position: relative;
}
.ide-file-tree-item:hover {
    background: var(--vsc-hover);
}
.ide-file-tree-item.active {
    background: var(--vsc-selection);
}
.ide-file-tree-item .ftree-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ide-file-tree-item .ftree-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.ide-file-tree-folder {
    padding: 4px 16px 4px 8px;
    color: var(--vsc-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: default;
    user-select: none;
}
.ide-file-tree-folder svg { width: 12px; height: 12px; }

/* Main editor column */
.ide-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Open file tabs row */
.ide-file-tabs {
    display: flex;
    align-items: stretch;
    background: var(--vsc-tab-bg);
    border-bottom: 1px solid var(--vsc-border);
    height: 36px;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.ide-file-tabs::-webkit-scrollbar { height: 3px; }
.ide-file-tabs::-webkit-scrollbar-track { background: transparent; }
.ide-file-tabs::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 3px; }

.ide-file-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 14px;
    background: var(--vsc-tab-inactive-bg);
    color: var(--vsc-text-dim);
    border-right: 1px solid var(--vsc-border);
    cursor: pointer;
    font-size: 13px;
    height: 100%;
    min-width: 120px;
    max-width: 240px;
    flex-shrink: 0;
    user-select: none;
    transition: background 0.1s ease, color 0.1s ease;
    position: relative;
}
.ide-file-tab:hover { background: #2f2f33; color: var(--vsc-text); }
.ide-file-tab.active {
    background: var(--vsc-tab-active-bg);
    color: #ffffff;
}
.ide-file-tab.active::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: var(--vsc-accent);
}
.ide-file-tab .ftab-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ide-file-tab .ftab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.ide-file-tab .ftab-close {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vsc-text-dim);
    opacity: 0;
    transition: opacity 0.1s ease, background 0.1s ease;
    flex-shrink: 0;
}
.ide-file-tab:hover .ftab-close,
.ide-file-tab.active .ftab-close { opacity: 1; }
.ide-file-tab .ftab-close:hover { background: rgba(255,255,255,0.1); color: #ffffff; }
.ide-file-tab .ftab-close svg { width: 12px; height: 12px; }

/* Breadcrumbs */
.ide-breadcrumbs {
    background: var(--vsc-bg);
    border-bottom: 1px solid var(--vsc-border);
    color: var(--vsc-text-dim);
    font-size: 12px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
}
.ide-breadcrumbs .crumb-sep { opacity: 0.5; }
.ide-breadcrumbs svg { width: 12px; height: 12px; }

/* Editor area */
.ide-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    background: var(--vsc-bg);
    overflow: hidden;
    position: relative;
}
.ide-line-numbers {
    flex-shrink: 0;
    padding: 12px 12px 12px 16px;
    color: var(--vsc-line-number);
    font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.55;
    text-align: right;
    user-select: none;
    background: var(--vsc-bg);
    min-width: 50px;
    box-sizing: border-box;
    overflow: hidden;
}
.ide-line-numbers span {
    display: block;
    height: 1.55em;
}
.ide-code-scroll {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: var(--vsc-bg);
}
.ide-code-content {
    margin: 0;
    padding: 12px 16px 24px 4px;
    font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.55;
    background: transparent !important;
    color: var(--vsc-text);
    white-space: pre;
    tab-size: 2;
    min-width: max-content;
}
.ide-code-content code {
    background: transparent !important;
    padding: 0 !important;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    white-space: pre;
    display: block;
}

/* Empty state */
.ide-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--vsc-text-dim);
    gap: 12px;
    padding: 32px;
    text-align: center;
}
.ide-empty-state svg { width: 64px; height: 64px; opacity: 0.4; }
.ide-empty-state h3 { color: var(--vsc-text); margin: 0; font-size: 16px; font-weight: 500; }
.ide-empty-state p { margin: 0; font-size: 13px; max-width: 320px; line-height: 1.5; }

/* Status bar */
.ide-status-bar {
    height: 24px;
    background: var(--vsc-statusbar-bg);
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 12px;
    flex-shrink: 0;
    gap: 16px;
    user-select: none;
}
.ide-status-bar .status-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ide-status-bar .status-item svg { width: 12px; height: 12px; }
.ide-status-bar .status-spacer { flex: 1; }

/* Preview view — wraps Sandpack iframe */
.ide-preview-view {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.ide-preview-view[hidden] { display: none !important; }

/* Preview toolbar — fake browser address bar */
.ide-preview-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #2d2d30;
    border-bottom: 1px solid var(--vsc-border);
    flex-shrink: 0;
}
.ide-preview-nav {
    display: flex;
    gap: 2px;
    color: var(--vsc-text-dim);
}
.ide-preview-nav button {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--vsc-text-dim);
    width: 26px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.ide-preview-nav button:hover { background: rgba(255,255,255,0.06); color: #ffffff; }
.ide-preview-nav button svg { width: 14px; height: 14px; }
.ide-preview-url {
    flex: 1;
    min-width: 0;
    background: #1e1e1e;
    color: var(--vsc-text);
    border: 1px solid var(--vsc-border);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-family: "Menlo", "Monaco", "Consolas", monospace;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}
.ide-preview-url svg { width: 12px; height: 12px; flex-shrink: 0; color: #4ec9b0; }
.ide-preview-url span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ide-preview-frame {
    flex: 1;
    min-height: 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}
/* The Sandpack #root container lives inside .ide-preview-frame and stays in preview-mode at all times */
.ide-preview-frame .sandpack-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
/* Force every Sandpack-rendered descendant to fill its parent. Sandpack's
   own stitches-generated classes don't always set 100% height, which
   collapses the iframe to 0px when the container starts hidden. */
.ide-preview-frame > #root > * {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
.ide-preview-frame > #root > * > * {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
/* The actual preview iframe — make sure it's visible and fills */
.ide-preview-frame iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    border: 0 !important;
    background: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 1 1 auto !important;
}
.ide-preview-frame [class*="sp-preview"],
.ide-preview-frame [class*="sp-stack"],
.ide-preview-frame [class*="sp-wrapper"],
.ide-preview-frame [class*="sp-layout"] {
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    background: transparent !important;
}

/* Override: the new IDE owns the layout — disable old sandpack-wrapper rules */
.sandpack-wrapper.has-vscode-ide {
    padding: 12px !important;
    background: #000000 !important;
    /* Pin the wrapper to a fixed viewport-based height so children can't
       push it taller. Without max-height, large code files would grow the
       IDE beyond the viewport. */
    align-self: stretch !important;
    height: calc(100vh - 80px) !important;
    max-height: calc(100vh - 80px) !important;
    min-height: 500px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
}
.sandpack-wrapper.has-vscode-ide .view-toggle-container { display: none !important; }
/* Mobile: tighter height calc since the chat panel stacks on top */
@media (max-width: 768px) {
    .sandpack-wrapper.has-vscode-ide {
        height: calc(100vh - 160px) !important;
        max-height: calc(100vh - 160px) !important;
        min-height: 400px !important;
    }
}

/* Mobile responsiveness */
@media (max-width: 900px) {
    .ide-sidebar { width: 180px; }
}
@media (max-width: 768px) {
    .vscode-ide { border-radius: 0; box-shadow: none; }
    .ide-sidebar { display: none; }
    .ide-view-tabs { padding: 0 4px; height: 42px; }
    .ide-view-tab { padding: 8px 12px; font-size: 12px; }
    .ide-traffic-lights { display: none; }
    .sandpack-wrapper.has-vscode-ide { padding: 0 !important; }
}

/* Prism overrides — we control the editor background so the theme isn't washed out */
.vscode-ide pre[class*="language-"],
.vscode-ide code[class*="language-"] {
    background: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.vscode-ide .token.comment,
.vscode-ide .token.prolog,
.vscode-ide .token.doctype,
.vscode-ide .token.cdata { color: #6a9955; }
.vscode-ide .token.punctuation { color: #d4d4d4; }
.vscode-ide .token.property,
.vscode-ide .token.tag,
.vscode-ide .token.constant,
.vscode-ide .token.symbol,
.vscode-ide .token.deleted { color: #569cd6; }
.vscode-ide .token.boolean,
.vscode-ide .token.number { color: #b5cea8; }
.vscode-ide .token.selector,
.vscode-ide .token.attr-name,
.vscode-ide .token.string,
.vscode-ide .token.char,
.vscode-ide .token.builtin,
.vscode-ide .token.inserted { color: #ce9178; }
.vscode-ide .token.operator,
.vscode-ide .token.entity,
.vscode-ide .token.url,
.vscode-ide .language-css .token.string,
.vscode-ide .style .token.string,
.vscode-ide .token.variable { color: #d4d4d4; }
.vscode-ide .token.atrule,
.vscode-ide .token.attr-value,
.vscode-ide .token.function,
.vscode-ide .token.class-name { color: #dcdcaa; }
.vscode-ide .token.keyword { color: #c586c0; }
.vscode-ide .token.regex,
.vscode-ide .token.important { color: #d16969; }


/* --- clean preview UI --- */
/* === Clean preview UI: chat + live preview only (no IDE, no tabs) === */

/* Layout kicks in only once JS reveals the container (inline display flips
   from "none" to "flex"). While hidden it stays hidden. */
.app-container[style*="display: flex"],
.app-container[style*="display:flex"],
.app-container[style*="display: block"],
.app-container[style*="display:block"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  /* The parent (#landingSection) is already width:100vw. So the app-container
     just fills it — width:100%, no max-width, no margins. This drops the
     legacy/JS "margin-left:calc(-50vw+50%)" trick (which mis-shifted it left)
     and gives a full-width app area with only the 24px side gutters. */
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.app-container .chat-interface {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 380px !important;
  width: 380px !important;
  max-width: 380px !important;
  height: 82vh !important;
  min-height: 480px !important;
  min-width: 0 !important;
}

.app-container .chat-interface .chat-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

.app-container .sandpack-wrapper {
  display: block !important;   /* beats legacy mobile rule that set display:none */
  flex: 1 1 auto !important;
  width: auto !important;      /* let flex size it (legacy sets width:70%) */
  min-width: 0 !important;
  height: 82vh !important;
  min-height: 480px !important;
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
}

.app-container .sandpack-wrapper iframe#root,
.app-container iframe#root.preview-frame,
iframe#root {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  background: #fff !important;
}

/* Loading overlay covers the preview while generating. Only position is
   forced here — NOT display. hideLoading() hides it via the inline
   style.display none, and an !important display rule would beat that
   inline style and leave the loader stuck on screen forever. The legacy
   .loading-overlay rule already provides display:flex + centering. */
.app-container .sandpack-wrapper .loading-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
}

/* Keep loader contents dead-centered — the in-chat loading box drifts left
   otherwise (scrollbar gutter / fixed-width children). */
.app-container .loading-overlay .hitech-loader,
.app-container .loading-overlay .loading-message,
.app-container .loading-box .loading-message {
  margin-left: auto !important;
  margin-right: auto !important;
}
.app-container .chat-interface .loading-box {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Download-as-HTML button — floats over the preview, sits BELOW the loading
   overlay (z-index 4 < 5) so it's covered while the app is generating. */
.download-html-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: #4f46e5;
  color: #fff;
  border: 0;
  border-radius: 9px;
  font: 600 13px/1 system-ui, -apple-system, sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
  transition: background 0.15s ease, transform 0.1s ease;
}
.download-html-btn:hover { background: #4338ca; }
.download-html-btn:active { transform: translateY(1px); }
.download-html-btn svg { width: 16px; height: 16px; }

@media (max-width: 860px) {
  .download-html-btn { top: 8px; right: 8px; padding: 7px 11px; font-size: 12px; }
}

/* Mobile: stack chat above the preview */
@media (max-width: 860px) {
  .app-container[style*="display: flex"],
  .app-container[style*="display:flex"],
  .app-container[style*="display: block"],
  .app-container[style*="display:block"] {
    flex-direction: column !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 12px !important;
  }
  .app-container .chat-interface {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44vh !important;
    min-height: 300px !important;
  }
  .app-container .sandpack-wrapper {
    display: block !important;
    width: 100% !important;
    height: 58vh !important;
    min-height: 360px !important;
  }

  /* Input bar: keep it inside the chat panel (legacy mobile CSS pinned it
     position:fixed to the viewport bottom — that overlaps the preview now),
     and make it solid instead of transparent/glassy. */
  .app-container .chat-input-section {
    position: sticky !important;
    bottom: 0 !important;
    left: auto !important;
    right: auto !important;
    background: #161616 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .app-container .chat-input-section .input-inner-container {
    background: #262626 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* --- page title bar (replaces Avada .fusion-page-title-bar) --- */
.webbuilder-title-bar {
  display: none;
  background-color: #000000;
  background-image: url("https://assets.writecream.com/outer/assets/svgs/ptb-bg-7.svg");
  background-size: cover;
  background-position: left bottom;
  background-repeat: no-repeat;
  padding: 90px 4% 110px;
  text-align: center;
}
.webbuilder-title-bar__h1 {
  margin: 0;
  color: #ffffff;
  font-weight: 700;
  font-size: 63px;
  line-height: 1.3;
}
@media (max-width: 991px) {
  .webbuilder-title-bar { padding: 64px 4% 80px; }
  .webbuilder-title-bar__h1 { font-size: 42px; }
}
@media (max-width: 640px) {
  .webbuilder-title-bar { padding: 48px 5% 56px; }
  .webbuilder-title-bar__h1 { font-size: 30px; }
}

/* --- site-footer layout fix (webbuilder .container reset clobbers it) --- */
.site-footer .footer__main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 40px !important;
  padding: 0 42px !important;
}
.site-footer .footer__bottom {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 22px 42px 0 !important;
}
@media (max-width: 992px) {
  .site-footer .footer__main { padding: 0 24px !important; }
}
@media (max-width: 600px) {
  .site-footer .footer__main { padding: 0 20px !important; }
  .site-footer .footer__bottom { padding: 22px 20px 0 !important; }
}