/* ===================================
   Homepage Specific Styles
   =================================== */

/* Animated Background Grid */
.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.3;
    background-image: linear-gradient(rgba(16, 185, 129, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.4) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Floating Orbs - Optimized */
.floating-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: float 30s ease-in-out infinite;
    will-change: transform;
}

/* Use radial-gradient to simulate blur/glow cheaply */
.orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0) 70%);
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.orb-2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.2) 0%, rgba(52, 211, 153, 0) 70%);
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.orb-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(5, 150, 105, 0.18) 0%, rgba(5, 150, 105, 0) 70%);
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes float {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    33% {
        transform: translate3d(20px, -30px, 0) scale(1.1);
    }

    66% {
        transform: translate3d(-15px, 20px, 0) scale(0.9);
    }
}

/* Particle System */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(16, 185, 129, 0.8);
    border-radius: 50%;
    animation: particleFloat 10s linear infinite;
    will-change: transform, opacity;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

@keyframes particleFloat {
    0% {
        transform: translate3d(0, 100vh, 0) scale(0.5);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translate3d(150px, -120px, 0) scale(1.2);
        opacity: 0;
    }
}

/* Content Overlay */
.content-overlay {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Section Backgrounds */
.section-bg-dark {
    background: rgba(10, 15, 28, 0.98);
    position: relative;
    z-index: 5;
}

.section-bg-dark h2,
.section-bg-dark h3,
.section-bg-dark h4 {
    color: white !important;
}

.section-bg-dark p,
.section-bg-dark span,
.section-bg-dark li {
    color: rgba(255, 255, 255, 0.8) !important;
}

.section-bg-light {
    background: rgba(255, 255, 255, 0.98);
    position: relative;
    z-index: 5;
}

.hero-gradient {
    /* Make gradient much subtler: transparent at edges, slight tint in middle */
    background:
        radial-gradient(ellipse 78% 22% at 50% 100%,
            rgba(16, 185, 129, 0.1) 0%,
            rgba(20, 184, 166, 0.05) 48%,
            transparent 78%),
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(236, 253, 245, 0.8) 80%,
            rgba(255, 255, 255, 0.5) 100%);
    position: relative;
    z-index: 5;
    padding-bottom: 1.75rem;
    /* Remove blur completely to let grid/particles show through clearly */
    backdrop-filter: none;
}

/* Tool Card */
.tool-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(229, 231, 235, 0.5) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
}

/* Upload Zone */
.upload-zone {
    transition: all 0.2s ease !important;
}

.upload-zone:hover {
    border-color: var(--kiki-green) !important;
    background-color: rgba(16, 185, 129, 0.05) !important;
}

.upload-option {
    transition: all 0.2s ease !important;
}

.upload-option:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.1) !important;
}

/* Model Card */
.model-card {
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.model-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12) !important;
}

.model-card.selected {
    border-color: var(--kiki-green) !important;
    background-color: rgba(16, 185, 129, 0.02) !important;
}

/* Audio Player */
.audio-player {
    background: rgba(255, 255, 255, 0.95) !important;
}

.play-btn {
    transition: all 0.2s ease !important;
}

/* Reduce saturation for audio player colored elements to avoid visual chaos */
.audio-player .play-btn,
.audio-player div[class*="bg-"] {
    filter: saturate(0.65);
}

.audio-player div[class*="bg-gray-"],
.audio-player .play-btn.bg-gray-200 {
    /* Keep gray elements neutral/standard, don't over-desaturate if not needed, 
       though saturate(0.65) on gray does nothing, so it's fine. */
    filter: saturate(1);
}

.homepage-tts-voice-card.is-playing .homepage-tts-play-icon,
.homepage-tts-voice-card.is-playing .homepage-tts-play-icon svg {
    color: #fff !important;
    stroke: #fff !important;
}

.homepage-tts-voice-card.is-playing .homepage-tts-play-icon {
    position: relative;
    color: #fff !important;
    background-color: #059669 !important;
    border-color: #059669 !important;
}

.homepage-tts-voice-card[data-library-type="standard"].is-playing .homepage-tts-play-icon {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

.homepage-tts-voice-card.is-playing .homepage-tts-play-icon > i,
.homepage-tts-voice-card.is-playing .homepage-tts-play-icon > svg {
    opacity: 0;
}

.homepage-tts-voice-card.is-playing .homepage-tts-play-icon::before,
.homepage-tts-voice-card.is-playing .homepage-tts-play-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 3px;
    height: 12px;
    border-radius: 999px;
    background: currentColor;
    transform: translateY(-50%);
}

.homepage-tts-voice-card.is-playing .homepage-tts-play-icon::before {
    left: calc(50% - 5px);
}

.homepage-tts-voice-card.is-playing .homepage-tts-play-icon::after {
    left: calc(50% + 2px);
}


/* 3D Circular Button Style */
/* 3D Circular Button Style - Refined for Subtlety */
.btn-3d-round {
    position: relative;
    border: none;
    /* Reduced shadow intensity for a softer, less aggressive 3D look */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        /* Softer top highlight */
        inset 0 -1px 2px rgba(0, 0, 0, 0.1),
        /* Reduced internal depth */
        0 2px 4px -1px rgba(0, 0, 0, 0.1),
        /* Subtle drop shadow */
        0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Very subtle gradient overlay */
    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), transparent, rgba(0, 0, 0, 0.03));
}

.btn-3d-round:hover {
    transform: translateY(-1px) !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -1px 3px rgba(0, 0, 0, 0.12),
        0 4px 6px -1px rgba(0, 0, 0, 0.15),
        0 2px 4px -1px rgba(0, 0, 0, 0.08) !important;
    filter: brightness(1.02);
}

.btn-3d-round:active {
    transform: translateY(1px) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 1px rgba(0, 0, 0, 0.1) !important;
    filter: brightness(0.98);
}


/* CTA Section */
.cta-section {
    background-color: #020617 !important;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(30, 41, 59, 0.5);
}

/* Subtle Noise Overlay */
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.4;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

/* Single smooth ambient glow */
.cta-section::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
    background: radial-gradient(circle at center, rgba(79, 70, 229, 0.15) 0%, rgba(6, 182, 212, 0.05) 50%, transparent 70%);
    z-index: 0;
    animation: pulseGlow 8s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.95);
    }

    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Homepage Voice Design Sections */
.homepage-vd-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.homepage-vd-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.homepage-vd-glow,
.homepage-vd-flow-glow {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(70px);
}

.homepage-vd-glow-top {
    top: -10rem;
    right: -8rem;
    width: 32rem;
    height: 32rem;
    background: rgba(16, 185, 129, 0.12);
}

.homepage-vd-glow-bottom {
    left: -6rem;
    bottom: -8rem;
    width: 24rem;
    height: 24rem;
    background: rgba(20, 184, 166, 0.08);
}

.homepage-vd-hero-card {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 18px 42px -20px rgba(16, 185, 129, 0.38);
    animation: homepageVdFloat 6s ease-in-out infinite;
}

.homepage-vd-wave-bars {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
    pointer-events: none;
    z-index: 0;
}

.homepage-vd-wave-bars span {
    width: 0.625rem;
    border-radius: 9999px 9999px 0 0;
    background: rgba(255, 255, 255, 0.25);
    animation: homepageVdWave 1.25s ease-in-out infinite;
}

.homepage-vd-wave-bars span:nth-child(1) {
    height: 2.5rem;
}

.homepage-vd-wave-bars span:nth-child(2) {
    height: 1.75rem;
    animation-delay: 0.15s;
}

.homepage-vd-wave-bars span:nth-child(3) {
    height: 3.5rem;
    animation-delay: 0.3s;
}

.homepage-vd-wave-bars span:nth-child(4) {
    height: 1.5rem;
    animation-delay: 0.45s;
}

.homepage-vd-wave-bars span:nth-child(5) {
    height: 2.2rem;
    animation-delay: 0.6s;
}

.homepage-vd-hero-orb {
    position: absolute;
    top: -5rem;
    left: -4rem;
    width: 15rem;
    height: 15rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.18);
    filter: blur(42px);
}

.homepage-vd-companion-card {
    position: relative;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.35rem 1.5rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

.homepage-vd-companion-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), transparent 50%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.homepage-vd-companion-card:hover {
    transform: translateY(-4px);
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12);
}

.homepage-vd-companion-card:hover::before {
    opacity: 1;
}

.homepage-vd-companion-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.9);
    transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.homepage-vd-companion-card:hover .homepage-vd-companion-icon {
    color: #fff;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    transform: scale(1.05);
}

.homepage-vd-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(148, 163, 184, 0.45) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.18;
    pointer-events: none;
}

.homepage-vd-flow-glow-top {
    top: 18%;
    left: -10%;
    width: 120%;
    height: 20%;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.08), transparent);
    transform: rotate(-4deg);
}

.homepage-vd-flow-glow-bottom {
    top: 52%;
    left: -10%;
    width: 120%;
    height: 20%;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.08), transparent);
    transform: rotate(4deg);
}

.homepage-vd-flow-line {
    position: absolute;
    top: 43%;
    left: 0;
    width: 100%;
    height: 240px;
    transform: translateY(-50%);
    opacity: 0.28;
    pointer-events: none;
}

.homepage-vd-flow-line path {
    fill: none;
    stroke: rgba(16, 185, 129, 0.7);
    stroke-width: 4;
    stroke-dasharray: 12 12;
    animation: homepageVdDashFlow 26s linear infinite;
}

.homepage-vd-scenario {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.homepage-vd-scenario-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.homepage-vd-scenario-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.homepage-vd-benefit-card {
    padding: 1.1rem 1.15rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(226, 232, 240, 0.75);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.homepage-vd-benefit-card:hover {
    transform: translateY(-4px);
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.15);
}

.homepage-vd-benefit-card h5 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.homepage-vd-benefit-card p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
}

.homepage-vd-gallery-shell {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
}

.homepage-vd-gallery-accent {
    position: absolute;
    width: 18rem;
    height: 18rem;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(70px);
    opacity: 0.7;
}

.homepage-vd-gallery-accent-left {
    top: 2rem;
    left: 1.5rem;
    background: rgba(16, 185, 129, 0.12);
}

.homepage-vd-gallery-accent-right {
    right: 0;
    bottom: 1rem;
    background: rgba(45, 212, 191, 0.1);
}

.homepage-vd-gallery-panel {
    position: relative;
    z-index: 1;
}

.homepage-vd-gallery-panel::before {
    display: none;
}

.homepage-vd-gallery-head,
.homepage-vd-gallery-deck-wrap,
.homepage-vd-gallery-hint {
    position: relative;
    z-index: 1;
}

.homepage-vd-gallery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.homepage-vd-gallery-title {
    color: #334155;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.homepage-vd-gallery-indicator {
    margin-top: 0.35rem;
    color: #10b981;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.homepage-vd-gallery-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.homepage-vd-gallery-nav-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    background: rgba(255, 255, 255, 0.92);
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px -18px rgba(15, 23, 42, 0.35);
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.homepage-vd-gallery-nav-btn:hover {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

.homepage-vd-gallery-nav-btn:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
}

.homepage-vd-gallery-deck-wrap {
    min-height: 17.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.homepage-vd-gallery-deck {
    position: relative;
    width: min(100%, 46rem);
    height: 16rem;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.homepage-vd-gallery-card {
    --gallery-accent: #60a5fa;
    --gallery-accent-soft: rgba(96, 165, 250, 0.14);
    --gallery-accent-border: rgba(96, 165, 250, 0.42);
    position: absolute;
    inset: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 46rem;
    min-height: 12rem;
    padding: 1.25rem 1.75rem;
    border-radius: 1.75rem;
    border: 2px solid rgba(219, 234, 254, 0.8);
    background: rgba(255, 255, 255, 0.98);
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center bottom;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
}

.homepage-vd-gallery-card.theme-blue {
    --gallery-accent: #60a5fa;
    --gallery-accent-soft: rgba(96, 165, 250, 0.14);
    --gallery-accent-border: rgba(96, 165, 250, 0.42);
}

.homepage-vd-gallery-card.theme-emerald {
    --gallery-accent: #10b981;
    --gallery-accent-soft: rgba(16, 185, 129, 0.14);
    --gallery-accent-border: rgba(16, 185, 129, 0.34);
}

.homepage-vd-gallery-card.theme-amber {
    --gallery-accent: #f59e0b;
    --gallery-accent-soft: rgba(245, 158, 11, 0.15);
    --gallery-accent-border: rgba(245, 158, 11, 0.34);
}

.homepage-vd-gallery-card.theme-purple {
    --gallery-accent: #a855f7;
    --gallery-accent-soft: rgba(168, 85, 247, 0.14);
    --gallery-accent-border: rgba(168, 85, 247, 0.34);
}

.homepage-vd-gallery-card.theme-teal {
    --gallery-accent: #14b8a6;
    --gallery-accent-soft: rgba(20, 184, 166, 0.14);
    --gallery-accent-border: rgba(20, 184, 166, 0.34);
}

.homepage-vd-gallery-card.theme-rose {
    --gallery-accent: #f43f5e;
    --gallery-accent-soft: rgba(244, 63, 94, 0.14);
    --gallery-accent-border: rgba(244, 63, 94, 0.34);
}

.homepage-vd-gallery-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 32%);
    pointer-events: none;
}

.homepage-vd-gallery-card-header,
.homepage-vd-gallery-card-quote,
.homepage-vd-gallery-card-footer {
    position: relative;
    z-index: 1;
}

.homepage-vd-gallery-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.homepage-vd-gallery-card-meta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.homepage-vd-gallery-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gallery-accent-soft);
    color: var(--gallery-accent);
    flex-shrink: 0;
}

.homepage-vd-gallery-card-category {
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.3;
}

.homepage-vd-gallery-card-index {
    color: #cbd5e1;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.homepage-vd-gallery-card-quote {
    min-height: 4.5rem;
    padding: 0.85rem 1.25rem;
    border-radius: 1rem;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(241, 245, 249, 0.95);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.homepage-vd-gallery-card-quote-icon {
    color: #e2e8f0;
    margin-top: 0.2rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

.homepage-vd-gallery-card-quote-icon i {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.homepage-vd-gallery-card-quote-text {
    flex: 1;
    min-width: 0;
    color: #334155;
    font-size: 1rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.homepage-vd-gallery-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.85rem;
}

.homepage-vd-gallery-card-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.28rem;
    height: 1.8rem;
}

.homepage-vd-gallery-card-bars span {
    width: 0.34rem;
    border-radius: 9999px;
    background: var(--gallery-accent);
    opacity: 0.35;
}

.homepage-vd-gallery-card-bars span:nth-child(1) { height: 1rem; }
.homepage-vd-gallery-card-bars span:nth-child(2) { height: 1.55rem; opacity: 0.52; }
.homepage-vd-gallery-card-bars span:nth-child(3) { height: 1.1rem; opacity: 0.42; }

.homepage-vd-gallery-card-label {
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-align: right;
    line-height: 1.35;
    max-width: 13rem;
}

.homepage-vd-gallery-hint {
    margin-top: 1rem;
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    opacity: 0.6;
}

.homepage-vd-gallery-card.card-active {
    transform: translateY(0) scale(1) translateZ(0);
    z-index: 40;
    opacity: 1;
    border-color: var(--gallery-accent-border);
    box-shadow: 0 28px 60px -22px rgba(15, 23, 42, 0.12);
}

.homepage-vd-gallery-card.card-next-1 {
    transform: translateY(1.7rem) scale(0.95) translateZ(-60px);
    z-index: 30;
    opacity: 0.92;
    box-shadow: 0 12px 24px -16px rgba(15, 23, 42, 0.08);
}

.homepage-vd-gallery-card.card-next-2 {
    transform: translateY(3.3rem) scale(0.9) translateZ(-120px);
    z-index: 20;
    opacity: 0.74;
    box-shadow: 0 8px 16px -16px rgba(15, 23, 42, 0.08);
}

.homepage-vd-gallery-card.card-next-3 {
    transform: translateY(4.8rem) scale(0.85) translateZ(-180px);
    z-index: 10;
    opacity: 0.42;
}

.homepage-vd-gallery-card.card-hidden {
    transform: translateY(6.2rem) scale(0.78) translateZ(-240px);
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

.homepage-vd-gallery-card.card-prev {
    transform: translateY(-4.2rem) scale(1.04) translateZ(100px) rotateX(14deg);
    opacity: 0;
    z-index: 50;
    pointer-events: none;
}





@keyframes homepageVdFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes homepageVdWave {
    0%,
    100% {
        transform: scaleY(0.7);
        opacity: 0.35;
    }

    50% {
        transform: scaleY(1.12);
        opacity: 0.85;
    }
}

@keyframes homepageVdDashFlow {
    to {
        stroke-dashoffset: -400;
    }
}

/* Step Number */
.step-number {
    background: linear-gradient(135deg, var(--kiki-green) 0%, var(--kiki-green-light) 100%) !important;
}

/* Voice Wave Animation */
@keyframes wave {

    0%,
    100% {
        transform: scaleY(1);
        opacity: 0.7;
    }

    50% {
        transform: scaleY(1.5);
        opacity: 1;
    }
}

.voice-wave {
    animation: wave 1.5s ease-in-out infinite;
}

/* Stamp Effect */
.stamp {
    position: absolute;
    bottom: 15px;
    right: 15px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    transform: rotate(-8deg);
    opacity: 0.85;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.stamp-text {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Stamp variations for different cards */
.stamp-popular {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.stamp-popular .stamp-text {
    color: #059669;
}

.stamp-core {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.stamp-core .stamp-text {
    color: #2563eb;
}

.stamp-pro {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.stamp-pro .stamp-text {
    color: #7c3aed;
}

/* Stamp color variants for model cards */
.stamp-emerald {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.stamp-emerald .stamp-text {
    color: #059669;
}

.stamp-cyan {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.stamp-cyan .stamp-text {
    color: #0891b2;
}

.stamp-purple {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.stamp-purple .stamp-text {
    color: #9333ea;
}

@media (min-width: 1024px) {
    .homepage-vd-companion-card-offset-sm {
        margin-left: 1.25rem;
    }

    .homepage-vd-companion-card-offset-lg {
        margin-left: 2.5rem;
    }

    .homepage-vd-scenario-shift-sm {
        margin-top: 2.5rem;
    }

    .homepage-vd-scenario-shift-md {
        margin-top: 0.875rem;
    }

    .homepage-vd-scenario-shift-lg {
        margin-top: 4rem;
    }
}

/* Scan Animation */
@keyframes scan {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

.animate-scan {
    animation: scan 3s linear infinite;
}

/* Tech Grid Background */
.tech-grid-bg-light {
    background-image:
        linear-gradient(to right, rgba(16, 185, 129, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 185, 129, 0.15) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* ===================================
   Trust Band Ambient Voice Ribbon
   =================================== */
.homepage-trust-band {
    --homepage-trust-wave-green: #10b981;
    --homepage-trust-wave-mint: #6ee7b7;
    --homepage-trust-wave-teal: #14b8a6;
    --homepage-trust-wave-blue: #60a5fa;
    padding-top: 1.25rem;
    padding-bottom: 2.5rem;
    margin-top: -1px;
    background:
        radial-gradient(ellipse 78% 76% at 50% 0%,
            rgba(16, 185, 129, 0.115) 0%,
            rgba(20, 184, 166, 0.055) 48%,
            transparent 78%),
        linear-gradient(180deg,
            rgba(236, 253, 245, 0.22) 0%,
            rgba(240, 253, 250, 0.42) 54%,
            rgba(255, 255, 255, 0.88) 100%);
    isolation: isolate;
    overflow: hidden;
}

.homepage-trust-band__content {
    position: relative;
    z-index: 1;
}

.homepage-trust-wave {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.72;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 10%, #000 34%, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 10%, #000 34%, #000 82%, transparent 100%);
}

.homepage-trust-wave svg {
    display: block;
    width: calc(100% + 5rem);
    height: 100%;
    margin-left: -2.5rem;
    overflow: visible;
}

.homepage-trust-wave__layer {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

.homepage-trust-wave__layer--ambient {
    opacity: 0.07;
    animation: homepageTrustWaveAmbient 28s cubic-bezier(0.37, 0, 0.63, 1) -13s infinite alternate;
}

.homepage-trust-wave__layer--main {
    opacity: 0.14;
    animation: homepageTrustWaveMain 18s cubic-bezier(0.37, 0, 0.63, 1) -5s infinite alternate;
}

.homepage-trust-wave__layer--counter {
    opacity: 0.1;
    animation: homepageTrustWaveCounter 22s cubic-bezier(0.37, 0, 0.63, 1) -9s infinite alternate-reverse;
}

@keyframes homepageTrustWaveAmbient {
    from {
        transform: translate3d(18px, -2px, 0) scale(0.99, 0.98);
    }

    to {
        transform: translate3d(-22px, 5px, 0) scale(1.02, 1.035);
    }
}

@keyframes homepageTrustWaveMain {
    from {
        transform: translate3d(-24px, 3px, 0) scale(0.99, 0.975);
    }

    to {
        transform: translate3d(32px, -5px, 0) scale(1.022, 1.04);
    }
}

@keyframes homepageTrustWaveCounter {
    from {
        transform: translate3d(26px, -3px, 0) scale(1.012, 0.98);
    }

    to {
        transform: translate3d(-28px, 4px, 0) scale(0.985, 1.035);
    }
}

html[data-kiki-page-mode="night"] .homepage-trust-band {
    --homepage-trust-wave-green: #34d399;
    --homepage-trust-wave-mint: #5eead4;
    --homepage-trust-wave-teal: #22d3ee;
    --homepage-trust-wave-blue: #60a5fa;
    background:
        radial-gradient(ellipse 78% 76% at 50% 0%,
            rgba(16, 185, 129, 0.09) 0%,
            rgba(34, 211, 238, 0.035) 48%,
            transparent 78%),
        linear-gradient(180deg,
            rgba(31, 38, 35, 0.18) 0%,
            rgba(31, 38, 35, 0.58) 54%,
            rgba(31, 38, 35, 0.9) 100%);
}

html[data-kiki-page-mode="night"] .homepage-trust-wave {
    opacity: 0.78;
}

html[data-kiki-page-mode="high_contrast"] .homepage-trust-band {
    background: #000000;
}

html[data-kiki-page-mode="high_contrast"] .homepage-trust-wave {
    display: none;
}

@media (max-width: 1023px) {
    .homepage-trust-wave {
        opacity: 0.56;
    }

    .homepage-trust-wave__layer--ambient {
        display: none;
    }

    .homepage-trust-wave__layer {
        animation: none !important;
        will-change: auto;
    }
}

@media (max-width: 640px) {
    .homepage-trust-wave {
        opacity: 0.42;
    }

    .homepage-trust-wave__layer--counter {
        display: none;
    }
}

@media (pointer: coarse) {
    .homepage-trust-wave__layer {
        animation: none !important;
        will-change: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-trust-wave__layer {
        animation: none !important;
        will-change: auto;
    }
}

@media (forced-colors: active) {
    .homepage-trust-wave {
        display: none;
    }
}

/* Watermark Shine Animation */
@keyframes watermarkShine {
    0% {
        transform: translateX(-150%) skewX(-20deg);
    }

    40%,
    100% {
        transform: translateX(150%) skewX(-20deg);
    }
}

.animate-watermark-shine {
    animation: watermarkShine 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ===================================
   Core Introduction Card Styles
   =================================== */

/* Four-tool illustration and product overview inside the introduction card. */
.home-platform-overview {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid #e5eee9;
}

.home-platform-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 366px;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid #dcece5;
    border-radius: 1.75rem;
    background:
        radial-gradient(circle at 50% 50%, rgba(52, 211, 153, 0.18), transparent 60%),
        linear-gradient(rgba(16, 185, 129, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.07) 1px, transparent 1px),
        #f6fcf9;
    background-size: auto, 36px 36px, 36px 36px, auto;
}

.home-platform-stage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
    width: min(100%, 500px);
    padding: 4.1rem 1rem 1rem;
    border: 1px solid #dbe7e3;
    border-radius: 1.375rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 42px rgba(30, 71, 57, 0.12);
}

.home-platform-stage::before {
    content: "";
    position: absolute;
    top: 1.4rem;
    left: 1.125rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #cbd5d1;
    box-shadow: 1.15rem 0 #cbd5d1, 2.3rem 0 #cbd5d1;
}

.home-platform-stage::after {
    content: "";
    position: absolute;
    top: 3.55rem;
    left: 0;
    right: 0;
    height: 1px;
    background: #e9f0ec;
}

.home-platform-powered {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 2.6rem;
    padding-left: 0.75rem;
    border-left: 1px solid #cae8d9;
    text-align: left;
}

.home-platform-powered small {
    color: #5b8874;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.home-platform-powered strong {
    margin-top: 0.1rem;
    color: #4d7462;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.2;
}

.home-platform-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 0;
    min-height: 112px;
    padding: 0.625rem;
    border: 1px solid #e3eee9;
    border-radius: 1rem;
    background: #fbfefd;
    color: #263b36;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-platform-tool img {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.home-platform-tool span {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
}

.home-platform-tool:hover,
.home-platform-tool:focus-visible {
    transform: translateY(-2px);
    border-color: #86dfb7;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.1);
}

.home-platform-tool:focus-visible { outline: 2px solid #047857; outline-offset: 3px; }

.home-platform-copy {
    min-width: 0;
    padding: 0.5rem 0;
}

.home-platform-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    color: #047857;
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: 0.075em;
    line-height: 1.5;
    text-transform: uppercase;
}

.home-platform-copy p {
    margin: 0;
    color: #4b5563;
    font-size: 1.0625rem;
    line-height: 1.85;
}

@media (max-width: 767px) {
    .home-platform-overview {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
        margin-top: 2.5rem;
        padding-top: 2.5rem;
    }

    .home-platform-visual { min-height: 320px; }
    .home-platform-copy p { font-size: 1rem; }
}

@media (max-width: 480px) {
    .home-platform-visual { min-height: 294px; padding: 0.75rem; }
    .home-platform-stage { gap: 0.5rem; padding: 4.1rem 0.625rem 0.625rem; }
    .home-platform-powered { right: 0.625rem; }
    .home-platform-tool { min-height: 100px; padding: 0.375rem; }
    .home-platform-tool img { width: 46px; height: 46px; }
    .home-platform-tool span { font-size: 0.75rem; }
}

html[data-kiki-page-mode="night"] .home-platform-overview { border-color: var(--kiki-night-border); }
html[data-kiki-page-mode="night"] .home-platform-visual { border-color: var(--kiki-night-border); background-color: var(--kiki-night-surface-soft); }
html[data-kiki-page-mode="night"] .home-platform-stage,
html[data-kiki-page-mode="night"] .home-platform-tool { border-color: var(--kiki-night-border); background: var(--kiki-night-surface); }
html[data-kiki-page-mode="night"] .home-platform-tool { color: var(--kiki-night-text-primary); }
html[data-kiki-page-mode="night"] .home-platform-powered { border-color: var(--kiki-night-border); }
html[data-kiki-page-mode="night"] .home-platform-powered small,
html[data-kiki-page-mode="night"] .home-platform-powered strong { color: var(--kiki-night-text-secondary); }
html[data-kiki-page-mode="night"] .home-platform-copy p { color: var(--kiki-night-text-secondary); }
html[data-kiki-page-mode="night"] .home-platform-eyebrow { color: var(--kiki-night-accent); }

html[data-kiki-page-mode="high_contrast"] .home-platform-overview,
html[data-kiki-page-mode="high_contrast"] .home-platform-visual,
html[data-kiki-page-mode="high_contrast"] .home-platform-stage,
html[data-kiki-page-mode="high_contrast"] .home-platform-tool { border-color: #ffffff; }
html[data-kiki-page-mode="high_contrast"] .home-platform-visual,
html[data-kiki-page-mode="high_contrast"] .home-platform-stage,
html[data-kiki-page-mode="high_contrast"] .home-platform-tool { background: #000000; }
html[data-kiki-page-mode="high_contrast"] .home-platform-tool,
html[data-kiki-page-mode="high_contrast"] .home-platform-copy p { color: #ffffff; }
html[data-kiki-page-mode="high_contrast"] .home-platform-powered { border-color: #ffffff; }
html[data-kiki-page-mode="high_contrast"] .home-platform-powered small,
html[data-kiki-page-mode="high_contrast"] .home-platform-powered strong { color: #ffffff; }
html[data-kiki-page-mode="high_contrast"] .home-platform-eyebrow { color: #6ee7b7; }

@media (prefers-reduced-motion: reduce) {
    .home-platform-tool { transition: none; }
    .home-platform-tool:hover { transform: none; }
}

/* Core intro left section */
.core-intro-left {
    display: flex;
    flex-direction: column;
}

/* Core model cards (vertical stack) */
.core-model-card {
    position: relative;
    overflow: hidden;
}

.core-model-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.core-model-card:hover::before {
    opacity: 0.3;
}

.core-model-card:hover {
    transform: translateX(4px);
}

/* Core feature items */
.core-feature-item {
    transition: all 0.2s ease;
}

.core-feature-item:hover {
    transform: translateY(-2px);
}

.core-feature-item:hover>div {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.15));
    border-color: rgba(16, 185, 129, 0.3);
}

/* Model name capitalize */
.model-name-capitalize {
    text-transform: capitalize;
}

/* ===================================
   75+ Language Scroll Section Styles
   =================================== */

/* Infinite scroll animation - moving left */
@keyframes lang-scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Infinite scroll animation - moving right */
@keyframes lang-scroll-right {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Base animation classes */
.animate-lang-scroll-left {
    animation: lang-scroll-left 180s linear infinite;
}

.animate-lang-scroll-right {
    animation: lang-scroll-right 180s linear infinite;
}

/* Speed variants - Ambient drift effect */
.lang-speed-slow {
    animation-duration: 220s;
    /* Ultra slow ambient drift */
}

.lang-speed-fast {
    animation-duration: 150s;
    /* Still very slow */
}

/* Hover to pause scrolling */
.lang-track-group:hover .animate-lang-scroll-left,
.lang-track-group:hover .animate-lang-scroll-right {
    animation-play-state: paused;
}

/* Language card base styles */
.lang-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 0.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    min-width: 160px;
    height: 64px;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    cursor: default;
    user-select: none;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.lang-card:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(96, 165, 250, 0.5);
    transform: scale(1.05);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.08);
}

/* Language card native name */
.lang-card .lang-native {
    color: #334155;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.025em;
    line-height: 1.25;
    transition: color 0.3s ease;
}

.lang-card:hover .lang-native {
    color: #2563eb;
}

/* English name reveal on hover */
.lang-card .lang-english-wrapper {
    height: 0;
    opacity: 0;
    transition: all 0.5s ease-out;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.lang-card:hover .lang-english-wrapper {
    height: auto;
    opacity: 1;
    margin-top: 0.375rem;
}

/* Separator line animation */
.lang-card .lang-separator {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(96, 165, 250, 0.3), transparent);
    margin-bottom: 0.25rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.lang-card:hover .lang-separator {
    transform: scaleX(1);
}

/* English name text */
.lang-card .lang-english {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.3s ease 0.075s;
}

.lang-card:hover .lang-english {
    opacity: 1;
}

/* Flag icon hover effect */
.lang-card .lang-flag {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.lang-card:hover .lang-flag {
    transform: scale(1.1);
}

/* ===================================
   Mobile Simplified Language Card
   SEO: 75+ languages for Google Bot
   Performance: content-visibility optimization
   =================================== */

.lang-card-mobile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    min-width: 100px;
    height: 40px;
    cursor: default;
    user-select: none;
}

/* Performance optimization: use content-visibility if supported */
@supports (content-visibility: auto) {
    .lang-card-mobile {
        content-visibility: auto;
        contain-intrinsic-size: 100px 40px;
    }
}

.lang-card-mobile .fi {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.lang-card-mobile .lang-native-mobile {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===================================
   Mobile Responsive Optimization
   PC端保持特效，移动端朴素简洁
   Breakpoints: 768px (tablet), 480px (phone)
   =================================== */

@media (max-width: 768px) {
    /* ----- VD Section: Tighter spacing on tablet/mobile ----- */
    #homepage-voice-design-intro,
    #homepage-voice-design-workflow,
    #homepage-voice-design-scenarios {
        padding-top: 2.75rem !important;
        padding-bottom: 2.75rem !important;
    }

    #homepage-voice-design-intro h2,
    #homepage-voice-design-workflow h2,
    #homepage-voice-design-scenarios h2 {
        font-size: 2rem !important;
        line-height: 1.25 !important;
    }

    #homepage-voice-design-intro .max-w-3xl {
        margin-bottom: 1.5rem !important;
    }

    #homepage-voice-design-workflow .mb-16 {
        margin-bottom: 1.75rem !important;
    }

    #homepage-voice-design-scenarios .mb-16 {
        margin-bottom: 1.75rem !important;
    }

    .homepage-vd-hero-card {
        animation: none;
    }

    .homepage-vd-wave-bars {
        right: 1.5rem;
        bottom: 1.5rem;
        gap: 0.35rem;
    }

    .homepage-vd-wave-bars span {
        width: 0.45rem;
    }

    .homepage-vd-companion-card {
        padding: 1.1rem 1rem;
        gap: 0.875rem;
    }

    .homepage-vd-companion-icon {
        width: 3rem;
        height: 3rem;
        border-radius: 1rem;
    }

    .homepage-vd-gallery-panel {
        padding: 1.4rem 1.15rem 1.5rem;
        border-radius: 1.75rem;
    }

    .homepage-vd-gallery-title {
        font-size: 1.4rem;
    }

    .homepage-vd-gallery-indicator {
        font-size: 0.82rem;
    }

    .homepage-vd-gallery-nav-btn {
        width: 2.75rem;
        height: 2.75rem;
    }

    .homepage-vd-gallery-deck-wrap {
        min-height: 24.5rem;
    }

    .homepage-vd-gallery-deck {
        height: 22.75rem;
    }

    .homepage-vd-gallery-card {
        min-height: 20.75rem;
        padding: 1.2rem 1.15rem 1.05rem;
        border-radius: 1.6rem;
    }

    .homepage-vd-gallery-card-quote {
        min-height: 11.25rem;
        padding: 1.1rem 1rem;
    }

    .homepage-vd-gallery-card-quote-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    .homepage-vd-gallery-card.card-next-1 {
        transform: translateY(1.25rem) scale(0.95) translateZ(-60px);
    }

    .homepage-vd-gallery-card.card-next-2 {
        transform: translateY(2.4rem) scale(0.9) translateZ(-120px);
    }

    .homepage-vd-gallery-card.card-next-3 {
        transform: translateY(3.35rem) scale(0.86) translateZ(-180px);
    }





    .homepage-vd-flow-line {
        display: none;
    }

    .homepage-vd-benefit-card {
        padding: 1rem 0.95rem;
    }

    /* ----- Performance Optimization: Disable Heavy Effects ----- */
    /* Remove backdrop-blur on mobile for better performance */
    .tool-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    .content-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    .lang-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }

    /* Disable floating orb animations for performance */
    .floating-orb {
        display: none !important;
    }

    /* Disable particle system for performance */
    .particle {
        display: none !important;
    }

    /* Simplify background grid for performance */
    .bg-grid {
        opacity: 0.15 !important;
        background-size: 80px 80px !important;
    }

    /* Disable CTA glow animation */
    .cta-section::after {
        animation: none !important;
        opacity: 0.3 !important;
    }

    /* Disable language scroll animation (static on mobile) */
    .animate-lang-scroll-left,
    .animate-lang-scroll-right {
        animation: none !important;
        /* Reduce gap for smaller mobile cards */
        gap: 0.75rem !important;
    }

    /* ----- Hero Section Optimization ----- */
    /* Smaller hero title */
    .home-hero-title {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    /* Smaller hero description */
    .home-hero-description {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* Compact feature badges (2x2 grid) */
    .home-hero-badges {
        gap: 0.5rem !important;
    }

    .home-hero-badges>* {
        font-size: 0.7rem !important;
        padding: 0.375rem 0.75rem !important;
    }

    /* ----- Section Spacing Optimization ----- */
    /* Reduce vertical padding on all sections */
    .home-section-spacing {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .home-section-margin {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* ----- Tool Card Optimization ----- */
    /* Smaller upload/record cards */
    .upload-option {
        padding: 1.5rem 1rem !important;
    }

    .upload-option h3 {
        font-size: 0.9rem !important;
    }

    .upload-option p {
        font-size: 0.75rem !important;
    }

    /* Smaller icons in upload cards */
    .upload-option .w-10 {
        width: 2rem !important;
        height: 2rem !important;
    }

    .upload-option .w-10 i,
    .upload-option .w-10 svg {
        width: 1rem !important;
        height: 1rem !important;
    }

    /* Reduce tool-card padding */
    .tool-card {
        padding: 1rem !important;
        border-radius: 1rem !important;
    }

    /* ----- Steps Section Optimization ----- */
    .home-steps-title {
        font-size: 1.1rem !important;
    }

    .home-steps-desc {
        font-size: 0.8rem !important;
    }

    /* Smaller step circles */
    .step-indicator,
    .step-number {
        width: 1.75rem !important;
        height: 1.75rem !important;
        font-size: 0.75rem !important;
    }

    /* ----- Audio Player List Optimization ----- */
    /* Compact audio player rows */
    .home-audio-row {
        padding: 0.625rem 0.75rem !important;
        gap: 0.5rem !important;
    }

    .home-audio-row .play-btn {
        width: 2rem !important;
        height: 2rem !important;
    }

    .home-audio-row .play-btn i,
    .home-audio-row .play-btn svg {
        width: 0.875rem !important;
        height: 0.875rem !important;
    }

    .home-audio-title {
        font-size: 0.8rem !important;
    }

    .home-audio-badge {
        font-size: 0.6rem !important;
        padding: 0.125rem 0.375rem !important;
    }

    /* ----- Language Cards Optimization ----- */
    .lang-card {
        min-width: 130px !important;
        height: 50px !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        gap: 0.5rem !important;
    }

    .lang-card .lang-native {
        font-size: 12px !important;
    }

    /* Hide English name on mobile for simplicity */
    .lang-card .lang-english-wrapper {
        display: none !important;
    }

    /* ----- CTA Section Optimization ----- */
    .home-cta-title {
        font-size: 1.5rem !important;
    }

    .home-cta-desc {
        font-size: 0.85rem !important;
    }

    /* ----- Model Cards Optimization ----- */
    .model-card {
        padding: 1rem !important;
    }

    /* Disable hover transform on mobile (saves GPU) */
    .model-card:hover {
        transform: none !important;
    }

    .upload-option:hover {
        transform: none !important;
    }

    /* ----- Footer Optimization ----- */
    .home-footer-links {
        gap: 0.5rem !important;
    }

    .home-footer-links a {
        font-size: 0.8rem !important;
    }

    /* ----- General Typography Scaling ----- */
    .home-section-heading {
        font-size: 1.25rem !important;
    }

    .home-section-subheading {
        font-size: 0.85rem !important;
    }

    /* ----- Core Introduction Card Mobile ----- */
    .core-model-card {
        padding: 0.75rem !important;
    }

    .core-model-card:hover {
        transform: none !important;
    }

    .core-feature-item:hover {
        transform: none !important;
    }
}

/* Extra small screens (iPhone SE, etc.) */
@media (max-width: 480px) {
    #homepage-voice-design-intro h2,
    #homepage-voice-design-workflow h2,
    #homepage-voice-design-scenarios h2 {
        font-size: 1.75rem !important;
    }

    .homepage-vd-reveal {
        transform: translateY(18px);
    }

    .homepage-vd-hero-card {
        padding: 1.5rem 1.25rem;
        border-radius: 1.5rem;
    }

    .homepage-vd-companion-card {
        flex-direction: column;
    }

    .homepage-vd-gallery-head {
        margin-bottom: 1.1rem;
    }

    .homepage-vd-gallery-title {
        font-size: 1.25rem;
    }

    .homepage-vd-gallery-deck-wrap {
        min-height: 22.75rem;
    }

    .homepage-vd-gallery-deck {
        height: 21rem;
    }

    .homepage-vd-gallery-card {
        min-height: 19.5rem;
        padding: 1rem 0.95rem 0.9rem;
    }

    .homepage-vd-gallery-card-meta {
        gap: 0.65rem;
    }

    .homepage-vd-gallery-card-icon {
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 0.85rem;
    }

    .homepage-vd-gallery-card-category {
        font-size: 0.78rem;
    }

    .homepage-vd-gallery-card-index {
        font-size: 0.85rem;
    }

    .homepage-vd-gallery-card-quote {
        min-height: 10.5rem;
        padding: 0.95rem 0.9rem;
        border-radius: 1.1rem;
    }

    .homepage-vd-gallery-card-quote-text {
        font-size: 0.92rem;
    }

    .homepage-vd-gallery-card-label {
        font-size: 0.68rem;
        max-width: 9rem;
    }

    .homepage-vd-gallery-hint {
        letter-spacing: 0.12em;
        font-size: 0.62rem;
    }

    .homepage-vd-benefit-card h5 {
        font-size: 0.95rem;
    }

    .homepage-vd-benefit-card p {
        font-size: 0.9rem;
    }

    /* Even smaller hero title */
    .home-hero-title {
        font-size: 1.5rem !important;
    }

    .home-hero-description {
        font-size: 0.85rem !important;
    }

    /* Tighter section spacing */
    .home-section-spacing {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Smaller upload cards */
    .upload-option {
        padding: 1rem 0.75rem !important;
    }

    /* Smaller language cards */
    .lang-card {
        min-width: 110px !important;
        height: 44px !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .lang-card .lang-native {
        font-size: 11px !important;
    }

    /* Smaller audio rows */
    .home-audio-row {
        padding: 0.5rem !important;
    }

    .home-audio-title {
        font-size: 0.75rem !important;
    }

    /* Smaller CTA */
    .home-cta-title {
        font-size: 1.25rem !important;
    }

    /* Compact step indicators */
    .step-indicator,
    .step-number {
        width: 1.5rem !important;
        height: 1.5rem !important;
        font-size: 0.65rem !important;
    }
}

/* ===================================
   Page Mode: Homepage night / high_contrast
   =================================== */
html[data-kiki-page-mode="night"] .kiki-home-bg-shell {
    background:
        radial-gradient(circle at 18% 12%, rgba(16, 185, 129, 0.16), transparent 34%),
        radial-gradient(circle at 82% 8%, rgba(14, 165, 233, 0.09), transparent 30%),
        var(--kiki-night-page-bg) !important;
}

html[data-kiki-page-mode="night"] .kiki-home-bg-gradient {
    background: linear-gradient(145deg, rgba(32, 37, 34, 0.18), rgba(48, 57, 54, 0.42)) !important;
}

html[data-kiki-page-mode="night"] .kiki-home-bg-grid {
    background-image:
        linear-gradient(to right, rgba(110, 231, 183, 0.11) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(110, 231, 183, 0.11) 1px, transparent 1px) !important;
    opacity: 0.68;
}

html[data-kiki-page-mode="night"] .kiki-home-bg-glow {
    opacity: 0.55;
}

html[data-kiki-page-mode="night"] .kiki-home-bg-orbs,
html[data-kiki-page-mode="night"] .kiki-home-bg-particles {
    opacity: 0.38;
}

html[data-kiki-page-mode="night"] .hero-gradient {
    background:
        radial-gradient(ellipse 78% 22% at 50% 100%,
            rgba(16, 185, 129, 0.075) 0%,
            rgba(34, 211, 238, 0.025) 48%,
            transparent 78%),
        linear-gradient(150deg, rgba(32, 37, 34, 0.9), rgba(48, 57, 54, 0.72)) !important;
}

html[data-kiki-page-mode="night"] .hero-gradient > .absolute.inset-0 > div {
    mix-blend-mode: screen !important;
    opacity: 0.16 !important;
}

html[data-kiki-page-mode="night"] .tool-card,
html[data-kiki-page-mode="night"] .content-overlay {
    background: rgba(39, 46, 43, 0.96) !important;
    border-color: var(--kiki-night-border) !important;
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.24) !important;
}

html[data-kiki-page-mode="night"] .section-bg-light {
    background: var(--kiki-night-page-bg) !important;
}

html[data-kiki-page-mode="night"] .hero-gradient .bg-green-50,
html[data-kiki-page-mode="night"] .hero-gradient .bg-emerald-50 {
    background-color: rgba(52, 211, 153, 0.11) !important;
    border-color: rgba(110, 231, 183, 0.28) !important;
}

html[data-kiki-page-mode="night"] .hero-gradient .bg-blue-50 {
    background-color: rgba(56, 189, 248, 0.11) !important;
    border-color: rgba(125, 211, 252, 0.28) !important;
}

html[data-kiki-page-mode="night"] .hero-gradient .bg-purple-50 {
    background-color: rgba(167, 139, 250, 0.11) !important;
    border-color: rgba(196, 181, 253, 0.3) !important;
}

html[data-kiki-page-mode="night"] .hero-gradient .bg-orange-50 {
    background-color: rgba(251, 146, 60, 0.1) !important;
    border-color: rgba(253, 186, 116, 0.3) !important;
}

html[data-kiki-page-mode="night"] .hero-gradient .text-green-700,
html[data-kiki-page-mode="night"] .hero-gradient .text-emerald-700 {
    color: #6ee7b7 !important;
}

html[data-kiki-page-mode="night"] .hero-gradient .text-blue-700 {
    color: #7dd3fc !important;
}

html[data-kiki-page-mode="night"] .hero-gradient .text-purple-700 {
    color: #c4b5fd !important;
}

html[data-kiki-page-mode="night"] .hero-gradient .text-orange-700 {
    color: #fdba74 !important;
}

html[data-kiki-page-mode="night"] .homepage-tool-tab.bg-white {
    background: var(--kiki-night-surface-raised) !important;
    color: var(--kiki-night-accent) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .homepage-tool-tab:focus-visible {
    outline: 2px solid var(--kiki-night-accent) !important;
    outline-offset: 2px;
}

html[data-kiki-page-mode="night"] .audio-player,
html[data-kiki-page-mode="night"] .homepage-vd-companion-card,
html[data-kiki-page-mode="night"] .homepage-vd-benefit-card {
    background: var(--kiki-night-surface) !important;
    border-color: var(--kiki-night-border) !important;
    color: var(--kiki-night-text-primary) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .homepage-vd-companion-icon,
html[data-kiki-page-mode="night"] .homepage-vd-scenario-badge {
    background: var(--kiki-night-surface-soft) !important;
    border-color: var(--kiki-night-border) !important;
}

html[data-kiki-page-mode="night"] .homepage-vd-hero-card {
    background: linear-gradient(145deg, #34443e, #29332f) !important;
    border: 1px solid rgba(74, 222, 165, 0.48) !important;
    color: var(--kiki-night-text-primary) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .homepage-vd-hero-card h3 {
    color: var(--kiki-night-accent) !important;
}

html[data-kiki-page-mode="night"] .homepage-vd-gallery-card {
    background: linear-gradient(145deg, #303936, #272e2b) !important;
    border: 1px solid var(--kiki-night-border) !important;
    color: var(--kiki-night-text-primary) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .homepage-vd-gallery-card.card-active {
    border: 2px solid var(--gallery-accent-border) !important;
    box-shadow: 0 14px 30px -24px rgba(0, 0, 0, 0.42) !important;
}

html[data-kiki-page-mode="night"] .homepage-vd-gallery-card.card-next-1,
html[data-kiki-page-mode="night"] .homepage-vd-gallery-card.card-next-2,
html[data-kiki-page-mode="night"] .homepage-vd-gallery-card.card-next-3 {
    background: #252b28 !important;
    border-color: var(--kiki-night-border) !important;
}

html[data-kiki-page-mode="night"] .homepage-vd-gallery-card::after {
    display: none;
}

html[data-kiki-page-mode="night"] .homepage-vd-gallery-card-quote {
    background: rgba(32, 37, 34, 0.82) !important;
    border: 0 !important;
    border-left: 3px solid var(--gallery-accent) !important;
    border-radius: 0.65rem !important;
}

html[data-kiki-page-mode="night"] .homepage-vd-gallery-card-quote-text,
html[data-kiki-page-mode="night"] .homepage-vd-gallery-card-category {
    color: var(--kiki-night-text-primary) !important;
}

html[data-kiki-page-mode="night"] .homepage-vd-gallery-card-index,
html[data-kiki-page-mode="night"] .homepage-vd-gallery-card-label,
html[data-kiki-page-mode="night"] .homepage-vd-gallery-hint {
    color: var(--kiki-night-text-secondary) !important;
}

html[data-kiki-page-mode="night"] .homepage-vd-gallery-card-quote-icon {
    color: var(--gallery-accent) !important;
}

html[data-kiki-page-mode="night"] .homepage-vd-gallery-nav-btn {
    background: var(--kiki-night-surface-soft) !important;
    border-color: var(--kiki-night-border) !important;
    color: var(--kiki-night-text-primary) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] #homepage-vd-gallery-indicator {
    background: var(--kiki-night-surface-soft) !important;
    border-color: rgba(74, 222, 165, 0.42) !important;
    color: var(--kiki-night-accent) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .langs-scroll-section {
    background: var(--kiki-night-page-bg) !important;
}

html[data-kiki-page-mode="night"] section.bg-gradient-to-br,
html[data-kiki-page-mode="night"] section.bg-gradient-to-b {
    background-color: var(--kiki-night-page-bg) !important;
    background-image: linear-gradient(145deg, #202522 0%, #2b322f 52%, #202522 100%) !important;
}

html[data-kiki-page-mode="night"] .lang-card {
    background: var(--kiki-night-surface-soft) !important;
    border-color: var(--kiki-night-border) !important;
    color: var(--kiki-night-text-primary) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .lang-native {
    color: var(--kiki-night-text-primary) !important;
}

html[data-kiki-page-mode="night"] .lang-english {
    color: var(--kiki-night-text-secondary) !important;
}

html[data-kiki-page-mode="night"] .lang-scroll-fade-left {
    background-image: linear-gradient(to right, #202522 8%, rgba(32, 37, 34, 0.82) 52%, transparent) !important;
}

html[data-kiki-page-mode="night"] .lang-scroll-fade-right {
    background-image: linear-gradient(to left, #202522 8%, rgba(32, 37, 34, 0.82) 52%, transparent) !important;
}

html[data-kiki-page-mode="night"] .bg-blue-100.opacity-40 {
    display: none !important;
}

html[data-kiki-page-mode="high_contrast"] .kiki-home-bg-shell,
html[data-kiki-page-mode="high_contrast"] .hero-gradient,
html[data-kiki-page-mode="high_contrast"] .section-bg-light {
    background: #000000 !important;
}

html[data-kiki-page-mode="high_contrast"] .kiki-home-bg-gradient,
html[data-kiki-page-mode="high_contrast"] .kiki-home-bg-glow,
html[data-kiki-page-mode="high_contrast"] .kiki-home-bg-orbs,
html[data-kiki-page-mode="high_contrast"] .kiki-home-bg-particles,
html[data-kiki-page-mode="high_contrast"] .hero-gradient > .absolute.inset-0 {
    display: none !important;
}

html[data-kiki-page-mode="high_contrast"] .bg-green-50\/50.blur-xl,
html[data-kiki-page-mode="high_contrast"] .bg-blue-100.opacity-40,
html[data-kiki-page-mode="high_contrast"] .bg-purple-200\/50.blur-xl,
html[data-kiki-page-mode="high_contrast"] .border-purple-300\/30 {
    display: none !important;
}

html[data-kiki-page-mode="high_contrast"] .kiki-home-bg-grid {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.14) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14) 1px, transparent 1px) !important;
    opacity: 0.55;
    -webkit-mask-image: none;
    mask-image: none;
}

html[data-kiki-page-mode="high_contrast"] .tool-card,
html[data-kiki-page-mode="high_contrast"] .content-overlay {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .hero-gradient .bg-green-50,
html[data-kiki-page-mode="high_contrast"] .hero-gradient .bg-emerald-50,
html[data-kiki-page-mode="high_contrast"] .hero-gradient .bg-blue-50,
html[data-kiki-page-mode="high_contrast"] .hero-gradient .bg-purple-50,
html[data-kiki-page-mode="high_contrast"] .hero-gradient .bg-orange-50 {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
}

html[data-kiki-page-mode="high_contrast"] .hero-gradient .text-green-700,
html[data-kiki-page-mode="high_contrast"] .hero-gradient .text-emerald-700,
html[data-kiki-page-mode="high_contrast"] .hero-gradient .text-blue-700,
html[data-kiki-page-mode="high_contrast"] .hero-gradient .text-purple-700,
html[data-kiki-page-mode="high_contrast"] .hero-gradient .text-orange-700 {
    color: #ffffff !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-tool-tab.bg-white {
    background: var(--kiki-hc-accent) !important;
    color: #000000 !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-tool-tab:focus-visible {
    outline: 3px solid var(--kiki-hc-focus-ring) !important;
    outline-offset: 2px;
}

html[data-kiki-page-mode="high_contrast"] .audio-player,
html[data-kiki-page-mode="high_contrast"] .homepage-vd-companion-card {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-benefit-card,
html[data-kiki-page-mode="high_contrast"] .homepage-vd-companion-icon,
html[data-kiki-page-mode="high_contrast"] .homepage-vd-scenario-badge {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-accent {
    display: none !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-card {
    --gallery-accent: var(--kiki-hc-accent);
    --gallery-accent-soft: rgba(16, 185, 129, 0.16);
    --gallery-accent-border: #ffffff;
    background: #000000 !important;
    border: 1px solid #666666 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-card.card-active {
    border: 2px solid #ffffff !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-card.card-next-1 {
    opacity: 0.36;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-card.card-next-2 {
    opacity: 0.2;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-card.card-next-3 {
    opacity: 0.1;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-card::after {
    display: none;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-card-quote {
    background: #080808 !important;
    border: 0 !important;
    border-left: 3px solid var(--kiki-hc-accent) !important;
    border-radius: 0.35rem !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-card-quote-text,
html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-card-category,
html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-card-index,
html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-card-label,
html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-hint {
    color: #ffffff !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-card-quote-icon {
    color: var(--kiki-hc-accent) !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-gallery-nav-btn {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    color: var(--kiki-hc-accent) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] #homepage-vd-gallery-indicator {
    background: var(--kiki-hc-accent) !important;
    border: 2px solid #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .langs-scroll-section {
    background: #000000 !important;
}

html[data-kiki-page-mode="high_contrast"] section.bg-gradient-to-br,
html[data-kiki-page-mode="high_contrast"] section.bg-gradient-to-b {
    background: #000000 !important;
}

html[data-kiki-page-mode="high_contrast"] .lang-card {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .lang-native {
    color: #ffffff !important;
}

html[data-kiki-page-mode="high_contrast"] .lang-english {
    color: var(--kiki-hc-accent) !important;
}

html[data-kiki-page-mode="high_contrast"] .lang-scroll-fade {
    display: none !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-glow,
html[data-kiki-page-mode="high_contrast"] .homepage-vd-flow-glow,
html[data-kiki-page-mode="high_contrast"] .homepage-vd-hero-orb {
    display: none !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-hero-card {
    background: #000000 !important;
    border: 3px solid var(--kiki-hc-accent) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vd-hero-card h3,
html[data-kiki-page-mode="high_contrast"] .kiki-text-gradient-green {
    background: none !important;
    color: var(--kiki-hc-accent) !important;
    -webkit-text-fill-color: var(--kiki-hc-accent) !important;
}

html[data-kiki-page-mode="high_contrast"] #homepage-voice-design-workflow .h-1\.5 > div {
    background: var(--kiki-hc-accent) !important;
}

html[data-kiki-page-mode="high_contrast"] .audio-player .play-btn {
    background: var(--kiki-hc-accent) !important;
    border: 2px solid #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .audio-player .text-xs[class*="bg-"] {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    color: var(--kiki-hc-accent) !important;
}

html[data-kiki-page-mode="high_contrast"] .btn-primary {
    background: var(--kiki-hc-accent) !important;
    border: 2px solid #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
}

/* Homepage-only async action feedback; does not change the card geometry. */
[data-kiki-clone-intent].is-kiki-clone-loading {
    cursor: progress !important;
    filter: saturate(0.82);
}

html[data-kiki-page-mode="high_contrast"] [data-kiki-clone-intent].is-kiki-clone-loading {
    outline: 3px solid var(--kiki-hc-accent) !important;
    outline-offset: 2px;
}

html[data-kiki-page-mode="night"] footer,
html[data-kiki-page-mode="night"] .section-bg-dark {
    background: var(--kiki-night-surface) !important;
    color: var(--kiki-night-text-secondary) !important;
    border-top-color: var(--kiki-night-border) !important;
}

html[data-kiki-page-mode="high_contrast"] footer {
    background: var(--kiki-hc-surface) !important;
    color: var(--kiki-hc-text-primary) !important;
    border-top: 2px solid var(--kiki-hc-border) !important;
}

html[data-kiki-page-mode="high_contrast"] .section-bg-dark {
    background: var(--kiki-hc-surface) !important;
    border: 2px solid var(--kiki-hc-border);
}

html[data-kiki-page-mode="night"] .homepage-step-number,
html[data-kiki-page-mode="high_contrast"] .homepage-step-number {
    background: var(--kiki-hc-accent) !important;
    color: #06100d !important;
    box-shadow: none !important;
}

@media (max-width: 480px) {
    .homepage-tool-tab {
        gap: 0.2rem !important;
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
        font-size: 0.625rem !important;
    }

    .homepage-tool-tab svg {
        width: 0.75rem !important;
        height: 0.75rem !important;
        margin-right: 0 !important;
        flex: 0 0 auto;
    }

    .homepage-tool-tab span {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }
}

/* The fourth tool tab stays visible on phones instead of requiring horizontal scrolling. */
@media (max-width: 767px) {
    .homepage-tool-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .homepage-tool-tabs .homepage-tool-tab {
        min-height: 2.7rem;
        font-size: 0.75rem !important;
    }

    .homepage-tool-tabs .homepage-tool-tab span {
        min-width: 0;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* Homepage AI Voice Changer: nine static comparisons in a compact, self-contained card. */
#tab-content-vc {
    --home-vc-ink: #17212f;
    --home-vc-muted: #64748b;
    --home-vc-line: #e1e8ed;
    --home-vc-surface: #ffffff;
    --home-vc-soft: #f7faf9;
    --home-vc-target: #f0faf5;
    --home-vc-accent: #059669;
    color: var(--home-vc-ink);
    min-width: 0;
}

.homepage-vc-intro {
    max-width: 52rem;
    margin: 0 auto 1.2rem;
    text-align: center;
}

.homepage-vc-intro h2 {
    margin: 0 0 0.65rem;
    color: var(--home-vc-ink);
    font-size: clamp(1.45rem, 2.8vw, 2.05rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.035em;
}

.homepage-vc-intro p {
    margin: 0;
    color: var(--home-vc-muted);
    font-size: 0.93rem;
    line-height: 1.65;
}

.homepage-vc-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.homepage-vc-tag {
    --home-vc-badge-bg: #ecfdf5;
    --home-vc-badge-line: #bbf7d0;
    --home-vc-badge-ink: #047857;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    min-height: 2rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--home-vc-badge-line);
    border-radius: 999px;
    background: var(--home-vc-badge-bg);
    color: var(--home-vc-badge-ink);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.025);
}

.homepage-vc-tag svg { width: 0.92rem; height: 0.92rem; flex: 0 0 auto; }
.homepage-vc-tag.is-blue { --home-vc-badge-bg: #eff6ff; --home-vc-badge-line: #bfdbfe; --home-vc-badge-ink: #1d4ed8; }
.homepage-vc-tag.is-violet { --home-vc-badge-bg: #f5f3ff; --home-vc-badge-line: #ddd6fe; --home-vc-badge-ink: #7c3aed; }
.homepage-vc-tag.is-amber { --home-vc-badge-bg: #fffbeb; --home-vc-badge-line: #fde68a; --home-vc-badge-ink: #b45309; }

.homepage-vc-showcase {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--home-vc-line);
    border-radius: 1.35rem;
    background: var(--home-vc-soft);
}

.homepage-vc-showcase-heading { display: flex; align-items: center; gap: 0.55rem; min-width: 0; margin: 0 0 0.75rem; padding: 0 0.2rem; }
.homepage-vc-showcase-heading::after { content: ''; height: 1px; min-width: 1.5rem; flex: 1 1 auto; background: var(--home-vc-line); }
.homepage-vc-showcase-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; border: 1px solid #d8eee3; border-radius: 0.55rem; background: #edf9f2; color: var(--home-vc-accent); }
.homepage-vc-showcase-icon svg { width: 0.82rem; height: 0.82rem; }
.homepage-vc-showcase-heading h3 { margin: 0; color: var(--home-vc-muted); font-size: 0.78rem; font-weight: 700; line-height: 1.35; letter-spacing: 0.005em; }

.homepage-vc-demo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    min-width: 0;
}

.homepage-vc-demo-card {
    position: relative;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--home-vc-line);
    border-radius: 1rem;
    background: var(--home-vc-surface);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.025);
    scroll-snap-align: start;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.homepage-vc-demo-card:hover {
    transform: translateY(-2px);
    border-color: #b7ded0;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}

.homepage-vc-demo-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.homepage-vc-demo-number { color: #9aa8b5; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; }
.homepage-vc-demo-language { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; max-width: 75%; color: var(--home-vc-muted); font-size: 0.67rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.homepage-vc-demo-language svg { width: 0.78rem; height: 0.78rem; flex: 0 0 auto; }

.homepage-vc-demo-sample {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    min-height: 3.3rem;
    margin-top: 0.35rem;
    padding: 0.38rem 0.45rem 0.38rem 0.65rem;
    border: 1px solid var(--home-vc-line);
    border-radius: 0.7rem;
    background: var(--home-vc-surface);
}

.homepage-vc-demo-sample.is-converted { border-color: #d0eadf; background: var(--home-vc-target); }
.homepage-vc-demo-copy { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.homepage-vc-demo-label { color: var(--home-vc-muted); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.homepage-vc-demo-sample.is-converted .homepage-vc-demo-label { color: var(--home-vc-accent); }
.homepage-vc-demo-copy strong { color: var(--home-vc-ink); font-size: 0.77rem; font-weight: 750; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.homepage-vc-demo-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid #d5e0e8;
    border-radius: 50%;
    background: #ffffff;
    color: #47627d;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.homepage-vc-demo-play.is-target { border-color: #a7e0c3; background: #dff7ea; color: #047857; }
.homepage-vc-demo-play:hover { transform: scale(1.07); border-color: #059669; color: #047857; }
.homepage-vc-demo-play.is-playing { border-color: #059669; background: #059669; color: #ffffff; }
.homepage-vc-demo-play:focus-visible, .homepage-vc-mobile-controls button:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }
.homepage-vc-play-icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; }
.homepage-vc-play-icon svg { width: 1rem; height: 1rem; }
.homepage-vc-demo-play.is-loading .homepage-vc-play-icon { display: none; }
.homepage-vc-demo-play.is-loading::after { content: ''; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: homepage-vc-spin 0.7s linear infinite; }
@keyframes homepage-vc-spin { to { transform: rotate(360deg); } }
.homepage-vc-mobile-controls { display: none; }
.homepage-vc-cta-wrap { margin-top: 1.15rem; text-align: center; }
.homepage-vc-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.65rem; padding: 0.55rem 1.25rem; border-radius: 0.65rem; color: #ffffff; font-size: 0.88rem; font-weight: 700; box-shadow: 0 8px 16px rgba(5, 150, 105, 0.16); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.homepage-vc-cta:hover { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(5, 150, 105, 0.22); }
.homepage-vc-cta svg { width: 1rem; height: 1rem; }

@media (max-width: 899px) {
    .homepage-vc-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .homepage-vc-intro p { font-size: 0.84rem; }
    .homepage-vc-tags { gap: 0.4rem; }
    .homepage-vc-tag { font-size: 0.67rem; }
    .homepage-vc-showcase { padding: 0.8rem; }
    .homepage-vc-showcase-heading { gap: 0.42rem; }
    .homepage-vc-showcase-heading::after { display: none; }
    .homepage-vc-showcase-heading h3 { font-size: 0.72rem; }
    .homepage-vc-demo-grid { grid-template-columns: none; grid-auto-columns: minmax(245px, 83%); grid-auto-flow: column; gap: 0.55rem; overflow-x: auto; overflow-y: hidden; padding-bottom: 0.35rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .homepage-vc-demo-play { width: 2.75rem; height: 2.75rem; }
    .homepage-vc-mobile-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.65rem; }
    .homepage-vc-mobile-controls button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--home-vc-line); border-radius: 50%; background: var(--home-vc-surface); color: var(--home-vc-ink); }
    .homepage-vc-mobile-controls button:disabled { opacity: 0.4; cursor: default; }
    .homepage-vc-mobile-controls button svg { width: 0.9rem; height: 0.9rem; }
    .homepage-vc-mobile-controls span { color: var(--home-vc-muted); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
}

html[data-kiki-page-mode="night"] #tab-content-vc {
    --home-vc-ink: #eef5f2;
    --home-vc-muted: #bac8c2;
    --home-vc-line: #52625b;
    --home-vc-surface: #303b35;
    --home-vc-soft: #27332d;
    --home-vc-target: #2e493a;
    --home-vc-accent: #6ee7b7;
}

html[data-kiki-page-mode="night"] .homepage-vc-demo-sample.is-converted { border-color: #527a65; }
html[data-kiki-page-mode="night"] .homepage-vc-showcase-icon { border-color: #527a65; background: #2e493a; }
html[data-kiki-page-mode="night"] .homepage-vc-demo-play { background: #354740; border-color: #729184; color: #e0f2e9; }
html[data-kiki-page-mode="night"] .homepage-vc-demo-play.is-playing { background: #059669; color: #ffffff; }
html[data-kiki-page-mode="night"] .homepage-vc-tag.is-green { --home-vc-badge-bg: #214b3b; --home-vc-badge-line: #408b6c; --home-vc-badge-ink: #a7f3d0; }
html[data-kiki-page-mode="night"] .homepage-vc-tag.is-blue { --home-vc-badge-bg: #263f57; --home-vc-badge-line: #4276a5; --home-vc-badge-ink: #bfdbfe; }
html[data-kiki-page-mode="night"] .homepage-vc-tag.is-violet { --home-vc-badge-bg: #3b3158; --home-vc-badge-line: #7256a9; --home-vc-badge-ink: #ddd6fe; }
html[data-kiki-page-mode="night"] .homepage-vc-tag.is-amber { --home-vc-badge-bg: #4d3a24; --home-vc-badge-line: #97713c; --home-vc-badge-ink: #fde68a; }

html[data-kiki-page-mode="high_contrast"] #tab-content-vc {
    --home-vc-ink: #ffffff;
    --home-vc-muted: #ffffff;
    --home-vc-line: #ffffff;
    --home-vc-surface: #000000;
    --home-vc-soft: #000000;
    --home-vc-target: #000000;
    --home-vc-accent: #ffff00;
}

html[data-kiki-page-mode="high_contrast"] .homepage-vc-tag { --home-vc-badge-bg: #000000 !important; --home-vc-badge-line: #ffffff !important; --home-vc-badge-ink: #ffffff !important; }
html[data-kiki-page-mode="high_contrast"] .homepage-vc-demo-sample.is-converted { border-color: #ffffff; }
html[data-kiki-page-mode="high_contrast"] .homepage-vc-showcase-icon { border-color: #ffffff; background: #000000; }
html[data-kiki-page-mode="high_contrast"] .homepage-vc-demo-play { background: #000000; border: 2px solid #ffffff; color: #ffffff; }
html[data-kiki-page-mode="high_contrast"] .homepage-vc-demo-play.is-playing { background: #ffff00; color: #000000; }
html[data-kiki-page-mode="high_contrast"] .homepage-vc-demo-number { color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
    .homepage-vc-demo-card, .homepage-vc-demo-play, .homepage-vc-cta { transition: none; }
    .homepage-vc-demo-play.is-loading::after { animation-duration: 1.4s; }
}

/* Homepage product suite comparison */
#homepage-product-suite.home-suite {
    --home-suite-surface: #ffffff;
    --home-suite-head: #f5f8f7;
    --home-suite-label: #f8fbfa;
    --home-suite-ink: #111827;
    --home-suite-copy-ink: #526174;
    --home-suite-muted: #637487;
    --home-suite-line: #dfe9e6;
    --home-suite-accent: #047857;
    position: relative;
    width: 100%;
    padding: 5.5rem 0;
    overflow: clip;
    background: #ffffff;
    color: var(--home-suite-ink);
}

#homepage-product-suite *,
#homepage-product-suite *::before,
#homepage-product-suite *::after {
    box-sizing: border-box;
}

#homepage-product-suite .home-suite-shell {
    width: min(calc(100% - 2rem), 1280px);
    min-width: 0;
    margin-inline: auto;
}

#homepage-product-suite .home-suite-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

#homepage-product-suite .home-suite-intro {
    min-width: 0;
}

#homepage-product-suite .home-suite-title {
    margin: 0;
    color: var(--home-suite-ink);
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

#homepage-product-suite .home-suite-copy {
    max-width: 850px;
    margin: 1rem 0 0;
    color: var(--home-suite-copy-ink);
    font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
    line-height: 1.8;
}

#homepage-product-suite .home-suite-side {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
    max-width: 100%;
}

#homepage-product-suite .home-suite-mascot {
    display: block;
    width: clamp(110px, 11vw, 156px);
    height: auto;
    object-fit: contain;
}

#homepage-product-suite .home-suite-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid #b8f1d5;
    border-radius: 999px;
    background: #edfdf4;
    color: var(--home-suite-accent);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
}

#homepage-product-suite .home-suite-badge svg,
#homepage-product-suite .home-suite-badge i {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

#homepage-product-suite .home-suite-scroll-hint {
    display: none;
}

#homepage-product-suite .home-suite-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--home-suite-line);
    border-radius: 1.5rem;
    background: var(--home-suite-surface);
    box-shadow: 0 18px 44px rgba(23, 54, 45, 0.06);
    scrollbar-color: #91d9b9 #eef7f2;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

#homepage-product-suite .home-suite-table-scroll::-webkit-scrollbar {
    height: 8px;
}

#homepage-product-suite .home-suite-table-scroll::-webkit-scrollbar-track {
    background: #eef7f2;
}

#homepage-product-suite .home-suite-table-scroll::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: #91d9b9;
}

#homepage-product-suite .home-suite-table-scroll:focus-visible,
#homepage-product-suite .home-suite-tool-link:focus-visible,
#homepage-product-suite .home-suite-cell-link:focus-visible {
    outline: 3px solid #059669;
    outline-offset: -3px;
}

#homepage-product-suite .home-suite-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    text-align: left;
}

#homepage-product-suite .home-suite-table th,
#homepage-product-suite .home-suite-table td {
    border-bottom: 1px solid var(--home-suite-line);
    vertical-align: top;
}

#homepage-product-suite .home-suite-table tr:last-child th,
#homepage-product-suite .home-suite-table tr:last-child td {
    border-bottom: 0;
}

#homepage-product-suite .home-suite-table thead th {
    background: var(--home-suite-head);
    color: #344355;
    font-size: 0.8125rem;
    font-weight: 700;
}

#homepage-product-suite .home-suite-table thead th:first-child {
    width: 160px;
    padding: 1.25rem 1.125rem;
}

#homepage-product-suite .home-suite-table thead th:not(:first-child),
#homepage-product-suite .home-suite-table td {
    padding: 0;
}

#homepage-product-suite .home-suite-table td {
    position: relative;
}

#homepage-product-suite .home-suite-table tbody th {
    width: 160px;
    padding: 1.5rem 1.125rem;
    background: var(--home-suite-label);
    color: var(--home-suite-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.5;
}

#homepage-product-suite .home-suite-tool-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 4.5rem;
    padding: 1rem 1.125rem;
    color: #354b5a;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#homepage-product-suite .home-suite-tool-link svg,
#homepage-product-suite .home-suite-tool-link i {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: #059669;
}

#homepage-product-suite .home-suite-cell-link {
    display: block;
    min-height: 100%;
    padding: 1.5rem 1.125rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

/* The pseudo-element expands the link hit area to the tallest cell in each row. */
#homepage-product-suite .home-suite-cell-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

#homepage-product-suite .home-suite-cell-title {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--home-suite-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.45;
}

#homepage-product-suite .home-suite-cell-copy {
    display: block;
    color: var(--home-suite-copy-ink);
    font-size: 0.875rem;
    line-height: 1.7;
}

#homepage-product-suite .home-suite-tool-link:hover,
#homepage-product-suite .home-suite-cell-link:hover {
    background: #edfbf4;
}

#homepage-product-suite .home-suite-tool-link:hover,
#homepage-product-suite .home-suite-cell-link:hover .home-suite-cell-title {
    color: var(--home-suite-accent);
}

@media (max-width: 900px) {
    #homepage-product-suite.home-suite {
        padding: 4rem 0;
    }

    #homepage-product-suite .home-suite-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    #homepage-product-suite .home-suite-side {
        align-self: flex-end;
    }

    #homepage-product-suite .home-suite-mascot {
        width: 112px;
    }

    #homepage-product-suite .home-suite-table {
        min-width: 1010px;
    }

    #homepage-product-suite .home-suite-table thead th:first-child,
    #homepage-product-suite .home-suite-table tbody th {
        position: sticky;
        left: 0;
        width: 126px;
        box-shadow: 5px 0 9px -8px #244c3c;
        z-index: 1;
    }

    #homepage-product-suite .home-suite-table thead th:first-child {
        z-index: 2;
    }

    #homepage-product-suite .home-suite-scroll-hint {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0 0 0.75rem;
        color: var(--home-suite-muted);
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.5;
    }

    #homepage-product-suite .home-suite-scroll-hint::after {
        content: "→";
        color: var(--home-suite-accent);
        font-size: 1.1rem;
        line-height: 1;
    }
}

@media (max-width: 480px) {
    #homepage-product-suite.home-suite {
        padding: 3.5rem 0;
    }

    #homepage-product-suite .home-suite-shell {
        width: min(calc(100% - 1.5rem), 1280px);
    }

    #homepage-product-suite .home-suite-title {
        font-size: clamp(1.85rem, 8vw, 2.25rem);
    }

    #homepage-product-suite .home-suite-copy {
        font-size: 0.9375rem;
    }

    #homepage-product-suite .home-suite-badge {
        padding: 0.6rem 0.8rem;
        font-size: 0.75rem;
    }

    #homepage-product-suite .home-suite-mascot {
        width: 88px;
    }

    #homepage-product-suite .home-suite-table-scroll {
        border-radius: 1rem;
    }

    #homepage-product-suite .home-suite-table {
        min-width: 880px;
    }

    #homepage-product-suite .home-suite-table thead th:first-child,
    #homepage-product-suite .home-suite-table tbody th {
        width: 112px;
        padding: 1rem 0.75rem;
    }

    #homepage-product-suite .home-suite-tool-link,
    #homepage-product-suite .home-suite-cell-link {
        padding: 1rem 0.875rem;
    }
}

html[data-kiki-page-mode="night"] #homepage-product-suite.home-suite {
    --home-suite-surface: var(--kiki-night-surface);
    --home-suite-head: var(--kiki-night-surface-soft);
    --home-suite-label: var(--kiki-night-surface-soft);
    --home-suite-ink: var(--kiki-night-text-primary);
    --home-suite-copy-ink: var(--kiki-night-text-secondary);
    --home-suite-muted: var(--kiki-night-text-secondary);
    --home-suite-line: var(--kiki-night-border);
    --home-suite-accent: var(--kiki-night-accent);
    background: var(--kiki-night-page-bg);
}

html[data-kiki-page-mode="night"] #homepage-product-suite .home-suite-badge,
html[data-kiki-page-mode="night"] #homepage-product-suite .home-suite-tool-link:hover,
html[data-kiki-page-mode="night"] #homepage-product-suite .home-suite-cell-link:hover {
    background: var(--kiki-night-surface-raised);
}

html[data-kiki-page-mode="night"] #homepage-product-suite .home-suite-badge {
    border-color: var(--kiki-night-border);
}

html[data-kiki-page-mode="night"] #homepage-product-suite .home-suite-table thead th,
html[data-kiki-page-mode="night"] #homepage-product-suite .home-suite-tool-link {
    color: var(--kiki-night-text-primary);
}

html[data-kiki-page-mode="high_contrast"] #homepage-product-suite.home-suite {
    --home-suite-surface: #000000;
    --home-suite-head: #000000;
    --home-suite-label: #000000;
    --home-suite-ink: #ffffff;
    --home-suite-copy-ink: #ffffff;
    --home-suite-muted: #ffffff;
    --home-suite-line: #ffffff;
    --home-suite-accent: #6ee7b7;
    background: #000000;
}

html[data-kiki-page-mode="high_contrast"] #homepage-product-suite .home-suite-table-scroll,
html[data-kiki-page-mode="high_contrast"] #homepage-product-suite .home-suite-badge {
    border: 2px solid #ffffff;
    box-shadow: none;
    background: #000000;
}

html[data-kiki-page-mode="high_contrast"] #homepage-product-suite .home-suite-table thead th,
html[data-kiki-page-mode="high_contrast"] #homepage-product-suite .home-suite-tool-link,
html[data-kiki-page-mode="high_contrast"] #homepage-product-suite .home-suite-tool-link svg,
html[data-kiki-page-mode="high_contrast"] #homepage-product-suite .home-suite-tool-link i {
    color: #ffffff;
}

html[data-kiki-page-mode="high_contrast"] #homepage-product-suite .home-suite-tool-link:hover,
html[data-kiki-page-mode="high_contrast"] #homepage-product-suite .home-suite-cell-link:hover {
    background: #12392c;
}

/* Commercial use section above the homepage FAQ. */
#homepage-commercial {
    --home-commercial-surface: #ffffff;
    --home-commercial-soft: #f0fdf4;
    --home-commercial-ink: #111827;
    --home-commercial-copy: #4b5563;
    --home-commercial-accent: #047857;
    --home-commercial-positive: #bbf7d0;
    --home-commercial-negative: #fecdd3;
    position: relative;
    padding: 5rem 0;
    background: linear-gradient(180deg, #f5faf8, #ffffff);
    color: var(--home-commercial-ink);
}

#homepage-commercial .home-commercial-shell {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 2rem;
    overflow-wrap: anywhere;
}

#homepage-commercial .home-commercial-header {
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}

#homepage-commercial .home-commercial-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--home-commercial-accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#homepage-commercial .home-commercial-kicker::before {
    content: "";
    width: 22px;
    height: 2px;
    flex-shrink: 0;
    border-radius: 2px;
    background: currentColor;
}

#homepage-commercial h2 {
    margin: 0;
    color: var(--home-commercial-ink);
    font-size: clamp(1.625rem, 2.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

#homepage-commercial .home-commercial-header p {
    margin: 1.25rem 0 0.5rem;
    color: var(--home-commercial-copy);
    font-size: 1rem;
    line-height: 1.8;
}

#homepage-commercial .home-commercial-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    color: var(--home-commercial-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

#homepage-commercial .home-commercial-link:focus-visible {
    outline: 2px solid var(--home-commercial-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

#homepage-commercial .home-commercial-policies {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

#homepage-commercial .home-commercial-policy {
    min-width: 0;
    padding: 1.75rem;
    border: 1px solid var(--home-commercial-negative);
    border-radius: 1.5rem;
    background: var(--home-commercial-surface);
}

#homepage-commercial .home-commercial-policy.is-do {
    border-color: var(--home-commercial-positive);
    background: var(--home-commercial-soft);
}

#homepage-commercial .home-commercial-policy h3 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    color: var(--home-commercial-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

#homepage-commercial .home-commercial-policy ul {
    display: grid;
    gap: 0.625rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

#homepage-commercial .home-commercial-policy li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--home-commercial-copy);
    font-size: 0.875rem;
    line-height: 1.75;
}

#homepage-commercial .home-commercial-policy li span { min-width: 0; }
#homepage-commercial .home-commercial-policy svg,
#homepage-commercial .home-commercial-link svg { width: 18px; height: 18px; flex-shrink: 0; }
#homepage-commercial .home-commercial-policy li svg { margin-top: 0.2rem; }

@media (max-width: 639px) {
    #homepage-commercial { padding: 3.5rem 0; }
    #homepage-commercial .home-commercial-shell { padding-inline: 1rem; }
    #homepage-commercial .home-commercial-header p { font-size: 0.9375rem; }
    #homepage-commercial .home-commercial-policies { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
    #homepage-commercial .home-commercial-policy { padding: 1.5rem; }
}

html[data-kiki-page-mode="night"] #homepage-commercial {
    --home-commercial-surface: var(--kiki-night-surface);
    --home-commercial-soft: var(--kiki-night-surface-soft);
    --home-commercial-ink: var(--kiki-night-text-primary);
    --home-commercial-copy: var(--kiki-night-text-secondary);
    --home-commercial-accent: var(--kiki-night-accent);
    --home-commercial-positive: #285e4d;
    --home-commercial-negative: #69424d;
    background: var(--kiki-night-page-bg);
}

html[data-kiki-page-mode="high_contrast"] #homepage-commercial {
    --home-commercial-surface: #000000;
    --home-commercial-soft: #000000;
    --home-commercial-ink: #ffffff;
    --home-commercial-copy: #ffffff;
    --home-commercial-accent: #6ee7b7;
    --home-commercial-positive: #6ee7b7;
    --home-commercial-negative: #fda4af;
    background: #000000;
}

@media (prefers-reduced-motion: reduce) {
    .particle,
    .floating-orb,
    .animate-float,
    .animate-bounce,
    .animate-ping,
    .animate-scan,
    .animate-watermark-shine,
    .animate-lang-scroll-left,
    .animate-lang-scroll-right,
    .homepage-vd-gallery-card,
    .homepage-trust-wave__layer,
    .cta-section::after {
        animation: none !important;
    }

    .homepage-vd-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }

    .homepage-vd-gallery-card,
    [data-kiki-clone-intent] {
        transition-duration: 0.01ms !important;
    }
}