:root {
    --bg-color-start: #060913;
    --bg-color-end: #000000;
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --accent-blue: #3b82f6;
    --accent-purple: #8b5cf6;
    --card-bg: rgba(15, 23, 42, 0.4);
    --card-border: rgba(255, 255, 255, 0.06);
    --glow-color: rgba(99, 102, 241, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color-end);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Background Elements */
.bg-gradient {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--bg-color-start) 0%, var(--bg-color-end) 100%);
    z-index: -3;
}

.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -2;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 30%, transparent 100%);
}

#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

.ambient-glow {
    position: fixed;
    top: -10%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
    filter: blur(80px);
}

/* Typography Utilities */
.text-white {
    color: var(--text-primary);
}

.text-gradient {
    background: linear-gradient(to right, #7fb5ff, #9f7aea);
    /* Adjusted for visual match */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* ---------------- HERO SECTION ---------------- */
.hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* alineación real a la izquierda */
    padding: 20px 20px 40px 20px; /* padding horizontal seguro */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* evita corte horizontal */
    box-sizing: border-box;
}

.main-title {
    font-size: clamp(2.6rem, 9vw, 3.5rem); /* escala fluida */
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-align: left;
    width: 100%;
    max-width: 100%;
    margin-bottom: 40px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Mobile-first Mockup Layout */
.mockup-container {
    width: 100%;
    max-width: 80%;
    /* Prompt: Max width: 80% of screen */
    margin: 0 auto;
    animation: float 6s ease-in-out infinite;
    position: relative;
}

.mockup-ui {
    background: rgba(18, 24, 38, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 40px rgba(99, 102, 241, 0.15);
    /* Soft ambient glow */
    position: relative;
}

.mockup-header {
    margin-bottom: 20px;
}

.dots {
    display: flex;
    gap: 6px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #475569;
}

.dot.red {
    background: #ef4444;
}

.dot.yellow {
    background: #f59e0b;
}

.dot.green {
    background: #10b981;
}

.skeleton-line {
    height: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin-bottom: 12px;
}

.skeleton-line.full {
    width: 100%;
}

.skeleton-line.medium {
    width: 80%;
}

.skeleton-line.short {
    width: 40%;
    margin-top: 20px;
}

.cards-row {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.skeleton-card {
    flex: 1;
    height: 60px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.skeleton-card.active {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

/* Floating Badges */
.floating-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: rgba(15, 20, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.2);
    animation: floatBadge 5s ease-in-out infinite alternate;
    backdrop-filter: blur(10px);
}

.badge-title {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.badge-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #60a5fa;
    margin-bottom: 8px;
}

.badge-bar-container {
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.badge-bar {
    width: 70%;
    height: 100%;
    background: #8b5cf6;
    border-radius: 2px;
}

.floating-badge-top {
    position: absolute;
    top: -15px;
    right: -15px;
    background: rgba(15, 20, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: floatBadge 4s ease-in-out infinite alternate-reverse;
    backdrop-filter: blur(10px);
}

.badge-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
    font-size: 0.65rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-lines .line {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    width: 30px;
    margin-bottom: 4px;
}

.badge-lines .line.blue {
    background: #3b82f6;
    width: 40px;
    margin-bottom: 0;
}

@keyframes float {

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

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

@keyframes floatBadge {

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

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

/* ---------------- SERVICES SECTION ---------------- */
.services-section {
    padding: 20px 0 60px;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    /* Large vertical spacing */
}

.service-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 400px;
    /* Optimized for mobile scroll */
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.service-card:active {
    transform: scale(0.98);
}

.card-visual {
    height: 65%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    position: relative;
}

/* ---- Shared Service 3D Base ---- */
.service-3d {
    position: relative;
    animation: float 5s ease-in-out infinite;
    width: 75%;
    max-width: 280px;
}

/* ---- Floating Service Badge ---- */
.service-badge {
    position: absolute;
    bottom: -14px;
    right: -14px;
    background: rgba(15, 20, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(99, 102, 241, 0.2);
    animation: floatBadge 4s ease-in-out infinite alternate;
    backdrop-filter: blur(10px);
    z-index: 2;
}

.service-badge.top-left {
    bottom: auto;
    right: auto;
    top: -14px;
    left: -14px;
}

.service-badge.top-right {
    bottom: auto;
    right: -14px;
    top: -14px;
    left: auto;
}

.service-badge.bottom-right {
    bottom: -14px;
    right: -14px;
}

.sbadge-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.2);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sbadge-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

/* ==================================
   1. APP / SOFTWARE DEV — Realistic IDE
   ================================== */
.service-3d.app-dev {
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 40px rgba(99, 102, 241, 0.15);
}

/* IDE Title Bar */
.ide-titlebar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    background: #161b22;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ide-dots {
    display: flex;
    gap: 5px;
}

.s3d-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #475569;
}

.s3d-dot.red {
    background: #ff5f57;
}

.s3d-dot.yellow {
    background: #febc2e;
}

.s3d-dot.green {
    background: #28c840;
}

.ide-tabs {
    display: flex;
    gap: 2px;
    margin-left: 6px;
}

.ide-tab {
    font-size: 0.55rem;
    padding: 3px 10px;
    border-radius: 5px 5px 0 0;
    color: #8b949e;
    background: transparent;
    font-family: 'Inter', monospace;
    letter-spacing: 0.02em;
}

.ide-tab.active {
    background: #0d1117;
    color: #e6edf3;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid #0d1117;
}

/* IDE Workspace */
.ide-workspace {
    display: flex;
}

.ide-sidebar {
    width: 28px;
    background: #161b22;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sidebar-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-icon.active {
    background: rgba(139, 92, 246, 0.35);
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.2);
}

/* Code Editor */
.ide-editor {
    flex: 1;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.editor-line {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 4px;
    border-radius: 3px;
    min-height: 16px;
}

.editor-line.active-line {
    background: rgba(139, 92, 246, 0.08);
    border-left: 2px solid #8b5cf6;
}

.line-num {
    font-size: 0.5rem;
    color: #484f58;
    width: 12px;
    text-align: right;
    font-family: monospace;
    flex-shrink: 0;
}

.tok-keyword {
    font-size: 0.5rem;
    color: #ff7b72;
    font-family: monospace;
    font-weight: 600;
}

.tok-text {
    font-size: 0.5rem;
    color: #e6edf3;
    font-family: monospace;
}

.tok-func {
    font-size: 0.5rem;
    color: #d2a8ff;
    font-family: monospace;
}

.tok-method {
    font-size: 0.5rem;
    color: #ffa657;
    font-family: monospace;
}

.tok-string {
    font-size: 0.5rem;
    color: #a5d6ff;
    font-family: monospace;
}

.tok-bracket {
    font-size: 0.5rem;
    color: #8b949e;
    font-family: monospace;
}

.tok-indent {
    width: 16px;
}

/* Blinking Cursor */
.ide-cursor {
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #58a6ff;
    margin-left: 2px;
    animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* IDE Terminal */
.ide-terminal {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #161b22;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: monospace;
    font-size: 0.5rem;
}

.term-prompt {
    color: #3fb950;
    font-weight: 700;
}

.term-cmd {
    color: #8b949e;
}

.term-success {
    color: #3fb950;
    margin-left: auto;
}

/* ==================================
   2. RESPONSIVE WEBSITE — Vivid Devices
   ================================== */
.service-3d.web-dev {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    justify-content: center;
}

.device-desktop {
    width: 68%;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 30px rgba(59, 130, 246, 0.12);
}

.device-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #1e293b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bar-dots {
    display: flex;
    gap: 4px;
}

.bar-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #475569;
}

.bar-url {
    font-size: 0.45rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 8px;
    border-radius: 3px;
    font-family: monospace;
    letter-spacing: 0.02em;
}

.device-screen {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Screen Nav */
.screen-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
}

.nav-logo {
    width: 18px;
    height: 6px;
    border-radius: 2px;
    background: linear-gradient(90deg, #8b5cf6, #3b82f6);
}

.nav-links {
    display: flex;
    gap: 5px;
}

.nav-dot {
    width: 12px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
}

/* Screen Hero — gradient */
.screen-hero {
    padding: 10px 8px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.15), rgba(34, 211, 238, 0.1));
    border-radius: 5px;
    border: 1px solid rgba(139, 92, 246, 0.12);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.hero-title-line {
    height: 5px;
    width: 70%;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.hero-title-line.short {
    width: 45%;
    background: rgba(255, 255, 255, 0.12);
}

.hero-cta-btn {
    width: 28px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #8b5cf6, #22d3ee);
    margin-top: 3px;
}

/* Features Row */
.screen-features {
    display: flex;
    gap: 4px;
}

.feature-card {
    flex: 1;
    padding: 5px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.feat-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.feat-icon.purple {
    background: #8b5cf6;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

.feat-icon.blue {
    background: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.feat-icon.cyan {
    background: #22d3ee;
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}

.feat-line {
    width: 80%;
    height: 3px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.06);
}

/* Phone Device */
.device-phone {
    width: 30%;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(139, 92, 246, 0.1);
    position: relative;
}

.phone-notch {
    width: 36%;
    height: 4px;
    background: #1e293b;
    border-radius: 0 0 4px 4px;
    margin: 0 auto;
}

.phone-screen {
    padding: 6px 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.phone-header-gradient {
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6, #22d3ee);
}

.phone-card {
    display: flex;
    gap: 5px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.phone-img {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.3));
    flex-shrink: 0;
}

.phone-text-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.ptl {
    height: 3px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.ptl.short {
    width: 60%;
}

.phone-btn {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #8b5cf6, #22d3ee);
    opacity: 0.7;
}

/* ==================================
   3. AI AUTOMATION
   ================================== */
.service-3d.ai-automation {
    background: rgba(18, 24, 38, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 30px rgba(139, 92, 246, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.gear-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gear {
    border-radius: 50%;
    border: 2.5px dashed rgba(139, 92, 246, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spinGear 6s linear infinite;
}

.gear.large {
    width: 52px;
    height: 52px;
}

.gear.small {
    width: 34px;
    height: 34px;
    animation-direction: reverse;
    animation-duration: 4s;
}

.gear-inner {
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.35);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}

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

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

.circuit-lines {
    position: relative;
    width: 100%;
    height: 20px;
}

.circuit-h {
    position: absolute;
    top: 50%;
    left: 15%;
    right: 15%;
    height: 2px;
    background: rgba(59, 130, 246, 0.25);
    border-radius: 1px;
}

.circuit-v {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: rgba(59, 130, 246, 0.25);
    border-radius: 1px;
}

.circuit-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}

.circuit-node.pulse {
    animation: nodePulse 2s ease-in-out infinite;
}

@keyframes nodePulse {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
        transform: translate(-50%, -50%) scale(1.3);
    }
}

/* ==================================
   4. AI REVIEWS SYSTEM
   ================================== */
.service-3d.ai-reviews {
    background: rgba(18, 24, 38, 0.75);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 30px rgba(251, 191, 36, 0.08);
}

/* Review card (user's incoming review) */
.review-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reviewer-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99,102,241,0.5), rgba(139,92,246,0.5));
    flex-shrink: 0;
}

.reviewer-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reviewer-name-line {
    height: 6px;
    width: 60px;
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
}

.star-row {
    display: flex;
    gap: 2px;
}

.star {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.15);
}

.star.filled {
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(251,191,36,0.5);
}

.review-text-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.review-line {
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.07);
}
.review-line.full  { width: 100%; }
.review-line.medium { width: 70%; }

/* AI Reply card */
.ai-reply-card {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-reply-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    color: #fff;
    font-size: 0.45rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(139,92,246,0.4);
}

.ai-label {
    font-size: 0.55rem;
    color: rgba(139,92,246,0.9);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ai-reply-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.reply-line {
    height: 5px;
    border-radius: 3px;
    background: rgba(139,92,246,0.2);
}
.reply-line.full   { width: 100%; }
.reply-line.medium { width: 80%; }
.reply-line.short  { width: 50%; }

.ai-reply-typing {
    display: flex;
    gap: 4px;
    padding: 2px 0;
}

.typing-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(139,92,246,0.5);
    animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.3;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ==================================
   5. AI VOICE AGENTS
   ================================== */
.service-3d.ai-voice {
    background: rgba(18, 24, 38, 0.75);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px 20px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 30px rgba(34, 211, 238, 0.1);
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.voice-mic {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mic-body {
    width: 18px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.5), rgba(59, 130, 246, 0.5));
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.3);
}

.mic-stand {
    width: 2px;
    height: 10px;
    background: rgba(255, 255, 255, 0.15);
}

.mic-base {
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
}

.voice-waves {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 40px;
}

.wave-bar {
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #8b5cf6, #3b82f6);
    animation: waveAnim 1.2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.1s);
}

@keyframes waveAnim {

    0%,
    100% {
        height: 8px;
        opacity: 0.4;
    }

    50% {
        height: 28px;
        opacity: 1;
    }
}

.card-content {
    height: 35%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.card-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.card-content p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.card-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

/* ---------------- FINAL CTA SECTION ---------------- */
.cta-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 40px 0 20px 0;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
    filter: blur(60px);
}

.cta-headline {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 40px;
    letter-spacing: -0.03em;
}

.cta-button {
    background: linear-gradient(135deg, #22d3ee, #8b5cf6);
    /* Gradient blue -> purple */
    color: #fff;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 16px 40px;
    border: none;
    border-radius: 40px;
    /* Large pill shape */
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow:
        0 10px 25px rgba(139, 92, 246, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:active {
    transform: scale(0.96);
}

.cta-button:hover,
.cta-button:visited,
.cta-button:focus {
    text-decoration: none;
    color: #fff;
}

/* Scroll Animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------- DESKTOP STYLES ---------------- */
@media (min-width: 768px) {
    .main-title {
        font-size: 5rem;
        width: 50%;
        margin-bottom: 0;
    }

    .hero-section {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .mockup-container {
        width: 45%;
        max-width: none;
        margin: 0;
    }

    .card-content h3 {
        font-size: 1.5rem;
    }

    .card-content p {
        font-size: 0.95rem;
    }

    .service-card:hover {
        transform: translateY(-5px);
        border-color: rgba(99, 102, 241, 0.3);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.15);
    }

    .cta-headline {
        font-size: 4.5rem;
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 60px;
    }
}
/* ==================================
   REDESIGNED CARD VISUALS — LIVELY
   ================================== */

/* ---- SHARED BADGE IMPROVEMENTS ---- */
.service-badge {
    background: rgba(10, 14, 28, 0.88) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(139,92,246,0.25) !important;
    animation: floatBadge 4s ease-in-out infinite alternate;
}

.sbadge-icon {
    background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(59,130,246,0.3)) !important;
    font-size: 0.8rem !important;
    box-shadow: 0 0 10px rgba(139,92,246,0.3);
}

.sbadge-label {
    color: #e2e8f0 !important;
    font-weight: 700;
    font-size: 0.72rem !important;
}

/* ==================================
   CARD 1 — APP DASHBOARD
   ================================== */
.service-3d.app-dev {
    background: rgba(13, 17, 28, 0.9);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 24px 48px rgba(0,0,0,0.6), 0 0 40px rgba(99,102,241,0.15);
    display: flex;
    flex-direction: column;
}

.appdash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.appdash-logo {
    display: flex;
    align-items: center;
    gap: 6px;
}

.appdash-logo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    box-shadow: 0 0 8px rgba(139,92,246,0.6);
}

.appdash-logo-text {
    width: 28px;
    height: 5px;
    border-radius: 2px;
    background: rgba(255,255,255,0.15);
}

.appdash-nav {
    display: flex;
    gap: 6px;
}

.appdash-nav-item {
    width: 18px;
    height: 5px;
    border-radius: 2px;
    background: rgba(255,255,255,0.08);
}

.appdash-nav-item.active {
    background: rgba(139,92,246,0.6);
    box-shadow: 0 0 6px rgba(139,92,246,0.4);
}

.appdash-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    box-shadow: 0 0 6px rgba(245,158,11,0.4);
}

.appdash-body {
    display: flex;
    flex: 1;
}

.appdash-sidebar {
    width: 50px;
    padding: 10px 8px;
    background: rgba(255,255,255,0.02);
    border-right: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.appdash-menu-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px;
    border-radius: 5px;
}

.appdash-menu-item.active {
    background: rgba(139,92,246,0.15);
}

.menu-icon {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.menu-icon.purple { background: #8b5cf6; box-shadow: 0 0 5px rgba(139,92,246,0.5); }
.menu-icon.blue   { background: #3b82f6; box-shadow: 0 0 5px rgba(59,130,246,0.4); }
.menu-icon.cyan   { background: #22d3ee; box-shadow: 0 0 5px rgba(34,211,238,0.4); }

.menu-label {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
    flex: 1;
}

.menu-label.short { max-width: 60%; }

.appdash-main {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.appdash-kpi-row {
    display: flex;
    gap: 6px;
}

.appdash-kpi {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px;
    padding: 6px 7px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kpi-num {
    font-size: 0.55rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}

.appdash-kpi.blue .kpi-num  { color: #60a5fa; }
.appdash-kpi.purple .kpi-num { color: #a78bfa; }
.appdash-kpi.green .kpi-num  { color: #34d399; }

.kpi-bar-wrap {
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}

.kpi-bar {
    height: 100%;
    border-radius: 2px;
}

.appdash-chart {
    flex: 1;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 7px;
    padding: 8px;
    display: flex;
    align-items: flex-end;
}

.chart-bar-group {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    width: 100%;
    height: 40px;
}

.chart-col {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

/* ==================================
   CARD 2 — WEB BROWSER REDESIGN
   ================================== */
.service-3d.web-dev {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    justify-content: center;
}

.wb-browser {
    width: 70%;
    background: #0d1117;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.55), 0 0 30px rgba(99,102,241,0.12);
}

.wb-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #1a1f2e;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.wb-dots { display: flex; gap: 4px; }
.wb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.wb-dot.r { background: #ff5f57; }
.wb-dot.y { background: #febc2e; }
.wb-dot.g { background: #28c840; }

.wb-url-pill {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.42rem;
    color: #64748b;
    font-family: monospace;
    letter-spacing: 0.02em;
    text-align: center;
}

.wb-screen {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.wb-hero {
    position: relative;
    padding: 10px;
    background: linear-gradient(135deg, rgba(109,40,217,0.4), rgba(29,78,216,0.3), rgba(6,182,212,0.2));
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}

.wb-hero-glow {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 40px;
    background: radial-gradient(circle, rgba(139,92,246,0.5), transparent);
    filter: blur(12px);
    pointer-events: none;
}

.wb-hero-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.wb-nav-logo {
    width: 22px;
    height: 7px;
    border-radius: 3px;
    background: linear-gradient(90deg, #8b5cf6, #22d3ee);
}

.wb-nav-links {
    display: flex;
    align-items: center;
    gap: 5px;
}

.wb-nl {
    width: 12px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.15);
}

.wb-nl.cta-pill {
    width: 20px;
    background: rgba(139,92,246,0.5);
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(139,92,246,0.4);
}

.wb-hero-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wb-ht {
    height: 5px;
    border-radius: 2px;
    background: rgba(255,255,255,0.25);
}

.wb-ht.big    { width: 70%; }
.wb-ht.medium { width: 48%; background: rgba(255,255,255,0.15); }

.wb-hero-btn {
    width: 30px;
    height: 9px;
    border-radius: 5px;
    background: linear-gradient(90deg, #8b5cf6, #22d3ee);
    margin-top: 4px;
    box-shadow: 0 0 10px rgba(139,92,246,0.5);
}

.wb-cards-row {
    display: flex;
    gap: 4px;
    padding: 6px;
}

.wb-card {
    flex: 1;
    padding: 5px;
    border-radius: 5px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wb-card-icon {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.wb-card-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wb-cl {
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 1px;
}

.wb-cl.short { width: 60%; }

/* Phone for card 2 */
.wb-phone {
    width: 27%;
    background: #0d1117;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(0,0,0,0.5), 0 0 20px rgba(139,92,246,0.12);
}

.wb-phone-notch {
    width: 34%;
    height: 4px;
    background: #1a1f2e;
    border-radius: 0 0 4px 4px;
    margin: 0 auto;
}

.wb-phone-body {
    padding: 6px 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wb-phone-hero {
    height: 22px;
    border-radius: 5px;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6, #22d3ee);
}

.wb-phone-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: rgba(255,255,255,0.02);
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.04);
}

.wb-phone-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wb-phone-line {
    flex: 1;
    height: 3px;
    border-radius: 1px;
    background: rgba(255,255,255,0.08);
}

.wb-phone-line.short { max-width: 60%; }

.wb-phone-btn {
    height: 9px;
    border-radius: 5px;
    background: linear-gradient(90deg, #8b5cf6, #22d3ee);
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(139,92,246,0.4);
}

/* ==================================
   CARD 3 — AI AUTOMATION FLOW
   ================================== */
.service-3d.ai-automation {
    background: rgba(13,17,28,0.88);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: 20px 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 30px rgba(139,92,246,0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.auto-flow {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.flow-node {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 6px 12px;
    position: relative;
}

.flow-node.trigger {
    background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.1));
    border-color: rgba(251,191,36,0.3);
    box-shadow: 0 0 16px rgba(251,191,36,0.15);
}

.flow-node.ai-node {
    background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(59,130,246,0.15));
    border-color: rgba(139,92,246,0.4);
    box-shadow: 0 0 20px rgba(139,92,246,0.25);
}

.fn-icon {
    font-size: 0.85rem;
}

.fn-icon.ai-spin {
    animation: spinGear 4s linear infinite;
    display: inline-block;
    color: #a78bfa;
}

.fn-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.03em;
}

.flow-connector {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    width: 2px;
}

.fc-line {
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(139,92,246,0.5), rgba(59,130,246,0.3));
    border-radius: 1px;
}

.fc-pulse {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 10px rgba(139,92,246,0.8);
    animation: slideDown 2s ease-in-out infinite;
}

@keyframes slideDown {
    0%   { top: 0; opacity: 1; }
    80%  { top: 14px; opacity: 0.8; }
    100% { top: 14px; opacity: 0; }
}

.flow-split {
    display: flex;
    justify-content: center;
    gap: 40px;
    width: 100%;
    height: 16px;
    position: relative;
    margin: 0;
}

.split-line {
    width: 2px;
    height: 16px;
    border-radius: 1px;
    background: linear-gradient(to bottom, rgba(59,130,246,0.5), transparent);
}

.split-line.left  { transform: rotate(-20deg); }
.split-line.right { transform: rotate(20deg); }

.flow-outputs {
    display: flex;
    gap: 6px;
    width: 100%;
    justify-content: center;
}

.flow-node.out {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    padding: 6px 4px;
    text-align: center;
    justify-content: center;
}

.flow-node.email {
    background: linear-gradient(135deg, rgba(34,211,238,0.1), rgba(59,130,246,0.08));
    border-color: rgba(34,211,238,0.25);
}

.flow-node.slack {
    background: linear-gradient(135deg, rgba(52,211,153,0.1), rgba(16,185,129,0.08));
    border-color: rgba(52,211,153,0.25);
}

.flow-node.crm {
    background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(109,40,217,0.08));
    border-color: rgba(139,92,246,0.25);
}

.auto-status {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.55rem;
    font-weight: 700;
    color: #34d399;
    letter-spacing: 0.03em;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px rgba(16,185,129,0.7);
    animation: nodePulse 2s ease-in-out infinite;
}

/* ==================================
   CARD 4 — AI REVIEWS IMPROVED
   ================================== */
.service-3d.ai-reviews {
    background: rgba(13,17,28,0.88);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 30px rgba(251,191,36,0.08);
}

.rev-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.06));
    border: 1px solid rgba(251,191,36,0.2);
    border-radius: 10px;
}

.rev-score {
    font-size: 1.4rem;
    font-weight: 900;
    color: #fbbf24;
    letter-spacing: -0.03em;
    text-shadow: 0 0 20px rgba(251,191,36,0.5);
}

.rev-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rev-stars {
    display: flex;
    gap: 1px;
}

.rstar {
    font-size: 0.65rem;
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(251,191,36,0.6);
}

.rstar.half { opacity: 0.45; }

.rev-count {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Improved review card */
.review-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.review-header {
    display: flex;
    align-items: center;
    gap: 7px;
}

.reviewer-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(245,158,11,0.3);
}

.rev-platform {
    margin-left: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4285f4, #34a853);
    color: #fff;
    font-size: 0.45rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* AI Reply time tag */
.ai-reply-time {
    margin-left: auto;
    font-size: 0.42rem;
    color: rgba(139,92,246,0.6);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Improved ai-reply-card */
.ai-reply-card {
    background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(99,102,241,0.06));
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-shadow: 0 0 20px rgba(139,92,246,0.1) inset;
}

.ai-avatar {
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
    box-shadow: 0 0 14px rgba(124,58,237,0.5) !important;
    font-size: 0.5rem !important;
    width: 24px !important;
    height: 24px !important;
}

/* ==================================
   CARD 5 — VOICE CALL UI
   ================================== */
.service-3d.ai-voice {
    background: linear-gradient(160deg, rgba(13,17,28,0.95), rgba(20,15,40,0.9));
    backdrop-filter: blur(16px);
    border: 1px solid rgba(139,92,246,0.15);
    border-radius: 20px;
    padding: 20px 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 40px rgba(139,92,246,0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.voice-call-ui {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.call-avatar {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-avatar-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(139,92,246,0.5);
    animation: ringPulse 2s ease-in-out infinite;
}

@keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; border-color: rgba(139,92,246,0.5); }
    50%       { transform: scale(1.12); opacity: 1; border-color: rgba(139,92,246,0.9); }
}

.call-avatar-core {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow: 0 0 24px rgba(124,58,237,0.5), 0 8px 20px rgba(0,0,0,0.4);
}

.call-name {
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
    text-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.call-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.52rem;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.call-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px rgba(16,185,129,0.8);
    animation: nodePulse 1.5s ease-in-out infinite;
}

.voice-waves {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.wave-bar {
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #a78bfa, #60a5fa);
    animation: waveAnim 1.2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.08s);
    box-shadow: 0 0 6px rgba(167,139,250,0.3);
}

@keyframes waveAnim {
    0%, 100% { height: 6px; opacity: 0.35; }
    50%       { height: 26px; opacity: 1; }
}

.call-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.call-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: background 0.2s;
}

.call-btn.end {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: rgba(239,68,68,0.5);
    box-shadow: 0 0 16px rgba(239,68,68,0.4);
    width: 38px;
    height: 38px;
    font-size: 0.8rem;
}


/* =====================================================
   HERO DASHBOARD — COMPLETE REDESIGN
   ===================================================== */
.mockup-ui.hero-dashboard {
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    box-shadow:
        0 32px 64px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 60px rgba(99, 102, 241, 0.18);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Top bar */
.hd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hd-logo {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hd-logo-orb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.7);
}

.hd-logo-wordmark {
    width: 38px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
}

.hd-nav {
    display: flex;
    gap: 8px;
}

.hd-nav-item {
    width: 24px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.07);
}

.hd-nav-item.active {
    background: rgba(139, 92, 246, 0.55);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
    width: 30px;
}

.hd-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hd-notif {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.hd-notif::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.8);
}

.hd-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6d28d9, #2563eb);
    box-shadow: 0 0 8px rgba(109, 40, 217, 0.5);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
}

/* Body layout */
.hd-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Sidebar */
.hd-sidebar {
    width: 44px;
    padding: 12px 6px;
    background: rgba(255, 255, 255, 0.02);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.hd-sidebar-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 4px;
    border-radius: 6px;
}

.hd-sidebar-item.active {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.hd-si-icon {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
}

.si-purple { background: #8b5cf6; box-shadow: 0 0 6px rgba(139,92,246,0.6); }
.si-blue   { background: #3b82f6; box-shadow: 0 0 5px rgba(59,130,246,0.5); }
.si-cyan   { background: #22d3ee; box-shadow: 0 0 5px rgba(34,211,238,0.4); }
.si-green  { background: #10b981; box-shadow: 0 0 5px rgba(16,185,129,0.4); }

.hd-si-label {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    flex: 1;
}

.hd-si-label.short { max-width: 14px; }

/* Content area */
.hd-content {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* KPI row */
.hd-kpi-row {
    display: flex;
    gap: 8px;
}

.hd-kpi-card {
    flex: 1;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.k-blue  { border-color: rgba(59, 130, 246, 0.2); background: rgba(59, 130, 246, 0.04); }
.k-purple{ border-color: rgba(139, 92, 246, 0.2); background: rgba(139, 92, 246, 0.04); }
.k-green { border-color: rgba(16, 185, 129, 0.2); background: rgba(16, 185, 129, 0.04); }

.hd-kpi-label {
    height: 4px;
    width: 60%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.hd-kpi-val {
    font-size: 0.72rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1;
}

.k-blue  .hd-kpi-val { color: #60a5fa; }
.k-purple .hd-kpi-val { color: #a78bfa; }
.k-green  .hd-kpi-val { color: #34d399; }

.hd-kpi-trend {
    font-size: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.hd-kpi-trend.up { color: #34d399; }

/* Chart panel */
.hd-chart-panel {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.hd-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hd-chart-title-line {
    height: 5px;
    width: 50px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

.hd-chart-legend {
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.legend-dot.blue   { background: #3b82f6; }
.legend-dot.purple { background: #8b5cf6; }

.legend-line {
    width: 18px;
    height: 3px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.legend-line.short { width: 12px; }

.hd-chart-svg-wrap {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.hd-svg-chart {
    width: 100%;
    height: auto;
}

.hd-line-anim {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawLine 2s ease forwards 0.5s;
}

.hd-line-anim2 {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawLine 2s ease forwards 0.8s;
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

.hd-dot-glow {
    filter: drop-shadow(0 0 4px #3b82f6);
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { r: 2.5px; opacity: 0.9; }
    50%       { r: 3.5px; opacity: 1; }
}

.hd-bar-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 28px;
}

.hd-bar {
    flex: 1;
    height: var(--h);
    background: var(--c);
    border-radius: 2px 2px 0 0;
    min-height: 3px;
    opacity: 0.75;
    transition: opacity 0.3s;
}

.hd-bar.active-bar {
    opacity: 1;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.6);
}

/* Activity row */
.hd-activity-row {
    display: flex;
    gap: 6px;
}

.hd-act-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 7px;
}

.hd-act-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hd-act-dot.blue   { background: #3b82f6; box-shadow: 0 0 5px rgba(59,130,246,0.7); }
.hd-act-dot.purple { background: #8b5cf6; box-shadow: 0 0 5px rgba(139,92,246,0.7); }
.hd-act-dot.green  { background: #10b981; box-shadow: 0 0 5px rgba(16,185,129,0.7); }

.hd-act-line {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 1px;
}

.hd-act-line.short { max-width: 18px; }

.hd-act-val {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.blue-text   { color: #60a5fa; }
.purple-text { color: #a78bfa; }
.green-text  { color: #34d399; }

/* Hero floating badges */
.hero-badge-ai {
    position: absolute;
    top: -14px;
    right: -14px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 8px;
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.9), rgba(37, 99, 235, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 40px;
    box-shadow:
        0 8px 24px rgba(109, 40, 217, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    animation: floatBadge 4s ease-in-out infinite alternate-reverse;
    backdrop-filter: blur(10px);
    z-index: 3;
}

.hbai-orb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.hbai-text {
    font-size: 0.6rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.06em;
}

.hbai-pulse-ring {
    position: absolute;
    inset: -3px;
    border-radius: 40px;
    border: 1px solid rgba(139, 92, 246, 0.4);
    animation: ringPulse 2.5s ease-in-out infinite;
    pointer-events: none;
}

.hero-badge-live {
    position: absolute;
    top: 50px;
    right: -18px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: rgba(10, 14, 26, 0.92);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 30px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 16px rgba(16,185,129,0.15);
    animation: floatBadge 5s ease-in-out 1s infinite alternate;
    backdrop-filter: blur(10px);
    z-index: 3;
}

.hbl-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
    animation: nodePulse 1.5s ease-in-out infinite;
}

.hbl-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: 0.04em;
}

.hbl-arrow {
    font-size: 0.6rem;
    color: #10b981;
    font-weight: 800;
}

/* =====================================================
   CARD 1 — REAL ESTATE SAAS COMPOSITION
   ===================================================== */
.service-3d.app-dev {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 88%;
    max-width: 300px;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end;
    gap: 8px;
    position: relative;
}

/* LEFT: CRM panel */
.re-crm-panel {
    width: 48%;
    background: rgba(10, 14, 26, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow:
        0 20px 40px rgba(0,0,0,0.6),
        0 0 30px rgba(99, 102, 241, 0.12),
        0 0 0 1px rgba(255,255,255,0.04) inset;
    transform: perspective(400px) rotateY(4deg) translateY(6px);
    z-index: 1;
    animation: floatLeft 6s ease-in-out infinite;
}

@keyframes floatLeft {
    0%, 100% { transform: perspective(400px) rotateY(4deg) translateY(6px); }
    50%       { transform: perspective(400px) rotateY(4deg) translateY(-4px); }
}

.re-crm-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.re-crm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.re-crm-dot.purple { background: #8b5cf6; box-shadow: 0 0 6px rgba(139,92,246,0.7); }

.re-crm-title-line {
    height: 5px;
    flex: 1;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}

.re-kpi-row {
    display: flex;
    gap: 5px;
}

.re-kpi-card {
    flex: 1;
    padding: 6px 5px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.re-kpi-icon {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.45rem;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
}

.re-kpi-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.re-kpi-val {
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.re-kpi-lbl {
    font-size: 0.38rem;
    color: rgba(255,255,255,0.3);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.re-chart {
    position: relative;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 6px;
    overflow: hidden;
}

.re-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 30px;
}

.re-bar {
    flex: 1;
    height: var(--rh);
    background: var(--rc);
    border-radius: 2px 2px 0 0;
    min-height: 4px;
}

.re-chart-svg {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    width: calc(100% - 8px);
    height: 28px;
}

.re-revenue {
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08));
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.re-rev-label {
    font-size: 0.38rem;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.re-rev-val {
    font-size: 0.85rem;
    font-weight: 900;
    color: #a78bfa;
    letter-spacing: -0.02em;
    text-shadow: 0 0 16px rgba(167,139,250,0.4);
}

.re-rev-bar-wrap {
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}

.re-rev-bar {
    width: 72%;
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(99,102,241,0.5);
}

/* RIGHT: Mobile Real Estate App */
.re-app-panel {
    width: 52%;
    animation: floatRight 7s ease-in-out infinite;
    z-index: 2;
}

@keyframes floatRight {
    0%, 100% { transform: perspective(400px) rotateY(-3deg) translateY(0); }
    50%       { transform: perspective(400px) rotateY(-3deg) translateY(-8px); }
}

.re-phone-frame {
    background: #0a0e1a;
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 24px 48px rgba(0,0,0,0.7),
        0 0 0 1px rgba(255,255,255,0.05) inset,
        0 0 30px rgba(139,92,246,0.1);
}

.re-phone-notch {
    width: 30%;
    height: 4px;
    background: #1a1f2e;
    border-radius: 0 0 4px 4px;
    margin: 0 auto;
}

.re-phone-screen {
    padding: 6px 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.re-search-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 4px 8px;
}

.re-search-icon {
    font-size: 0.55rem;
    color: rgba(255,255,255,0.3);
    flex-shrink: 0;
}

.re-search-text {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
}

.re-map-area {
    position: relative;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
}

.re-map-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(30,40,70,0.8), rgba(15,25,55,0.9)),
        repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(255,255,255,0.02) 8px, rgba(255,255,255,0.02) 9px),
        repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(255,255,255,0.02) 8px, rgba(255,255,255,0.02) 9px);
}

.re-pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.re-pin.p1 { top: 8px; left: 20%; }
.re-pin.p2 { top: 12px; right: 18%; }
.re-pin.p3.active { top: 20px; left: 50%; transform: translateX(-50%); }

.re-pin-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6366f1;
    border: 1.5px solid rgba(255,255,255,0.4);
    box-shadow: 0 0 8px rgba(99,102,241,0.6);
}

.re-pin.p3.active .re-pin-dot {
    background: #8b5cf6;
    box-shadow: 0 0 12px rgba(139,92,246,0.9);
    width: 9px;
    height: 9px;
}

.re-pin-price {
    font-size: 0.35rem;
    font-weight: 800;
    color: rgba(255,255,255,0.6);
    background: rgba(10,14,26,0.85);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.re-pin-price.active {
    color: #a78bfa;
    border-color: rgba(139,92,246,0.4);
    box-shadow: 0 0 8px rgba(139,92,246,0.3);
}

.re-prop-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 9px;
    display: flex;
    gap: 7px;
    padding: 6px;
    position: relative;
    overflow: hidden;
}

.re-prop-card.featured {
    background: rgba(99,102,241,0.06);
    border-color: rgba(99,102,241,0.15);
    box-shadow: 0 0 16px rgba(99,102,241,0.08);
}

.re-prop-img {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    flex-shrink: 0;
}

.re-prop-img.img1 {
    background: linear-gradient(135deg, #1e3a5f, #2563eb 40%, #1d4ed8);
    box-shadow: 0 0 10px rgba(37,99,235,0.3);
}

.re-prop-img.img2 {
    background: linear-gradient(135deg, #1a2e1a, #16a34a 40%, #15803d);
    width: 22px;
    height: 22px;
    box-shadow: 0 0 8px rgba(22,163,74,0.3);
}

.re-prop-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.re-prop-info.mini { gap: 2px; }

.re-prop-price {
    font-size: 0.58rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.01em;
}

.re-prop-price.small { font-size: 0.48rem; }

.re-prop-address {
    height: 3px;
    width: 80%;
    background: rgba(255,255,255,0.08);
    border-radius: 1px;
}

.re-prop-address.short { width: 60%; }

.re-prop-tags {
    display: flex;
    gap: 3px;
}

.re-tag {
    font-size: 0.32rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.02em;
}

.re-tag.new {
    color: #34d399;
    border-color: rgba(52,211,153,0.3);
    background: rgba(52,211,153,0.08);
}

.re-heart {
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: 0.6rem;
    color: rgba(239,68,68,0.7);
    animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14%       { transform: scale(1.2); }
    28%       { transform: scale(1); }
    42%       { transform: scale(1.15); }
}

/* =====================================================
   CARD 2 — PREMIUM 3D WEBSITE MOCKUP
   ===================================================== */
.service-3d.web-dev {
    width: 88% !important;
    max-width: 300px;
    display: block !important;
    position: relative;
}

.prem-scene {
    position: relative;
    width: 100%;
}

/* Main browser */
.prem-browser {
    background: #080c18;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 28px 56px rgba(0,0,0,0.7),
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 0 40px rgba(99,102,241,0.15);
    transform: perspective(600px) rotateX(4deg) rotateY(-2deg);
    transform-origin: center bottom;
}

.prem-browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #111827;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.prem-dots { display: flex; gap: 4px; }

.pd {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.pd.r { background: #ff5f57; }
.pd.y { background: #febc2e; }
.pd.g { background: #28c840; }

.prem-url {
    flex: 1;
    text-align: center;
    font-size: 0.42rem;
    color: #4b5563;
    background: rgba(255,255,255,0.04);
    padding: 2px 10px;
    border-radius: 4px;
    font-family: monospace;
    letter-spacing: 0.04em;
}

.prem-share-icon {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.25);
}

.prem-screen {
    display: flex;
    flex-direction: column;
}

/* Hero section inside browser */
.prem-hero-section {
    position: relative;
    padding: 10px 10px 8px;
    background: linear-gradient(135deg, rgba(79,26,169,0.4) 0%, rgba(29,78,216,0.3) 50%, rgba(6,182,212,0.15) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}

.prem-hero-glow {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 60px;
    background: radial-gradient(circle, rgba(139,92,246,0.5), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}

.prem-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.prem-nav-logo {
    width: 24px;
    height: 7px;
    border-radius: 3px;
    background: linear-gradient(90deg, #8b5cf6, #22d3ee);
    box-shadow: 0 0 8px rgba(139,92,246,0.4);
}

.prem-nav-items {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pni {
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.12);
}

.pni.cta {
    width: 20px;
    background: linear-gradient(90deg, #8b5cf6, #3b82f6);
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(139,92,246,0.5);
}

.prem-hero-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prem-hero-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 2px 7px 2px 4px;
    background: rgba(139,92,246,0.15);
    border: 1px solid rgba(139,92,246,0.3);
    border-radius: 20px;
}

.phb-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 5px rgba(139,92,246,0.8);
}

.phb-line {
    width: 24px;
    height: 3px;
    background: rgba(255,255,255,0.15);
    border-radius: 1px;
}

.prem-h1 {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.25);
}

.prem-h1.wide   { width: 75%; }
.prem-h1.narrow { width: 50%; background: rgba(255,255,255,0.15); }

.prem-hero-btns {
    display: flex;
    gap: 5px;
    margin-top: 2px;
}

.phb-primary {
    width: 36px;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #8b5cf6, #22d3ee);
    box-shadow: 0 0 10px rgba(139,92,246,0.5);
}

.phb-secondary {
    width: 28px;
    height: 10px;
    border-radius: 5px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
}

.prem-features-row {
    display: flex;
    gap: 4px;
    padding: 6px;
}

.prem-feat-card {
    flex: 1;
    padding: 5px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pfc-icon {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.pfc-lines { display: flex; flex-direction: column; gap: 2px; }

.pfc-l {
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 1px;
}

.pfc-l.short { width: 60%; }

/* Floating card popping out */
.prem-float-card {
    position: absolute;
    bottom: -16px;
    left: -18px;
    background: rgba(10, 14, 26, 0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 7px;
    display: flex;
    gap: 7px;
    align-items: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 20px rgba(99,102,241,0.15);
    animation: floatBadge 5s ease-in-out 0.5s infinite alternate;
    backdrop-filter: blur(10px);
    z-index: 4;
}

.pfc-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(37,99,235,0.3);
}

.pfc-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pfc-title {
    height: 5px;
    width: 55px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}

.pfc-sub {
    height: 4px;
    width: 40px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
}

.pfc-score {
    display: flex;
    gap: 1px;
}

.pfc-star {
    font-size: 0.4rem;
    color: #fbbf24;
    text-shadow: 0 0 4px rgba(251,191,36,0.5);
}

/* Premium floating badge */
.prem-badge-premium {
    position: absolute;
    top: -16px;
    right: -16px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(161,113,3,0.9), rgba(109,40,217,0.9));
    border: 1px solid rgba(255,215,0,0.25);
    border-radius: 30px;
    box-shadow:
        0 8px 24px rgba(161,113,3,0.4),
        0 0 0 1px rgba(255,215,0,0.15) inset,
        0 0 20px rgba(161,113,3,0.2);
    animation: floatBadge 4.5s ease-in-out infinite alternate-reverse;
    backdrop-filter: blur(10px);
    z-index: 5;
}

.pbp-gem {
    font-size: 0.6rem;
    color: #fde68a;
    text-shadow: 0 0 8px rgba(253,230,138,0.7);
}

.pbp-text {
    font-size: 0.58rem;
    font-weight: 800;
    color: #fde68a;
    letter-spacing: 0.04em;
}

/* Floating phone (right side) */
.prem-float-phone {
    position: absolute;
    bottom: -10px;
    right: -20px;
    width: 38px;
    background: #0a0e1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(0,0,0,0.6), 0 0 16px rgba(139,92,246,0.12);
    animation: floatBadge 6s ease-in-out 1s infinite alternate;
    z-index: 3;
}

.pfp-notch {
    width: 38%;
    height: 3px;
    background: #1a1f2e;
    border-radius: 0 0 3px 3px;
    margin: 0 auto;
}

.pfp-body {
    padding: 4px 4px 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pfp-hero {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6, #22d3ee);
    box-shadow: 0 0 8px rgba(139,92,246,0.3);
}

.pfp-row {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 3px;
    background: rgba(255,255,255,0.02);
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.04);
}

.pfp-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pfp-line {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.07);
    border-radius: 1px;
}

.pfp-line.short { max-width: 60%; }

.pfp-btn {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #8b5cf6, #22d3ee);
    opacity: 0.7;
    box-shadow: 0 0 6px rgba(139,92,246,0.4);
}


/* =====================================================
   BADGE CORRECTIONS — OVERLAID ON HERO OBJECT
   ===================================================== */

/* Ensure mockup-ui is the positioning context */
.mockup-ui.hero-dashboard {
    position: relative;
    overflow: visible !important; /* badges can bleed over edges */
}

/* AI badge — top-right corner, overlapping the object edge */
.hero-badge-ai {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 10 !important;
    /* Depth layering */
    box-shadow:
        0 4px 20px rgba(109, 40, 217, 0.55),
        0 0 0 1px rgba(255,255,255,0.12) inset,
        0 8px 32px rgba(0,0,0,0.4) !important;
    transform: translateZ(10px);
    animation: badgeOverlayAI 4.5s ease-in-out infinite alternate !important;
}

@keyframes badgeOverlayAI {
    0%   { transform: translateY(0px) scale(1); }
    100% { transform: translateY(-5px) scale(1.02); }
}

/* Growth badge — bottom-left corner, overlapping the object */
.mockup-ui .floating-badge {
    position: absolute !important;
    bottom: 14px !important;
    left: 14px !important;
    top: auto !important;
    right: auto !important;
    z-index: 10 !important;
    background: rgba(8, 12, 24, 0.92) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    box-shadow:
        0 8px 28px rgba(0,0,0,0.6),
        0 0 20px rgba(99,102,241,0.18),
        0 0 0 1px rgba(255,255,255,0.06) inset !important;
    backdrop-filter: blur(14px) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    animation: badgeOverlayGrowth 5.5s ease-in-out infinite alternate !important;
}

@keyframes badgeOverlayGrowth {
    0%   { transform: translateY(0px) scale(1); }
    100% { transform: translateY(-4px) scale(1.01); }
}

/* Remove old detached positioning from outside mockup */
.hero-badge-live {
    display: none !important;
}

/* Ensure mockup-container doesn't clip the overlapping badges */
.mockup-container {
    overflow: visible !important;
}

/* =====================================================
   CARD 2 — REBALANCED AFTER REMOVALS
   ===================================================== */

/* Center and scale up the scene slightly to fill space left by phone */
.prem-scene {
    width: 92% !important;
    margin: 0 auto !important;
}

/* Float card repositioned — more centered bottom, balanced */
.prem-float-card {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: -18px !important;
    right: auto !important;
    animation: floatCardCenter 5.3s ease-in-out infinite alternate !important;
}

@keyframes floatCardCenter {
    0%   { transform: translateX(-50%) translateY(0px); }
    100% { transform: translateX(-50%) translateY(-6px); }
}

/* Slightly scale up browser to feel anchored in center */
.prem-browser {
    transform: perspective(600px) rotateX(3deg) rotateY(0deg) scale(1.04) !important;
}


/* =====================================================
   DEFINITIVE BADGE OVERLAY FIX
   — Badges are siblings of mockup-ui inside mockup-container
   — mockup-container is the positioning context
   — mockup-ui keeps overflow:hidden (needed for its own layout)
   — badges sit ABOVE the object at correct coordinates
   ===================================================== */

/* mockup-container: positioning anchor, overflow visible so badges show */
.mockup-container {
    position: relative !important;
    overflow: visible !important;
    animation: float 6s ease-in-out infinite; /* keep existing float */
}

/* mockup-ui fills container normally — overflow:hidden stays for its own internals */
.mockup-ui.hero-dashboard {
    overflow: hidden !important; /* keeps internal layout correct */
    position: relative;          /* normal stacking inside */
    z-index: 1;                  /* sits BELOW the badges */
}

/* ---- AI badge: top-right quadrant, overlapping the object ---- */
.hero-badge-ai {
    position: absolute !important;
    top: 18px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 20 !important;
    /* Glassmorphism depth */
    background: linear-gradient(135deg, rgba(109,40,217,0.88), rgba(37,99,235,0.88)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 40px !important;
    padding: 6px 12px 6px 8px !important;
    box-shadow:
        0 4px 16px rgba(109,40,217,0.55),
        0 8px 32px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.1) inset !important;
    animation: badgePinAI 4.5s ease-in-out infinite alternate !important;
    /* NO transform that would lift it out of flow incorrectly */
}

@keyframes badgePinAI {
    0%   { transform: translateY(0px);   }
    100% { transform: translateY(-6px);  }
}

/* ---- Growth badge: bottom-left quadrant, overlapping the object ---- */
.floating-badge.hero-growth-badge {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    top: auto !important;
    right: auto !important;
    z-index: 20 !important;
    /* Glassmorphism depth */
    background: rgba(8, 12, 24, 0.9) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(99,102,241,0.3) !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.55),
        0 0 22px rgba(99,102,241,0.2),
        0 0 0 1px rgba(255,255,255,0.06) inset !important;
    animation: badgePinGrowth 5.5s ease-in-out infinite alternate !important;
}

@keyframes badgePinGrowth {
    0%   { transform: translateY(0px);  }
    100% { transform: translateY(-5px); }
}

/* Hide the old Live App badge entirely */
.hero-badge-live {
    display: none !important;
}


/* =====================================================
   BUG FIX PATCH — resolves all visual rendering issues
   ===================================================== */

/* FIX 1: service-card is an <a> tag — force white color on ALL children
   so browser default blue link color doesn't bleed through */
.service-card,
.service-card *,
.service-card:visited,
.service-card:hover {
    color: inherit;
}
.service-card {
    color: #ffffff;
}

/* FIX 2: Card 1 (Real Estate) — the two-panel layout needs full width
   Override the base .service-3d max-width that clips the composition */
.service-3d.app-dev {
    width: 90% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Card visual for app-dev needs no overflow clip so panels show */
.service-card:has(.app-dev) .card-visual {
    overflow: visible;
}

/* Fallback for browsers without :has() */
.app-dev-card .card-visual {
    overflow: visible;
}

/* FIX 3: Re-prop-price and pin text should stay white/styled, not blue */
.re-prop-price {
    color: #ffffff !important;
    font-size: 0.58rem !important;
    font-weight: 900 !important;
}
.re-prop-price.small {
    font-size: 0.48rem !important;
}
.re-pin-price {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.35rem !important;
}
.re-pin-price.active {
    color: #a78bfa !important;
}
.re-kpi-val {
    color: inherit;
    font-size: 0.6rem !important;
    font-weight: 900 !important;
}
.re-kpi-lbl {
    color: rgba(255,255,255,0.35) !important;
    font-size: 0.38rem !important;
}
.re-tag {
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.32rem !important;
}
.re-tag.new {
    color: #34d399 !important;
}
.re-heart {
    color: rgba(239,68,68,0.7) !important;
}

/* FIX 4: Hero dashboard — KPI values must render at small sizes
   The raw numbers (12.4k, ↑18% etc) appearing large means
   hd-kpi-card isn't constraining its children properly */
.hd-kpi-val {
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #fff;
    letter-spacing: -0.02em;
}
.k-blue  .hd-kpi-val { color: #60a5fa !important; }
.k-purple .hd-kpi-val { color: #a78bfa !important; }
.k-green  .hd-kpi-val { color: #34d399 !important; }

.hd-kpi-trend {
    font-size: 0.45rem !important;
    color: #34d399 !important;
    font-weight: 700 !important;
}

.hd-act-val {
    font-size: 0.5rem !important;
    font-weight: 800 !important;
}

/* FIX 5: crm-panel text elements */
.re-rev-label {
    font-size: 0.38rem !important;
    color: rgba(255,255,255,0.35) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.re-rev-val {
    font-size: 0.85rem !important;
    font-weight: 900 !important;
    color: #a78bfa !important;
}

/* FIX 6: Search bar icon text */
.re-search-icon {
    font-size: 0.55rem !important;
    color: rgba(255,255,255,0.3) !important;
}

/* FIX 7: Re-crm-dot color override (link color was changing it) */
.re-crm-dot.purple {
    background: #8b5cf6 !important;
    box-shadow: 0 0 6px rgba(139,92,246,0.7) !important;
}

/* FIX 8: Card 2 - ensure prem-badge-premium is hidden (belt + suspenders) */
.prem-badge-premium {
    display: none !important;
}
.prem-float-phone {
    display: none !important;
}

/* FIX 9: AI automation flow text stays white */
.fn-label {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.6rem !important;
}
.auto-status span {
    color: #34d399 !important;
    font-size: 0.55rem !important;
}

/* FIX 10: Growth badge and AI badge text colors */
.hero-growth-badge .badge-title {
    color: var(--text-secondary) !important;
}
.hero-growth-badge .badge-value {
    color: #60a5fa !important;
}
.hbai-text {
    color: #ffffff !important;
    font-size: 0.6rem !important;
    font-weight: 900 !important;
}


/* =====================================================
   FINAL OVERLAP FIX — Matching Image 2 reference
   Growth: bottom-left, partially outside mockup edge
   AI: top-right, partially outside mockup edge
   ===================================================== */

/* mockup-container must be the stacking context and allow overflow */
.mockup-container {
    position: relative !important;
    overflow: visible !important;
    z-index: 0;
}

/* The main dashboard object — z-index 1, sits in the middle of the stack */
.mockup-ui.hero-dashboard {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

/* 
   GROWTH BADGE — bottom-left overlap
   Negative bottom + negative left pushes it to hang 
   outside the mockup boundary, overlapping ~30% of the corner
*/
.floating-badge.hero-growth-badge {
    position: absolute !important;
    bottom: -24px !important;   /* hangs below the mockup bottom edge */
    left: -8px !important;      /* slightly outside left edge */
    top: auto !important;
    right: auto !important;
    z-index: 10 !important;
    background: rgba(8, 12, 24, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(99,102,241,0.35) !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    box-shadow:
        0 12px 32px rgba(0,0,0,0.65),
        0 0 24px rgba(99,102,241,0.2),
        0 0 0 1px rgba(255,255,255,0.07) inset !important;
    animation: growthBadgeFloat 5.5s ease-in-out infinite alternate !important;
    min-width: 120px !important;
}

@keyframes growthBadgeFloat {
    0%   { transform: translateY(0px); }
    100% { transform: translateY(-6px); }
}

/*
   AI BADGE — top-right overlap
   Negative top + negative right pushes it to hang
   outside the mockup boundary, overlapping ~30% of the corner
*/
.hero-badge-ai {
    position: absolute !important;
    top: -14px !important;       /* hangs above the mockup top edge */
    right: -8px !important;      /* slightly outside right edge */
    left: auto !important;
    bottom: auto !important;
    z-index: 10 !important;
    background: linear-gradient(135deg, rgba(109,40,217,0.92), rgba(37,99,235,0.92)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 40px !important;
    padding: 7px 14px 7px 9px !important;
    box-shadow:
        0 6px 20px rgba(109,40,217,0.55),
        0 10px 36px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.12) inset !important;
    animation: aiBadgeFloat 4.5s ease-in-out infinite alternate !important;
}

@keyframes aiBadgeFloat {
    0%   { transform: translateY(0px); }
    100% { transform: translateY(-6px); }
}