:root {
    --primary: #212529;
    --secondary: #007bff;
    --primary-rgb: 33, 37, 41;
    --secondary-rgb: 0, 123, 255;
}

* { box-sizing: border-box; }
body { margin: 0; padding: 0; background-color: #f4f7f6; font-family: 'Inter', sans-serif; }

h1, h2, h3, h4, .title, .fab { font-family: 'Poppins', sans-serif; }

.workspace { display: flex; height: 100vh; }
.editor-pane { width: 45%; padding: 30px; background: #ffffff; border-right: 1px solid #ddd; overflow-y: auto; }
.preview-pane { width: 55%; padding: 40px; display: flex; align-items: center; justify-content: center; background: #e9ecef; overflow-y: auto;}

.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 12px; color: #555; text-transform: uppercase; letter-spacing: 0.5px;}
.form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px;}
.file-upload-group input { border: 1px dashed #aaa; padding: 10px; background: #f8f9fa;}

#generate-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s;}
#generate-btn:hover { opacity: 0.9; }

/* MODERN CARD DESIGN */
.card-preview { 
    background: white; width: 400px; border-radius: 20px; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.15); overflow: hidden; 
    position: relative; text-align: left;
}

/* Header with Image & Gradient Overlay */
.card-header { 
    height: 160px; 
    background-color: #ddd;
    background-size: cover;
    background-position: center;
    position: relative; 
    padding: 20px;
}
/* The overlay pseudo-element */
.card-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.75), rgba(var(--secondary-rgb), 0.75));
    z-index: 1;
}

/* Logo placement */
.card-header img { 
    position: relative; z-index: 2; 
    max-height: 50px; max-width: 120px; 
    background: transparent; /* Removed white bg as requested */
    object-fit: contain;
}

.card-body { padding: 0 25px 30px 25px; position: relative; }

/* Profile & Name Layout */
.profile-row { display: flex; align-items: flex-end; margin-top: -40px; margin-bottom: 20px; gap: 15px;}
.profile-wrapper { position: relative; z-index: 3;}
.profile-wrapper img { width: 90px; height: 90px; border-radius: 16px; border: 4px solid white; object-fit: cover; box-shadow: 0 8px 16px rgba(0,0,0,0.1); background: white;}

.header-text { padding-bottom: 5px; }
.card-preview h3 { margin: 0 0 2px 0; font-size: 22px; color: #111; font-weight: 700; line-height: 1.2;}
.card-preview .title { margin: 0; color: var(--primary); font-size: 13px; font-weight: 600; }

/* Inline less prominent contact info */
.contact-inline { font-size: 13px; color: #666; font-weight: 500; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 25px;}
.contact-inline .divider { color: #ccc; }

/* Services Tags */
.services-wrapper h4, .video-wrapper h4 { margin: 0 0 12px 0; font-size: 14px; color: #111; text-transform: uppercase; letter-spacing: 0.5px;}
.services-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px;}
.service-tag { background: rgba(var(--primary-rgb), 0.08); color: var(--primary); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid rgba(var(--primary-rgb), 0.1);}

/* Responsive Video Embed */
.iframe-container { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.08);}
.iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Sticky Floating Action Buttons (FABs) */
.sticky-fabs { position: absolute; right: 15px; bottom: 30px; display: flex; flex-direction: column; gap: 10px; z-index: 10;}
.fab { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 20px; box-shadow: 0 6px 16px rgba(0,0,0,0.2); transition: transform 0.2s; color: white;}
.fab:hover { transform: scale(1.1); }
.fab-whatsapp { background-color: #25D366; }
.fab-call { background-color: var(--secondary); }
.fab-custom { background-color: var(--primary); }