/* ==========================================================================
   Wapflow OS — 8 Premium Product & Solutions Cards Component
   World-Class Enterprise Multi-Engine Showcase (4-Top + 4-Bottom Grid)
   ========================================================================== */

.wos-products-section {
    position: relative;
    padding: 72px 0 64px 0;
    background: #ffffff;
}

.wos-products-section .container {
    max-width: 1320px;
}

.wos-products-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(30, 58, 138, 0.06);
    color: #1e3a8a;
    border: 1px solid rgba(30, 58, 138, 0.16);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 7px 16px;
    border-radius: 9999px;
    margin-bottom: 14px;
}

h2.wos-products-title,
#wosDynamicHeading.wos-products-title,
.wos-products-title {
    font-size: clamp(26px, 2.7vw, 36px) !important;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.6px;
    line-height: 1.25;
    margin-bottom: 12px;
}

.wos-heading-fixed-prefix {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    color: #0f172a;
    line-height: inherit;
}

.wos-dynamic-phrase-wrapper {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    text-align: left;
    min-width: 290px;
    transition: min-width 0.25s ease;
}

.wos-dynamic-phrase {
    display: inline-block;
    opacity: 1;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.wos-dynamic-phrase.wos-phrase-fading {
    opacity: 0;
}

.wos-products-title-highlight {
    background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 60%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Subtle Typewriter Blinking Cursor */
.wos-typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 0.85em;
    margin-left: 3px;
    vertical-align: -0.06em;
    background: #0284c7;
    border-radius: 1px;
    animation: wos-cursor-blink 0.75s infinite;
}

.wos-typewriter-cursor.cursor-hidden {
    display: none !important;
}

@keyframes wos-cursor-blink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* Rock-Solid Long Glassy Section Heading Underlines */
.section-heading-underline,
.wos-heading-glass-bar-center {
    display: block;
    position: relative;
    width: clamp(160px, 22vw, 240px);
    height: 5px;
    margin: 14px auto 0 auto;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(90deg, 
        rgba(23, 73, 181, 0.25) 0%, 
        rgba(36, 117, 223, 0.85) 50%, 
        rgba(23, 73, 181, 0.25) 100%
    );
    box-shadow: 0 2px 12px rgba(36, 117, 223, 0.18);
    transform: none !important;
    animation: none !important;
}

.section-heading-underline::after,
.wos-heading-glass-bar-center::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
    transform: translateX(-120%);
    animation: underline-glass-shine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes underline-glass-shine {
    0% {
        transform: translateX(-120%);
    }
    45%, 100% {
        transform: translateX(240%);
    }
}

.wos-products-subtitle {
    font-size: 15.5px;
    color: #64748b;
    max-width: 720px;
    margin: 16px auto 0 auto;
    line-height: 1.6;
}

/* 8 Equal-Sized Product Cards Grid (4-Top + 4-Bottom: 4 Columns x 2 Rows) */
.wos-products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px;
    align-items: stretch;
    width: 100%;
    margin-top: 40px;
}

/* Single Product Card - Enterprise Precision */
.wos-product-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #1e3a8a;
    border-radius: 20px;
    padding: 28px 20px 24px 20px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s ease;
    height: 100% !important;
    min-height: 350px;
    box-sizing: border-box;
    overflow: hidden;
}

.wos-product-card:hover,
.wos-product-card:focus-visible {
    transform: translateY(-7px);
    box-shadow: 0 20px 40px rgba(30, 58, 138, 0.1), 0 4px 12px rgba(15, 23, 42, 0.04);
    border-color: rgba(30, 58, 138, 0.32);
}

/* Icon Stage Wrapper */
.wos-product-icon-wrapper {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.wos-product-card:hover .wos-product-icon-wrapper {
    transform: scale(1.06);
}

.wos-anim-icon-stage {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wos-anim-icon-stage svg {
    width: 48px;
    height: 48px;
    overflow: visible;
    display: block;
}

/* Product Content & Typography - Perfectly Aligned Vertical Rhythm */
.wos-product-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-grow: 1;
}

.wos-product-name {
    font-size: clamp(15px, 1.15vw, 16.5px);
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
    line-height: 1.35;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: normal;
    word-break: normal;
    transition: color 0.2s ease;
}

.wos-product-card:hover .wos-product-name {
    color: #1e3a8a;
}

.wos-product-desc {
    display: block !important;
    width: 100%;
    font-size: clamp(12.5px, 1.05vw, 13.5px);
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 18px;
    min-height: 64px;
    text-align: center;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
    flex-grow: 1;
}

.wos-product-desc strong,
.wos-product-desc b {
    font-weight: 700;
    color: #1e293b;
    display: inline;
    white-space: normal;
}
    font-weight: 700;
    color: #1e293b;
    display: inline;
}

/* Action Circle Arrow */
.wos-product-action-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1e3a8a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-top: auto;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.wos-product-card:hover .wos-product-action-btn {
    background: #1e3a8a;
    color: #ffffff;
    border-color: #1e3a8a;
    transform: scale(1.1);
}

/* ==========================================================================
   PART D: 8 DISTINCT LIVE DIGITAL ICON ANIMATIONS
   ========================================================================== */

/* --- Card 1: WhatsApp Automation (Incoming Packet + Radar + Delivery Ticks) --- */
.wos-card-whatsapp .wos-product-icon-wrapper {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.18);
}

.wos-wa-radar {
    animation: wos-wa-pulse 3s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    transform-origin: 24px 24px;
}

.wos-wa-incoming-packet {
    animation: wos-wa-packet-fly 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: 8px 8px;
}

.wos-wa-ticks {
    animation: wos-wa-ticks-ping 3s ease-in-out infinite;
}

@keyframes wos-wa-packet-fly {
    0% { transform: translate(-14px, -14px) scale(0.6); opacity: 0; }
    20% { opacity: 1; }
    50% { transform: translate(16px, 16px) scale(1); opacity: 1; }
    65% { transform: translate(16px, 16px) scale(0); opacity: 0; }
    100% { transform: translate(16px, 16px) scale(0); opacity: 0; }
}

@keyframes wos-wa-pulse {
    0%, 50% { transform: scale(0.6); opacity: 0; }
    55% { opacity: 0.85; }
    85% { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}

@keyframes wos-wa-ticks-ping {
    0%, 65% { opacity: 0; transform: scale(0.7); }
    75% { opacity: 1; transform: scale(1.1); }
    90% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}

/* --- Card 2: AI Agents (Neural Circuits + Traveling Signals + Pulsing Nodes) --- */
.wos-card-ai .wos-product-icon-wrapper {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(129, 140, 248, 0.15) 100%);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.18);
}

.wos-ai-circuit {
    animation: wos-ai-circuit-flow 2.5s linear infinite;
}

@keyframes wos-ai-circuit-flow {
    0% { stroke-dashoffset: 20; }
    100% { stroke-dashoffset: 0; }
}

.wos-ai-signal.s1 {
    animation: wos-ai-travel-1 3s ease-in-out infinite;
}

.wos-ai-signal.s2 {
    animation: wos-ai-travel-2 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

@keyframes wos-ai-travel-1 {
    0% { transform: translate(0, 0); opacity: 1; }
    50% { transform: translate(-14px, -10px); opacity: 1; }
    55% { opacity: 0; }
    60% { transform: translate(0, 0); opacity: 0; }
    70% { opacity: 1; }
    100% { transform: translate(14px, 10px); opacity: 0; }
}

@keyframes wos-ai-travel-2 {
    0% { transform: translate(0, 0); opacity: 1; }
    50% { transform: translate(14px, -10px); opacity: 1; }
    55% { opacity: 0; }
    60% { transform: translate(0, 0); opacity: 0; }
    70% { opacity: 1; }
    100% { transform: translate(-14px, 10px); opacity: 0; }
}

.wos-ai-node {
    animation: wos-ai-node-breathe 2s ease-in-out infinite alternate;
}

.wos-ai-node.n2 { animation-delay: 0.5s; }
.wos-ai-node.n3 { animation-delay: 1s; }
.wos-ai-node.n4 { animation-delay: 1.5s; }

@keyframes wos-ai-node-breathe {
    0% { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.2); opacity: 1; }
}

/* --- Card 3: Sales Agent (Lead Funnel + Target Pulse + Conversion Check) --- */
.wos-card-sales .wos-product-icon-wrapper {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(248, 113, 113, 0.15) 100%);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.18);
}

.wos-sales-lead-packet {
    animation: wos-sales-lead-drop 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes wos-sales-lead-drop {
    0% { transform: translateY(-10px); opacity: 0; }
    20% { opacity: 1; }
    55% { transform: translateY(15px); opacity: 1; }
    65% { transform: translateY(15px) scale(0); opacity: 0; }
    100% { transform: translateY(15px) scale(0); opacity: 0; }
}

.wos-sales-ring-pulse {
    animation: wos-sales-pulse 3.2s ease-out infinite;
    transform-origin: 24px 24px;
}

@keyframes wos-sales-pulse {
    0% { transform: scale(0.8); opacity: 0.8; }
    70% { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1.3); opacity: 0; }
}

.wos-sales-check {
    animation: wos-sales-check-pop 3.2s ease-in-out infinite;
}

@keyframes wos-sales-check-pop {
    0%, 55% { opacity: 0; transform: scale(0); }
    70% { opacity: 1; transform: scale(1.2); }
    85% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}

/* --- Card 4: Live Call (Telephony Waves + Audio Equalizer Bounce) --- */
.wos-card-call .wos-product-icon-wrapper {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.15) 0%, rgba(56, 189, 248, 0.15) 100%);
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.18);
}

.wos-call-wave.w1 { animation: wos-call-arc 2.2s ease-in-out infinite; }
.wos-call-wave.w2 { animation: wos-call-arc 2.2s ease-in-out infinite 0.35s; }
.wos-call-wave.w3 { animation: wos-call-arc 2.2s ease-in-out infinite 0.7s; }

@keyframes wos-call-arc {
    0% { opacity: 0.15; transform: scale(0.9); }
    50% { opacity: 0.9; transform: scale(1.05); }
    100% { opacity: 0.15; transform: scale(0.9); }
}

.wos-eq-bar.b1 { animation: wos-call-eq 1.4s ease-in-out infinite alternate; transform-origin: 12px 44px; }
.wos-eq-bar.b2 { animation: wos-call-eq 1.4s ease-in-out infinite 0.25s alternate; transform-origin: 18px 44px; }
.wos-eq-bar.b3 { animation: wos-call-eq 1.4s ease-in-out infinite 0.5s alternate; transform-origin: 24px 44px; }
.wos-eq-bar.b4 { animation: wos-call-eq 1.4s ease-in-out infinite 0.75s alternate; transform-origin: 30px 44px; }
.wos-eq-bar.b5 { animation: wos-call-eq 1.4s ease-in-out infinite 1s alternate; transform-origin: 36px 44px; }

@keyframes wos-call-eq {
    0% { transform: scaleY(0.4); }
    100% { transform: scaleY(1.3); }
}

/* --- Card 5: AI Sales Agent (Inflowing Stream + Growth Trajectory + Beacon) --- */
.wos-card-ai-sales .wos-product-icon-wrapper {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15) 0%, rgba(192, 132, 252, 0.15) 100%);
    box-shadow: 0 4px 16px rgba(147, 51, 234, 0.18);
}

.wos-aisales-stream.st1 {
    animation: wos-stream-flow 2s linear infinite;
}

.wos-aisales-stream.st2 {
    animation: wos-stream-flow 2s linear infinite 0.7s;
}

@keyframes wos-stream-flow {
    0% { stroke-dashoffset: 16; opacity: 0.4; }
    50% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0.4; }
}

.wos-aisales-trend-line {
    animation: wos-trend-pulse 2.8s ease-in-out infinite alternate;
}

@keyframes wos-trend-pulse {
    0% { stroke: #9333ea; }
    50% { stroke: #c084fc; filter: drop-shadow(0 0 3px rgba(192, 132, 252, 0.6)); }
    100% { stroke: #9333ea; }
}

.wos-aisales-beacon {
    animation: wos-beacon-ping 1.8s ease-in-out infinite;
    transform-origin: 42px 12px;
}

@keyframes wos-beacon-ping {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 6px #c084fc); }
}

/* --- Card 6: B2B Store Management (Package Glide + Rotating Sync Arrows) --- */
.wos-card-b2b .wos-product-icon-wrapper {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15) 0%, rgba(251, 146, 60, 0.15) 100%);
    box-shadow: 0 4px 16px rgba(234, 88, 12, 0.18);
}

.wos-b2b-package {
    animation: wos-b2b-glide 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes wos-b2b-glide {
    0% { transform: translateX(-4px); opacity: 0; }
    20% { opacity: 1; }
    60% { transform: translateX(18px); opacity: 1; }
    75% { transform: translateX(18px) scale(0.8); opacity: 0; }
    100% { transform: translateX(18px) scale(0); opacity: 0; }
}

.wos-b2b-sync-spinner {
    animation: wos-b2b-rotate 3s linear infinite;
    transform-origin: 37px 13px;
}

@keyframes wos-b2b-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Card 7: Instagram Automation (Comment Bubble + DM Arrow Flight + Heart) --- */
.wos-card-social .wos-product-icon-wrapper {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.15) 0%, rgba(131, 58, 180, 0.15) 100%);
    box-shadow: 0 4px 16px rgba(225, 48, 108, 0.18);
}

.wos-insta-comment-bubble {
    animation: wos-insta-comment-drop 3.4s ease-in-out infinite;
}

@keyframes wos-insta-comment-drop {
    0% { transform: translateY(-8px); opacity: 0; }
    20% { opacity: 1; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(0); }
    60% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 0; }
}

.wos-insta-dm-arrow {
    animation: wos-insta-dm-glide 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes wos-insta-dm-glide {
    0%, 45% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    55% { opacity: 1; transform: translate(6px, -6px) scale(1); }
    80% { opacity: 1; transform: translate(16px, -14px) scale(1.1); }
    90% { opacity: 0; transform: translate(20px, -18px) scale(0.6); }
    100% { opacity: 0; }
}

.wos-insta-heart {
    animation: wos-insta-heart-beat 3.4s ease-in-out infinite;
    transform-origin: 24px 9px;
}

@keyframes wos-insta-heart-beat {
    0%, 75% { opacity: 0; transform: scale(0.5); }
    82% { opacity: 1; transform: scale(1.3); }
    92% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.8); }
}

/* --- Card 8: Live Analysis (Bouncing Bar Chart + Ascending Trend + Apex Beacon) --- */
.wos-card-analysis .wos-product-icon-wrapper {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.15) 0%, rgba(14, 165, 233, 0.15) 100%);
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.18);
}

.wos-an-bar.b1 { animation: wos-an-bar-bounce 2s ease-in-out infinite; transform-origin: 14px 34px; }
.wos-an-bar.b2 { animation: wos-an-bar-bounce 2s ease-in-out infinite 0.3s; transform-origin: 20px 34px; }
.wos-an-bar.b3 { animation: wos-an-bar-bounce 2s ease-in-out infinite 0.6s; transform-origin: 26px 34px; }
.wos-an-bar.b4 { animation: wos-an-bar-bounce 2s ease-in-out infinite 0.9s; transform-origin: 32px 34px; }

@keyframes wos-an-bar-bounce {
    0%, 100% { transform: scaleY(0.65); }
    50% { transform: scaleY(1.15); }
}

.wos-an-beacon-pulse {
    animation: wos-an-pulse 2s ease-out infinite;
    transform-origin: 32px 14px;
}

@keyframes wos-an-pulse {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

.wos-an-trend {
    animation: wos-an-trend-glow 2.5s ease-in-out infinite alternate;
}

@keyframes wos-an-trend-glow {
    0% { opacity: 0.8; stroke-width: 2.2; }
    100% { opacity: 1; stroke-width: 2.6; }
}

/* ==========================================================================
   RESPONSIVE LAYOUT BREAKPOINTS
   ========================================================================== */

/* Large Tablets & Small Desktops (Exact 4 Columns) */
@media (max-width: 1199px) {
    .wos-products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 18px;
    }
    .wos-product-card {
        padding: 24px 16px 20px 16px;
        min-height: 340px;
    }
    .wos-product-name {
        font-size: 14.5px;
    }
    .wos-products-title {
        font-size: 30px;
    }
}

/* Tablets (2 Columns Equal Width, 4 Rows) */
@media (max-width: 991px) {
    .wos-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px;
        max-width: 720px;
        margin: 32px auto 0 auto;
    }
    .wos-products-section {
        padding: 56px 0 48px 0;
    }
    .wos-products-title {
        font-size: 26px;
    }
}

/* Dynamic Heading Breakpoint for Tablets and Mobile */
@media (max-width: 768px) {
    h2.wos-products-title,
    #wosDynamicHeading.wos-products-title,
    .wos-products-title {
        font-size: clamp(22px, 5.5vw, 28px) !important;
        line-height: 1.3 !important;
    }
    .wos-heading-fixed-prefix {
        display: block;
        margin-bottom: 4px;
    }
    .wos-dynamic-phrase-wrapper {
        display: block;
        text-align: center;
        min-width: 0 !important;
        width: 100%;
    }
    .wos-dynamic-phrase {
        display: inline-block;
        text-align: center;
    }
}

/* Mobile Devices (1 Column Centered, Zero Overflow) */
@media (max-width: 600px) {
    .wos-products-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
        max-width: 380px;
        margin: 28px auto 0 auto;
    }
    .wos-product-card {
        padding: 22px 18px 20px 18px;
        min-height: auto;
    }
    .wos-product-name {
        min-height: auto;
        margin-bottom: 8px;
    }
    .wos-product-desc {
        min-height: auto;
        margin-bottom: 14px;
    }
    h2.wos-products-title,
    #wosDynamicHeading.wos-products-title,
    .wos-products-title {
        font-size: clamp(22px, 5.5vw, 28px) !important;
        line-height: 1.3 !important;
    }
    .wos-products-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }
}

/* Reduced Motion Mode Support */
@media (prefers-reduced-motion: reduce) {
    .wos-wa-radar,
    .wos-wa-incoming-packet,
    .wos-wa-ticks,
    .wos-ai-circuit,
    .wos-ai-signal,
    .wos-ai-node,
    .wos-sales-lead-packet,
    .wos-sales-ring-pulse,
    .wos-sales-check,
    .wos-call-wave,
    .wos-eq-bar,
    .wos-aisales-stream,
    .wos-aisales-trend-line,
    .wos-aisales-beacon,
    .wos-b2b-package,
    .wos-b2b-sync-spinner,
    .wos-insta-comment-bubble,
    .wos-insta-dm-arrow,
    .wos-insta-heart,
    .wos-an-bar,
    .wos-an-beacon-pulse,
    .wos-an-trend,
    .wos-heading-glass-bar-center,
    .wos-product-card,
    .wos-product-icon-wrapper,
    .wos-product-action-btn {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}