/* Agents Page Styles — Voicerely
   Premium SaaS card design with glassmorphism and hover animations
*/

/* ========================================
   Homepage Preview Cards
   ======================================== */

/* Agents preview section wrapper */
#agents {
    background-color: var(--v-black, #020205);
    color: #a1a1aa;
    border-top: 1px solid var(--v-border, #151522);
}

.light #agents {
    background-color: #ffffff;
    color: #374151;
    border-top-color: #d1d5db;
}

/* Agents preview grid - responsive 3-column */
.agents-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
}

/* Agent preview card - premium SaaS style */
.agent-preview-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    background: var(--v-dark, #0b0b10);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.light .agent-preview-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(209, 213, 219, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* Glassmorphism overlay for dark mode */
.agent-preview-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.agent-preview-card:hover::before {
    opacity: 1;
}

/* Card hover effects - lift and orange glow */
.agent-preview-card:hover {
    transform: translateY(-8px);
    border-color: var(--v-orange, #f97316);
    box-shadow: 0 20px 40px rgba(249, 115, 22, 0.15);
}

.light .agent-preview-card:hover {
    box-shadow: 0 20px 40px rgba(249, 115, 22, 0.25);
}

/* ========================================
   Meet Your AI Team Section (index.html)
   ======================================== */

/* Section header */
#ai-employees .section-header {
    text-align: center;
    margin-bottom: 48px;
}

/* Center the cards grid */
#ai-employees .grid {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

#ai-employees .pill-tag {
    display: inline-block;
    background: rgba(249, 115, 22, 0.15);
    color: #F97316;
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

#ai-employees .section-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

#ai-employees .section-header p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* AI Team Card - override Tailwind classes */
#ai-employees .group {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 420px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#ai-employees .group:hover {
    border-color: rgba(249, 115, 22, 0.4) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(249, 115, 22, 0.1) !important;
    transform: translateY(-8px) !important;
}

/* Card icon container - override Tailwind */
#ai-employees .w-16.h-16.rounded-2xl {
    width: 64px !important;
    height: 64px !important;
    border-radius: 16px !important;
    background: rgba(249, 115, 22, 0.1) !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 24px !important;
    transition: all 0.3s ease !important;
}

#ai-employees .group:hover .w-16.h-16.rounded-2xl {
    background: rgba(249, 115, 22, 0.2) !important;
    border-color: rgba(249, 115, 22, 0.4) !important;
}

#ai-employees .w-16.h-16.rounded-2xl svg {
    width: 28px !important;
    height: 28px !important;
    color: #F97316 !important;
    stroke-width: 2 !important;
}

/* Card content styling */
#ai-employees .group h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: white !important;
    margin-bottom: 8px !important;
}

#ai-employees .group .text-gray-500 {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-bottom: 24px !important;
}

/* Card CTA */
#ai-employees .mt-auto.inline-flex.items-center.gap-2.text-orange-500 {
    margin-top: auto !important;
    color: #F97316 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.3s ease !important;
}

#ai-employees .mt-auto.inline-flex.items-center.gap-2.text-orange-500:hover {
    color: #FB923C !important;
}

/* CTA arrow animation - shift right 4px on hover */
#ai-employees .mt-auto.inline-flex.items-center.gap-2.text-orange-500 span {
    transition: transform 0.3s ease !important;
}

#ai-employees .mt-auto.inline-flex.items-center.gap-2.text-orange-500:hover span {
    transform: translateX(4px) !important;
}

/* Explore button */
#ai-employees .inline-flex.items-center.gap-2.px-8.py-4.rounded-full.border-2.border-orange-500.text-orange-500 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px 40px !important;
    border-radius: 9999px !important;
    border: 2px solid #F97316 !important;
    color: #F97316 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}

#ai-employees .inline-flex.items-center.gap-2.px-8.py-4.rounded-full.border-2.border-orange-500.text-orange-500:hover {
    background: rgba(249, 115, 22, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Explore button margin-top increased to 48px */
#ai-employees .text-center.mt-12 {
    margin-top: 48px !important;
}

/* Stagger-fade scroll animation for cards */
#ai-employees .group {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#ai-employees .group.animate-in {
    opacity: 1;
    transform: translateY(0);
}

#ai-employees .group[data-card-index="0"].animate-in { transition-delay: 0ms; }
#ai-employees .group[data-card-index="1"].animate-in { transition-delay: 150ms; }
#ai-employees .group[data-card-index="2"].animate-in { transition-delay: 300ms; }

/* Sound wave animation */
.sound-wave {
    animation: soundWavePulse 2s ease-in-out infinite;
}

.sound-wave:nth-of-type(1) { animation-delay: 0s; }
.sound-wave:nth-of-type(2) { animation-delay: 0.3s; }

@keyframes soundWavePulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* Coin animation */
.coin {
    animation: coinDrop 3s ease-in-out infinite;
}

@keyframes coinDrop {
    0% { transform: translateY(0); }
    45% { transform: translateY(16px); }
    50% { transform: translateY(16px) scale(0.8); }
    51% { transform: translateY(16px) scale(1); }
    100% { transform: translateY(0); }
}

/* Revive arrow rotation */
.revive-arrow {
    transform-origin: center;
    animation: reviveRotate 8s linear infinite;
}

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

/* Stagger delays for scroll animation */
.ai-team-card:nth-child(1) { transition-delay: 0ms; }
.ai-team-card:nth-child(2) { transition-delay: 150ms; }
.ai-team-card:nth-child(3) { transition-delay: 300ms; }

/* Small orange badge */
.agent-preview-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--v-orange, #f97316);
    color: #1a0a02;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Agent preview name - large */
.agent-preview-name {
    font-size: 22px;
    font-weight: 700;
    color: #f5f5f6;
    margin-bottom: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: color 0.3s ease;
}

.light .agent-preview-name {
    color: #111827;
}

/* Agent preview tagline */
.agent-preview-tagline {
    font-size: 14px;
    color: #a1a1aa;
    margin-bottom: 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: color 0.3s ease;
}

.light .agent-preview-tagline {
    color: #6b7280;
}

/* Agent preview arrow - slide animation */
.agent-preview-arrow {
    width: 16px;
    height: 16px;
    color: var(--v-orange, #f97316);
    transition: transform 0.3s ease;
    margin-top: auto;
}

.agent-preview-card:hover .agent-preview-arrow {
    transform: translateX(6px);
}

/* CTA button for agents section */
.agents-cta-btn {
    display: inline-block;
    padding: 14px 32px;
    background: transparent;
    border: 1px solid var(--v-orange, #f97316);
    color: var(--v-orange, #f97316);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: all 0.3s ease;
}

.agents-cta-btn:hover {
    background: var(--v-orange, #f97316);
    color: #1a0a02;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(249, 115, 22, 0.3);
}

/* Responsive for preview cards */
@media (max-width: 1024px) {
    .agents-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .agents-preview-grid {
        grid-template-columns: 1fr;
    }
    
    .agent-preview-card {
        padding: 28px 20px;
    }
}

/* ========================================
   Voicerely Agents Page Styles
   ======================================== */

/* Hero section */
.agents-hero {
    padding: 80px 24px 60px;
    text-align: center;
}

.agents-hero-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 999px;
    color: var(--v-orange, #f97316);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.agents-hero-heading {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f5f5f6;
    margin: 0 0 16px;
    line-height: 1.1;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .agents-hero-heading {
    color: #111827;
}

.agents-hero-subheading {
    font-size: 1.125rem;
    color: #a1a1aa;
    margin: 0 auto 32px;
    max-width: 600px;
    line-height: 1.6;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .agents-hero-subheading {
    color: #6b7280;
}

/* Agent cards section */
.agents-cards-section {
    padding: 0 24px 80px;
}

.agents-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

/* Agent card - detailed */
.agent-card {
    background: var(--v-dark, #131316);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.light .agent-card {
    background: #ffffff;
    border-color: #d1d5db;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.agent-card:hover {
    transform: translateY(-8px);
    border-color: rgba(249, 115, 22, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(249, 115, 22, 0.1);
}

.light .agent-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 30px rgba(249, 115, 22, 0.1);
}

/* Card icon container - hover effect */
.agent-card:hover .agent-card-icon {
    background: rgba(249, 115, 22, 0.2);
    border-color: rgba(249, 115, 22, 0.4);
}

/* Badge hover effect */
.agent-card:hover .agent-card-badge {
    background: rgba(249, 115, 22, 0.25);
}

/* Agent card icon container - match home page styling */
.agent-card-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--v-orange, #f97316);
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.agent-card-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.agent-card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--v-orange, #f97316);
    color: #1a0a02;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.agent-card-name {
    font-size: 24px;
    font-weight: 700;
    color: #f5f5f6;
    margin-bottom: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .agent-card-name {
    color: #111827;
}

.agent-card-tagline {
    font-size: 16px;
    color: #a1a1aa;
    margin-bottom: 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .agent-card-tagline {
    color: #6b7280;
}

.agent-card-description {
    font-size: 14px;
    color: #a1a1aa;
    line-height: 1.6;
    margin-bottom: 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .agent-card-description {
    color: #6b7280;
}

.agent-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.agent-card-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #a1a1aa;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.agent-card-features li:last-child {
    border-bottom: none;
}

.light .agent-card-features li {
    color: #6b7280;
    border-bottom-color: #e5e7eb;
}

.agent-card-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--v-orange, #f97316);
}

/* Feature category label */
.agent-card-feature-category {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 24px;
    margin-bottom: 8px;
    text-align: left;
}

/* Feature divider */
.agent-card-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin: 16px 0;
}

/* Pricing hint */
.agent-card-pricing {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    margin-top: 12px;
}

/* CTA button - full width, transparent with orange border */
.agent-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 2px solid #F97316;
    color: #F97316;
    border-radius: 12px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: all 0.3s ease;
    margin-top: auto;
}

.agent-card-cta:hover {
    background: rgba(249, 115, 22, 0.15);
}

.light .agent-card-cta {
    border-color: var(--v-orange, #f97316);
    color: var(--v-orange, #f97316);
}

.light .agent-card-cta:hover {
    background: rgba(249, 115, 22, 0.1);
}

.agent-card-cta-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.agent-card-cta:hover .agent-card-cta-arrow {
    transform: translateX(4px);
}

/* Agent Card Actions - Hear button and Learn More accordion */
.agent-card-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.agent-card-hear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--v-orange, #f97316);
    color: var(--v-orange, #f97316);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.agent-card-hear:hover {
    background: var(--v-orange, #f97316);
    color: #1a0a02;
}

.agent-card-hear svg {
    width: 14px;
    height: 14px;
}

.agent-card-details {
    margin-top: 4px;
}

.agent-card-learnmore {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #a1a1aa;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    transition: color 0.2s ease;
}

.agent-card-learnmore:hover {
    color: var(--v-orange, #f97316);
}

.agent-card-learnmore::-webkit-details-marker {
    display: none;
}

.agent-card-learnmore svg {
    width: 12px;
    height: 12px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.agent-card-learnmore:hover svg {
    opacity: 1;
}

.agent-card-detail {
    margin-top: 12px;
    padding: 12px 0 0;
    font-size: 13px;
    color: #a1a1aa;
    line-height: 1.5;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .agent-card-detail {
    color: #6b7280;
}

.agent-card-detail::before {
    content: '';
    display: block;
    width: 16px;
    height: 2px;
    background: var(--v-orange, #f97316);
    margin-bottom: 8px;
}

/* Comparison section */
.agents-compare-section {
    padding: 80px 24px;
    border-top: 1px solid var(--v-border, #151522);
}

.light .agents-compare-section {
    border-top-color: #d1d5db;
}

.agents-compare-heading {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f5f5f6;
    margin: 0 0 8px;
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .agents-compare-heading {
    color: #111827;
}

.agents-compare-subheading {
    font-size: 1rem;
    color: #a1a1aa;
    margin: 0 0 40px;
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .agents-compare-subheading {
    color: #6b7280;
}

.agents-compare-table {
    max-width: 900px;
    margin: 0 auto;
    background: var(--v-dark, #131316);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.light .agents-compare-table {
    background: #ffffff;
    border-color: #d1d5db;
}

.agents-compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.agents-compare-row:last-child {
    border-bottom: none;
}

.agents-compare-row.header {
    background: rgba(255, 255, 255, 0.04);
    font-weight: 600;
    color: #f5f5f6;
}

.light .agents-compare-row.header {
    background: rgba(0, 0, 0, 0.02);
    color: #111827;
}

.agents-compare-label {
    color: #a1a1aa;
    font-size: 14px;
}

.light .agents-compare-label {
    color: #374151;
}

.agents-compare-value {
    color: var(--v-orange, #f97316);
    font-weight: 600;
    font-size: 14px;
}

/* Integrations section */
.agents-integrations-section {
    padding: 80px 24px;
    border-top: 1px solid var(--v-border, #151522);
}

.light .agents-integrations-section {
    border-top-color: #d1d5db;
}

.agents-integrations-heading {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f5f5f6;
    margin: 0 0 8px;
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .agents-integrations-heading {
    color: #111827;
}

.agents-integrations-subheading {
    font-size: 1rem;
    color: #a1a1aa;
    margin: 0 0 40px;
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .agents-integrations-subheading {
    color: #6b7280;
}

/* CTA section */
.agents-cta-section {
    padding: 80px 24px;
    border-top: 1px solid var(--v-border, #151522);
}

.light .agents-cta-section {
    border-top-color: #d1d5db;
}

.agents-cta-wrapper {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: 48px 24px;
    background: var(--v-dark, #131316);
    border-radius: 16px;
}

.light .agents-cta-wrapper {
    background: #f3f4f6;
}

.agents-cta-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f5f5f6;
    margin: 0 0 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .agents-cta-heading {
    color: #111827;
}

.agents-cta-subheading {
    font-size: 1rem;
    color: #a1a1aa;
    margin: 0 0 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .agents-cta-subheading {
    color: #6b7280;
}

.agents-cta-button {
    display: inline-block;
    padding: 14px 32px;
    background: var(--v-orange, #f97316);
    color: #1a0a02;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: all 0.3s ease;
}

.agents-cta-button:hover {
    background: #e0650f;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(249, 115, 22, 0.3);
}

/* ========================================
   Trust & Privacy Section (voicerelyagents.html)
   ======================================== */

/* Trust matrix grid */
.trust-matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

/* Trust matrix card */
.trust-matrix-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
}

.trust-matrix-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    color: #F97316;
}

.trust-matrix-icon svg {
    width: 100%;
    height: 100%;
}

/* Trust matrix title - big white title */
.trust-matrix-title {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin: 16px 0 8px;
    text-align: center;
}

/* Trust matrix subtitle - orange text */
.trust-matrix-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #F97316;
    margin: 0 0 8px;
    text-align: center;
}

.trust-matrix-copy {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .trust-matrix-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Hidden Cost of Missed Calls Section
   ======================================== */

.hidden-cost-section {
    padding: 120px 24px;
    border-top: 1px solid var(--v-border, #151522);
    position: relative;
}

.light .hidden-cost-section {
    border-top-color: #d1d5db;
}

/* Subtle connecting line behind the cards */
.hidden-cost-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(249, 115, 22, 0.15) 20%, 
        rgba(249, 115, 22, 0.15) 80%, 
        transparent 100%);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
}

.hidden-cost-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hidden-cost-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hidden-cost-card {
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.03) 0%, 
        rgba(255, 255, 255, 0.01) 50%, 
        rgba(249, 115, 22, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(24px);
    animation: fadeInUp 0.6s ease forwards;
}

.hidden-cost-card.animate {
    animation-delay: calc(var(--animation-delay, 0) * 150ms);
}

.light .hidden-cost-card {
    background: linear-gradient(180deg, 
        #ffffff 0%, 
        #fafafa 50%, 
        #fff7f0 100%);
    border-color: #e5e7eb;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.hidden-cost-card:hover {
    transform: translateY(-8px);
    border-color: var(--v-orange, #f97316);
    box-shadow: 0 24px 48px rgba(249, 115, 22, 0.12), 
                0 0 0 1px rgba(249, 115, 22, 0.1);
}

.light .hidden-cost-card:hover {
    box-shadow: 0 24px 48px rgba(249, 115, 22, 0.1), 
                0 0 0 1px rgba(249, 115, 22, 0.15);
}

/* Icon container with gradient background */
.hidden-cost-icon-container {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, 
        rgba(249, 115, 22, 0.12) 0%, 
        rgba(249, 115, 22, 0.06) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.hidden-cost-card:hover .hidden-cost-icon-container {
    background: linear-gradient(135deg, 
        rgba(249, 115, 22, 0.2) 0%, 
        rgba(249, 115, 22, 0.1) 100%);
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.15);
}

.hidden-cost-icon-container svg {
    width: 28px;
    height: 28px;
    stroke-width: 2;
    color: var(--v-orange, #f97316);
}

/* Badge redesign - outlined/ghost style */
.hidden-cost-badge {
    display: inline-block;
    padding: 6px 14px;
    background: transparent;
    color: var(--v-orange, #f97316);
    font-size: 10px;
    font-weight: 700;
    border: 1px solid var(--v-orange, #f97316);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.hidden-cost-card:hover .hidden-cost-badge {
    background: var(--v-orange, #f97316);
    color: #1a0a02;
}

.light .hidden-cost-badge {
    border-color: var(--v-orange, #f97316);
    color: var(--v-orange, #f97316);
}

.light .hidden-cost-card:hover .hidden-cost-badge {
    background: var(--v-orange, #f97316);
    color: #ffffff;
}

.hidden-cost-heading {
    font-size: 20px;
    font-weight: 700;
    color: #f5f5f6;
    margin: 0 0 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .hidden-cost-heading {
    color: #111827;
}

.hidden-cost-description {
    font-size: 14px;
    color: #a1a1aa;
    line-height: 1.6;
    margin: 0 0 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .hidden-cost-description {
    color: #6b7280;
}

.hidden-cost-footer {
    font-size: 12px;
    color: var(--v-orange, #f97316);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.hidden-cost-cta {
    text-align: center;
    margin-top: 48px;
}

.hidden-cost-cta-heading {
    font-size: 18px;
    font-weight: 600;
    color: #f5f5f6;
    margin: 0 0 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .hidden-cost-cta-heading {
    color: #111827;
}

.hidden-cost-cta-subtext {
    font-size: 14px;
    color: #a1a1aa;
    margin: 0 0 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.light .hidden-cost-cta-subtext {
    color: #6b7280;
}

.hidden-cost-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--v-orange, #f97316);
    color: #1a0a02;
    font-size: 14px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hidden-cost-cta-button:hover {
    background: #e0650f;
}

@media (max-width: 1024px) {
    .hidden-cost-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hidden-cost-section::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .hidden-cost-section {
        padding: 80px 24px;
    }
    
    .hidden-cost-section::before {
        display: none;
    }
}

@media (max-width: 640px) {
    .hidden-cost-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Hidden Cost Section — Redesigned (v2)
   ======================================== */

/* Background: subtle dot grid pattern */
.hidden-cost-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(249, 115, 22, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* Animated gradient line at top - draws on scroll */
.hidden-cost-gradient-line {
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--v-orange, #f97316) 50%, 
        transparent 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.hidden-cost-section.scrolled .hidden-cost-gradient-line {
    transform: scaleX(1);
}

/* Live Counter (above cards) */
.hidden-cost-counter-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: #a1a1aa;
}

.hidden-cost-counter-label,
.hidden-cost-counter-suffix {
    color: #a1a1aa;
    font-weight: 400;
}

.hidden-cost-counter-value {
    color: var(--v-orange, #f97316);
    font-weight: 700;
    font-size: 18px;
    text-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
    min-width: 60px;
    text-align: right;
}

/* Badge pill breathing glow */
.hidden-cost-badge-pill {
    animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 rgba(249, 115, 22, 0); }
    50% { box-shadow: 0 0 20px rgba(249, 115, 22, 0.3); }
}

/* ===== ICON CONTAINER REDESIGN ===== */
/* 80x80px rounded-square container with gradient bg, border, hover glow */
.hidden-cost-icon-container {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: linear-gradient(135deg, 
        rgba(249, 115, 22, 0.1) 0%, 
        rgba(249, 115, 22, 0.05) 100%);
    border: 1px solid rgba(249, 115, 22, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Idle floating animation */
.hidden-cost-icon-container {
    animation: iconFloat 3s ease-in-out infinite;
}

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

/* Hover state: brighten bg, glow border */
.hidden-cost-card:hover .hidden-cost-icon-container {
    background: linear-gradient(135deg, 
        rgba(249, 115, 22, 0.18) 0%, 
        rgba(249, 115, 22, 0.1) 100%);
    border-color: rgba(249, 115, 22, 0.4);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}

/* Icon inside container - 64x64 fills container */
.hidden-cost-icon {
    width: 64px;
    height: 64px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ICON-SPECIFIC ANIMATIONS (CSS-only, GPU-accelerated) ===== */

/* Card 1: Dollar bills flutter up on hover */
.hidden-cost-card[data-card-index="0"]:hover .bill {
    animation: billFlutter 0.6s ease-out infinite;
}

/* Stagger the bills */
.bill-1 { animation-delay: 0ms; }
.bill-2 { animation-delay: 100ms; }
.bill-3 { animation-delay: 200ms; }

@keyframes billFlutter {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    25% { transform: translateY(-8px) rotate(-5deg); opacity: 0.9; }
    50% { transform: translateY(-16px) rotate(5deg); opacity: 0.7; }
    75% { transform: translateY(-8px) rotate(-3deg); opacity: 0.9; }
    100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

/* Card 2: Sound waves pulse on hover */
.hidden-cost-card[data-card-index="1"]:hover .sound-waves path {
    animation: soundWavePulse 1.2s ease-out infinite;
}

.sound-waves path:nth-child(1) { animation-delay: 0ms; }
.sound-waves path:nth-child(2) { animation-delay: 150ms; }
.sound-waves path:nth-child(3) { animation-delay: 300ms; }

@keyframes soundWavePulse {
    0% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.4); opacity: 0.1; }
    100% { transform: scale(1); opacity: 0.6; }
}

/* Also pulse the active AI circle */
.hidden-cost-card[data-card-index="1"]:hover circle[cx="44"]:last-of-type {
    animation: activePulse 1.5s ease-in-out infinite;
}

@keyframes activePulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 0.5; }
}

/* Card 3: Coins fall faster on hover, gold→gray */
.hidden-cost-card[data-card-index="2"]:hover .fall-coin {
    animation: coinFall 0.8s ease-in infinite;
}

.fall-coin.fall-1 { animation-delay: 0ms; }
.fall-coin.fall-2 { animation-delay: 120ms; }
.fall-coin.fall-3 { animation-delay: 240ms; }
.fall-coin.fall-4 { animation-delay: 360ms; }
.fall-coin.fall-5 { animation-delay: 480ms; }

@keyframes coinFall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; fill: #FBBF24; }
    50% { transform: translateY(10px) rotate(180deg); opacity: 0.8; fill: #9CA3AF; }
    100% { transform: translateY(40px) rotate(360deg); opacity: 0; fill: #4B5563; }
}

/* Bottom gray coins accumulate on hover */
.hidden-cost-card[data-card-index="2"]:hover .gray-coin {
    animation: coinAccumulate 0.6s ease-out forwards;
}

.gray-coin.gc-1 { animation-delay: 200ms; }
.gray-coin.gc-2 { animation-delay: 320ms; }
.gray-coin.gc-3 { animation-delay: 440ms; }
.gray-coin.gc-4 { animation-delay: 560ms; }
.gray-coin.gc-5 { animation-delay: 680ms; }

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

/* Top gold coins deplete on hover */
.hidden-cost-card[data-card-index="2"]:hover .coin {
    animation: coinDeplete 1s ease-in forwards;
}

.coin.coin-1 { animation-delay: 100ms; }
.coin.coin-2 { animation-delay: 220ms; }
.coin.coin-3 { animation-delay: 340ms; }
.coin.coin-4 { animation-delay: 460ms; }
.coin.coin-5 { animation-delay: 580ms; }

@keyframes coinDeplete {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0); opacity: 0; }
}

/* ===== CARD HOVER SYSTEM ===== */
.hidden-cost-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hidden-cost-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(249, 115, 22, 0.15);
    border-color: var(--v-orange, #f97316);
}

.light .hidden-cost-card:hover {
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 0 30px rgba(249, 115, 22, 0.2);
}

/* ===== SCROLL-TRIGGERED ENTRANCE (handled by JS IntersectionObserver) ===== */
.hidden-cost-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hidden-cost-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays via JS --animation-delay var */
.hidden-cost-card[data-card-index="0"].visible { transition-delay: 0ms; }
.hidden-cost-card[data-card-index="1"].visible { transition-delay: 150ms; }
.hidden-cost-card[data-card-index="2"].visible { transition-delay: 300ms; }

/* ===== CTA BUTTON IMPROVEMENTS ===== */
.hidden-cost-cta-button {
    position: relative;
    overflow: hidden;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 600;
}

.hidden-cost-cta-button .cta-arrow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hidden-cost-cta-button:hover .cta-arrow {
    transform: translateX(6px);
}

/* Ripple effect (CSS-only) */
.hidden-cost-cta-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    pointer-events: none;
}

.hidden-cost-cta-button:active::before {
    transform: scale(2.5);
    opacity: 1;
    transition: transform 0s, opacity 0.1s;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .hidden-cost-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hidden-cost-section::before {
        display: none;
    }
    
    .hidden-cost-icon-container {
        width: 72px;
        height: 72px;
    }
    
    .hidden-cost-icon {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 768px) {
    .hidden-cost-section {
        padding: 80px 24px;
    }
    
    .hidden-cost-section::before {
        display: none;
    }
    
    .hidden-cost-counter-wrap {
        flex-wrap: wrap;
        text-align: center;
        gap: 6px;
    }
    
    .hidden-cost-counter-value {
        font-size: 16px;
    }
}

@media (max-width: 640px) {
    .hidden-cost-grid {
        grid-template-columns: 1fr;
    }
    
    .hidden-cost-icon-container {
        width: 64px;
        height: 64px;
    }
    
    .hidden-cost-icon {
        width: 48px;
        height: 48px;
    }
    
    .hidden-cost-cta-button {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   ROI Calculator Section - Premium Dashboard
   ======================================== */

.roi-calculator-section {
    padding: 120px 24px;
    border-top: 1px solid var(--v-border, #151522);
}

.light .roi-calculator-section {
    border-top-color: #d1d5db;
}

.roi-calculator-container {
    max-width: 1200px;
    margin: 0 auto;
}

.roi-calculator-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 40px;
}

/* Configuration Panel */
.roi-config-panel {
    background: var(--v-dark, #131316);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.light .roi-config-panel {
    background: #ffffff;
    border-color: #d1d5db;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.roi-config-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.roi-config-label {
    font-size: 14px;
    font-weight: 500;
    color: #a1a1aa;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ========================================
   Trust & Privacy Section (voicerelyagents.html)
   ======================================== */

/* Trust matrix grid */
.trust-matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

/* Trust matrix card */
.trust-matrix-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
}

.trust-matrix-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    color: #F97316;
}

.trust-matrix-icon svg {
    width: 100%;
    height: 100%;
}

/* Trust matrix title - big white title */
.trust-matrix-title {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin: 16px 0 8px;
    text-align: center;
}

/* Trust matrix subtitle - orange text */
.trust-matrix-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #F97316;
    margin: 0 0 8px;
    text-align: center;
}

.trust-matrix-copy {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .trust-matrix-grid {
        grid-template-columns: 1fr;
    }
}