/* ========================================
   Service Themes System
   ======================================== */

/* Default Variables (Marketing Theme Base) */
:root {
    --theme-primary: #fbbf24;
    /* Amber-400 */
    --theme-secondary: #f59e0b;
    --theme-glow: rgba(251, 191, 36, 0.3);
    --theme-gradient-start: #2563eb;
    --theme-gradient-end: #4f46e5;
}

/* ----------------------------------------
   Theme: Marketing (Growth / Gold)
   ---------------------------------------- */
.theme-marketing {
    --theme-primary: #fbbf24;
    --theme-secondary: #d97706;
    --theme-glow: rgba(251, 191, 36, 0.3);
    --theme-text-gradient: linear-gradient(135deg, #fff 0%, #fbbf24 100%);
}

/* Marketing Background: Abstract Rising Curves */
background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.15), transparent 40%),
radial-gradient(circle at bottom left, rgba(234, 179, 8, 0.1), transparent 40%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fbbf24' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Compact Spacing for Marketing Theme */
.theme-marketing .section {
    padding: 2rem 0;
    /* Reduced from default */
}

.theme-marketing .service-hero-premium {
    padding-bottom: 2rem;
    /* Reduced bottom padding */
}

/* Force Gradient on Headings in Marketing Theme - REMOVED per user request */
/* .theme-marketing h2.section-title,
.theme-marketing .feature-content h3 {
    background: var(--theme-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
} */

/* ----------------------------------------
   Theme: Development (Code / Cyan)
   ---------------------------------------- */
.theme-dev {
    --theme-primary: #06b6d4;
    /* Cyan-500 */
    --theme-secondary: #0ea5e9;
    /* Sky-500 */
    --theme-glow: rgba(6, 182, 212, 0.3);
    --theme-text-gradient: linear-gradient(135deg, #fff 0%, #06b6d4 100%);
}

/* Development Background: Circuit / Binary Pattern */
.theme-dev .hero-bg-gradient {
    background:
        radial-gradient(circle at top right, rgba(6, 182, 212, 0.2), transparent 40%),
        radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.15), transparent 40%),
        url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.735-5.197-2.336-8.111-3.954C71.682 9.69 67.284 3 50 3c-17.14 0-21.789 6.275-25.353 12.636-2.91 5.19-5.59 10.15-8.249 10.96V10h-2v10h-2v-4h-2v4h-2V0H6v20H4V0H2v20H0v-5h20v5h1.184z' fill='%2306b6d4' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.theme-dev .btn-primary-gradient {
    background: linear-gradient(90deg, #0891b2 0%, #2563eb 100%);
}

.theme-dev .btn-primary-gradient:before {
    background: linear-gradient(90deg, #2563eb 0%, #0891b2 100%);
}

/* ----------------------------------------
   Theme: AI & Automation (Future / Purple)
   ---------------------------------------- */
.theme-ai {
    --theme-primary: #a855f7;
    /* Purple-500 */
    --theme-secondary: #d946ef;
    /* Fuchsia-500 */
    --theme-glow: rgba(168, 85, 247, 0.3);
    --theme-text-gradient: linear-gradient(135deg, #fff 0%, #d946ef 100%);
}

/* AI Background: Neural / Digital Grid */
.theme-ai .hero-bg-gradient {
    background:
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.25), transparent 45%),
        radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.15), transparent 45%),
        url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d946ef' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-ai .btn-primary-gradient {
    background: linear-gradient(90deg, #7c3aed 0%, #db2777 100%);
}

.theme-ai .btn-primary-gradient:before {
    background: linear-gradient(90deg, #db2777 0%, #7c3aed 100%);
}

/* Apply Theme Variables */
.text-gradient-theme {
    background: var(--theme-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.breadcrumb-dark .active {
    color: var(--theme-primary);
}

.card-stat strong {
    color: var(--theme-primary);
}

/* ----------------------------------------
   Visual Elements: Development
   ---------------------------------------- */
.code-window {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
}

.code-line {
    display: block;
    color: rgba(255, 255, 255, 0.7);
}

.keyword {
    color: #c678dd;
}

.string {
    color: #98c379;
}

.func {
    color: #61afef;
}

.tag {
    color: #e06c75;
}

/* ----------------------------------------
   Visual Elements: AI
   ---------------------------------------- */
.ai-brain-node {
    fill: var(--theme-primary);
    filter: drop-shadow(0 0 5px var(--theme-primary));
}

.ai-connection {
    stroke: var(--theme-primary);
    stroke-opacity: 0.4;
    stroke-dasharray: 4;
    animation: dash 20s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: 100;
    }
}

/* ========================================
   Floating Elements & Animations
   ======================================== */
.visual-composition {
    position: relative;
    width: 100%;
    height: 400px;
}

.float-element {
    position: absolute;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    transition: all 0.5s ease;
    will-change: transform;
}

/* Default Positions if not inline */
.float-1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    animation: float1 6s ease-in-out infinite;
}

.float-2 {
    top: 10%;
    right: 0;
    z-index: 1;
    animation: float2 7s ease-in-out infinite;
    animation-delay: 1s;
}

.float-3 {
    bottom: 10%;
    left: 0;
    z-index: 3;
    animation: float3 8s ease-in-out infinite;
    animation-delay: 2s;
}

/* Animations */
@keyframes float1 {

    0%,
    100% {
        transform: translate(-50%, -50%) translateY(0px);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-15px);
    }
}

@keyframes float2 {

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

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

@keyframes float3 {

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

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

/* Mobile Animation Optimization - Gentle Float */
@media (max-width: 768px) {
    .visual-composition {
        height: 320px;
    }

    .float-1,
    .float-2,
    .float-3 {
        animation: simpleFloat 4s ease-in-out infinite !important;
        transform: translate(0, 0) !important;
    }

    .float-1 {
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
        animation: simpleFloatCenter 5s ease-in-out infinite !important;
    }

    .float-2 {
        top: 5%;
        right: 5%;
    }

    .float-3 {
        bottom: 5%;
        left: 5%;
    }
}

@keyframes simpleFloat {

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

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

@keyframes simpleFloatCenter {

    0%,
    100% {
        transform: translate(-50%, -50%) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-8px);
    }
}

/* ========================================
   Visual Enhancements (Implementation Plan)
   ======================================== */

/* 1. Typography & Readability */
body {
    line-height: 1.8;
    /* Increased from default */
    font-size: 1.05rem;
    /* Slightly larger base size */
}

p.lead-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 800px;
}

.section-description {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 1rem auto 3rem;
}

/* 2. Premium Card Styles */
.intro-card,
.result-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    /* More rounded */
    padding: 2.5rem;
    /* More breathing room */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.intro-card:hover,
.result-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
    border-color: var(--theme-primary);
}

.intro-card:hover .intro-card-icon,
.result-card:hover .result-icon {
    transform: scale(1.1) rotate(5deg);
    background: var(--theme-glow);
    color: var(--theme-primary);
}

.intro-card-icon,
.result-icon {
    transition: all 0.3s ease;
    width: 60px;
    height: 60px;
    background: var(--bg-light);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

/* 3. New Feature Grid Card (Replaces Inline Styles) */
.feature-grid-card {
    background: var(--bg-white);
    padding: 3.5rem;
    border-radius: 24px;
    border: 1px solid var(--border-light);
    margin-bottom: 3rem;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: 1fr 350px;
    /* Content | Visual */
    gap: 3rem;
    align-items: center;
    transition: transform 0.3s ease;
}

.feature-grid-card.reverse {
    grid-template-columns: 350px 1fr;
    /* Visual | Content */
}

.feature-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px -20px rgba(0, 0, 0, 0.08);
}

.feature-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.feature-content p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.feature-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Responsiveness for Feature Grid */
@media (max-width: 991px) {

    .feature-grid-card,
    .feature-grid-card.reverse {
        grid-template-columns: 1fr;
        padding: 2rem;
        gap: 2rem;
        text-align: center;
    }

    .feature-visual {
        order: -1;
        /* Image on top */
    }

    .feature-visual svg {
        max-width: 250px;
    }
}

/* 4. Horizontal Result Card (Redesign) */
.result-card-horizontal {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    align-items: flex-start;
    /* Align to top */
    gap: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

.result-card-horizontal:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
    border-color: var(--theme-primary);
}

.result-card-horizontal .result-icon-wrapper {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background: var(--bg-light);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-primary);
    font-size: 1.5rem;
    /* For icon size */
    transition: all 0.3s ease;
}

.result-card-horizontal:hover .result-icon-wrapper {
    background: var(--theme-glow);
    transform: scale(1.05) rotate(3deg);
}

.result-content-wrapper {
    flex-grow: 1;
}

.result-big-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
    background: var(--theme-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.result-title-sm {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
}

.result-desc-sm {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Mobile fix for horizontal cards */
@media (max-width: 768px) {
    .result-card-horizontal {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}