/* AI Video Landing Page - Professional Blue/Dark Theme (Matching 3D Animation Studio) */

:root {
    --primary: #2563eb;
    /* Royal Blue */
    --secondary: #764ba2;
    /* Deep Purple */
    --accent: #667eea;
    /* Light Blue/Purple */
    --bg-page: #ffffff;
    /* White */
    --text-dark: #111827;
    /* Dark Gray/Black */
    --text-light: #4b5563;
    /* Gray */
    --card-bg: #ffffff;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --border-radius: 16px;
    /* Slightly less rounded than before to match professional look */
}

body {
    background-color: var(--bg-page);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-dark);
}

/* Reset or override global styles specific to this page container */
.ai-page-wrapper {
    overflow-x: hidden;
}

/* Hero Section */
.ai-hero {
    /* Match 3D Animation Studio Hero */
    background: radial-gradient(circle at 30% 50%, #2c3e50, #000000);
    padding: 160px 0 120px;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Keeping the curved bottom as it's part of the "AI" layout, but making it subtle? 
       Actually, the 3D page doesn't have it. Let's keep it for unique identity or remove if strict match needed. 
       User said "layout okay", so I will keep the layout (curve) but change colors. */
    clip-path: ellipse(150% 100% at 50% 0%);
}

/* Optional: Subtle animated overlay to keep it "AI" but darker */
.ai-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    animation: rotate 30s linear infinite;
    pointer-events: none;
}

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

    to {
        transform: rotate(360deg);
    }
}

.ai-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    /* Remove colorful text shadow, keep it clean */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.02em;
    color: white;
}

.ai-hero p {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto 2.5rem;
    color: rgba(255, 255, 255, 0.9);
    /* Slightly more opaque */
    line-height: 1.6;
}

.ai-btn {
    display: inline-block;
    background: var(--primary);
    /* Blue button */
    color: white;
    font-weight: 700;
    padding: 16px 40px;
    border-radius: 50px;
    /* Keep pill shape */
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    /* Blue shadow */
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.ai-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
    background-color: #1d4ed8;
    /* Darker blue */
    color: white;
}

.ai-btn-secondary {
    background: transparent;
    border: 2px solid white;
    color: white;
    margin-left: 1rem;
    box-shadow: none;
}

.ai-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    box-shadow: none;
}

/* Sections General */
.ai-section {
    padding: 100px 0;
    position: relative;
}

.ai-section-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 1rem;
    /* Use solid dark color instead of gradient text */
    color: var(--text-dark);
    display: inline-block;
    background: none;
    -webkit-text-fill-color: initial;
}

.ai-section-subtitle {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 4rem;
    color: var(--text-light);
    font-size: 1.1rem;
}

.title-centers {
    text-align: center;
}

/* Services Grid */
.ai-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.ai-card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Grey border */
    position: relative;
    overflow: hidden;
}

.ai-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    /* Use the purple/blue gradient from 3D page */
    background: linear-gradient(to bottom, var(--primary), var(--secondary));
    border-radius: 4px 0 0 4px;
}

.ai-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.ai-card h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-weight: 700;
}

.ai-card p {
    color: var(--text-light);
    line-height: 1.6;
}

/* Process Steps */
.process-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    position: relative;
}

.process-step-item {
    flex: 1;
    min-width: 200px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 auto 1.5rem;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.process-step-item h3 {
    font-size: 1.2rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

/* FAQ Accordion */
.ai-faq-item {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.ai-faq-header {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: white;
    transition: background 0.2s;
}

.ai-faq-header:hover {
    background: #F9FAFB;
}

.ai-faq-question {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.ai-faq-icon {
    color: var(--primary);
    transition: transform 0.3s;
}

.ai-faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #F9FAFB;
}

.ai-faq-body {
    padding: 1.5rem 2rem;
    color: var(--text-light);
    line-height: 1.6;
}

.ai-faq-item.faq-open .ai-faq-icon {
    transform: rotate(180deg);
}

.ai-faq-item.faq-open .ai-faq-header {
    color: var(--primary);
}

/* CTA Bottom */
.ai-cta {
    /* Use the dark gradient like Hero for consistency with the theme */
    background: radial-gradient(circle at 30% 50%, #2c3e50, #000000);
    color: white;
    text-align: center;
    border-radius: var(--border-radius);
    padding: 80px 40px;
    margin: 0 20px 100px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.ai-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .ai-hero h1 {
        font-size: 2.5rem;
    }

    .process-wrapper {
        flex-direction: column;
    }

    .process-step-item {
        margin-bottom: 2rem;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

.animate-fade-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    /* Start hidden */
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-delay-100 {
    animation-delay: 0.1s;
}

.animate-delay-200 {
    animation-delay: 0.2s;
}

.animate-delay-300 {
    animation-delay: 0.3s;
}

.animate-delay-400 {
    animation-delay: 0.4s;
}

.animate-delay-500 {
    animation-delay: 0.5s;
}

/* Pulse effect for CTA button */
.ai-btn {
    animation: pulse-glow 2s infinite;
}

/* Video Slider Styles */
.video-slider-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.video-slider {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
}

.video-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.video-slide.active {
    opacity: 1;
    pointer-events: all;
    z-index: 1;
}

.video-slide video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.video-slider-container:hover .video-caption {
    transform: translateY(0);
}

/* Navigation Buttons */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.3);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-btn:hover {
    background: rgba(255, 255, 255, 0.8);
    color: var(--primary);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 15px;
}

.next-btn {
    right: 15px;
}

/* Dots */
.slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.slider-dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot.active {
    background: white;
    transform: scale(1.2);
}

.slider-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* --- Refactored Utility Classes (Extracted from Inline Styles) --- */

.ai-magic-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 20px;
    display: inline-block;
}

.hero-shape {
    position: absolute;
    animation: float 4s infinite ease-in-out;
    user-select: none;
    pointer-events: none;
}

.shape-1 {
    top: 20%;
    left: 10%;
    font-size: 3rem;
}

.shape-2 {
    top: 30%;
    right: 15%;
    font-size: 3rem;
    animation-duration: 5s;
    animation-delay: 1s;
}

.shape-3 {
    bottom: 20%;
    left: 20%;
    font-size: 2.5rem;
    animation-duration: 3s;
    animation-delay: 0.5s;
}

.section-bg-pale {
    background: #F3E8FF;
}

.section-bg-gradient {
    background: linear-gradient(to bottom, #FDF4FF, #FFF);
}

.section-bg-pale-alt {
    background: #FDF4FF;
}

.ai-card-icon-large {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.text-white {
    color: white !important;
}

.mt-3rem {
    margin-top: 3rem;
}

.work-showcase {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    max-width: 900px;
    margin: 0 auto;
}

.work-title {
    margin-bottom: 20px;
}

.work-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 30px;
}

.container-narrow {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cta-text {
    margin-bottom: 2rem;
    font-size: 1.2rem;
    opacity: 0.9;
}
@media (max-width: 768px) {
.ai-section-title {
  font-size: 2rem;
}
    .ai-cta h2 {
  font-size: 1.9rem;
}
}