/* ==========================================================
   Responsive – Media query overrides
   ========================================================== */

/* ── Tablet / large mobile ── */
@media (max-width: 1200px) {
    .container {
        max-width: 95%;
        padding: 0 15px;
    }

    .feature-slide {
        flex-direction: column;
        gap: 30px;
    }

    .feature-slide > div {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .demo-window {
        margin: 20px auto;
        max-width: 600px;
        overflow: visible;
    }
}

/* ── Mobile ── */
@media (max-width: 768px) {

    /* Layout & Overflow */
    html, body {
        overflow-x: clip !important;
        -webkit-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
        position: relative !important;
        width: 100% !important;
    }

    /* Stars – keep visible */
    .parallax-bg {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100vh !important;
        pointer-events: none !important;
        z-index: -2 !important;
        overflow: hidden !important;
    }

    .parallax-star {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        animation: twinkle 2s infinite ease-in-out !important;
        position: absolute !important;
        background: #ffffff !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.8) !important;
    }

    /* No shooting stars */
    .shooting-star { display: none !important; }

    /* Reduce gradient intensity */
    .gradient-bg {
        display: block !important;
        opacity: 0.2 !important;
        animation: none !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }

    body { background: linear-gradient(180deg, #050505 0%, #030303 100%) !important; }

    /* Header brand stays visible on mobile */
    header {
        background: rgba(3, 7, 18, 0.78) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        padding: 1rem 1rem 0.5rem !important;
    }

    header .container {
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    header .gradient-text {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1.15rem !important;
        letter-spacing: 0.02em !important;
    }
    header a[href="#"] {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* Subtitle */
    #subtitle {
        display: block !important;
        max-width: 30rem !important;
        margin: 0 auto 1.25rem auto !important;
        padding: 0 !important;
        font-size: 1rem !important;
        color: #d1d5db !important;
        line-height: 1.7 !important;
    }

    /* Mobile hero redesign */
    .hero-section {
        padding: 138px 0.75rem 28px !important;
        min-height: auto !important;
        align-items: flex-start !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .hero-panel {
        margin-top: 0 !important;
        padding: 0.5rem 0.25rem 0.75rem !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        max-width: 100% !important;
        outline: none !important;
    }

    .relative.min-h-screen {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Main title – mobile */
    #main-title {
        font-size: 3rem !important;
        line-height: 1.02 !important;
        margin-bottom: 1rem !important;
        white-space: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        width: 100% !important;
        text-align: center !important;
        direction: rtl !important;
        unicode-bidi: plaintext !important;
        background: none !important;
        font-weight: 900 !important;
        letter-spacing: -0.02em !important;
        text-shadow:
            0 0 10px rgba(0, 163, 255, 0.3),
            2px 2px 8px rgba(0, 0, 0, 0.8),
            4px 4px 16px rgba(0, 0, 0, 0.6) !important;
    }

    #main-title span {
        display: block !important;
        white-space: normal !important;
        margin: 0 !important;
    }

    #main-title .gradient-text {
        color: #00a3ff !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        display: block !important;
        white-space: normal !important;
        margin: 0.15rem 0 0 !important;
        filter: none !important;
        direction: rtl !important;
        unicode-bidi: plaintext !important;
    }
    #main-title .text-white {
        color: #ffffff !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        display: block !important;
        white-space: normal !important;
        margin: 0 !important;
        filter: none !important;
        text-shadow: none !important;
        direction: rtl !important;
        unicode-bidi: plaintext !important;
    }

    /* Container */
    .container.mx-auto.max-w-5xl {
        padding: 0 0.5rem !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Search */
    #search-container {
        display: none !important;
    }
    .search-box {
        padding: 16px 50px 16px 24px !important;
        font-size: 16px !important;
        border: 2px solid rgba(0, 102, 204, 0.5) !important;
        border-radius: 25px !important;
        background: rgba(0, 0, 0, 0.85) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        min-height: 48px !important;
        text-align: right !important;
        direction: rtl !important;
        width: 100% !important;
    }
    .search-box:focus {
        border-color: var(--accent-blue) !important;
        box-shadow: 0 0 12px rgba(0, 163, 255, 0.4) !important;
    }
    form[role="search"] button[type="submit"] { display: none !important; }

    #scroll-indicator { display: none !important; }

    /* Hide chatbot toggle on mobile */
    #chatbotToggleButton {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Remove backdrop filters for performance */
    .demo-window, .feature-card, header, #chatbotContainer {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Demo windows */
    .demo-window {
        margin-bottom: 25px !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
        background: rgba(0, 0, 0, 0.9) !important;
        border: 1px solid rgba(0, 102, 204, 0.4) !important;
    }

    /* Feature slides – stacked */
    .feature-slide {
        flex-direction: column !important;
        gap: 20px !important;
        margin-bottom: 2.5rem !important;
    }
    .feature-slide > div           { width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .feature-slide .md\:pl-10     { padding-left: 0 !important; }

    /* Upper section mobile redesign only */
    .core-features {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin-bottom: 2rem !important;
    }

    .core-features .feature-slide {
        margin-bottom: 0 !important;
        padding: 1.2rem 1rem !important;
        border-radius: 24px !important;
        border: 1px solid rgba(59, 130, 246, 0.2) !important;
        background:
            linear-gradient(180deg, rgba(10, 16, 28, 0.95) 0%, rgba(5, 8, 16, 0.92) 100%),
            radial-gradient(circle at top left, rgba(0, 163, 255, 0.14), transparent 60%) !important;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35) !important;
        align-items: stretch !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .core-features .feature-slide::before {
        position: absolute;
        top: 1rem;
        left: 1rem;
        min-width: 44px;
        height: 28px;
        padding: 0 0.65rem;
        border-radius: 999px;
        border: 1px solid rgba(96, 165, 250, 0.25);
        background: rgba(2, 6, 23, 0.72);
        color: #93c5fd;
        font-size: 0.8rem;
        font-weight: 800;
        line-height: 28px;
        text-align: center;
    }

    .core-features .feature-slide:nth-child(1)::before { content: '01'; }
    .core-features .feature-slide:nth-child(2)::before { content: '02'; }
    .core-features .feature-slide:nth-child(3)::before { content: '03'; }

    .core-features .feature-slide .md\:w-1\/2.demo-window {
        display: none !important;
    }

    .core-features .core-feature-copy {
        margin: 0 !important;
        padding: 2.2rem 0 0 0 !important;
        text-align: right !important;
    }

    .core-features .core-feature-copy h3 {
        text-align: right !important;
        font-size: 1.45rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
    }

    .core-features .core-feature-copy p {
        text-align: right !important;
        font-size: 0.98rem !important;
        line-height: 1.75 !important;
        color: #cbd5e1 !important;
        margin-bottom: 0 !important;
    }

    .window-content {
        height: 250px !important;
        padding: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-padding: 10px !important;
    }

    /* Feature cards */
    .feature-card {
        margin-bottom: 20px !important;
        padding: 24px !important;
        background: rgba(0, 0, 0, 0.85) !important;
        border: 1px solid rgba(0, 102, 204, 0.3) !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
        position: relative !important;
        z-index: 10 !important;
    }
    .feature-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 25px rgba(0, 163, 255, 0.15) !important; }

    /* Buttons */
    .glowing-button {
        padding: 14px 28px !important;
        font-size: 16px !important;
        min-height: 48px !important;
        box-shadow: 0 4px 15px rgba(0, 102, 204, 0.4) !important;
        border-radius: 25px !important;
        position: relative !important;
        z-index: 20 !important;
    }
    .glowing-button:hover { box-shadow: 0 6px 20px rgba(0, 163, 255, 0.5) !important; }
    .glowing-button::after { display: none !important; }

    /* Typography */
    h1 { font-size: 2.8rem !important; }
    h2 { font-size: 2rem !important; }
    h3 { font-size: 1.5rem !important; }

    /* Grid */
    .grid { grid-template-columns: 1fr !important; gap: 20px !important; }

    /* Navigation */
    header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    #mobile-menu { background: rgba(0, 0, 0, 0.98) !important; padding: 20px !important; border-top: 1px solid rgba(0, 102, 204, 0.3) !important; }

    /* Chatbot */
    #chatbotContainer {
        width: 95vw !important;
        max-width: 380px !important;
        right: 2.5vw !important;
        left: auto !important;
        height: 400px !important;
        background: rgba(0, 0, 0, 0.95) !important;
        border: 1px solid rgba(0, 102, 204, 0.4) !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.6) !important;
        will-change: transform, opacity;
    }
    #chatMessages { -webkit-overflow-scrolling: touch !important; scroll-behavior: smooth !important; padding: 16px !important; }
    .chat-message { padding: 12px 16px !important; font-size: 15px !important; margin-bottom: 12px !important; border-radius: 12px !important; max-width: 90% !important; }
    #chatInput   { font-size: 16px !important; padding: 12px 16px !important; min-height: 44px !important; border-radius: 22px !important; }
    #sendChatMsg { min-width: 44px !important; min-height: 44px !important; padding: 12px !important; border-radius: 22px !important; }

    /* Section spacing */
    section { padding: 50px 0 !important; }

    /* "כלים נוספים" section */
    #additional-tools .feature-slide {
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px !important;
        margin-bottom: 30px !important;
        display: flex !important;
    }
    #additional-tools .feature-slide > div:last-child  { order: 1 !important; width: 100% !important; margin: 0 0 20px 0 !important; padding: 0 !important; text-align: center !important; }
    #additional-tools .feature-slide > div:first-child { order: 2 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    #additional-tools .text-center h3  { font-size: 1.5rem !important; margin-bottom: 1rem !important; text-align: center !important; }
    #additional-tools .text-center p   { font-size: 0.95rem !important; line-height: 1.4 !important; margin-bottom: 1.5rem !important; text-align: center !important; padding: 0 0.5rem !important; }
    #additional-tools .glowing-button  { display: inline-block !important; margin: 0 auto 1rem auto !important; font-size: 15px !important; padding: 12px 20px !important; text-align: center !important; }
    #additional-tools .text-xs         { font-size: 0.8rem !important; text-align: center !important; margin-top: 0.5rem !important; padding: 0 0.5rem !important; }
    #additional-tools .demo-window     { margin: 0 auto !important; max-width: 100% !important; height: auto !important; }
    #additional-tools .window-content  { height: 200px !important; padding: 12px !important; font-size: 0.85rem !important; }
    #additional-tools ul               { text-align: center !important; padding: 0 !important; margin: 0 0 1.5rem 0 !important; }
    #additional-tools ul li            { text-align: center !important; font-size: 0.9rem !important; margin-bottom: 0.5rem !important; padding: 0 0.5rem !important; }

    /* GPU memory – don't promote static elements */
    .glowing-button, .feature-card, .demo-window, #chatbotToggleButton { will-change: auto; }

    /* Scroll optimisation */
    html { scroll-padding-top: 80px !important; }

    /* Touch targets */
    button { min-height: 44px; min-width: 44px; }
    button, a, [role="button"], input[type="submit"], input[type="button"] { touch-action: manipulation; }
    input[type="text"], textarea { -webkit-appearance: none; appearance: none; }

    /* "איך זה עובד" icon fix */
    #how-it-works ol { margin-right: 1.5rem !important; padding-right: 2rem !important; }
    #how-it-works ol li > div { box-shadow: 0 0 0 4px var(--dark-bg) !important; right: -2.75rem !important; }
}

/* ── Extra-small screens ── */
@media (max-width: 480px) {
    header {
        padding: 0.9rem 0.75rem 0.35rem !important;
    }

    #main-title {
        font-size: 2.45rem !important;
        line-height: 1.05 !important;
        margin-bottom: 0.85rem !important;
        text-shadow:
            0 0 8px rgba(0, 163, 255, 0.4),
            2px 2px 6px rgba(0, 0, 0, 0.9),
            3px 3px 12px rgba(0, 0, 0, 0.7) !important;
        letter-spacing: 0.3px !important;
        white-space: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        overflow: visible !important;
        padding: 0 0.25rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #main-title .gradient-text { color: #00a3ff !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; filter: none !important; }
    #main-title .text-white    { color: #ffffff !important; filter: none !important; text-shadow: none !important; }
    #main-title span           { display: block !important; white-space: normal !important; margin: 0 !important; }

    .container.mx-auto.max-w-5xl { padding: 0 0.25rem !important; overflow: visible !important; width: 100% !important; max-width: 100% !important; }
    .hero-panel        { padding: 0.35rem 0.15rem 0.65rem !important; border-radius: 0 !important; }
    #subtitle          { font-size: 0.95rem !important; line-height: 1.55 !important; margin-bottom: 1rem !important; padding: 0 !important; }
    #search-container  { padding: 0 0.5rem !important; margin-bottom: 1.5rem !important; }
    .search-box        { padding: 14px 20px !important; font-size: 16px !important; border: 1px solid rgba(0, 102, 204, 0.6) !important; background: rgba(0, 0, 0, 0.9) !important; min-height: 48px !important; }

    h1 { font-size: 2.2rem !important; }
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.3rem !important; }

    .window-content { height: 200px !important; padding: 12px !important; font-size: 0.9rem !important; }

    .feature-card { padding: 18px !important; margin-bottom: 15px !important; border: 1px solid rgba(0, 102, 204, 0.25) !important; background: rgba(0, 0, 0, 0.9) !important; }
    .feature-card:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 163, 255, 0.12) !important; }

    #chatbotContainer  { width: 96vw !important; right: 2vw !important; left: auto !important; height: 380px !important; max-width: none !important; }
    #chatbotToggleButton { right: 15px !important; left: auto !important; bottom: 15px !important; width: 52px !important; height: 52px !important; font-size: 20px !important; }

    .glowing-button  { padding: 12px 24px !important; font-size: 15px !important; min-height: 48px !important; }
    .text-lg         { font-size: 0.95rem !important; }
    .text-xl         { font-size: 1.1rem !important; }
    .chat-message    { padding: 10px 14px !important; font-size: 14px !important; margin-bottom: 10px !important; max-width: 92% !important; }
    #chatInput       { font-size: 16px !important; padding: 10px 14px !important; min-height: 42px !important; }
    #sendChatMsg     { min-width: 42px !important; min-height: 42px !important; padding: 10px !important; }

    section { padding: 40px 0 !important; }
    .hero-section { padding: 126px 0.25rem 20px !important; }
    .feature-slide { gap: 25px !important; margin-bottom: 30px !important; }
    .demo-window   { margin: 12px 0 !important; box-shadow: 0 3px 12px rgba(0,0,0,0.4) !important; }

    .core-features .feature-slide {
        padding: 1rem 0.85rem !important;
        border-radius: 20px !important;
    }

    .core-features .core-feature-copy {
        padding-top: 2rem !important;
    }

    .core-features .core-feature-copy h3 {
        font-size: 1.3rem !important;
    }

    .core-features .core-feature-copy p {
        font-size: 0.94rem !important;
    }

    /* Disable all CSS animations on very small screens */
    * { animation: none !important; }

    a, button, input, select, textarea { min-height: 44px !important; min-width: 44px !important; }
}