/* Professional Feature Icons for VoicePrompt */

.feature-icon-pro {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    transition: all 0.3s ease;
}

.feature-icon-pro::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    transition: all 0.3s ease;
}

.feature-icon-pro:hover::before {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    transform: scale(1.05);
}

/* Universal/Seamless Icon */
.icon-universal {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.icon-universal .icon-shape {
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 8px;
    position: relative;
    z-index: 2;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* AI-Powered Icon */
.icon-ai {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.icon-ai .icon-shape {
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* Voice Editing Icon */
.icon-voice-editing {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
}

.icon-voice-editing .icon-shape {
    width: 28px;
    height: 28px;
    background: white;
    position: relative;
    z-index: 2;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* Lightning Fast Icon */
.icon-fast {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.icon-fast .icon-shape {
    width: 28px;
    height: 28px;
    background: white;
    position: relative;
    z-index: 2;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* Voice Control Icon */
.icon-voice-control {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.icon-voice-control .icon-shape {
    width: 28px;
    height: 28px;
    background: white;
    position: relative;
    z-index: 2;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* Security Icon */
.icon-security {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.icon-security .icon-shape {
    width: 28px;
    height: 28px;
    background: white;
    position: relative;
    z-index: 2;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* Hover effects for feature cards */
.feature-card:hover .feature-icon-pro {
    transform: translateY(-3px);
}

.feature-card:hover .feature-icon-pro::before {
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.15);
}

/* Enhanced hover glow effects for each icon */
.feature-card:hover .icon-universal::before {
    background: linear-gradient(135deg, #7c7ce6 0%, #8966c4 100%);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6);
}

.feature-card:hover .icon-ai::before {
    background: linear-gradient(135deg, #22d994 0%, #0ea677 100%);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.6);
}

.feature-card:hover .icon-voice-editing::before {
    background: linear-gradient(135deg, #fde047 0%, #eab308 100%);
    box-shadow: 0 8px 30px rgba(234, 179, 8, 0.6);
}

.feature-card:hover .icon-fast::before {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.6);
}

.feature-card:hover .icon-voice-control::before {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    box-shadow: 0 8px 30px rgba(249, 115, 22, 0.6);
}

.feature-card:hover .icon-security::before {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
    box-shadow: 0 8px 30px rgba(6, 182, 212, 0.6);
}

/* Subtle glow effects for each icon */
.icon-universal::before {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.icon-ai::before {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
}

.icon-voice-editing::before {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
    box-shadow: 0 4px 20px rgba(234, 179, 8, 0.3);
}

.icon-fast::before {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

.icon-voice-control::before {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.3);
}

.icon-security::before {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
}

/* Use Case Icons - Professional & Expressive */
.use-case-icon-pro {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    position: relative;
    transition: all 0.3s ease;
}

/* Code Comments Icon */
.icon-code-comments {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 8h10m0 0V6a2 2 0 00-2-2H9a2 2 0 00-2 2v2m10 0v10a2 2 0 01-2 2H9a2 2 0 01-2-2V8m10 0H7m5 3l2-2-2-2m-5 4l-2-2 2-2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
}

/* AI Prompts Icon */
.icon-ai-prompts {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

/* Documentation Icon */
.icon-documentation {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: #3b82f6; /* Solid blue instead of gradient */
}

/* Code Reviews Icon */
.icon-code-reviews {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Technical Emails Icon */
.icon-tech-emails {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* RSI Relief Icon */
.icon-rsi-relief {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

/* Brainstorming Icon */
.icon-brainstorming {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

/* Design Feedback Icon */
.icon-design-feedback {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}

/* Form Filling Icon */
.icon-form-filling {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

/* Translation Work Icon */
.icon-translation {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
}

/* Hover effects for use case icons */
.use-case:hover .use-case-icon-pro {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.use-case:hover .icon-code-comments {
    background: linear-gradient(135deg, #22d994 0%, #047857 100%);
    filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.4));
}

.use-case:hover .icon-ai-prompts {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.4));
}

.use-case:hover .icon-documentation {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
    filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.4));
}

.use-case:hover .icon-code-reviews {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    filter: drop-shadow(0 4px 12px rgba(245, 158, 11, 0.4));
}

.use-case:hover .icon-tech-emails {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.4));
}

.use-case:hover .icon-rsi-relief {
    background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
    filter: drop-shadow(0 4px 12px rgba(236, 72, 153, 0.4));
}

.use-case:hover .icon-brainstorming {
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
    filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.4));
}

.use-case:hover .icon-design-feedback {
    background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
    filter: drop-shadow(0 4px 12px rgba(168, 85, 247, 0.4));
}

.use-case:hover .icon-form-filling {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
    filter: drop-shadow(0 4px 12px rgba(6, 182, 212, 0.4));
}

.use-case:hover .icon-translation {
    background: linear-gradient(135deg, #a3e635 0%, #84cc16 100%);
    filter: drop-shadow(0 4px 12px rgba(132, 204, 22, 0.4));
}

/* Flow State Icons - Detailed & Expressive */
.benefit-icon-pro {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Think, Speak, Continue - Brain Icon */
.icon-brain-flow {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 3C7.58 3 4 6.58 4 11c0 2.21.9 4.21 2.35 5.65A9.93 9.93 0 0 0 12 21a9.93 9.93 0 0 0 5.65-4.35A7.98 7.98 0 0 0 20 11c0-4.42-3.58-8-8-8zm0 0v6m0 0l3-3m-3 3l-3-3'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M8.5 7.5c.83-.83 1.96-1.34 3.2-1.34s2.37.51 3.2 1.34M15.5 14.5c-.83.83-1.96 1.34-3.2 1.34s-2.37-.51-3.2-1.34'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

/* 4x Faster - Lightning Bolt Icon */
.icon-lightning-flow {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M10 6l1-1M14 8l1-1M9 17l-1 1M15 15l1 1'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Work Comfortably - Target/Precision Icon */
.icon-target-flow {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3Ccircle cx='12' cy='12' r='1' fill='currentColor'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Enhanced hover effects for flow state icons */
.benefit:hover .benefit-icon-pro {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.benefit:hover .icon-brain-flow {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    filter: drop-shadow(0 6px 16px rgba(139, 92, 246, 0.5));
}

.benefit:hover .icon-lightning-flow {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    filter: drop-shadow(0 6px 16px rgba(245, 158, 11, 0.5));
}

.benefit:hover .icon-target-flow {
    background: linear-gradient(135deg, #22d994 0%, #10b981 100%);
    filter: drop-shadow(0 6px 16px rgba(16, 185, 129, 0.5));
}

/* Subtle glow effects for flow icons */
.icon-brain-flow {
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.25);
}

.icon-lightning-flow {
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
}

.icon-target-flow {
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.25);
}

/* Workflow Step Icons - Highly Expressive */
.step-icon-pro {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

/* Traditional Workflow Icons */
/* Think (Thought Cloud) */
.icon-think {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M8 8.5c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5zM11 6c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

/* Type Slowly (Keyboard with stress) */
.icon-type-slow {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M8 16h8M6 20h12'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Lost Context (Confused/Dizzy) */
.icon-lost-context {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 8l-2 2 2 2M12 16l2-2-2-2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Frustration (Steam/Anger) */
.icon-frustration {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 1012 0v1H3v-1z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 4l1-1M16 4l-1-1M12 2v1'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}

/* VoicePrompt Workflow Icons */
/* Speak Naturally (Microphone with waves) */
.icon-speak {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M21 12c0-.5-.1-1-.2-1.5M3 12c0-.5.1-1 .2-1.5M22 9c0-.8-.2-1.5-.4-2.2M2 9c0-.8.2-1.5.4-2.2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Instant Text (Magic sparkles) */
.icon-instant {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M17 3l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* Keep Flowing (Rocket/Success) */
.icon-flowing {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 12l3 3 6-6M2 8l4 4M20 8l-4 4'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

/* Hover effects for workflow icons */
.workflow-step:hover .step-icon-pro {
    transform: scale(1.15);
    filter: brightness(1.3);
}

.workflow-step:hover .icon-think {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.4));
}

.workflow-step:hover .icon-type-slow {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    filter: drop-shadow(0 4px 12px rgba(245, 158, 11, 0.4));
}

.workflow-step:hover .icon-lost-context {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.4));
}

.workflow-step:hover .icon-frustration {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    filter: drop-shadow(0 4px 12px rgba(220, 38, 38, 0.5));
}

.workflow-step:hover .icon-speak {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.4));
}

.workflow-step:hover .icon-instant {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.4));
}

.workflow-step:hover .icon-flowing {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.4));
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .feature-icon-pro {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        margin-bottom: 1rem;
    }
    
    .feature-icon-pro .icon-shape {
        width: 24px;
        height: 24px;
    }
    
    .use-case-icon-pro {
        width: 40px;
        height: 40px;
    }
    
    .benefit-icon-pro {
        width: 48px;
        height: 48px;
        margin-right: 0.75rem;
    }
}