/* --- DIGITAL MARKETING V6 ISOLATED VARIABLES --- */
#dm-v6-root {
    --bg-main: #ffffff;
    --text-main: #050505;   /* Near Black */
    --text-light: #525252;
    --accent: #10b981;      /* GROWTH GREEN */
    --accent-dark: #047857;
    --border: #e5e5e5;
    --font: 'Inter', Helvetica, Arial, sans-serif;
    --mono: 'Courier New', Courier, monospace;
    
    /* Platform Colors */
    --col-google: #4285F4;
    --col-meta: #1877F2;
    --col-amazon: #FF9900;
    --col-amazon-text: #232F3E;
    --col-shopify: #008060;
    --col-tiktok: #000000;
}

/* --- ISOLATION RESET --- */
#dm-v6-root {
    width: 100vw; margin-left: calc(-50vw + 50%);
    background: var(--bg-main); color: var(--text-main);
    font-family: var(--font); line-height: 1.5;
    overflow-x: hidden; position: relative; box-sizing: border-box;
    text-align: left;
}
#dm-v6-root * { box-sizing: border-box; margin: 0; padding: 0; }
#dm-v6-root a { text-decoration: none; color: inherit; transition: 0.3s; }
#dm-v6-root ul { list-style: none; padding: 0; margin: 0; }
#dm-v6-root img { width: 100%; display: block; max-width: 100%; }
#dm-v6-root .text-white { color: #fff !important; }

/* Force Colors */
#dm-v6-root h1, #dm-v6-root h2, #dm-v6-root h3, #dm-v6-root h4 { color: var(--text-main); font-weight: 800; margin: 0; }
#dm-v6-root p { color: var(--text-light); margin-bottom: 20px; }

/* --- GRID UTILS --- */
#dm-v6-root .dm-v6-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
#dm-v6-root .dm-v6-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
#dm-v6-root .center { text-align: center; margin-bottom: 60px; }


/* --- 1. HERO --- */
#dm-v6-root .dm-v6-hero {
    padding: 140px 0 80px; position: relative; overflow: hidden;
    background: #fdfdfd; border-bottom: 1px solid var(--border);
}
#dm-v6-root .dm-v6-bg-grid {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(#e5e5e5 1px, transparent 1px), linear-gradient(90deg, #e5e5e5 1px, transparent 1px);
    background-size: 50px 50px; opacity: 0.4; z-index: 0; pointer-events: none;
}
#dm-v6-root .dm-v6-bento-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }

/* Hero Text */
#dm-v6-root .hero-main { display: flex; flex-direction: column; justify-content: center; }
#dm-v6-root .dm-v6-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #ecfdf5; color: var(--accent-dark);
    padding: 6px 14px; border-radius: 50px; font-weight: 600; font-size: 13px;
    margin-bottom: 25px; align-self: flex-start;
}
#dm-v6-root .dm-v6-blink { width: 10px; height: 10px; background: var(--accent); border-radius: 50%; animation: dm6-blink 1s infinite; }
@keyframes dm6-blink { 50% { opacity: 0; } }

#dm-v6-root .dm-v6-h1 {
    font-size: clamp(42px, 5vw, 72px); line-height: 1.1; margin-bottom: 20px; letter-spacing: -2px;
}
#dm-v6-root .dm-v6-highlight { color: var(--accent); }
#dm-v6-root .dm-v6-lead { font-size: 18px; margin-bottom: 30px; max-width: 500px; }

#dm-v6-root .dm-v6-actions { display: flex; align-items: center; gap: 20px; }
#dm-v6-root .dm-v6-btn-primary {
    display: inline-block; background: var(--text-main); color: #fff !important;
    padding: 14px 35px; border-radius: 8px; font-weight: 600;
}
#dm-v6-root .dm-v6-btn-primary:hover { background: var(--accent); }
#dm-v6-root .dm-v6-score-badge { font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 5px; }
#dm-v6-root .star { color: #fbbf24; font-size: 18px; }

/* Hero Visual (Dashboard) */
#dm-v6-root .hero-visual { position: relative; height: 400px; }
#dm-v6-root .dm-v6-dash-card {
    background: #fff; border: 1px solid var(--text-main); width: 100%; height: 100%;
    box-shadow: 10px 10px 0px var(--text-main); padding: 30px;
    display: flex; flex-direction: column; justify-content: space-between;
}
#dm-v6-root .dm-v6-dash-head {
    display: flex; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 15px; font-weight: 700;
}
#dm-v6-root .dm-v6-green { color: var(--accent); }
#dm-v6-root .dm-v6-stat-row { display: flex; gap: 40px; margin-top: 20px; }
#dm-v6-root .dm-v6-stat-grp small { text-transform: uppercase; font-size: 11px; color: var(--text-light); }
#dm-v6-root .dm-v6-stat-grp h4 { font-size: 24px; }
#dm-v6-root .text-green { color: var(--accent); }

#dm-v6-root .dm-v6-chart-area {
    display: flex; align-items: flex-end; gap: 10px; height: 150px; margin-top: auto;
    border-bottom: 1px solid #e5e5e5; padding-bottom: 5px;
}
#dm-v6-root .chart-bar { flex: 1; background: #e5e5e5; border-radius: 4px 4px 0 0; }
#dm-v6-root .chart-bar.active { background: var(--accent); }


/* --- 2. PARTNERS --- */
#dm-v6-root .dm-v6-partners { padding: 40px 0; background: #fff; border-bottom: 1px solid var(--border); }
#dm-v6-root .dm-v6-label-center { text-align: center; font-size: 12px; text-transform: uppercase; font-weight: 700; color: #999; margin-bottom: 20px; letter-spacing: 1px; }
#dm-v6-root .dm-v6-logo-row { display: flex; justify-content: center; gap: 50px; flex-wrap: wrap; align-items: center; }
#dm-v6-root .dm-v6-logo { display: flex; align-items: center; justify-content: center; color: #ccc; transition: all 0.3s ease; }
#dm-v6-root .dm-v6-logo svg { width: 40px; height: 40px; fill: currentColor; }
#dm-v6-root .dm-v6-logo:hover { color: var(--text-main); transform: scale(1.1); }


/* --- 3. FUNNEL --- */
#dm-v6-root .dm-v6-funnel { padding: 100px 0; background: #fff; }
#dm-v6-root .dm-v6-sec-head { text-align: center; margin-bottom: 60px; max-width: 600px; margin-left: auto; margin-right: auto; }
#dm-v6-root .dm-v6-h2 { font-size: 36px; margin-bottom: 15px; }
#dm-v6-root .dm-v6-line { width: 60px; height: 4px; background: var(--accent); margin: 0 auto 20px auto; border-radius: 2px; }

#dm-v6-root .dm-v6-funnel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
#dm-v6-root .dm-v6-funnel-step {
    background: #fdfdfd; padding: 30px; border: 1px solid var(--border); border-radius: 8px;
    text-align: center; transition: 0.3s;
}
#dm-v6-root .dm-v6-funnel-step:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(16,185,129,0.1); }
#dm-v6-root .step-icon {
    width: 50px; height: 50px; background: #ecfdf5; color: var(--accent); margin: 0 auto 20px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;
}
#dm-v6-root .dm-v6-funnel-step h4 { font-size: 18px; margin-bottom: 10px; }
#dm-v6-root .dm-v6-funnel-step p { font-size: 14px; line-height: 1.6; margin: 0; }


/* --- 4. CHANNELS --- */
#dm-v6-root .dm-v6-channels { padding: 100px 0; background: #f8fafc; border-top: 1px solid var(--border); }
#dm-v6-root .dm-v6-lead-text { font-size: 18px; margin-bottom: 30px; }
#dm-v6-root .dm-v6-chan-list { display: flex; flex-direction: column; gap: 20px; }
#dm-v6-root .chan-item { background: #fff; padding: 25px; border-radius: 8px; border: 1px solid var(--border); }
#dm-v6-root .chan-head { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 10px; color: var(--text-main); }
#dm-v6-root .chan-head i { color: var(--accent); }
#dm-v6-root .chan-item p { font-size: 14px; margin: 0; }

#dm-v6-root .dm-v6-vs-card {
    background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}
#dm-v6-root .vs-header { font-size: 18px; font-weight: 700; margin-bottom: 30px; text-align: center; }
#dm-v6-root .vs-row { margin-bottom: 20px; }
#dm-v6-root .vs-row span { font-size: 12px; font-weight: 600; display: block; margin-bottom: 5px; }
#dm-v6-root .vs-bar {
    height: 30px; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; padding-left: 10px;
}
#dm-v6-root .vs-bar.red { background: #ef4444; width: 30%; }
#dm-v6-root .vs-bar.green { background: var(--accent); width: 90%; }


/* --- 5. STACK --- */
#dm-v6-root .dm-v6-stack { padding: 80px 0; background: #fff; border-top: 1px solid var(--border); }
#dm-v6-root .dm-v6-stack-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
#dm-v6-root .stack-item {
    padding: 10px 20px; border: 1px solid var(--border); border-radius: 50px;
    font-size: 14px; font-weight: 600; color: var(--text-light); transition: 0.3s;
}
#dm-v6-root .stack-item:hover { border-color: var(--accent); color: var(--text-main); }


/* --- 6. INDUSTRIES --- */
#dm-v6-root .dm-v6-industries { padding: 80px 0; background: #fdfdfd; border-top: 1px solid var(--border); }
#dm-v6-root .dm-v6-ind-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
#dm-v6-root .dm-v6-ind-item {
    text-align: center; padding: 20px; background: #fff; border: 1px solid var(--border);
    border-radius: 8px; transition: 0.3s;
}
#dm-v6-root .dm-v6-ind-item:hover { transform: translateY(-5px); border-color: var(--accent); }
#dm-v6-root .dm-v6-ind-item i { font-size: 24px; color: var(--text-main); margin-bottom: 10px; display: block; }
#dm-v6-root .dm-v6-ind-item span { font-size: 12px; font-weight: 600; color: var(--text-light); }


/* --- 7. WORK --- */
#dm-v6-root .dm-v6-work { padding: 100px 0; background: var(--text-main); color: #fff; }
#dm-v6-root .dm-v6-project-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
#dm-v6-root .dm-v6-project { cursor: pointer; }
#dm-v6-root .dm-v6-thumb {
    height: 350px; overflow: hidden; position: relative; border: 1px solid #333; margin-bottom: 20px; border-radius: 4px; cursor: pointer;
}
#dm-v6-root .dm-v6-thumb img { 
    width: 100%; height: 100%; object-fit: cover; transition: 0.5s; display: block;
}
#dm-v6-root .dm-v6-thumb:hover img { transform: scale(1.1); }
#dm-v6-root .dm-v6-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px;
    background: linear-gradient(to top, #000, transparent);
    font-weight: 700; font-size: 18px; color: var(--accent);
}
#dm-v6-root .dm-v6-meta h4 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 5px; }
#dm-v6-root .dm-v6-meta p { color: #999; font-size: 14px; }

/* --- LIGHTBOX --- */
#dm-v6-root .dm-v6-lightbox {
    display: none; position: fixed; z-index: 9999; left: 0; top: 0; 
    width: 100%; height: 100%; overflow: auto; 
    background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px);
    flex-direction: column; justify-content: center; align-items: center;
}
#dm-v6-root .dm-v6-lightbox-content {
    margin: auto; display: block; width: auto; height: auto; 
    max-width: 90vw; max-height: 90vh; object-fit: contain; 
    border: 2px solid #fff; border-radius: 4px; box-shadow: 0 0 20px rgba(0,0,0,0.5);
    animation: dm-zoom 0.3s;
}
#dm-v6-root .dm-v6-close {
    position: absolute; top: 20px; right: 35px;
    color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000;
}
#dm-v6-root .dm-v6-close:hover { color: var(--accent, #bbb); }
@keyframes dm-zoom { from {transform:scale(0)} to {transform:scale(1)} }

/* --- PROTECTION: Disable Dragging/Selection --- */
#dm-v6-root img {
    -webkit-user-drag: none; user-drag: none;
    -webkit-user-select: none; user-select: none;
    pointer-events: auto;
}


/* --- 8. FAQ --- */
#dm-v6-root .dm-v6-faq { padding: 100px 0; background: #fff; }
#dm-v6-root .dm-v6-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
#dm-v6-root .dm-v6-faq-item h4 { font-size: 18px; margin-bottom: 10px; }
#dm-v6-root .dm-v6-faq-item p { font-size: 15px; color: var(--text-light); }


/* --- 9. CTA --- */
#dm-v6-root .dm-v6-cta { padding: 80px 0 120px; }
#dm-v6-root .dm-v6-cta-box {
    background: var(--text-main); border-radius: 20px; padding: 80px; text-align: center;
    background-image: linear-gradient(135deg, #050505 0%, #171717 100%);
}
#dm-v6-root .dm-v6-cta-box h2 { color: #fff; font-size: 36px; margin-bottom: 15px; }
#dm-v6-root .dm-v6-cta-box p { color: #999; font-size: 18px; margin-bottom: 40px; }
#dm-v6-root .dm-v6-btn-white {
    display: inline-block; background: #fff; color: var(--accent) !important;
    padding: 16px 40px; font-weight: 700; border-radius: 4px; transition: 0.3s;
}
#dm-v6-root .dm-v6-btn-white:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(16,185,129,0.3); }

/* --- GOOGLE REVIEWS --- */
#dm-v6-root .dm-v6-reviews { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--border); }
#dm-v6-root .dm-v6-star-row { display: flex; align-items: center; gap: 2px; }
#dm-v6-root .star-icon { width: 18px; height: 18px; display: block; fill: currentColor; }
#dm-v6-root .full { color: #fbbf24; }
#dm-v6-root .empty-base { color: #e5e7eb; }
#dm-v6-root .dm-v6-partial-star { position: relative; width: 18px; height: 18px; display: flex; align-items: center; }
#dm-v6-root .star-crop { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; z-index: 2; }
#dm-v6-root .star-crop .star-icon { width: 18px; height: 18px; min-width: 18px; }
#dm-v6-root .dm-v6-reviews p { font-size: 13px; color: var(--text-light); margin: 0; line-height: 1.4; }
#dm-v6-root .dm-v6-reviews strong { color: var(--text-main); font-weight: 800; }
#dm-v6-root .dm-v6-reviews a { text-decoration: underline; color: var(--text-main); font-weight: 600; }
#dm-v6-root .google-icon { width: 20px; height: 20px; margin-left: auto; opacity: 0.9; }

/* --- GOOGLE VERIFIED BADGE --- */
#dm-v6-root .dm-v6-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
#dm-v6-root .dm-v6-verified-badge {
    display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700;
    color: var(--text-main); background: #fff; padding: 8px 16px; border-radius: 50px;
    border: 1px solid #e5e7eb; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
#dm-v6-root .ver-icon { width: 18px; height: 18px; color: #1a73e8; flex-shrink: 0; }
#dm-v6-root .dm-v6-verified-badge:hover { border-color: #1a73e8; background: #f8fbff; cursor: default; }

/* --- MEDIA SHOWCASE LAYOUT --- */
#dm-v6-root .dm-v6-media-showcase { padding: 100px 0; background: #fff; }
#dm-v6-root .dm-v6-media-grid { display: flex; flex-direction: column; gap: 120px; margin-top: 60px; }
#dm-v6-root .dm-v6-media-block { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; }
#dm-v6-root .dm-v6-media-block.reverse { direction: rtl; }
#dm-v6-root .dm-v6-media-block.reverse > * { direction: ltr; }
#dm-v6-root .media-img {
    width: 100%; max-width: 550px; margin: 0 auto; position: relative;
    border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
#dm-v6-root .media-img img { width: 100%; height: 380px; object-fit: cover; display: block; object-position: 64% center; }
#dm-v6-root .media-txt h3 { font-size: 32px; font-weight: 800; color: #111827; margin-bottom: 20px; line-height: 1.2; }
#dm-v6-root .media-txt p { font-size: 16px; line-height: 1.6; color: #4b5563; margin-bottom: 25px; }

/* Platform Badges */
#dm-v6-root .plat-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 50px;
    font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 20px; text-transform: uppercase;
    letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
#dm-v6-root .google-bg { background: var(--col-google); }
#dm-v6-root .tiktok-bg { background: var(--col-tiktok); }
#dm-v6-root .insta-bg { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
#dm-v6-root .fb-bg { background: var(--col-meta); }
#dm-v6-root .amazon-bg { background: var(--col-amazon); color: var(--col-amazon-text); }
#dm-v6-root .shopify-bg { background: var(--col-shopify); }

#dm-v6-root .dm-v6-mini-list { list-style: none; padding: 0; margin: 0; }
#dm-v6-root .dm-v6-mini-list li { font-size: 15px; color: #374151; margin-bottom: 15px; display: flex; align-items: flex-start; gap: 15px; }
#dm-v6-root .check-icon {
    display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;
    background: #ecfdf5; color: #10b981; border-radius: 50%; margin-top: 2px;
}

/* --- PARTNER SECTION STYLES --- */
#dm-v6-root .dm-v6-partner-section, #dm-v6-root .dm-v6-meta-section, #dm-v6-root .dm-v6-amazon-section, #dm-v6-root .dm-v6-tiktok-section, #dm-v6-root .dm-v6-shopify-section { padding: 100px 0; background: #fff; border-bottom: 1px solid #f1f5f9; }
#dm-v6-root .dm-v6-partner-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; }

#dm-v6-root .dm-v6-cert-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08); position: relative; overflow: hidden;
}
#dm-v6-root .dm-v6-cert-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, #4285F4, #34A853, #FBBC05, #EA4335);
}
#dm-v6-root .cert-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9; }
#dm-v6-root .google-logo { display: flex; align-items: center; gap: 6px; font-family: sans-serif; }
#dm-v6-root .g-text { font-weight: 700; color: #5f6368; font-size: 18px; letter-spacing: -0.5px; }
#dm-v6-root .p-text { font-weight: 400; color: #5f6368; font-size: 18px; }
#dm-v6-root .status-pill {
    background: #ecfdf5; color: #10b981; font-size: 11px; font-weight: 700; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px; display: flex; align-items: center; gap: 6px;
}
#dm-v6-root .dot-active { width: 6px; height: 6px; background: #10b981; border-radius: 50%; animation: pulse 2s infinite; }
#dm-v6-root .agency-name { font-size: 22px; font-weight: 800; color: #111827; margin-bottom: 4px; }
#dm-v6-root .cert-id { font-size: 13px; color: #9ca3af; font-family: monospace; margin-bottom: 25px; }
#dm-v6-root .cert-specs h5 { font-size: 12px; text-transform: uppercase; color: #6b7280; margin-bottom: 12px; font-weight: 700; }
#dm-v6-root .spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#dm-v6-root .spec-item {
    font-size: 13px; color: #374151; display: flex; align-items: center; gap: 8px;
    background: #f8fafc; padding: 6px 10px; border-radius: 6px;
}
#dm-v6-root .spec-item i { color: #4285F4; font-size: 11px; font-weight: bold; }
#dm-v6-root .cert-footer { margin-top: 25px; padding-top: 20px; border-top: 1px solid #f1f5f9; }
#dm-v6-root .perf-score { display: flex; justify-content: space-between; font-size: 13px; color: #4b5563; margin-bottom: 8px; }
#dm-v6-root .perf-score strong { color: #111827; }
#dm-v6-root .perf-bar { height: 6px; background: #f1f5f9; border-radius: 10px; overflow: hidden; }
#dm-v6-root .bar-fill { height: 100%; background: #4285F4; border-radius: 10px; }

#dm-v6-root .sec-label { font-size: 12px; font-weight: 800; color: #4285F4; letter-spacing: 1px; margin-bottom: 15px; display: block; }
#dm-v6-root .dm-v6-partner-txt h2 { font-size: 42px; font-weight: 800; color: #111827; line-height: 1.2; margin-bottom: 20px; }
#dm-v6-root .dm-v6-partner-txt p { font-size: 18px; line-height: 1.6; color: #4b5563; margin-bottom: 30px; }
#dm-v6-root .benefit-list { list-style: none; padding: 0; margin: 0; }
#dm-v6-root .benefit-list li { display: flex; gap: 20px; margin-bottom: 25px; }
#dm-v6-root .b-icon { font-size: 24px; }
#dm-v6-root .b-info strong { display: block; font-size: 16px; color: #111827; margin-bottom: 4px; }
#dm-v6-root .b-info span { font-size: 14px; color: #6b7280; line-height: 1.5; }

/* --- PROOF CARDS --- */
#dm-v6-root .dm-v6-proof-section { padding: 100px 0; background: #f8fafc; border-bottom: 1px solid #f1f5f9; }
#dm-v6-root .dm-v6-proof-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px;
    margin-top: 60px; justify-content: center;
}
#dm-v6-root .proof-card {
    background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #e2e8f0; display: flex; flex-direction: column;
}
#dm-v6-root .proof-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
#dm-v6-root .proof-img { height: 180px; width: 100%; position: relative; background: #e2e8f0; }
#dm-v6-root .proof-img img { width: 100%; height: 100%; object-fit: cover; }
#dm-v6-root .industry-tag {
    position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.8); color: #fff;
    padding: 4px 10px; border-radius: 50px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
#dm-v6-root .proof-content { padding: 20px 25px; flex-grow: 1; display: flex; flex-direction: column; }
#dm-v6-root .proof-content h3 { font-size: 18px; font-weight: 800; color: #111827; margin-bottom: 12px; }
#dm-v6-root .proof-desc { font-size: 13px; color: #4b5563; line-height: 1.5; margin-bottom: 8px; }
#dm-v6-root .proof-content strong { color: #111827; }
#dm-v6-root .proof-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 15px; border-top: 1px solid #f1f5f9; }
#dm-v6-root .m-val { display: block; font-size: 18px; font-weight: 800; color: #111827; }
#dm-v6-root .green-txt { color: var(--accent); }
#dm-v6-root .m-lbl { font-size: 11px; color: #9ca3af; text-transform: uppercase; font-weight: 600; }

#dm-v6-root .dm-v6-show-more-wrap { text-align: center; margin-top: 50px; }
#dm-v6-root .dm-v6-btn {
    border: none; padding: 14px 30px; font-size: 16px; font-weight: 700;
    border-radius: 50px; cursor: pointer; transition: all 0.3s ease;
}
#dm-v6-root .dm-v6-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

#dm-v6-root .google-btn-style { background: var(--col-google); color: #fff; box-shadow: 0 10px 20px rgba(66, 133, 244, 0.2); }
#dm-v6-root .amazon-btn-style { background: var(--col-amazon); color: var(--col-amazon-text); box-shadow: 0 10px 20px rgba(255, 153, 0, 0.2); }
#dm-v6-root .shopify-btn-style { background: var(--col-shopify); color: #fff; box-shadow: 0 10px 20px rgba(0, 128, 96, 0.2); }
#dm-v6-root .tiktok-btn-style { background: #000; color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }

/* --- OTHER PLATFORM STYLES --- */
/* Meta */
#dm-v6-root .dm-v6-meta-section { background: #ffffff; }
#dm-v6-root .meta-card-style { border-color: #dbeafe; box-shadow: 0 20px 50px rgba(24, 119, 242, 0.08); }
#dm-v6-root .meta-card-style::before { background: linear-gradient(90deg, #1877F2, #0064e0, #1877F2); }
#dm-v6-root .meta-logo { display: flex; align-items: center; gap: 12px; font-family: sans-serif; }
#dm-v6-root .meta-svg-icon { height: 34px; width: auto; display: block; }
#dm-v6-root .meta-fill { background: var(--col-meta); }
#dm-v6-root .meta-label { color: var(--col-meta); }

/* Amazon */
#dm-v6-root .amazon-card-style { border-color: #ff9900; box-shadow: 0 20px 50px rgba(35, 47, 62, 0.1); }
#dm-v6-root .amazon-card-style::before { background: linear-gradient(90deg, #FF9900, #FFB84D, #FF9900); }
#dm-v6-root .amazon-logo { display: flex; align-items: center; width: 130px; height: 80px; gap: 12px; font-family: Helvetica, Arial, sans-serif; }
#dm-v6-root .amazon-svg-icon { width: 130px; height: auto; display: block; }
#dm-v6-root .amazon-text { font-weight: 400; color: #232F3E; font-size: 19px; margin-top: 4px; }
#dm-v6-root .amazon-dot { background: #10b981; }
#dm-v6-root .amazon-fill { background: #FF9900; }
#dm-v6-root .amazon-label { color: #232F3E; }

/* Shopify */
#dm-v6-root .dm-v6-shopify-section { background: #ffffff; }
#dm-v6-root .shopify-card-style { border-color: #96bf48; box-shadow: 0 20px 50px rgba(150, 191, 72, 0.1); }
#dm-v6-root .shopify-card-style::before { background: linear-gradient(90deg, #96bf48, #5c8727); }
#dm-v6-root .shopify-logo { display: flex; align-items: center; gap: 8px; font-family: Helvetica, Arial, sans-serif; }
#dm-v6-root .shopify-svg-icon { height: 38px; width: auto; display: block; }
#dm-v6-root .s-text { font-weight: 700; color: #212b36; font-size: 20px; letter-spacing: -0.5px; }
#dm-v6-root .shopify-dot { background: #96bf48; }
#dm-v6-root .shopify-fill { background: #96bf48; }
#dm-v6-root .shopify-label { color: #212b36; }

/* TikTok */
#dm-v6-root .tiktok-card-style { border-color: #000; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); }
#dm-v6-root .tiktok-card-style::before { background: linear-gradient(90deg, #25F4EE, #FE2C55); }
#dm-v6-root .tiktok-logo { display: flex; align-items: center; gap: 10px; font-family: Helvetica, Arial, sans-serif; }
#dm-v6-root .tiktok-svg-icon { height: 34px; width: auto; display: block; }
#dm-v6-root .t-text { font-weight: 800; color: #000000; font-size: 20px; letter-spacing: -0.5px; }
#dm-v6-root .tiktok-dot { background: #25F4EE; box-shadow: 0 0 5px rgba(37, 244, 238, 0.5); }
#dm-v6-root .tiktok-fill { background: #000000; }
#dm-v6-root .tiktok-label { color: #000000; }

/* Authority Header */
#dm-v6-root .dm-v8-authority-header { padding: 100px 0 60px 0; background: #fff; text-align: center; }
#dm-v6-root .dm-v6-h2 { font-size: 42px; line-height: 1.2; margin-bottom: 20px; color: #111827; }
#dm-v6-root .dm-v8-trust-strip { display: flex; justify-content: center; align-items: center; gap: 60px; margin-top: 60px; flex-wrap: wrap; opacity: 0.7; transition: opacity 0.3s ease; }
#dm-v6-root .dm-v8-trust-strip:hover { opacity: 1; }
#dm-v6-root .trust-logo svg { height: 40px; width: auto; fill: #9ca3af; transition: all 0.3s ease; cursor: default; }
#dm-v6-root .trust-logo:hover svg { transform: scale(1.1); }
#dm-v6-root .trust-logo:nth-child(1):hover svg { fill: #4285F4; }
#dm-v6-root .trust-logo:nth-child(2):hover svg { fill: #0668E1; }
#dm-v6-root .trust-logo:nth-child(3):hover svg { fill: #FF9900; }
#dm-v6-root .trust-logo:nth-child(4):hover svg { fill: #000000; }
#dm-v6-root .trust-logo:nth-child(5):hover svg { fill: #96bf48; }

/* RESPONSIVE */
@media(max-width: 991px) {
    #dm-v6-root .dm-v6-bento-hero { grid-template-columns: 1fr; }
    #dm-v6-root .hero-visual { height: 300px; margin-top: 40px; }
    #dm-v6-root .dm-v6-funnel-grid, #dm-v6-root .dm-v6-grid-2, #dm-v6-root .dm-v6-project-row, #dm-v6-root .dm-v6-faq-grid { grid-template-columns: 1fr; gap: 40px; }
    #dm-v6-root .dm-v6-ind-grid { grid-template-columns: repeat(2, 1fr); }
    #dm-v6-root .dm-v6-logo-row { gap: 30px; }
    #dm-v6-root .dm-v6-logo svg { width: 40px; height: 40px; }
    #dm-v6-root { width: 100%; margin-left: 0; }
    #dm-v6-root .dm-v6-media-block { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    #dm-v6-root .dm-v6-media-block.reverse { direction: ltr; }
    #dm-v6-root .media-img { order: -1; max-width: 100%; }
    #dm-v6-root .media-img img { height: auto; min-height: 250px; }
    #dm-v6-root .dm-v6-mini-list li { justify-content: flex-start; text-align: left; }
    #dm-v6-root .dm-v6-partner-grid { grid-template-columns: 1fr; gap: 50px; }
    #dm-v6-root .dm-v6-cert-card { max-width: 450px; margin: 0 auto; }
    #dm-v6-root .dm-v6-proof-grid { grid-template-columns: 1fr; gap: 40px; }
    #dm-v6-root .dm-v6-meta-section .dm-v6-partner-grid, #dm-v6-root .dm-v6-amazon-section .dm-v6-partner-grid, #dm-v6-root .dm-v6-shopify-section .dm-v6-partner-grid, #dm-v6-root .dm-v6-tiktok-section .dm-v6-partner-grid { gap: 50px; }
}
@media (max-width: 768px) {
    #dm-v6-root .dm-v6-reviews { flex-wrap: wrap; justify-content: center; text-align: center; }
    #dm-v6-root .google-icon { display: none; }
    #dm-v6-root .dm-v6-h2 { font-size: 32px; }
    #dm-v6-root .dm-v8-trust-strip { gap: 30px; }
    #dm-v6-root .trust-logo svg { height: 30px; }
}


/* --- CUSTOM CLICK ICON ANIMATION --- */

/* 1. Container Setup */
.dm-v6-media-block .media-img {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 20px;
    z-index: 1;
    transform: translateZ(0);
}

/* 2. The Custom SVG Icon (Embedded) */
.dm-v6-media-block .media-img::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px; /* Adjust icon size */
    height: 75px;
    
    /* Your Custom SVG (Colored White for contrast) */
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 83.62 122.88'%3E%3Cpath fill='%23ffffff' d='M40.59,14.63a3.36,3.36,0,0,1-1,2.39l0,0a3.39,3.39,0,0,1-4.77,0,3.42,3.42,0,0,1-1-2.4V3.39A3.4,3.4,0,0,1,37.2,0a3.34,3.34,0,0,1,2.39,1,3.39,3.39,0,0,1,1,2.4V14.63Zm25,76.65a1.89,1.89,0,0,1,3.77,0V99.9a1.89,1.89,0,1,1-3.77,0V91.28ZM54.46,87.47a1.89,1.89,0,0,1,3.77,0V99.9a1.89,1.89,0,1,1-3.77,0V87.47Zm-28-7.63a1.92,1.92,0,0,1-.35-.23q-5.24-4.24-10.44-8.53a8.36,8.36,0,0,0-3.57-1.79,3.54,3.54,0,0,0-2,.09A2,2,0,0,0,9,70.49a6.9,6.9,0,0,0-.4,3.24,12.47,12.47,0,0,0,1.11,4,26.49,26.49,0,0,0,2.92,4.94l17.68,26.74a2.37,2.37,0,0,1,.36,1,15.28,15.28,0,0,0,1.87,6.4,2.89,2.89,0,0,0,2.57,1.46c9,0,18.62-.34,27.53,0a8.33,8.33,0,0,0,4.69-1.51,15,15,0,0,0,4.29-5l.34-.57c3.4-5.87,6.71-11.57,7-18.33L78.85,85l0-.33,0-1.84c.06-5.74.16-14.54-4.62-15.4H71.14c.09,2.46,0,5-.18,7.3-.08,1.36-.15,2.63-.15,3.79a2.31,2.31,0,1,1-4.62,0c0-1.1.08-2.52.17-4,.32-5.73.75-13.38-3.24-14.14h-3a2.2,2.2,0,0,1-.58-.07,69.07,69.07,0,0,1-.13,8.29c-.07,1.36-.15,2.63-.15,3.79a2.31,2.31,0,1,1-4.61,0c0-1.1.08-2.52.16-4,.33-5.73.76-13.38-3.24-14.14h-3a2,2,0,0,1-.6-.08V66a2.31,2.31,0,1,1-4.61,0V42c0-4-1.64-6.55-3.73-7.61a5.32,5.32,0,0,0-4.71-.06l-.1.06c-2.07,1-3.69,3.59-3.69,7.7v42a2.31,2.31,0,1,1-4.62,0V79.84Zm44.14-17a2.49,2.49,0,0,1,.61-.08h3.19a2.33,2.33,0,0,1,.53.06c8.73,1.4,8.61,12.65,8.52,20,0,3.4.14,6.78.18,10.17-.39,7.91-4,14.1-7.67,20.47l-.32.55A19.49,19.49,0,0,1,70,120.55a12.88,12.88,0,0,1-7.29,2.32H35.17a7.23,7.23,0,0,1-6.44-3.5,19,19,0,0,1-2.56-7.88L8.94,85.42A31,31,0,0,1,5.5,79.58,16.88,16.88,0,0,1,4,74a11.42,11.42,0,0,1,.8-5.42,6.54,6.54,0,0,1,3.55-3.49A8.05,8.05,0,0,1,13,64.76a13.19,13.19,0,0,1,5.61,2.77L26.45,74V42.09c0-6.1,2.73-10,6.22-11.82l.15-.06a9.81,9.81,0,0,1,4.33-1,10,10,0,0,1,4.49,1.07C45.16,32.06,47.91,36,47.91,42v7.6a2.41,2.41,0,0,1,.6-.08H51.7a2.33,2.33,0,0,1,.53.06c3.82.61,5.73,3.16,6.63,6.47a2.25,2.25,0,0,1,1.23-.36h3.18a2.26,2.26,0,0,1,.53.06c4.07.65,6,3.49,6.79,7.11ZM14.63,37A3.33,3.33,0,0,1,17,38a3.39,3.39,0,0,1-2.39,5.79H3.39a3.36,3.36,0,0,1-2.39-1A3.4,3.4,0,0,1,3.39,37ZM23,20.55a3.39,3.39,0,0,1-2.4,5.79,3.4,3.4,0,0,1-2.4-1l-7.91-7.94a3.42,3.42,0,0,1-1-2.4,3.39,3.39,0,0,1,5.79-2.4L23,20.55ZM59.2,43.81a3.41,3.41,0,0,1-3.4-3.4A3.41,3.41,0,0,1,59.2,37H70.43a3.35,3.35,0,0,1,2.4,1,3.4,3.4,0,0,1-2.4,5.79ZM55.62,24.74a3.39,3.39,0,0,1-4.8-4.8l7.91-8a3.39,3.39,0,0,1,4.8,4.8l-7.91,8Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    z-index: 10;
    pointer-events: none;
    
    /* Adds a drop shadow so it is visible on white backgrounds */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
    
    /* Wiggle Animation triggers automatically */
    animation: dm-wiggle-tap 2s ease-in-out infinite;
}

/* 3. The "Wiggle" Keyframes */
@keyframes dm-wiggle-tap {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    15% { transform: translate(-50%, -50%) rotate(-15deg) scale(1.1); } /* Tilt Left + Grow */
    30% { transform: translate(-50%, -50%) rotate(15deg) scale(1.1); }  /* Tilt Right */
    45% { transform: translate(-50%, -50%) rotate(-10deg) scale(1.1); } /* Tilt Left */
    60% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }     /* Back to center */
    100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }    /* Pause */
}

/* 4. Hover State: Stop Wiggle, Press Down */
.dm-v6-media-block .media-img:hover::before {
    animation: none; /* Stop the idle animation */
    transform: translate(-50%, -50%) scale(0.9); /* Shrink effect (Click feel) */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 5. Darken Image on Hover (Focus Effect) */
.dm-v6-media-block .media-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
    pointer-events: none;
}

.dm-v6-media-block .media-img:hover::after {
    opacity: 1;
}

/* 6. Image Zoom */
.dm-v6-media-block .media-img img {
    transition: transform 0.5s ease;
}
.dm-v6-media-block .media-img:hover img {
    transform: scale(1.05);
}

/* Add hover effect to the clickable image */
.dm-v6-media-block .media-img {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dm-v6-media-block .media-img:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(66, 133, 244, 0.2); /* Blue glow for Google */
}

/* Make the image look interactive */
.dm-v6-media-block .media-img {
    cursor: pointer; /* Changes mouse to hand icon */
    transition: all 0.3s ease; /* Smooth animation */
    border: 2px solid transparent; /* Prepares for border hover */
}

/* Hover Effect */
.dm-v6-media-block .media-img:hover {
    transform: translateY(-5px) scale(1.02); /* Slight lift and zoom */
    box-shadow: 0 20px 40px rgba(66, 133, 244, 0.3); /* Google Blue Glow */
    border-color: #4285F4; /* Blue border appears */
}

/* Optional: Active 'Click' Effect */
.dm-v6-media-block .media-img:active {
    transform: scale(0.98); /* Slight press down effect when clicking */
}

/* IT solution page */

/* --- IT SOLUTIONS V2 ISOLATED VARIABLES --- */
#it-v2-root {
    --bg-main: #ffffff;
    --text-main: #0f172a;   /* Dark Slate */
    --text-light: #64748b;  /* Light Slate */
    --accent: #06b6d4;      /* CYAN / TEAL */
    --accent-dark: #0891b2;
    --border: #e2e8f0;
    --font: 'Inter', Helvetica, Arial, sans-serif;
    --mono: 'Courier New', Courier, monospace;
}

/* --- ISOLATION RESET --- */
#it-v2-root {
    width: 100vw; margin-left: calc(-50vw + 50%);
    background: var(--bg-main); color: var(--text-main);
    font-family: var(--font); line-height: 1.5;
    overflow-x: hidden; position: relative; box-sizing: border-box;
    text-align: left;
}
#it-v2-root * { box-sizing: border-box; margin: 0; padding: 0; }
#it-v2-root a { text-decoration: none; color: inherit; transition: 0.3s; }
#it-v2-root ul { list-style: none; padding: 0; margin: 0; }
#it-v2-root img { width: 100%; display: block; max-width: 100%; }
#it-v2-root .text-white { color: #fff !important; }

/* Force Colors */
#it-v2-root h1, #it-v2-root h2, #it-v2-root h3 { color: var(--text-main); font-weight: 800; margin: 0; }
#it-v2-root p { color: var(--text-light); margin-bottom: 20px; }

/* --- GRID UTILS --- */
#it-v2-root .it-v2-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
#it-v2-root .it-v2-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }


/* --- 1. HERO --- */
#it-v2-root .it-v2-hero {
    padding: 140px 0 80px; position: relative; overflow: hidden;
    background: #f8fafc; border-bottom: 1px solid var(--border);
}
#it-v2-root .it-v2-bg-grid {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 30px 30px; opacity: 0.4; z-index: 0; pointer-events: none;
}
#it-v2-root .it-v2-bento-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }

/* Hero Text */
#it-v2-root .hero-main { display: flex; flex-direction: column; justify-content: center; }
#it-v2-root .it-v2-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #cffafe; color: var(--accent-dark);
    padding: 6px 14px; border-radius: 50px; font-weight: 600; font-size: 13px;
    margin-bottom: 25px; align-self: flex-start;
}
#it-v2-root .it-v2-blink { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

#it-v2-root .it-v2-h1 {
    font-size: clamp(42px, 5vw, 68px); line-height: 1.1; margin-bottom: 20px; letter-spacing: -1px;
}
#it-v2-root .it-v2-highlight { color: var(--accent); }
#it-v2-root .it-v2-lead { font-size: 18px; margin-bottom: 30px; max-width: 500px; }

#it-v2-root .it-v2-actions { display: flex; align-items: center; gap: 20px; }
#it-v2-root .it-v2-btn-primary {
    display: inline-block; background: var(--text-main); color: #fff !important;
    padding: 14px 35px; border-radius: 8px; font-weight: 600;
}
#it-v2-root .it-v2-btn-primary:hover { background: var(--accent); }
#it-v2-root .it-v2-support-info { font-weight: 600; color: var(--text-light); display: flex; align-items: center; gap: 5px; }
#it-v2-root .it-v2-support-info i { color: var(--accent); }

/* Hero Visual (Server Dashboard) */
#it-v2-root .hero-visual { position: relative; height: 400px; display: flex; align-items: center; }
#it-v2-root .it-v2-server-ui {
    background: #0f172a; width: 100%; border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); border: 1px solid #334155;
    color: #fff; overflow: hidden;
}
#it-v2-root .server-head {
    background: #1e293b; padding: 15px 20px; display: flex; justify-content: space-between;
    border-bottom: 1px solid #334155; font-family: var(--mono); font-size: 12px; color: #94a3b8;
}
#it-v2-root .status-lights { display: flex; gap: 5px; }
#it-v2-root .light { width: 8px; height: 8px; border-radius: 50%; background: #334155; }
#it-v2-root .light.green { background: var(--accent); box-shadow: 0 0 5px var(--accent); }

#it-v2-root .server-body { padding: 30px; }
#it-v2-root .metric-row { display: flex; align-items: center; margin-bottom: 20px; gap: 15px; }
#it-v2-root .metric-row .label { width: 80px; font-size: 13px; color: #94a3b8; }
#it-v2-root .prog-track { flex: 1; height: 6px; background: #334155; border-radius: 3px; }
#it-v2-root .prog-fill { height: 100%; background: var(--accent); border-radius: 3px; box-shadow: 0 0 10px rgba(6,182,212,0.5); }
#it-v2-root .val { width: 50px; text-align: right; font-family: var(--mono); font-size: 12px; }
#it-v2-root .text-cyan { color: var(--accent); }

#it-v2-root .server-log {
    margin-top: 30px; border-top: 1px solid #334155; padding-top: 20px;
    font-family: var(--mono); font-size: 12px; color: #cbd5e1; line-height: 1.6;
}
#it-v2-root .blink-cursor { animation: blink 1s infinite; }


/* --- 2. PARTNERS --- */
#it-v2-root .it-v2-partners { padding: 40px 0; background: #fff; border-bottom: 1px solid var(--border); }
#it-v2-root .it-v2-part-label { text-align: center; font-size: 12px; text-transform: uppercase; font-weight: 700; color: #94a3b8; margin-bottom: 20px; letter-spacing: 1px; }
#it-v2-root .it-v2-logo-row { display: flex; justify-content: center; gap: 50px; flex-wrap: wrap; align-items: center; }
#it-v2-root .it-v2-logo { display: flex; align-items: center; justify-content: center; color: #cbd5e1; transition: all 0.3s ease; }
#it-v2-root .it-v2-logo svg { width: 40px; height: 40px; fill: currentColor; }
#it-v2-root .it-v2-logo:hover { color: var(--text-main); transform: scale(1.1); }


/* --- 3. SERVICES --- */
#it-v2-root .it-v2-services { padding: 100px 0; background: #fff; }
#it-v2-root .it-v2-sec-head { text-align: center; margin-bottom: 60px; }
#it-v2-root .it-v2-h2 { font-size: 36px; margin-bottom: 15px; }
#it-v2-root .it-v2-line { width: 60px; height: 4px; background: var(--accent); margin: 0 auto; border-radius: 2px; }

#it-v2-root .it-v2-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
#it-v2-root .it-v2-svc-card {
    background: #fdfdfd; border: 1px solid var(--border); border-radius: 12px;
    padding: 40px; transition: 0.3s;
}
#it-v2-root .it-v2-svc-card:hover, #it-v2-root .it-v2-active {
    border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(6,182,212,0.1); background: #fff;
}
#it-v2-root .it-v2-svc-icon {
    font-size: 24px; color: var(--accent); margin-bottom: 20px;
    background: #cffafe; width: 50px; height: 50px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
#it-v2-root .it-v2-svc-card h3 { font-size: 20px; margin-bottom: 15px; }
#it-v2-root .it-v2-svc-card p { font-size: 15px; line-height: 1.6; margin-bottom: 25px; }
#it-v2-root .it-v2-list li {
    font-size: 14px; color: var(--text-light); margin-bottom: 8px; padding-left: 15px; position: relative;
}
#it-v2-root .it-v2-list li::before { content: '›'; color: var(--accent); position: absolute; left: 0; font-weight: bold; }


/* --- 4. MATRIX (Comparison) --- */
#it-v2-root .it-v2-matrix { padding: 100px 0; background: #f8fafc; }
#it-v2-root .it-v2-lead-text { font-size: 18px; margin-bottom: 30px; color: var(--text-light); }
#it-v2-root .it-v2-btn-outline {
    display: inline-block; border: 1px solid var(--text-main); color: var(--text-main) !important;
    padding: 12px 28px; border-radius: 6px; font-weight: 600; transition: 0.3s;
}
#it-v2-root .it-v2-btn-outline:hover { background: var(--text-main); color: #fff !important; }

#it-v2-root .it-v2-matrix-table {
    background: #fff; border-radius: 12px; border: 1px solid var(--border); overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
#it-v2-root .it-v2-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 20px; border-bottom: 1px solid var(--border);
    font-size: 15px; color: var(--text-light); align-items: center;
}
#it-v2-root .it-v2-row:last-child { border-bottom: none; }
#it-v2-root .it-v2-row.header { background: #f1f5f9; font-weight: 700; color: var(--text-main); text-transform: uppercase; font-size: 12px; }
#it-v2-root .highlight { color: var(--accent-dark); font-weight: 600; }


/* --- 5. PROCESS (Timeline) --- */
#it-v2-root .it-v2-process { padding: 100px 0; background: #fff; }
#it-v2-root .center { text-align: center; margin-bottom: 50px; }
#it-v2-root .it-v2-timeline-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
#it-v2-root .it-v2-time-card {
    background: #fdfdfd; border: 1px solid var(--border); padding: 30px; border-radius: 12px; position: relative;
}
#it-v2-root .it-v2-step-num {
    font-size: 40px; font-weight: 900; color: #f1f5f9; position: absolute; top: 10px; right: 20px; line-height: 1;
}
#it-v2-root .it-v2-time-card h4 { font-size: 18px; margin-bottom: 10px; position: relative; z-index: 2; }
#it-v2-root .it-v2-time-card p { font-size: 14px; position: relative; z-index: 2; margin: 0; }


/* --- 6. INDUSTRIES --- */
#it-v2-root .it-v2-industries { padding: 80px 0; background: #fdfdfd; border-top: 1px solid var(--border); }
#it-v2-root .it-v2-label-center { text-align: center; text-transform: uppercase; font-weight: 700; color: #999; margin-bottom: 40px; font-size: 14px; }
#it-v2-root .it-v2-ind-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
#it-v2-root .it-v2-ind-item {
    text-align: center; padding: 20px; background: #fff; border: 1px solid var(--border);
    border-radius: 8px; transition: 0.3s;
}
#it-v2-root .it-v2-ind-item:hover { transform: translateY(-5px); border-color: var(--accent); }
#it-v2-root .it-v2-ind-item i { font-size: 24px; color: var(--text-main); margin-bottom: 10px; display: block; }
#it-v2-root .it-v2-ind-item span { font-size: 12px; font-weight: 600; color: var(--text-light); }


/* --- 7. FAQ --- */
#it-v2-root .it-v2-faq { padding: 100px 0; background: #fff; }
#it-v2-root .it-v2-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
#it-v2-root .it-v2-faq-item h4 { font-size: 18px; margin-bottom: 10px; }
#it-v2-root .it-v2-faq-item p { font-size: 15px; color: var(--text-light); }


/* --- 8. CTA --- */
#it-v2-root .it-v2-cta { padding: 80px 0 120px; }
#it-v2-root .it-v2-cta-box {
    background: var(--text-main); border-radius: 20px; padding: 80px; text-align: center;
    background-image: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
#it-v2-root .it-v2-cta-box h2 { color: #fff; font-size: 36px; margin-bottom: 15px; }
#it-v2-root .it-v2-cta-box p { color: #94a3b8; font-size: 18px; margin-bottom: 40px; }
#it-v2-root .it-v2-btn-white {
    display: inline-block; background: #fff; color: var(--accent) !important;
    padding: 16px 40px; font-weight: 700; border-radius: 4px; transition: 0.3s;
}
#it-v2-root .it-v2-btn-white:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(6,182,212,0.3); }

/* RESPONSIVE */
@media(max-width: 991px) {
    #it-v2-root .it-v2-bento-hero { grid-template-columns: 1fr; }
    #it-v2-root .hero-visual { height: 300px; margin-top: 40px; }
    #it-v2-root .it-v2-service-grid, #it-v2-root .it-v2-grid-2, #it-v2-root .it-v2-timeline-row { grid-template-columns: 1fr; gap: 40px; }
    #it-v2-root .it-v2-ind-grid { grid-template-columns: repeat(2, 1fr); }
    #it-v2-root .it-v2-faq-grid { grid-template-columns: 1fr; }
    #it-v2-root .it-v2-logo-row { gap: 30px; }
    #it-v2-root .it-v2-logo svg { width: 40px; height: 40px; }
    #it-v2-root { width: 100%; margin-left: 0; }
}

/* branding */

/* --- BRANDING V9 ISOLATED VARIABLES --- */
#br-v9-root {
    --bg-light: #ffffff;
    --bg-off: #fdfdfd;
    --text-main: #111111;
    --text-light: #666666;
    --accent: #8b5cf6;      /* Electric Purple */
    --accent-dark: #7c3aed;
    --border: #e5e5e5;
    --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mono: 'Courier New', Courier, monospace;
}

/* --- ISOLATION RESET --- */
#br-v9-root {
    width: 100vw; margin-left: calc(-50vw + 50%);
    background: var(--bg-light); color: var(--text-main);
    font-family: var(--font); line-height: 1.5;
    overflow-x: hidden; position: relative; box-sizing: border-box;
    text-align: left;
}
#br-v9-root * { box-sizing: border-box; margin: 0; padding: 0; }
#br-v9-root a { text-decoration: none; color: inherit; transition: 0.3s; }
#br-v9-root ul { list-style: none; padding: 0; margin: 0; }
#br-v9-root img { width: 100%; display: block; max-width: 100%; }
#br-v9-root .text-white { color: #fff !important; }

/* Force Colors */
#br-v9-root h1, #br-v9-root h2, #br-v9-root h3, #br-v9-root h4 { color: var(--text-main); font-weight: 800; margin: 0; }
#br-v9-root p { color: var(--text-light); margin-bottom: 20px; }

/* --- GRID UTILS --- */
#br-v9-root .br-v9-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
#br-v9-root .br-v9-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
#br-v9-root .align-center { align-items: center; }


/* --- 1. HERO --- */
#br-v9-root .br-v9-hero {
    padding: 140px 0 100px; position: relative; overflow: hidden;
    background: var(--bg-off); border-bottom: 1px solid var(--border);
}
#br-v9-root .br-v9-bg-grid {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(#e5e5e5 1px, transparent 1px), linear-gradient(90deg, #e5e5e5 1px, transparent 1px);
    background-size: 50px 50px; opacity: 0.4; z-index: 0; pointer-events: none;
}
#br-v9-root .br-v9-grid-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

#br-v9-root .br-v9-meta {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 25px; display: flex; align-items: center; gap: 8px; color: var(--accent);
}
#br-v9-root .br-v9-blink { font-size: 20px; line-height: 0; animation: br9-blink 1s infinite; }
@keyframes br9-blink { 50% { opacity: 0; } }

#br-v9-root .br-v9-h1 {
    font-size: clamp(50px, 8vw, 90px); line-height: 1; margin-bottom: 30px; letter-spacing: -2px;
}
#br-v9-root .br-v9-highlight { color: var(--accent); position: relative; z-index: 1; display: inline-block; }
#br-v9-root .br-v9-lead { font-size: 18px; margin-bottom: 40px; max-width: 500px; }

#br-v9-root .br-v9-btn-primary {
    display: inline-block; background: var(--text-main); color: #fff !important;
    padding: 16px 36px; font-weight: 700; border-radius: 4px;
}
#br-v9-root .br-v9-btn-primary:hover { background: var(--accent); }

/* Hero Visual */
#br-v9-root .br-v9-brand-card {
    background: #fff; border: 1px solid #000; width: 350px; height: 450px; margin: 0 auto;
    box-shadow: 10px 10px 0px #000; display: flex; flex-direction: column; justify-content: space-between;
    padding: 30px; position: relative; z-index: 2;
}
#br-v9-root .br-v9-card-header {
    display: flex; justify-content: space-between; font-weight: 700; font-size: 20px;
    border-bottom: 2px solid #000; padding-bottom: 10px;
}
#br-v9-root .br-v9-card-body h3 { font-size: 16px; font-family: monospace; color: #555; margin-top: 20px; }
#br-v9-root .br-v9-circle-grid { display: flex; gap: 10px; }
#br-v9-root .br-v9-circle-grid div { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #000; }
#br-v9-root .br-v9-circle-grid div:nth-child(1) { background: var(--accent); }
#br-v9-root .br-v9-circle-grid div:nth-child(2) { background: #000; }
#br-v9-root .br-v9-mini-swatches { display: flex; gap: 5px; margin-top: 20px; }
#br-v9-root .br-v9-mini-swatches span { width: 100%; height: 10px; background: #eee; }
#br-v9-root .br-v9-mini-swatches span:first-child { background: var(--accent); }


/* --- 2. MARQUEE --- */
#br-v9-root .br-v9-marquee {
    background: var(--text-main); color: #fff; padding: 24px 0; overflow: hidden;
    border-bottom: 1px solid var(--border);
}
#br-v9-root .br-v9-track { display: flex; white-space: nowrap; width: max-content; animation: br9-scroll 30s linear infinite; }
#br-v9-root .br-v9-track span { font-size: 20px; font-weight: 700; padding-right: 50px; opacity: 0.9; }
@keyframes br9-scroll { 0% {transform:translateX(0);} 100% {transform:translateX(-50%);} }


/* --- 3. NEW: IMPACT (ROI) --- */
#br-v9-root .br-v9-impact { padding: 100px 0; background: #fdfdfd; border-bottom: 1px solid var(--border); }
#br-v9-root .center { text-align: center; margin-bottom: 60px; }
#br-v9-root .br-v9-impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
#br-v9-root .br-v9-stat { font-size: 60px; font-weight: 900; color: var(--accent); display: block; line-height: 1; margin-bottom: 15px; }
#br-v9-root .br-v9-imp-box p { font-size: 18px; font-weight: 600; color: var(--text-main); }


/* --- 4. SERVICES --- */
#br-v9-root .br-v9-services { padding: 100px 0; background: #fff; }
#br-v9-root .br-v9-sec-head { margin-bottom: 60px; max-width: 700px; }
#br-v9-root .br-v9-h2 { font-size: 40px; margin-bottom: 10px; }
#br-v9-root .br-v9-line { width: 60px; height: 4px; background: var(--accent); margin-bottom: 20px; }

#br-v9-root .br-v9-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
#br-v9-root .br-v9-svc-card {
    border: 1px solid var(--border); padding: 40px; transition: 0.3s; background: #fdfdfd;
}
#br-v9-root .br-v9-svc-card:hover {
    border-color: var(--accent); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.1); background: #fff; transform: translateY(-5px);
}
#br-v9-root .br-v9-icon-box { font-size: 30px; color: var(--accent); margin-bottom: 20px; }
#br-v9-root .br-v9-svc-card h3 { font-size: 24px; margin-bottom: 15px; }
#br-v9-root .br-v9-svc-card p { font-size: 15px; margin-bottom: 25px; line-height: 1.6; }
#br-v9-root .br-v9-list li {
    font-size: 14px; margin-bottom: 8px; color: var(--text-light); padding-left: 15px; position: relative;
}
#br-v9-root .br-v9-list li::before { content: ''; width: 6px; height: 6px; background: var(--accent); position: absolute; left: 0; top: 8px; }


/* --- 5. NEW: ARCHETYPES (Psychology) --- */
#br-v9-root .br-v9-archetypes { padding: 100px 0; background: var(--text-main); color: #fff; }
#br-v9-root .br-v9-archetypes h2 { color: #fff; }
#br-v9-root .br-v9-archetypes p { color: #aaa; }
#br-v9-root .br-v9-arch-tags { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 30px; }
#br-v9-root .br-v9-arch-tags span {
    border: 1px solid rgba(255,255,255,0.3); padding: 10px 20px; border-radius: 50px; font-size: 14px;
}
/* Abstract Circle Visual */
#br-v9-root .br-v9-psych-circle {
    width: 300px; height: 300px; position: relative; margin: 0 auto;
    border-radius: 50%; border: 2px solid rgba(255,255,255,0.1);
}
#br-v9-root .slice {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 20px solid transparent;
}
#br-v9-root .s1 { border-top-color: var(--accent); transform: rotate(45deg); }
#br-v9-root .s2 { border-right-color: #fff; transform: rotate(120deg); opacity: 0.5; }
#br-v9-root .s3 { border-bottom-color: var(--accent-dark); transform: rotate(200deg); }
#br-v9-root .center-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 24px; font-weight: 700; color: #fff;
}


/* --- 6. ROADMAP --- */
#br-v9-root .br-v9-process { padding: 100px 0; background: #fff; }
#br-v9-root .br-v9-timeline-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
#br-v9-root .br-v9-time-card {
    background: #fdfdfd; border: 1px solid var(--border); padding: 30px; border-radius: 8px; position: relative;
}
#br-v9-root .br-v9-step-num {
    font-size: 40px; font-weight: 900; color: #f3f3f3; position: absolute; top: 10px; right: 20px; line-height: 1;
}
#br-v9-root .br-v9-time-card h4 { font-size: 20px; margin-bottom: 10px; position: relative; z-index: 2; }
#br-v9-root .br-v9-time-card p { font-size: 14px; position: relative; z-index: 2; margin: 0; }


/* --- 7. NEW: TOUCHPOINTS --- */
#br-v9-root .br-v9-touchpoints { padding: 100px 0; background: #fdfdfd; border-top: 1px solid var(--border); }
#br-v9-root .br-v9-tp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--border); }
#br-v9-root .br-v9-tp-col { padding: 40px; background: #fff; }
#br-v9-root .br-v9-tp-col.mid { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
#br-v9-root .br-v9-tp-col h4 { font-size: 18px; margin-bottom: 20px; text-transform: uppercase; color: var(--accent); }
#br-v9-root .br-v9-tp-col ul li { font-size: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
#br-v9-root .br-v9-tp-col i { color: var(--text-main); }


/* --- 8. TOOLKIT --- */
#br-v9-root .br-v9-toolkit { padding: 100px 0; background: #fff; border-top: 1px solid var(--border); }
#br-v9-root .br-v9-tool-visual img { box-shadow: 20px 20px 0px var(--text-main); border: 1px solid #000; }
#br-v9-root .br-v9-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
#br-v9-root .br-v9-check-item { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
#br-v9-root .br-v9-check-item i { color: var(--accent); font-weight: bold; }


/* --- 9. INDUSTRIES --- */
#br-v9-root .br-v9-industries { padding: 80px 0; background: #fdfdfd; border-top: 1px solid var(--border); }
#br-v9-root .br-v9-label-center { text-align: center; text-transform: uppercase; font-weight: 700; color: #999; margin-bottom: 40px; font-size: 14px; }
#br-v9-root .br-v9-ind-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
#br-v9-root .br-v9-ind-item {
    text-align: center; padding: 20px; background: #fff; border: 1px solid var(--border);
    border-radius: 4px; transition: 0.3s;
}
#br-v9-root .br-v9-ind-item:hover { transform: translateY(-5px); border-color: var(--accent); }
#br-v9-root .br-v9-ind-item i { font-size: 24px; color: var(--text-main); margin-bottom: 10px; display: block; }
#br-v9-root .br-v9-ind-item span { font-size: 12px; font-weight: 700; color: var(--text-light); }


/* --- 10. WORK (Dark Mode) --- */
#br-v9-root .br-v9-work { padding: 100px 0; background: var(--text-main); color: #fff; }
#br-v9-root .br-v9-project-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
#br-v9-root .br-v9-project { cursor: pointer; }
#br-v9-root .br-v9-thumb {
    height: 350px; overflow: hidden; position: relative; border: 1px solid #333; margin-bottom: 20px;
}
#br-v9-root .br-v9-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
#br-v9-root .br-v9-thumb:hover img { transform: scale(1.1); }
#br-v9-root .br-v9-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px;
    background: linear-gradient(to top, #000, transparent);
    font-weight: 700; font-size: 18px; color: #fff;
}
#br-v9-root .br-v9-meta h4 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 5px; }
#br-v9-root .br-v9-meta p { color: #999; font-size: 14px; }

/* --- BR-V9 Lightbox CSS --- */
#br-v9-root .br-v9-lightbox {
    display: none;          /* Hidden by default */
    position: fixed; 
    z-index: 9999;          /* On top of everything */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.95); /* Deep black background */
    backdrop-filter: blur(5px);
    
    /* Flexbox to center the image */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#br-v9-root .br-v9-lightbox-content {
    display: block;
    margin: auto;
    
    /* --- The Fix for "Original Form" --- */
    width: auto;
    height: auto;
    max-width: 90vw;       /* Max 90% of screen width */
    max-height: 90vh;      /* Max 90% of screen height */
    object-fit: contain;   /* Prevents stretching */
    /* ----------------------------------- */
    
    border: 1px solid #333;
    box-shadow: 0 0 30px rgba(255,255,255,0.1); /* Subtle glow */
    animation: br-zoom 0.3s;
}

#br-v9-root .br-v9-close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    transition: 0.3s;
    line-height: 1;
}

#br-v9-root .br-v9-close:hover {
    color: #999;
    transform: rotate(90deg); /* Cool rotation effect on hover */
}

@keyframes br-zoom {
    from {transform: scale(0.8); opacity: 0;} 
    to {transform: scale(1); opacity: 1;}
}
/* --- Protect Images from Dragging/Highlighting --- */
#br-v9-root img {
    -webkit-user-drag: none;  /* Safari/Chrome */
    user-drag: none;          /* Standard */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Standard */
    pointer-events: auto;     /* Ensures click events still work for the lightbox */
}


/* --- 11. FAQ --- */
#br-v9-root .br-v9-faq { padding: 100px 0; background: #fff; }
#br-v9-root .br-v9-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
#br-v9-root .br-v9-faq-item h4 { font-size: 18px; margin-bottom: 10px; }
#br-v9-root .br-v9-faq-item p { font-size: 15px; color: var(--text-light); }


/* --- 12. CTA --- */
#br-v9-root .br-v9-cta { padding: 120px 0; }
#br-v9-root .br-v9-cta-inner {
    text-align: center; background: var(--accent); color: #fff; padding: 80px; border-radius: 8px;
}
#br-v9-root .br-v9-cta h2 { font-size: 40px; margin-bottom: 40px; font-weight: 800; color: #fff; }
#br-v9-root .br-v9-btn-white {
    display: inline-block; background: #fff; color: var(--accent) !important;
    padding: 16px 40px; font-weight: 700; border-radius: 4px; transition: 0.3s;
}
#br-v9-root .br-v9-btn-white:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* RESPONSIVE */
@media(max-width: 991px) {
    #br-v9-root .br-v9-grid-hero, #br-v9-root .br-v9-grid-2 { grid-template-columns: 1fr; gap: 40px; }
    #br-v9-root .br-v9-hero-visual { display: none; }
    #br-v9-root .br-v9-service-grid, #br-v9-root .br-v9-project-row, #br-v9-root .br-v9-timeline-row, #br-v9-root .br-v9-tp-grid { grid-template-columns: 1fr; }
    #br-v9-root .br-v9-impact-grid { grid-template-columns: 1fr; }
    #br-v9-root .br-v9-ind-grid { grid-template-columns: repeat(2, 1fr); }
    #br-v9-root .br-v9-faq-grid { grid-template-columns: 1fr; }
    #br-v9-root .br-v9-cta-inner { padding: 40px 20px; }
    #br-v9-root { width: 100%; margin-left: 0; }
}

/*  branding service cards  */

/* --- V3 SERVICES MATRIX (Visual Evidence Design) --- */

#br-v9-root .br-v9-services-matrix.v3 {
    padding: 120px 0; 
    background: #f8f9fa;
}

/* Grid Layout */
#br-v9-root .br-v9-matrix-grid.v3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
    margin-top: 70px;
}

/* The Card Container */
#br-v9-root .br-v9-spec-card.v3 {
    background: #fff;
    border-radius: 16px;
    /* Removed padding here, moved to content-wrap */
    padding: 0; 
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

#br-v9-root .br-v9-spec-card.v3:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 50px rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
}

/* NEW: Image Wrapper */
#br-v9-root .spec-img-wrap {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    position: relative;
    background: #e5e7eb; /* Placeholder color while loading */
}

#br-v9-root .spec-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills space without distortion */
    display: block;
    transition: 0.5s ease;
}
/* Subtle zoom effect on hover */
#br-v9-root .br-v9-spec-card.v3:hover .spec-img-wrap img {
    transform: scale(1.05);
}

/* NEW: Content Wrapper (for padding) */
#br-v9-root .spec-content-wrap {
    padding: 35px;
    flex-grow: 1; /* Ensures cards match height if content differs */
    display: flex; flex-direction: column;
}

/* Header */
#br-v9-root .spec-header {
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 30px; position: relative; z-index: 1;
}

#br-v9-root .spec-icon-box {
    width: 50px; height: 50px; /* Slightly smaller to balance with image */
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
}

#br-v9-root .spec-header h3 {
    font-size: 22px; font-weight: 800; color: var(--text-main);
}

/* Body Grid (The internal 2-column layout) */
#br-v9-root .spec-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 25px; /* Tighter gaps */
    margin-top: auto; /* Pushes to bottom if card is tall */
}

#br-v9-root .spec-item {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: var(--text-light); line-height: 1.5;
}

#br-v9-root .text-accent { color: var(--accent); flex-shrink: 0; margin-top: 3px; font-weight: bold; font-size: 16px; }
#br-v9-root .spec-item strong { color: var(--text-main); font-weight: 700; margin-right: 4px; }

/* Utilities */
#br-v9-root .spec-item.full-span { grid-column: 1 / -1; }
#br-v9-root .br-v9-spec-card.full-width-spec { grid-column: 1 / -1; }
#br-v9-root .spec-body-grid.four-col { grid-template-columns: repeat(4, 1fr); }


/* --- RESPONSIVE TWEAKS --- */
@media(max-width: 991px) {
    #br-v9-root .br-v9-matrix-grid.v3 { grid-template-columns: 1fr; }
    #br-v9-root .spec-img-wrap { height: 180px; } /* Slightly shorter on mobile */
    #br-v9-root .spec-body-grid.four-col { grid-template-columns: 1fr 1fr; }
}

@media(max-width: 480px) {
    #br-v9-root .spec-content-wrap { padding: 25px; }
    /* Single column for internal card items on small phones */
    #br-v9-root .spec-body-grid,
    #br-v9-root .spec-body-grid.four-col { grid-template-columns: 1fr; gap: 15px; }
}

/*  branding partners sections */

/* --- V9.7 PARTNER ECOSYSTEM (The "Legit" Look) --- */

#br-v9-root .br-v9-partner-section {
    padding: 100px 0;
    background: #fdfdfd;
    border-bottom: 1px solid var(--border);
}

/* Grid */
#br-v9-root .br-v9-partner-grid {
    display: grid;
    /* 2 Columns on desktop creates a "Directory" feel */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

/* The Official Card */
#br-v9-root .partner-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px; /* Sharper corners feel more "Enterprise" */
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#br-v9-root .partner-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

/* Card Header */
#br-v9-root .partner-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    border-bottom: 1px solid #f3f4f6;
    background: #fff;
}

/* Logo Area */
#br-v9-root .p-logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

#br-v9-root .p-logo svg {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

#br-v9-root .p-name {
    display: flex;
    flex-direction: column;
}

#br-v9-root .p-name strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
}

#br-v9-root .p-name span {
    font-size: 12px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Status Pill (The "Connected" Indicator) */
#br-v9-root .p-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
}

#br-v9-root .p-status.active {
    background: #ecfdf5;
    color: #059669; /* Success Green */
    border: 1px solid #a7f3d0;
}

#br-v9-root .p-status .dot {
    width: 6px;
    height: 6px;
    background: #059669;
    border-radius: 50%;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
    100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

/* Card Body */
#br-v9-root .partner-body {
    padding: 25px;
}

#br-v9-root .p-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
}

#br-v9-root .p-row span {
    color: var(--text-light);
}

#br-v9-root .p-row strong {
    font-family: var(--mono); /* Monospace font looks like code/data */
    color: var(--text-main);
    font-weight: 600;
}

#br-v9-root .p-divider {
    height: 1px;
    background: #f3f4f6;
    margin: 20px 0;
}

#br-v9-root .p-desc {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    #br-v9-root .br-v9-partner-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
}

/*  button and badges  */

/* --- HERO BADGES & REVIEWS --- */

/* 1. Flex Container for Button + Badge */
#br-v9-root .br-v9-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* 2. Google Verified Badge */
#br-v9-root .br-v9-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    background: #fff;
    padding: 10px 18px;
    border-radius: 50px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: 0.3s;
    cursor: default;
}

#br-v9-root .br-v9-verified-badge:hover {
    border-color: #4285F4;
    background: #f8fbff;
}

#br-v9-root .ver-icon {
    width: 18px;
    height: 18px;
    color: #4285F4; /* Google Blue */
    flex-shrink: 0;
}

/* 3. Reviews Container */
#br-v9-root .br-v9-reviews {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--border);
}

/* Star Logic */
#br-v9-root .br-v9-star-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

#br-v9-root .star-icon {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

#br-v9-root .full { color: #fbbf24; }
#br-v9-root .empty-base { color: #e5e7eb; }

/* 4.9 Star Crop */
#br-v9-root .br-v9-partial-star {
    position: relative;
    width: 18px; height: 18px;
}
#br-v9-root .star-crop {
    position: absolute; top: 0; left: 0;
    height: 100%; width: 90%; 
    overflow: hidden; z-index: 2;
}
#br-v9-root .star-crop .star-icon {
    width: 18px; height: 18px; min-width: 18px;
}

/* Review Text */
#br-v9-root .br-v9-reviews p {
    font-size: 13px;
    color: var(--text-light);
    margin: 0;
    line-height: 1.4;
}
#br-v9-root .br-v9-reviews strong { color: var(--text-main); font-weight: 800; }
#br-v9-root .br-v9-reviews a { text-decoration: underline; color: var(--text-main); font-weight: 600; }

/* Google Logo */
#br-v9-root .google-icon {
    width: 20px; height: 20px;
    margin-left: auto;
    opacity: 0.9;
}

/* Responsive */
@media(max-width: 991px) {
    #br-v9-root .br-v9-actions { justify-content: center; }
    #br-v9-root .br-v9-reviews { justify-content: center; flex-wrap: wrap; text-align: center; }
    #br-v9-root .google-icon { display: none; }
}


/* proof section */

/* --- V9.9.9 VISUAL INVENTORY (ORIGINAL LOOK + NO LAG FIX) --- */

/* --- V9.9.9 VISUAL INVENTORY (STABLE PC FIX) --- */

#br-v9-root .br-v9-inventory-section {
    padding: 100px 0;
    background: #f8f9fa;
    border-bottom: 1px solid var(--border);
}

/* Header & Spacing */
#br-v9-root .mt-60 { margin-top: 60px; }

#br-v9-root .inv-cat-title {
    font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-light); margin-bottom: 25px; border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px; display: inline-block; width: 100%;
}

/* --- THE GRID --- */
#br-v9-root .inv-grid-4 {
    display: grid;
    /* Keeps the look, removes the 'content-visibility' jitter */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* --- CARD --- */
#br-v9-root .inv-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    display: flex; flex-direction: column;
    
    /* STABLE PERFORMANCE FIX: */
    /* Only animate the transform, not the shadow (shadows are heavy) */
    transition: transform 0.2s ease-out;
    transform: translateZ(0); /* Promotes to layer without eating RAM */
}

/* Simple Hover Effect */
#br-v9-root .inv-card:hover {
    transform: translateY(-4px);
    /* Static shadow is cheaper than animated shadow */
    box-shadow: 0 12px 24px rgba(0,0,0,0.06); 
    border-color: var(--accent);
}

/* --- IMAGE --- */
#br-v9-root .inv-img {
    width: 100%;
    height: 140px;
    position: relative;
    background: #eee;
    overflow: hidden; 
}

#br-v9-root .inv-img img {
    width: 100%; height: 100%; object-fit: cover;
    /* REMOVED 'will-change' -> This fixes the memory leak lag */
    transition: transform 0.4s ease-out; 
    backface-visibility: hidden;
}

/* Zoom Effect (Desktop Only) */
@media (hover: hover) {
    #br-v9-root .inv-card:hover .inv-img img {
        transform: scale(1.05);
    }
}

/* --- TEXT --- */
#br-v9-root .inv-txt {
    padding: 15px;
    display: flex; flex-direction: column; flex-grow: 1;
}
#br-v9-root .inv-txt h4 { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 5px; }
#br-v9-root .inv-txt p { font-size: 12px; color: var(--text-light); margin: 0; line-height: 1.4; }

/* Specialist Overlay */
#br-v9-root .inv-card.specialist .inv-img::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent 70%, rgba(0,0,0,0.1));
}

/* --- FOOTER --- */
#br-v9-root .inv-footer-row {
    margin-top: 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    background: #fff; padding: 30px; border-radius: 8px; border: 1px solid #e5e5e5;
}
#br-v9-root .inv-why { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px; }
#br-v9-root .why-icon {
    width: 40px; height: 40px; background: rgba(139, 92, 246, 0.1); color: var(--accent);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 18px; margin-bottom: 10px;
}
#br-v9-root .inv-why h5 { font-size: 14px; font-weight: 800; margin-bottom: 5px; color: var(--text-main); }
#br-v9-root .inv-why p { font-size: 12px; color: var(--text-light); margin: 0; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    #br-v9-root .inv-grid-4 { grid-template-columns: 1fr 1fr; gap: 15px; }
    
    /* Optimize mobile performance by removing transitions */
    #br-v9-root .inv-card { transition: none; }
    #br-v9-root .inv-img img { transition: none; }
    
    #br-v9-root .inv-footer-row {
        grid-template-columns: 1fr; margin-top: 60px; padding: 20px; text-align: left;
    }
    #br-v9-root .inv-why {
        flex-direction: row; text-align: left; gap: 15px;
        border-bottom: 1px solid #f8f9fa; padding-bottom: 15px; margin-bottom: 15px;
    }
    #br-v9-root .inv-why:last-child { border: none; margin: 0; padding: 0; }
    #br-v9-root .why-icon { margin-bottom: 0; }
}


/*  WEB DEVELOPMENT  */

/* =========================================
   1. VARIABLES & GLOBAL RESET
   ========================================= */

#wd-v6-root {
    /* --- Color Palette --- */
    --bg-main: #ffffff;
    --text-main: #0f172a;   /* Dark Slate */
    --text-light: #64748b;  /* Light Slate */
    --accent: #4f46e5;      /* Electric Indigo */
    --accent-dark: #3730a3;
    --border: #e2e8f0;
    
    /* --- Typography --- */
    --font: 'Inter', Helvetica, Arial, sans-serif;
    --mono: 'Courier New', Courier, monospace;

    /* --- Layout Isolation --- */
    width: 100vw; 
    margin-left: calc(-50vw + 50%); /* Full width breakout */
    background: var(--bg-main); 
    color: var(--text-main);
    font-family: var(--font); 
    line-height: 1.6;
    overflow-x: hidden; 
    position: relative; 
    box-sizing: border-box;
    text-align: left;
}

#wd-v6-root * { box-sizing: border-box; margin: 0; padding: 0; }
#wd-v6-root a { text-decoration: none; color: inherit; transition: 0.3s; }
#wd-v6-root ul { list-style: none; }
#wd-v6-root img { 
    width: 100%; display: block; max-width: 100%; 
    /* Security: Prevent dragging/saving */
    -webkit-user-drag: none; user-drag: none; 
    -webkit-user-select: none; user-select: none; 
    pointer-events: auto; 
}

/* --- Global Utils --- */
#wd-v6-root .wd-v6-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
#wd-v6-root .center { text-align: center; }
#wd-v6-root .center-line { margin: 0 auto 20px auto; }
#wd-v6-root .text-white { color: #fff !important; }
#wd-v6-root .mt-80 { margin-top: 80px; }

/* --- Section Headers --- */
#wd-v6-root .wd-v6-sec-head { margin-bottom: 60px; }
#wd-v6-root .wd-v6-h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--text-main); margin-bottom: 15px; }
#wd-v6-root .wd-v6-line { width: 60px; height: 4px; background: var(--accent); border-radius: 2px; display: inline-block; }


/* =========================================
   2. HERO SECTION
   ========================================= */

#wd-v6-root .wd-v6-hero {
    padding: 100px 0 80px; 
    position: relative; overflow: hidden;
    background: #f8fafc; border-bottom: 1px solid var(--border);
}

#wd-v6-root .wd-v6-bg-grid {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(#e2e8f0 1px, transparent 1px), linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
    background-size: 50px 50px; opacity: 0.5; z-index: 0; pointer-events: none;
}

#wd-v6-root .wd-v6-bento-hero {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center;
}

#wd-v6-root .hero-main { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }

#wd-v6-root .wd-v6-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #e0e7ff; color: var(--accent-dark);
    padding: 6px 14px; border-radius: 50px; 
    font-weight: 600; font-size: 13px; margin-bottom: 25px; align-self: flex-start;
}
#wd-v6-root .wd-v6-blink { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: wd-blink 1s infinite; }
@keyframes wd-blink { 50% { opacity: 0; } }

#wd-v6-root .wd-v6-h1 {
    font-size: clamp(40px, 5vw, 64px); line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 20px; font-weight: 800;
}
#wd-v6-root .wd-v6-highlight { color: var(--accent); }
#wd-v6-root .wd-v6-lead { font-size: clamp(16px, 2vw, 20px); margin-bottom: 30px; max-width: 500px; }

#wd-v6-root .wd-v6-btn-primary {
    display: inline-block; background: var(--text-main); color: #fff !important; 
    padding: 14px 30px; border-radius: 8px; font-weight: 600;
}
#wd-v6-root .wd-v6-btn-primary:hover { background: var(--accent); transform: translateY(-2px); }

/* --- HERO VISUAL: OPTIMIZED & RESPONSIVE V8 --- */

/* 1. Main Container (Floating, No Border) */
#wd-v6-root .wd-v6-box.hero-visual {
    position: relative;
    z-index: 2;
    /* Flexible height using Viewport Units for responsiveness */
    height: 500px; 
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Transparent & Clean */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: visible; 
}

/* 2. Scene Wrapper (The "Stage") */
#wd-v6-root .wd-live-scene {
    position: relative;
    width: 600px;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hardware Acceleration for smooth resizing */
    transform-origin: center center;
    will-change: transform;
}

/* 3. Background Glow (Optimized Blur) */
#wd-v6-root .scene-glow {
    position: absolute;
    width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none; /* Improves scroll performance */
}

/* --- LAPTOP STYLES --- */
#wd-v6-root .laptop-group {
    position: relative;
    width: 520px;
    z-index: 1;
    animation: device-float 6s ease-in-out infinite; 
    will-change: transform; /* Optimization */
}

#wd-v6-root .laptop-lid {
    background: #1e293b; /* Dark Frame */
    border-radius: 12px 12px 0 0;
    padding: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    position: relative;
}

#wd-v6-root .laptop-camera {
    width: 6px; height: 6px; background: #334155; border-radius: 50%;
    margin: 0 auto 8px auto;
}

#wd-v6-root .laptop-screen {
    background: #fff;
    height: 280px;
    border-radius: 4px 4px 0 0;
    overflow: hidden; 
    position: relative;
    display: flex; flex-direction: column;
}

/* Laptop Browser UI */
#wd-v6-root .browser-header {
    height: 24px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0;
    display: flex; align-items: center; padding: 0 10px; gap: 10px;
    position: relative; z-index: 2;
}
#wd-v6-root .b-dots span { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; display: inline-block; margin-right: 4px; }
#wd-v6-root .b-dots span:nth-child(1){background:#ef4444} #wd-v6-root .b-dots span:nth-child(2){background:#f59e0b}
#wd-v6-root .b-input { 
    flex: 1; height: 16px; background: #fff; border-radius: 4px; 
    font-size: 9px; color: #94a3b8; display: flex; align-items: center; padding-left: 8px; 
}

/* SCROLLING ANIMATION (Optimized) */
#wd-v6-root .laptop-scroll-content {
    padding: 15px;
    animation: live-scroll 8s ease-in-out infinite;
    will-change: transform;
}
@keyframes live-scroll {
    0%, 15% { transform: translate3d(0, 0, 0); } /* Hardware Accelerated */
    50%, 65% { transform: translate3d(0, -60px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* Mockup Content Blocks */
#wd-v6-root .mock-hero { height: 100px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-radius: 6px; margin-bottom: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
#wd-v6-root .m-h1 { width: 40%; height: 8px; background: rgba(255,255,255,0.3); border-radius: 4px; }
#wd-v6-root .m-btn { width: 20%; height: 16px; background: #fff; border-radius: 4px; }

#wd-v6-root .mock-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
#wd-v6-root .m-card { height: 70px; background: #f1f5f9; border-radius: 4px; }

#wd-v6-root .mock-row { display: flex; gap: 10px; height: 60px; }
#wd-v6-root .m-img { width: 40%; background: #e2e8f0; border-radius: 4px; }
#wd-v6-root .m-txt { flex: 1; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
#wd-v6-root .m-line { width: 100%; height: 6px; background: #f1f5f9; border-radius: 3px; }
#wd-v6-root .m-line.short { width: 60%; }

/* Laptop Base */
#wd-v6-root .laptop-base {
    height: 14px;
    background: linear-gradient(to bottom, #cbd5e1, #94a3b8);
    border-radius: 0 0 16px 16px;
    position: relative;
    width: 105%; /* Base is slightly wider than lid */
    left: -2.5%;
}
#wd-v6-root .laptop-base::after {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 80px; height: 6px; background: #64748b; border-radius: 0 0 6px 6px;
}


/* --- PHONE STYLES --- */
#wd-v6-root .phone-group {
    position: absolute;
    bottom: -15px; right: 20px;
    width: 100px; height: 190px;
    background: #0f172a;
    border-radius: 16px;
    border: 4px solid #334155;
    box-shadow: -20px 20px 60px rgba(0,0,0,0.3); /* Deeper shadow */
    z-index: 3;
    animation: phone-float-live 5s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes phone-float-live {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, -10px, 0); }
}

#wd-v6-root .phone-screen {
    background: #fff; width: 100%; height: 100%;
    border-radius: 12px; overflow: hidden;
    position: relative;
}
#wd-v6-root .phone-notch {
    position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 10px; background: #0f172a; border-radius: 0 0 6px 6px; z-index: 4;
}

/* Phone Content */
#wd-v6-root .p-header { height: 25px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; }
#wd-v6-root .p-hero { height: 50px; background: #e0e7ff; margin: 8px; border-radius: 4px; }
#wd-v6-root .p-list { padding: 0 8px; display: flex; flex-direction: column; gap: 6px; }
#wd-v6-root .p-item { height: 18px; background: #f1f5f9; border-radius: 3px; }


/* --- STAT POPUP (Floating Left) --- */
#wd-v6-root .stat-pop {
    position: absolute;
    top: 80px; 
    left: -60px; /* Pushed out */
    background: #fff;
    padding: 10px 18px;
    border-radius: 50px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border: 1px solid #f1f5f9;
    display: flex; align-items: center; gap: 10px;
    z-index: 5;
    animation: stat-bob 4s ease-in-out infinite;
    will-change: transform;
}
@keyframes stat-bob {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, 8px, 0); }
}

#wd-v6-root .stat-icon { font-size: 18px; }
#wd-v6-root .stat-txt { display: flex; flex-direction: column; line-height: 1; }
#wd-v6-root .stat-txt strong { font-size: 13px; color: #0f172a; }
#wd-v6-root .stat-txt span { font-size: 10px; color: #64748b; text-transform: uppercase; margin-top: 2px; }

/* --- GLOBAL FLOAT ANIMATION --- */
@keyframes device-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -5px, 0); }
}

/* --- RESPONSIVE OPTIMIZATION --- */

/* Tablet (Scale down slightly) */
@media (max-width: 991px) {
    #wd-v6-root .wd-live-scene {
        transform: scale(0.85); /* 85% Size */
    }
}

/* Mobile (Smart Scaling) */
@media (max-width: 768px) {
    #wd-v6-root .wd-v6-box.hero-visual {
        height: 380px; /* Reduce container height to save space */
    }
    
    #wd-v6-root .wd-live-scene {
        /* Scale down to fit standard mobile width */
        transform: scale(0.55); 
        margin-left: -20px; /* Center alignment correction */
    }

    /* Bring floating elements closer so they don't get cut off */
    #wd-v6-root .stat-pop { 
        top: 30px; 
        left: 10px; 
    }
    
    #wd-v6-root .phone-group {
        right: 10px; /* Pull phone slightly inside */
    }
}

/* Small Mobile (iPhone SE / Fold) */
@media (max-width: 380px) {
    #wd-v6-root .wd-live-scene {
        transform: scale(0.45); /* Smaller scale for tiny screens */
    }
}

/* --- FIXED MOBILE RESPONSIVE (V2 - Hard Center) --- */

@media (max-width: 768px) {
    
    /* 1. Main Container: Clear previous flex alignment issues */
    #wd-v6-root .wd-v6-box.hero-visual {
        height: 360px; /* Compact height for mobile */
        display: block; /* Remove flex to use manual centering */
        overflow: visible; /* Prevent clipping */
    }
    
    /* 2. The Scene: Force Center using Absolute Positioning + Transform */
    #wd-v6-root .wd-live-scene {
        position: absolute;
        top: 50%;
        left: 50%;
        /* Move back by 50% of width/height to center, then Scale down */
        transform: translate(-50%, -50%) scale(0.55);
        transform-origin: center center;
        width: 600px; /* Keep original width so layout inside doesn't break */
        margin: 0;
    }

    /* 3. Badge Fix: Move to top-left and scale up slightly for readability */
    #wd-v6-root .stat-pop { 
        top: -40px; 
        left: 20px; 
        transform: scale(1.2); 
        z-index: 10;
        width: max-content; /* Ensure text fits */
    }
    
    /* 4. Phone Fix: Tweak position to ensure it stays visible */
    #wd-v6-root .phone-group {
        right: 20px; 
        bottom: -20px;
    }
    
    /* 5. Laptop Base Fix */
    #wd-v6-root .laptop-base {
        width: 100%; 
        left: 0;
    }
}

/* Extra tweak for smaller phones (iPhone Mini, etc) */
@media (max-width: 380px) {
    #wd-v6-root .wd-live-scene {
        transform: translate(-50%, -50%) scale(0.45); /* Smaller scale */
    }
}


/* =========================================
   3. THE FULL STACK (Services)
   ========================================= */

#wd-v6-root .wd-v6-stack-ecosystem { padding: 100px 0; background: #f8fafc; border-bottom: 1px solid var(--border); }

/* Bento / Masonry Grid */
#wd-v6-root .wd-v6-stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px; margin-top: 60px;
}

#wd-v6-root .wd-v6-stack-card {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; flex-direction: column;
}
#wd-v6-root .wd-v6-stack-card:hover {
    transform: translateY(-5px); box-shadow: 0 20px 40px rgba(79, 70, 229, 0.1); border-color: var(--accent);
}

#wd-v6-root .wd-v6-stack-img { height: 180px; position: relative; background: #f1f5f9; }
#wd-v6-root .wd-v6-stack-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
#wd-v6-root .wd-v6-stack-badge {
    position: absolute; bottom: 15px; left: 15px;
    background: rgba(15, 23, 42, 0.9); color: #fff;
    padding: 5px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    border-radius: 4px; letter-spacing: 0.5px;
}

#wd-v6-root .wd-v6-stack-content { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; }
#wd-v6-root .wd-v6-stack-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #f1f5f9;
}
#wd-v6-root .wd-v6-stack-icon { font-size: 20px; color: var(--accent); }
#wd-v6-root .wd-v6-stack-header h3 { font-size: 18px; font-weight: 800; color: var(--text-main); margin: 0; }

#wd-v6-root .wd-v6-stack-list { list-style: none; margin: 0; padding: 0; }
#wd-v6-root .wd-v6-stack-list li {
    font-size: 14px; color: var(--text-light); margin-bottom: 12px; padding-left: 15px; position: relative;
}
#wd-v6-root .wd-v6-stack-list li::before {
    content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--accent); border-radius: 2px;
}

#wd-v6-root .wd-v6-stack-card.full-width { grid-column: 1 / -1; }
#wd-v6-root .wd-v6-stack-list.three-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px 30px; }


/* =========================================
   ECOSYSTEM SECTION - OPTIMIZED
   ========================================= */

#eco-root.eco-partners-section { 
    padding: 100px 0; 
    background: #fdfdfd; 
    border-bottom: 1px solid #e2e8f0; 
    position: relative;
    overflow: hidden; /* Prevents scrollbar flickers during anims */
}

/* CENTERED CONTAINER */
#eco-root .eco-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* HEADER STYLES */
#eco-root .eco-sec-head.center { text-align: center; max-width: 700px; margin: 0 auto 60px auto; }
#eco-root .eco-h2 { font-size: 32px; font-weight: 800; color: #1e293b; letter-spacing: -0.5px; }
#eco-root .eco-line { width: 60px; height: 3px; background: #333; margin: 20px auto; }
#eco-root .eco-sec-head p { font-size: 16px; color: #64748b; line-height: 1.6; }

/* CATEGORY LABELS */
#eco-root .eco-cat-label {
    font-size: 13px; font-weight: 800; text-transform: uppercase; color: #94a3b8; letter-spacing: 1px;
    margin-bottom: 30px; border-left: 3px solid #333; padding-left: 15px; display: inline-block; width: 100%;
}
#eco-root .mt-80 { margin-top: 80px; }

/* GRID LAYOUT */
#eco-root .eco-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
    gap: 30px;
}

/* CARD DESIGN */
#eco-root .eco-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    /* Initial state for GSAP: Hidden slightly down */
    opacity: 0; 
    transform: translateY(30px);
}

#eco-root .eco-card:hover {
    transform: translateY(-5px) !important; /* !important to override GSAP set position on hover */
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); 
    border-color: #cbd5e1;
}

#eco-root .ec-head { padding: 24px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #f8fafc; }
#eco-root .ec-logo-box {
    width: 48px; height: 48px; border-radius: 10px; background: #fff; border: 1px solid #f1f5f9;
    display: flex; align-items: center; justify-content: center; padding: 10px; flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
#eco-root .ec-info h4 { font-size: 16px; font-weight: 700; margin: 0 0 2px 0; color: #0f172a; }
#eco-root .ec-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #64748b; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; }
#eco-root .ec-status { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); margin-left: auto;}
#eco-root .ec-details { padding: 24px; }
#eco-root .ec-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; border-bottom: 1px dashed #f1f5f9; padding-bottom: 5px; }
#eco-root .ec-details p { font-size: 13px; color: #64748b; margin: 15px 0 0 0; line-height: 1.6; }

/* EXPAND WRAPPER (For Seamless Animation) */
#eco-root .eco-expand-wrapper {
    height: 0;
    overflow: hidden;
    /* No opacity transition here, GSAP handles the height */
}

/* BUTTON STYLES */
#eco-root .eco-btn-wrap { text-align: center; margin-top: 60px; margin-bottom: 60px; }
#eco-root button#eco-trigger-btn {
    background: #fff; border: 1px solid #cbd5e1; color: #475569;
    padding: 14px 35px; font-size: 14px; font-weight: 600; border-radius: 50px;
    cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
#eco-root button#eco-trigger-btn:hover {
    background: #1e293b; color: #fff; border-color: #1e293b; transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* FOOTER */
#eco-root .eco-partner-footer {
    background: #1e293b; color: #fff; padding: 50px; border-radius: 16px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px;
    /* Initial state for GSAP */
    opacity: 0; transform: translateY(20px);
}
#eco-root .pf-icon { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#eco-root .pf-item { display: flex; gap: 15px; }
#eco-root .pf-txt strong { display: block; margin-bottom: 5px; color: #fff; }
#eco-root .pf-txt p { font-size: 13px; color: #94a3b8; margin: 0; }

/* =========================================
   5. LOGOS ROW
   ========================================= */

#wd-v6-root .wd-v6-stack { padding: 40px 0; background: #fff; border-bottom: 1px solid var(--border); }
#wd-v6-root .wd-v6-stack-label {
    text-align: center; font-size: 14px; text-transform: uppercase; font-weight: 700; color: #94a3b8; margin-bottom: 30px; letter-spacing: 1px;
}
#wd-v6-root .wd-v6-logo-row { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; align-items: center; }
#wd-v6-root .wd-v6-logo {
    display: flex; align-items: center; justify-content: center; color: #cbd5e1; transition: all 0.3s ease;
}
#wd-v6-root .wd-v6-logo svg { width: 50px; height: 50px; fill: currentColor; }
#wd-v6-root .wd-v6-logo:hover { color: var(--text-main); transform: scale(1.1); }


/* =========================================
   6. MOBILE / VELOCITY SECTION (FIXED BENTO)
   ========================================= */

#wd-v6-root .wd-v6-mobile-section {
    padding: 120px 0;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}

/* The Main Grid Container */
#wd-v6-root .wd-velocity-grid {
    display: grid;
    /* Force 3 equal columns on Desktop */
    grid-template-columns: repeat(3, 1fr);
    /* Force 3 rows of roughly equal height */
    grid-template-rows: repeat(3, auto); 
    gap: 25px;
    margin-top: 60px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* --- CARD BASE --- */
#wd-v6-root .velocity-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes visual to bottom */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Default visible to prevent disappearance if JS fails */
    opacity: 1; 
    transform: none;
}

#wd-v6-root .velocity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: var(--accent);
    z-index: 2;
}

/* --- GRID POSITIONS (The Bento Lock) --- */

/* 1. Speed Card: Top Left (2x2) */
#wd-v6-root .velocity-card.speed-card {
    grid-column: 1 / 3; /* Spans col 1 to 3 */
    grid-row: 1 / 3;    /* Spans row 1 to 3 */
}

/* 2. SEO Card: Top Right */
#wd-v6-root .velocity-card.seo-card {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

/* 3. UX Card: Middle Right */
#wd-v6-root .velocity-card.ux-card {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

/* 4. Data Card: Bottom Left */
#wd-v6-root .velocity-card.data-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

/* 5. Touch Card: Bottom Middle */
#wd-v6-root .velocity-card.touch-card {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

/* 6. PWA Card: Bottom Right */
#wd-v6-root .velocity-card.pwa-card {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}


/* --- INTERNAL CARD STYLING --- */

/* Content Padding */
#wd-v6-root .v-content {
    padding: 30px;
    flex-grow: 1; /* Takes available text space */
}

/* Large Card Adjustments */
#wd-v6-root .velocity-card.large-card .v-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Visual Containers */
#wd-v6-root .v-visual-sm {
    height: 120px;
    background: #f1f5f9;
    border-top: 1px solid var(--border);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#wd-v6-root .v-visual-large {
    background: #f1f5f9;
    border-top: 1px solid var(--border); /* Horizontal line in the big card */
    height: 180px; /* Fixed height for the gauge area */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Icon Boxes */
#wd-v6-root .v-icon-box {
    width: 45px; height: 45px; background: #e0e7ff; color: var(--accent);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 20px;
}
#wd-v6-root .v-icon-box.blue { background: #e0f2fe; color: #0284c7; }
#wd-v6-root .v-icon-box.purple { background: #f3e8ff; color: #9333ea; }
#wd-v6-root .v-icon-box.green { background: #dcfce7; color: #16a34a; }
#wd-v6-root .v-icon-box.orange { background: #ffedd5; color: #ea580c; }
#wd-v6-root .v-icon-box.red { background: #fee2e2; color: #dc2626; }

/* Stats Row */
#wd-v6-root .v-stat-row {
    display: flex; gap: 40px; margin-top: 25px; 
    border-top: 1px solid #eee; padding-top: 25px;
}
#wd-v6-root .v-stat strong { display: block; font-size: 24px; font-weight: 900; color: #10b981; line-height: 1; margin-bottom: 5px; }
#wd-v6-root .v-stat span { font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; }

/* --- VISUALS CSS (Gauge, Graph, etc.) --- */
#wd-v6-root .speed-gauge { position: relative; width: 180px; height: 90px; display: flex; flex-direction: column; align-items: center; }
#wd-v6-root .gauge-body { width: 180px; height: 90px; background: #e2e8f0; border-radius: 90px 90px 0 0; position: relative; overflow: hidden; }
#wd-v6-root .gauge-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #10b981; transform-origin: bottom center; transform: rotate(-180deg); }
#wd-v6-root .gauge-cover { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 70px; background: #fff; border-radius: 70px 70px 0 0; display: flex; align-items: flex-end; justify-content: center; font-size: 42px; font-weight: 900; color: var(--text-main); padding-bottom: 5px; z-index: 2; }
#wd-v6-root .gauge-label { margin-top: 15px; font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; }

/* Graph */
#wd-v6-root .rank-graph { position: absolute; bottom: 0; left: 20px; right: 20px; height: 80px; }
#wd-v6-root .rank-line { position: absolute; bottom: 20px; left: 0; width: 0%; height: 4px; background: #3b82f6; transform: rotate(-10deg); transform-origin: left bottom; }
#wd-v6-root .rank-dot { width: 10px; height: 10px; background: #fff; border: 3px solid #3b82f6; border-radius: 50%; position: absolute; z-index: 2; opacity: 0; transform: scale(0); }
#wd-v6-root .d1 { bottom: 20px; left: 10%; } #wd-v6-root .d2 { bottom: 40px; left: 50%; } #wd-v6-root .d3 { bottom: 65px; left: 90%; }
#wd-v6-root .rank-badge { position: absolute; top: 0; right: 0; background: #3b82f6; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; opacity: 0; transform: translateY(-10px); }

/* Thumb */
#wd-v6-root .thumb-ui { width: 100%; height: 100%; position: relative; }
#wd-v6-root .thumb-zone-overlay { position: absolute; bottom: -50px; right: -50px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%); }
#wd-v6-root .thumb-btn { position: absolute; bottom: 25px; right: 30px; background: #10b981; color: #fff; padding: 8px 16px; border-radius: 30px; font-size: 11px; font-weight: 700; box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4); transform: scale(0); }

/* Compression */
#wd-v6-root .compress-ui { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
#wd-v6-root .file-block { padding: 6px 10px; background: #e2e8f0; border-radius: 6px; font-weight: 700; font-size: 11px; color: #64748b; border: 1px solid #cbd5e1; }
#wd-v6-root .file-block.compressed { background: #10b981; color: #fff; border-color: #059669; }
#wd-v6-root .compress-arrow { color: var(--accent); font-size: 12px; }

/* Gesture */
#wd-v6-root .gesture-ui { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
#wd-v6-root .gesture-track { width: 120px; height: 4px; background: #e2e8f0; border-radius: 2px; }
#wd-v6-root .gesture-hand { position: absolute; width: 35px; height: 35px; background: rgba(249, 115, 22, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ea580c; font-size: 18px; border: 1px solid #ea580c; left: 50%; transform: translateX(-50%); }

/* Wifi */
#wd-v6-root .wifi-ui { background: #fff; padding: 10px 20px; border-radius: 50px; display: flex; align-items: center; gap: 10px; border: 1px solid #e2e8f0; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
#wd-v6-root .wifi-icon { display: flex; gap: 3px; align-items: flex-end; height: 15px; }
#wd-v6-root .w-bar { width: 3px; background: #cbd5e1; border-radius: 2px; }
#wd-v6-root .w-bar.b1 { height: 6px; } #wd-v6-root .w-bar.b2 { height: 10px; } #wd-v6-root .w-bar.b3 { height: 15px; }
#wd-v6-root .status-pill { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; }


/* =========================================
   RESPONSIVE ADJUSTMENTS (CRITICAL)
   ========================================= */

/* Tablet: Switch to 2 Columns */
@media (max-width: 991px) {
    #wd-v6-root .wd-velocity-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto; /* Let rows stack naturally */
    }
    
    /* Re-order for Tablet */
    /* Speed: Left Col, Span 2 rows? No, just full top row */
    #wd-v6-root .velocity-card.speed-card { grid-column: 1 / -1; grid-row: auto; flex-direction: row; }
    
    #wd-v6-root .velocity-card.seo-card { grid-column: 1; grid-row: auto; }
    #wd-v6-root .velocity-card.ux-card { grid-column: 2; grid-row: auto; }
    
    #wd-v6-root .velocity-card.data-card { grid-column: 1; grid-row: auto; }
    #wd-v6-root .velocity-card.touch-card { grid-column: 2; grid-row: auto; }
    
    #wd-v6-root .velocity-card.pwa-card { grid-column: 1 / -1; grid-row: auto; } /* Full width bottom */
}

/* Mobile: Switch to 1 Column */
@media (max-width: 767px) {
    #wd-v6-root .wd-velocity-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Everything stacks */
    #wd-v6-root .velocity-card.speed-card,
    #wd-v6-root .velocity-card.seo-card,
    #wd-v6-root .velocity-card.ux-card,
    #wd-v6-root .velocity-card.data-card,
    #wd-v6-root .velocity-card.touch-card,
    #wd-v6-root .velocity-card.pwa-card {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    
    /* Speed card becomes vertical on mobile */
    #wd-v6-root .velocity-card.speed-card { flex-direction: column; }
    #wd-v6-root .v-visual-large { height: 160px; }
}
/* =========================================
   7. DEVICE SHOWCASE (Vector Draw)
   ========================================= */

#wd-v6-root .wd-v6-visual-demo { padding: 100px 0; background: #fff; border-bottom: 1px solid var(--border); overflow: hidden; }
#wd-v6-root .wd-device-stage {
    position: relative; max-width: 1000px; margin: 60px auto 0 auto; height: 500px;
    display: flex; justify-content: center; align-items: center;
}

/* Desktop */
#wd-v6-root .wd-mockup-desktop {
    position: relative; width: 700px; height: 400px; background: #1e293b; border-radius: 16px;
    padding: 12px 12px 0 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.15); z-index: 1;
    opacity: 0; transform: translateY(50px);
}
#wd-v6-root .desktop-screen {
    width: 100%; height: 100%; background: #fff; border-radius: 4px 4px 0 0; overflow: hidden; position: relative; display: flex; flex-direction: column;
}
#wd-v6-root .fake-ui-header {
    width: 100%; height: 24px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0;
    display: flex; align-items: center; padding: 0 10px; gap: 8px; flex-shrink: 0; z-index: 5;
}
#wd-v6-root .ui-dots span { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; display: inline-block; }
#wd-v6-root .ui-dots span:nth-child(1) { background: #ef4444; }
#wd-v6-root .ui-dots span:nth-child(2) { background: #f59e0b; }
#wd-v6-root .ui-dots span:nth-child(3) { background: #10b981; }
#wd-v6-root .ui-bar { height: 6px; background: #fff; border-radius: 4px; flex-grow: 1; margin-left: 10px; }

/* CSS Drawing (Desktop) */
#wd-v6-root .wd-css-interface-wrap { flex-grow: 1; overflow: hidden; position: relative; background: #fff; }
#wd-v6-root .wd-css-interface { width: 100%; animation: vector-scroll 10s ease-in-out infinite; will-change: transform; }
@keyframes vector-scroll {
    0%, 10% { transform: translateY(0); }
    50%, 60% { transform: translateY(-30%); }
    100% { transform: translateY(0); }
}
/* UI Elements */
#wd-v6-root .css-nav { height: 40px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
#wd-v6-root .css-logo { width: 60px; height: 10px; background: #334155; border-radius: 2px; }
#wd-v6-root .css-links span { display: inline-block; width: 30px; height: 6px; background: #cbd5e1; margin-left: 10px; border-radius: 2px; }
#wd-v6-root .css-hero { height: 180px; background: #f8fafc; display: flex; align-items: center; padding: 0 40px; gap: 20px; border-bottom: 1px solid #f1f5f9; }
#wd-v6-root .css-hero-content { flex: 1; }
#wd-v6-root .css-h1 { width: 80%; height: 18px; background: #334155; margin-bottom: 10px; border-radius: 4px; }
#wd-v6-root .css-p { width: 60%; height: 8px; background: #94a3b8; margin-bottom: 15px; border-radius: 2px; }
#wd-v6-root .css-btn { width: 80px; height: 25px; background: var(--accent); border-radius: 4px; }
#wd-v6-root .css-hero-img { width: 120px; height: 120px; background: #e2e8f0; border-radius: 8px; }
#wd-v6-root .css-section { padding: 30px 40px; }
#wd-v6-root .css-grid-row { display: flex; gap: 15px; margin-bottom: 20px; }
#wd-v6-root .css-card { flex: 1; height: 100px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; }
#wd-v6-root .css-text-block { margin-bottom: 20px; }
#wd-v6-root .css-line { height: 8px; background: #e2e8f0; margin-bottom: 8px; border-radius: 2px; }
#wd-v6-root .css-line.long { width: 100%; }
#wd-v6-root .css-line.medium { width: 80%; }
#wd-v6-root .css-line.short { width: 50%; }
#wd-v6-root .css-footer { height: 80px; background: #1e293b; margin-top: 20px; }

/* Mobile Mockup */
#wd-v6-root .wd-mockup-mobile {
    position: absolute; bottom: -20px; right: 50px; width: 140px; height: 280px; z-index: 2;
    opacity: 0; transform: translateY(50px);
}
#wd-v6-root .mobile-case {
    width: 100%; height: 100%; background: #0f172a; border-radius: 20px; padding: 8px;
    border: 2px solid #334155; box-shadow: -10px 10px 30px rgba(0,0,0,0.3);
}
#wd-v6-root .mobile-screen { width: 100%; height: 100%; background: #fff; border-radius: 14px; overflow: hidden; position: relative; }
#wd-v6-root .mobile-notch {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 12px; background: #0f172a; border-radius: 0 0 6px 6px; z-index: 3;
}
#wd-v6-root .wd-css-mobile-wrap { width: 100%; height: 100%; overflow: hidden; background: #fff; }
#wd-v6-root .wd-css-mobile-interface { width: 100%; animation: vector-scroll-mobile 8s ease-in-out infinite; will-change: transform; }
@keyframes vector-scroll-mobile {
    0%, 15% { transform: translateY(0); }
    50%, 65% { transform: translateY(-40%); }
    100% { transform: translateY(0); }
}

/* Mobile UI Elements */
#wd-v6-root .css-mobile-nav { display: flex; justify-content: space-between; padding: 20px 15px 10px; border-bottom: 1px solid #f1f5f9; }
#wd-v6-root .css-burger { width: 12px; height: 8px; border-top: 2px solid #333; border-bottom: 2px solid #333; }
#wd-v6-root .css-logo-sm { width: 30px; height: 8px; background: #333; border-radius: 2px; }
#wd-v6-root .css-mobile-hero { height: 100px; background: #f1f5f9; margin: 15px; border-radius: 6px; }
#wd-v6-root .css-mobile-content { padding: 0 15px; }
#wd-v6-root .css-m-card { height: 60px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; margin-bottom: 10px; }
#wd-v6-root .css-m-text { margin-bottom: 15px; }
#wd-v6-root .css-m-text .css-line { width: 100%; height: 6px; background: #f1f5f9; margin-bottom: 5px; }

/* Stands & Extras */
#wd-v6-root .desktop-stand { width: 120px; height: 40px; background: linear-gradient(to bottom, #94a3b8, #cbd5e1); margin: 0 auto; z-index: 0; }
#wd-v6-root .desktop-base { width: 200px; height: 10px; background: #94a3b8; border-radius: 10px 10px 0 0; margin: 0 auto; }
#wd-v6-root .screen-reflection {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 40%);
    pointer-events: none; z-index: 10;
}
#wd-v6-root .wd-float-badge {
    position: absolute; top: 20%; left: 0; background: #fff; padding: 10px 20px; border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); font-weight: 700; color: var(--accent);
    display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); z-index: 3;
    opacity: 0; transform: scale(0.8);
}


/* =========================================
   8. BENCHMARK SECTION
   ========================================= */

#wd-v6-root .wd-v6-benchmark-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff; border-bottom: 1px solid #334155;
}
#wd-v6-root .wd-v6-benchmark-section .wd-v6-h2 { color: #fff; }
#wd-v6-root .wd-v6-benchmark-section p { color: #94a3b8; }

#wd-v6-root .wd-benchmark-grid {
    display: grid; grid-template-columns: 1fr 60px 1fr; 
    align-items: center; gap: 20px; margin-top: 60px;
}

#wd-v6-root .wd-bench-card {
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px; padding: 40px; position: relative; transition: 0.3s;
}
#wd-v6-root .wd-bench-card.competitor { border-top: 4px solid #ef4444; }
#wd-v6-root .wd-bench-card.cloudditor {
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid #10b981; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transform: scale(1.05); z-index: 2;
}

#wd-v6-root .bench-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
#wd-v6-root .bench-header h4 { font-size: 18px; color: #fff; margin: 0; }
#wd-v6-root .bench-badge { font-size: 11px; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
#wd-v6-root .bench-badge.warning { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
#wd-v6-root .bench-badge.success { background: rgba(16, 185, 129, 0.2); color: #10b981; }

#wd-v6-root .bench-metric { margin-bottom: 25px; }
#wd-v6-root .metric-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
#wd-v6-root .metric-label span { color: #cbd5e1; }
#wd-v6-root .metric-label strong { color: #fff; }
#wd-v6-root .metric-bar-bg { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-bottom: 5px; }
#wd-v6-root .metric-bar { height: 100%; border-radius: 4px; animation: grow-bar 2s ease-out forwards; }
#wd-v6-root .metric-bar.red { background: #ef4444; }
#wd-v6-root .metric-bar.orange { background: #f59e0b; }
#wd-v6-root .metric-bar.green { background: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
#wd-v6-root .metric-bar.blue { background: #3b82f6; box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
#wd-v6-root .metric-note { font-size: 11px; color: #64748b; margin: 0; font-style: italic; }
@keyframes grow-bar { from { width: 0; } }

#wd-v6-root .wd-bench-vs {
    width: 50px; height: 50px; background: #0f172a; border: 2px solid #334155; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #64748b; font-weight: 800; font-size: 14px; margin: 0 auto; z-index: 3;
}
#wd-v6-root .bench-winner-badge {
    position: absolute; top: -15px; right: 20px; background: #10b981; color: #fff;
    padding: 6px 15px; border-radius: 50px; font-size: 12px; font-weight: 700;
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4); display: flex; align-items: center; gap: 6px;
}

#wd-v6-root .wd-bench-footer {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 60px; text-align: center;
}
#wd-v6-root .bf-item { background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); }
#wd-v6-root .bf-item i { font-size: 24px; color: var(--accent); display: block; margin-bottom: 10px; }
#wd-v6-root .bf-item span { color: #cbd5e1; font-size: 14px; }
#wd-v6-root .bf-item strong { color: #fff; font-size: 18px; }


/* =========================================
   9. PROCESS & MATRIX
   ========================================= */

#wd-v6-root .wd-v6-process { padding: 100px 0; background: #fff; }
#wd-v6-root .wd-v6-bento-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
#wd-v6-root .wd-v6-box {
    background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 30px; transition: 0.3s;
}
#wd-v6-root .wd-v6-box:hover, #wd-v6-root .wd-v6-active {
    border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(79, 70, 229, 0.1);
}
#wd-v6-root .wd-v6-icon-box {
    font-size: 24px; color: var(--accent); margin-bottom: 20px; background: #e0e7ff; width: 50px; height: 50px;
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
}
#wd-v6-root .wd-v6-box h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--text-main); }
#wd-v6-root .wd-v6-box p { font-size: 14px; color: var(--text-light); line-height: 1.6; }

#wd-v6-root .wd-v6-matrix { padding: 80px 0; background: #fff; }
#wd-v6-root .wd-v6-matrix-box { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
#wd-v6-root .wd-v6-matrix-title { background: var(--text-main); color: #fff !important; padding: 15px 30px; font-size: 16px; margin: 0; }
#wd-v6-root .wd-v6-table-wrap { overflow-x: auto; }
#wd-v6-root table { width: 100%; border-collapse: collapse; text-align: left; min-width: 600px; }
#wd-v6-root th, #wd-v6-root td { padding: 20px 30px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text-light); }
#wd-v6-root th { background: #f8fafc; font-weight: 700; color: var(--text-main); }
#wd-v6-root .highlight { background: #f5f3ff; color: var(--text-main); border-left: 1px solid #e0e7ff; }
#wd-v6-root strong { color: var(--accent); font-weight: 700; }


/* =========================================
   10. WORK & LIGHTBOX
   ========================================= */

#wd-v6-root .wd-v6-work { padding: 100px 0; background: var(--text-main); color: #fff; }
#wd-v6-root .wd-v6-project-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; }
#wd-v6-root .wd-v6-project { cursor: pointer; }
#wd-v6-root .wd-v6-thumb {
    height: 300px; overflow: hidden; position: relative; border: 1px solid #334155; margin-bottom: 20px; border-radius: 4px; cursor: pointer;
}
#wd-v6-root .wd-v6-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; display: block; }
#wd-v6-root .wd-v6-thumb:hover img { transform: scale(1.1); }
#wd-v6-root .wd-v6-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px;
    background: linear-gradient(to top, #0f172a, transparent); font-weight: 700; font-size: 16px; color: var(--accent);
}
#wd-v6-root .wd-v6-meta h4 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 5px; }
#wd-v6-root .wd-v6-meta p { color: #94a3b8; font-size: 14px; }

/* Lightbox */
#wd-v6-root .wd-v6-lightbox {
    display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px);
    flex-direction: column; justify-content: center; align-items: center;
}
#wd-v6-root .wd-v6-lightbox-content {
    margin: auto; display: block; width: auto; height: auto; max-width: 90vw; max-height: 90vh;
    object-fit: contain; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 0 20px rgba(0,0,0,0.5);
    animation: wd-zoom 0.3s;
}
#wd-v6-root .wd-v6-close {
    position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; z-index: 10000;
}
#wd-v6-root .wd-v6-close:hover { color: var(--accent); }
@keyframes wd-zoom { from {transform:scale(0)} to {transform:scale(1)} }


/* =========================================
   11. CTA
   ========================================= */

#wd-v6-root .wd-v6-cta { padding: 80px 0 120px; }
#wd-v6-root .wd-v6-cta-box {
    background: var(--text-main); border-radius: 20px; padding: 60px 40px; text-align: center;
    background-image: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
#wd-v6-root .wd-v6-cta-box h2 { color: #fff; font-size: clamp(24px, 4vw, 36px); margin-bottom: 15px; }
#wd-v6-root .wd-v6-cta-box p { color: #94a3b8; font-size: 18px; margin-bottom: 40px; }
#wd-v6-root .wd-v6-btn-white {
    display: inline-block; background: #fff; color: var(--accent) !important;
    padding: 16px 40px; font-weight: 700; border-radius: 4px; transition: 0.3s;
}
#wd-v6-root .wd-v6-btn-white:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }


/* =========================================
   12. RESPONSIVE / MEDIA QUERIES (Unified)
   ========================================= */

@media(max-width: 991px) {
    /* Reset Margins */
    #wd-v6-root { width: 100%; margin-left: 0; }
    
    /* Hero */
    #wd-v6-root .wd-v6-bento-hero { grid-template-columns: 1fr; gap: 40px; }
    #wd-v6-root .hero-visual { height: 300px; margin-top: 20px; }
    #wd-v6-root .wd-v6-float-score, #wd-v6-root .wd-v6-float-code { display: none; }
    
    /* Velocity Cards */
    #wd-v6-root .velocity-card.large-card { flex-direction: column; }
    #wd-v6-root .velocity-card.large-card .v-content, 
    #wd-v6-root .velocity-card.large-card .v-visual { width: 100%; }
    
    /* Device Stage (Scaling) */
    #wd-v6-root .wd-device-stage { transform: scale(0.65); transform-origin: center; margin-top: -50px; margin-bottom: -50px; height: 350px; }
    #wd-v6-root .wd-mockup-desktop { margin-bottom: -50px; left: -20px; }
    #wd-v6-root .wd-mockup-mobile { right: -10px; }
    
    /* Benchmark */
    #wd-v6-root .wd-benchmark-grid { grid-template-columns: 1fr; gap: 40px; }
    #wd-v6-root .wd-bench-vs { transform: rotate(90deg); margin: -20px auto; }
    #wd-v6-root .wd-bench-card.cloudditor { transform: none; }
    
    /* Fallback Visibility (If JS fails on mobile) */
    #wd-v6-root .wd-mockup-desktop,
    #wd-v6-root .wd-mockup-mobile,
    #wd-v6-root .wd-float-badge {
        opacity: 1 !important; transform: none !important;
    }
}

@media(max-width: 480px) {
    #wd-v6-root .wd-v6-container { padding: 0 15px; }
    #wd-v6-root .wd-device-stage { transform: scale(0.45); margin-top: -80px; margin-bottom: -80px; }
    #wd-v6-root .wd-v6-table-wrap::after { content: '← Scroll →'; display: block; text-align: center; font-size: 12px; color: #94a3b8; margin-top: 10px; }
}


/* FORCE THUMB BUTTON VISIBILITY */
#wd-v6-root .thumb-btn {
    position: absolute;
    bottom: 25px;
    right: 30px;
    background: #10b981;
    color: #fff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
    
    /* CRITICAL FIXES: */
    z-index: 10;          /* Puts it on TOP of the blur */
    transform: scale(1);  /* Makes it VISIBLE before animation starts */
}

/* =========================================
   GOOGLE REVIEW & BADGE ADDITIONS
   ========================================= */

/* 1. Action Container (Button + Badge) */
#wd-v6-root .wd-v6-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 0; /* Removing old bottom margin to sit flush with reviews */
}

/* 2. Google Verified Badge */
#wd-v6-root .wd-v6-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    background: #fff;
    padding: 10px 18px;
    border-radius: 50px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: 0.3s;
    cursor: default;
    user-select: none;
}

#wd-v6-root .wd-v6-verified-badge:hover {
    border-color: #4285F4;
    background: #f8fbff;
    transform: translateY(-1px);
}

#wd-v6-root .ver-icon {
    width: 18px;
    height: 18px;
    color: #4285F4; /* Google Blue */
    flex-shrink: 0;
}

/* 3. Reviews Container */
#wd-v6-root .wd-v6-reviews {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid var(--border);
    max-width: fit-content; /* Don't stretch full width */
}

/* Star System */
#wd-v6-root .wd-v6-star-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

#wd-v6-root .star-icon {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

#wd-v6-root .full { color: #fbbf24; } /* Amber-400 */
#wd-v6-root .empty-base { color: #e5e7eb; } /* Gray-200 */

/* 4.9 Star Crop Logic */
#wd-v6-root .wd-v6-partial-star {
    position: relative;
    width: 18px; height: 18px;
}
#wd-v6-root .star-crop {
    position: absolute; top: 0; left: 0;
    height: 100%; width: 90%; /* 90% filled */
    overflow: hidden; z-index: 2;
}
#wd-v6-root .star-crop .star-icon {
    width: 18px; height: 18px; min-width: 18px;
}

/* Review Text */
#wd-v6-root .wd-v6-reviews p {
    font-size: 13px;
    color: var(--text-light);
    margin: 0;
    line-height: 1.4;
}
#wd-v6-root .wd-v6-reviews strong { color: var(--text-main); font-weight: 800; }
#wd-v6-root .wd-v6-reviews a { text-decoration: underline; color: var(--text-main); font-weight: 600; }

/* Google Logo */
#wd-v6-root .google-icon {
    width: 20px; height: 20px;
    margin-left: 5px;
    opacity: 0.9;
}

/* Responsive Adjustments */
@media(max-width: 991px) {
    #wd-v6-root .wd-v6-actions { 
        justify-content: flex-start; /* Align left on tablet */
    }
    #wd-v6-root .wd-v6-reviews { 
        justify-content: flex-start; 
        flex-wrap: wrap; 
    }
}

@media(max-width: 480px) {
    /* Stack on small mobile */
    #wd-v6-root .wd-v6-actions { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 15px;
    }
    #wd-v6-root .wd-v6-btn-primary {
        width: 100%;
        text-align: center;
    }
    #wd-v6-root .wd-v6-verified-badge {
        width: 100%;
        justify-content: center;
    }
}





/* =========================================
   MEDIA PRODUCTION V3 - MASTER STYLESHEET
   ========================================= */

/* --- MEDIA PRODUCTION V3 ISOLATED VARIABLES --- */
#mp-v3-root {
    --bg-main: #ffffff;
    --text-main: #111111;   /* Cinema Black */
    --text-light: #666666;
    --accent: #ef4444;      /* RECORDING RED */
    --accent-dark: #b91c1c;
    --border: #e5e5e5;
    --font: 'Inter', Helvetica, Arial, sans-serif;
    --mono: 'Courier New', Courier, monospace;
}

/* --- ISOLATION RESET --- */
#mp-v3-root {
    width: 100vw; margin-left: calc(-50vw + 50%);
    background: var(--bg-main); color: var(--text-main);
    font-family: var(--font); line-height: 1.5;
    overflow-x: hidden; position: relative; box-sizing: border-box;
    text-align: left;
}
#mp-v3-root * { box-sizing: border-box; margin: 0; padding: 0; }
#mp-v3-root a { text-decoration: none; color: inherit; transition: 0.3s; }
#mp-v3-root ul { list-style: none; padding: 0; margin: 0; }
#mp-v3-root img { width: 100%; display: block; max-width: 100%; }
#mp-v3-root .text-white { color: #fff !important; }

/* Force Colors */
#mp-v3-root h1, #mp-v3-root h2, #mp-v3-root h3 { color: var(--text-main); font-weight: 800; margin: 0; }
#mp-v3-root p { color: var(--text-light); margin-bottom: 20px; }

/* --- GRID UTILS --- */
#mp-v3-root .mp-v3-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
#mp-v3-root .mp-v3-container-fluid { padding-left: 5vw; } /* New for Reel */
#mp-v3-root .mp-v3-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
#mp-v3-root .align-center { align-items: center; }


/* --- 1. HERO --- */
#mp-v3-root .mp-v3-hero {
    padding: 140px 0 80px; position: relative; overflow: hidden;
    background: #fdfdfd; border-bottom: 1px solid var(--border);
}
#mp-v3-root .mp-v3-bg-noise {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.03; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
#mp-v3-root .mp-v3-bento-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }

/* Hero Text */
#mp-v3-root .hero-main { display: flex; flex-direction: column; justify-content: center; }
#mp-v3-root .mp-v3-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fee2e2; color: var(--accent-dark);
    padding: 6px 14px; border-radius: 50px; font-weight: 600; font-size: 13px;
    margin-bottom: 25px; align-self: flex-start;
}
#mp-v3-root .mp-v3-rec-dot { width: 10px; height: 10px; background: var(--accent); border-radius: 50%; animation: rec-blink 1s infinite; }
@keyframes rec-blink { 50% { opacity: 0; } }

#mp-v3-root .mp-v3-h1 {
    font-size: clamp(42px, 5vw, 72px); line-height: 1; margin-bottom: 20px; letter-spacing: -2px;
}
#mp-v3-root .mp-v3-highlight { color: var(--accent); }
#mp-v3-root .mp-v3-lead { font-size: 18px; margin-bottom: 30px; max-width: 500px; }

/* --- HERO ACTIONS & REVIEWS (UPDATED) --- */
#mp-v3-root .mp-v3-actions { 
    display: flex; align-items: center; gap: 15px; 
    flex-wrap: wrap; margin-bottom: 25px; 
}
#mp-v3-root .mp-v3-btn-primary {
    display: inline-block; background: var(--text-main); color: #fff !important;
    padding: 14px 35px; border-radius: 8px; font-weight: 600;
}
#mp-v3-root .mp-v3-btn-primary:hover { background: var(--accent); }

/* Verified Badge */
#mp-v3-root .mp-v3-verified-badge {
    display: flex; align-items: center; gap: 6px; 
    font-size: 14px; font-weight: 700;
    color: var(--text-main); background: #fff; 
    padding: 10px 18px; border-radius: 50px;
    border: 1px solid #e5e7eb; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: 0.3s; white-space: nowrap;
}
#mp-v3-root .ver-icon { width: 18px; height: 18px; color: #1a73e8; flex-shrink: 0; }
#mp-v3-root .mp-v3-verified-badge:hover { border-color: #1a73e8; background: #f8fbff; cursor: default; }

/* Reviews Block */
#mp-v3-root .mp-v3-reviews { 
    display: flex; align-items: center; gap: 12px; 
    padding-top: 20px; border-top: 1px solid #eee; 
    width: 100%; max-width: 450px;
}
#mp-v3-root .mp-v3-star-row { display: flex; align-items: center; gap: 2px; }
#mp-v3-root .star-icon { width: 18px; height: 18px; display: block; fill: currentColor; }
#mp-v3-root .full { color: #fbbf24; }
#mp-v3-root .empty-base { color: #e5e7eb; }
#mp-v3-root .mp-v3-partial-star { position: relative; width: 18px; height: 18px; display: flex; align-items: center; }
#mp-v3-root .star-crop { 
    position: absolute; top: 0; left: 0; height: 100%; width: 90%; overflow: hidden; z-index: 2; 
}
#mp-v3-root .star-crop .star-icon { width: 18px; height: 18px; min-width: 18px; }
#mp-v3-root .mp-v3-reviews p { font-size: 13px; color: #666; margin: 0; line-height: 1.4; }
#mp-v3-root .mp-v3-reviews strong { color: var(--text-main); font-weight: 800; }
#mp-v3-root .mp-v3-reviews a { 
    text-decoration: underline; color: var(--text-main); font-weight: 600; transition: color 0.2s;
}
#mp-v3-root .mp-v3-reviews a:hover { color: var(--accent); }
#mp-v3-root .google-icon { width: 20px; height: 20px; margin-left: auto; opacity: 0.9; }

#mp-v3-root .mp-v3-specs { display: flex; gap: 20px; font-size: 14px; font-weight: 600; color: #999; }
#mp-v3-root .mp-v3-specs i { color: var(--accent); margin-right: 5px; }

/* Hero Visual (HUD) */
#mp-v3-root .hero-visual { position: relative; height: 400px; }
#mp-v3-root .mp-v3-cam-hud {
    background: #000; border-radius: 12px;
    width: 100%; height: 100%; position: relative; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
#mp-v3-root .mp-v3-hud-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }

#mp-v3-root .corner { position: absolute; width: 20px; height: 20px; border-color: rgba(255,255,255,0.7); border-style: solid; z-index: 10; }
#mp-v3-root .c-tl { top: 20px; left: 20px; border-width: 2px 0 0 2px; }
#mp-v3-root .c-tr { top: 20px; right: 20px; border-width: 2px 2px 0 0; }
#mp-v3-root .c-bl { bottom: 20px; left: 20px; border-width: 0 0 2px 2px; }
#mp-v3-root .c-br { bottom: 20px; right: 20px; border-width: 0 2px 2px 0; }

#mp-v3-root .hud-top {
    position: absolute; top: 20px; width: 100%; padding: 0 50px;
    display: flex; justify-content: space-between; color: #fff; font-family: var(--mono); font-size: 11px; z-index: 10;
}
#mp-v3-root .hud-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;
}
#mp-v3-root .focus-crosshair { width: 20px; height: 20px; position: relative; }
#mp-v3-root .focus-crosshair::before, #mp-v3-root .focus-crosshair::after { content: ''; position: absolute; background: #fff; opacity: 0.8; }
#mp-v3-root .focus-crosshair::before { width: 100%; height: 2px; top: 9px; left: 0; }
#mp-v3-root .focus-crosshair::after { width: 2px; height: 100%; left: 9px; top: 0; }

#mp-v3-root .hud-btm {
    position: absolute; bottom: 20px; width: 100%; padding: 0 40px;
    display: flex; justify-content: space-between; align-items: flex-end; z-index: 10;
}
#mp-v3-root .audio-levels { display: flex; gap: 3px; align-items: flex-end; height: 25px; }
#mp-v3-root .bar { width: 4px; background: #fff; opacity: 0.5; }
#mp-v3-root .bar.active { background: var(--accent); opacity: 1; }
#mp-v3-root .cam-settings { display: flex; gap: 15px; color: #fff; font-family: var(--mono); font-size: 11px; }


/* --- 2. TECH LOGOS --- */
#mp-v3-root .mp-v3-tech { padding: 60px 0; background: #fff; border-bottom: 1px solid var(--border); }
#mp-v3-root .mp-v3-tech-label {
    text-align: center; font-size: 14px; text-transform: uppercase; font-weight: 700; color: #999; margin-bottom: 40px; letter-spacing: 1px;
}
#mp-v3-root .mp-v3-logo-row { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; align-items: center; }
#mp-v3-root .mp-v3-logo { display: flex; align-items: center; justify-content: center; color: #ccc; transition: all 0.3s ease; }
#mp-v3-root .mp-v3-logo svg { width: 50px; height: 50px; fill: currentColor; }
#mp-v3-root .mp-v3-logo:hover { color: var(--text-main); transform: scale(1.1); }


/* --- 3. SERVICES (ORIGINAL) --- */
#mp-v3-root .mp-v3-services { padding: 100px 0; background: #fff; }
#mp-v3-root .mp-v3-sec-head { text-align: center; margin-bottom: 60px; }
#mp-v3-root .mp-v3-h2 { font-size: 36px; margin-bottom: 15px; }
#mp-v3-root .mp-v3-line { width: 60px; height: 4px; background: var(--accent); margin: 0 auto; border-radius: 2px; }

#mp-v3-root .mp-v3-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
#mp-v3-root .mp-v3-svc-card {
    background: #fdfdfd; border: 1px solid var(--border); border-radius: 12px;
    padding: 40px; transition: 0.3s;
}
#mp-v3-root .mp-v3-svc-card:hover {
    border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(239, 68, 68, 0.1); background: #fff;
}
#mp-v3-root .mp-v3-svc-icon {
    font-size: 24px; color: var(--accent); margin-bottom: 20px;
    background: #fee2e2; width: 50px; height: 50px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
#mp-v3-root .mp-v3-svc-card h3 { font-size: 20px; margin-bottom: 15px; }
#mp-v3-root .mp-v3-svc-card p { font-size: 15px; line-height: 1.6; margin-bottom: 25px; }

#mp-v3-root .mp-v3-list { margin-top: 20px; }
#mp-v3-root .mp-v3-list li {
    font-size: 14px; color: var(--text-light); margin-bottom: 10px; padding-left: 15px; position: relative;
}
#mp-v3-root .mp-v3-list li::before { content: '•'; color: var(--accent); position: absolute; left: 0; font-weight: bold; }
#mp-v3-root .mp-v3-list strong { color: var(--text-main); }


/* --- 4. INDUSTRIES (ORIGINAL) --- */
#mp-v3-root .mp-v3-industries { padding: 80px 0; background: #fdfdfd; border-top: 1px solid var(--border); }
#mp-v3-root .mp-v3-label-center { text-align: center; text-transform: uppercase; font-weight: 700; color: #999; margin-bottom: 40px; font-size: 14px; }
#mp-v3-root .mp-v3-ind-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
#mp-v3-root .mp-v3-ind-item {
    text-align: center; padding: 20px; background: #fff; border: 1px solid var(--border);
    border-radius: 8px; transition: 0.3s;
}
#mp-v3-root .mp-v3-ind-item:hover { transform: translateY(-5px); border-color: var(--accent); }
#mp-v3-root .mp-v3-ind-item i { font-size: 24px; color: var(--text-main); margin-bottom: 10px; display: block; }
#mp-v3-root .mp-v3-ind-item span { font-size: 12px; font-weight: 600; color: var(--text-light); }


/* --- 5. TIMELINE (ORIGINAL) --- */
#mp-v3-root .mp-v3-roadmap { padding: 100px 0; background: #fff; border-top: 1px solid var(--border); }
#mp-v3-root .mp-v3-sticky-info { position: sticky; top: 100px; }
#mp-v3-root .mp-v3-lead-text { font-size: 18px; margin-bottom: 30px; color: var(--text-light); }
#mp-v3-root .mp-v3-btn-outline {
    display: inline-block; border: 1px solid var(--text-main); color: var(--text-main) !important;
    padding: 12px 28px; border-radius: 6px; font-weight: 600; transition: 0.3s;
}
#mp-v3-root .mp-v3-btn-outline:hover { background: var(--text-main); color: #fff !important; }

#mp-v3-root .mp-v3-timeline-wrap { position: relative; border-left: 2px solid #e5e5e5; padding-left: 30px; }
#mp-v3-root .mp-v3-time-step { position: relative; margin-bottom: 50px; }
#mp-v3-root .mp-v3-step-num {
    position: absolute; left: -46px; top: 0; background: #fff; width: 30px; height: 30px;
    border: 2px solid var(--accent); border-radius: 50%; color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
#mp-v3-root .mp-v3-step-content h4 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
#mp-v3-root .mp-v3-step-content p { font-size: 15px; line-height: 1.6; }


/* --- 6. DIFFERENCE (ORIGINAL) --- */
#mp-v3-root .mp-v3-diff { padding: 100px 0; background: #fdfdfd; }
#mp-v3-root .mp-v3-diff-visual { position: relative; }
#mp-v3-root .mp-v3-diff-visual img { border-radius: 12px; }
#mp-v3-root .mp-v3-diff-card {
    position: absolute; bottom: 30px; left: -30px; background: #fff; padding: 20px;
    border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-left: 4px solid var(--accent);
}
#mp-v3-root .mp-v3-diff-card span { display: block; font-size: 12px; color: #999; margin-bottom: 5px; }
#mp-v3-root .mp-v3-diff-card strong { color: var(--text-main); font-size: 16px; }

#mp-v3-root .mp-v3-check-list li { margin-bottom: 15px; color: var(--text-light); display: flex; align-items: flex-start; gap: 10px; }
#mp-v3-root .mp-v3-check-list i { color: var(--accent); margin-top: 3px; }


/* --- 7. SHOWCASE (ORIGINAL) --- */
#mp-v3-root .mp-v3-work { padding: 100px 0; background: var(--text-main); color: #fff; }
#mp-v3-root .mp-v3-project-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
#mp-v3-root .mp-v3-project { cursor: pointer; }
#mp-v3-root .mp-v3-thumb {
    height: 350px; overflow: hidden; position: relative; border: 1px solid #333; margin-bottom: 20px; border-radius: 4px; background: #000;
}
#mp-v3-root .mp-v3-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; opacity: 0.7; }
#mp-v3-root .mp-v3-thumb:hover img { transform: scale(1.1); opacity: 1; }
#mp-v3-root .mp-v3-play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 60px; height: 60px; background: rgba(255,255,255,0.2); backdrop-filter: blur(5px);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; border: 1px solid #fff; transition: 0.3s; pointer-events: none;
}
#mp-v3-root .mp-v3-thumb:hover .mp-v3-play-btn { background: var(--accent); border-color: var(--accent); }
#mp-v3-root .mp-v3-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px;
    background: linear-gradient(to top, #000, transparent);
    font-weight: 700; font-size: 14px; color: #ccc; pointer-events: none;
}
#mp-v3-root .mp-v3-meta h4 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 5px; }
#mp-v3-root .mp-v3-meta p { color: #999; font-size: 14px; }

/* Thumbnail Video Support (Original) */
#mp-v3-root .mp-v3-thumb video { 
    width: 100%; height: 100%; object-fit: cover; transition: 0.5s; opacity: 0.8; 
}
#mp-v3-root .mp-v3-thumb:hover video { transform: scale(1.1); opacity: 1; }


/* --- 8. LIGHTBOX (ORIGINAL/SHARED) --- */
#mp-v3-root .mp-v3-lightbox {
    display: none; position: fixed; z-index: 9999; left: 0; top: 0; 
    width: 100%; height: 100%; overflow: hidden; 
    background-color: rgba(0,0,0,0.95); backdrop-filter: blur(5px);
    flex-direction: column; justify-content: center; align-items: center;
}
#mp-v3-root .mp-v3-lightbox-content {
    width: 80%; max-width: 1000px; height: auto; max-height: 80vh;
    border: 1px solid #444; box-shadow: 0 0 50px rgba(0,0,0,0.8);
    background: #000; outline: none; animation: mp-zoom 0.4s ease-out;
}
#mp-v3-root .mp-v3-close { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 50px; font-weight: bold; cursor: pointer; z-index: 10000; }
@keyframes mp-zoom { from {transform:scale(0.9); opacity:0} to {transform:scale(1); opacity:1} }


/* --- 9. FAQ (ORIGINAL) --- */
#mp-v3-root .mp-v3-faq { padding: 100px 0; background: #fff; }
#mp-v3-root .mp-v3-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
#mp-v3-root .mp-v3-faq-item h4 { font-size: 18px; margin-bottom: 10px; color: var(--text-main); }
#mp-v3-root .mp-v3-faq-item p { font-size: 15px; color: var(--text-light); }


/* --- 10. CTA (ORIGINAL) --- */
#mp-v3-root .mp-v3-cta { padding: 80px 0 120px; }
#mp-v3-root .mp-v3-cta-box {
    background: var(--text-main); border-radius: 20px; padding: 80px; text-align: center;
}
#mp-v3-root .mp-v3-cta-box h2 { color: #fff; font-size: 36px; margin-bottom: 15px; }
#mp-v3-root .mp-v3-cta-box p { color: #999; font-size: 18px; margin-bottom: 40px; }
#mp-v3-root .mp-v3-btn-white {
    display: inline-block; background: #fff; color: var(--accent) !important;
    padding: 16px 40px; font-weight: 700; border-radius: 4px; transition: 0.3s;
}
#mp-v3-root .mp-v3-btn-white:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(239, 68, 68, 0.3); }


/* --- 11. RESPONSIVE (ORIGINAL BASE) --- */
@media(max-width: 991px) {
    #mp-v3-root .mp-v3-bento-hero { grid-template-columns: 1fr; }
    #mp-v3-root .hero-visual { height: 300px; margin-top: 40px; }
    #mp-v3-root .mp-v3-service-grid, #mp-v3-root .mp-v3-project-row { grid-template-columns: 1fr; gap: 40px; }
    #mp-v3-root .mp-v3-ind-grid { grid-template-columns: repeat(2, 1fr); }
    #mp-v3-root .mp-v3-grid-2, #mp-v3-root .mp-v3-faq-grid { grid-template-columns: 1fr; }
    #mp-v3-root .mp-v3-logo-row { gap: 30px; }
    #mp-v3-root .mp-v3-logo svg { width: 40px; height: 40px; }
    #mp-v3-root .mp-v3-diff-card { position: relative; bottom: auto; left: auto; margin-top: 20px; }
    #mp-v3-root { width: 100%; margin-left: 0; }
}
@media (max-width: 1024px) {
    #mp-v3-root .mp-v3-project-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    #mp-v3-root .mp-v3-thumb { height: 300px; }
}
@media (max-width: 768px) {
    #mp-v3-root .mp-v3-project-row { grid-template-columns: 1fr; gap: 40px; }
    #mp-v3-root .mp-v3-thumb { height: 250px; }
    #mp-v3-root .mp-v3-lightbox-content { width: 95%; border: none; }
    #mp-v3-root .mp-v3-close { top: 15px; right: 20px; font-size: 40px; }
    #mp-v3-root .mp-v3-actions { flex-direction: column; align-items: flex-start; }
    #mp-v3-root .mp-v3-verified-badge { width: 100%; justify-content: center; }
    #mp-v3-root .mp-v3-btn-primary { width: 100%; text-align: center; }
}


/* =========================================
   12. NEW SECTIONS (APPENDED)
   ========================================= */

/* --- PREMIUM GRID (SERVICES) --- */
#mp-v3-root .mp-v3-premium-grid { background-color: #fdfdfd; padding: 120px 0; }
#mp-v3-root .mp-v3-premium-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; margin-top: 60px; }
#mp-v3-root .mp-v3-prem-card { position: relative; background: #fff; display: flex; flex-direction: column; }
#mp-v3-root .mp-v3-prem-visual { height: 300px; position: relative; overflow: hidden; border-radius: 4px; margin-bottom: 30px; }
#mp-v3-root .mp-v3-prem-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
#mp-v3-root .mp-v3-prem-card:hover .mp-v3-prem-visual img { transform: scale(1.08); }
#mp-v3-root .mp-v3-prem-tag {
    position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.9); backdrop-filter: blur(5px);
    color: var(--text-main); padding: 6px 14px; border-radius: 50px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; font-family: var(--mono); box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 10;
}
#mp-v3-root .mp-v3-prem-tag i { color: var(--accent); margin-right: 5px; }
#mp-v3-root .mp-corner { position: absolute; width: 15px; height: 15px; border-color: rgba(255,255,255,0.6); border-style: solid; z-index: 10; transition: 0.3s; }
#mp-v3-root .mp-v3-prem-card:hover .mp-corner { border-color: var(--accent); }
#mp-v3-root .mp-v3-prem-body { position: relative; padding-left: 20px; }
#mp-v3-root .mp-v3-bg-num { position: absolute; top: -40px; left: 0; font-size: 100px; font-weight: 900; color: #f3f3f3; line-height: 1; z-index: 0; font-family: var(--font); pointer-events: none; }
#mp-v3-root .mp-v3-prem-title { font-size: 28px; font-weight: 800; color: var(--text-main); margin-bottom: 25px; position: relative; z-index: 1; }
#mp-v3-root .mp-v3-prem-list { position: relative; z-index: 1; border-left: 1px solid #eee; padding-left: 30px; }
#mp-v3-root .mp-v3-prem-list li { font-size: 15px; color: var(--text-light); margin-bottom: 12px; line-height: 1.6; }
#mp-v3-root .mp-v3-prem-list strong { color: var(--text-main); font-weight: 700; margin-right: 5px; }

@media (max-width: 991px) {
    #mp-v3-root .mp-v3-premium-wrapper { grid-template-columns: 1fr; gap: 80px; }
    #mp-v3-root .mp-v3-prem-visual { height: 250px; }
}


/* --- REQUEST TRANSLATOR --- */
#mp-v3-root .mp-v3-translator { padding: 100px 0; background: #f4f4f4; }
#mp-v3-root .mp-v3-req-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
#mp-v3-root .mp-v3-req-card {
    background: #fff; border-radius: 12px; padding: 0; overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); border: 1px solid #e5e5e5;
    transition: transform 0.3s ease; display: flex; flex-direction: column;
}
#mp-v3-root .mp-v3-req-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: var(--accent); }
#mp-v3-root .mp-v3-client-ask { background: #fff; padding: 25px 25px 15px 25px; position: relative; }
#mp-v3-root .mp-v3-client-ask i { font-size: 24px; color: #e0e0e0; position: absolute; top: 20px; left: 20px; z-index: 0; }
#mp-v3-root .mp-v3-client-ask p { font-family: Georgia, serif; font-style: italic; font-size: 16px; color: #555; position: relative; z-index: 1; margin: 0; line-height: 1.5; padding-left: 15px; }
#mp-v3-root .mp-v3-arrow-down { text-align: center; margin-top: -10px; margin-bottom: -10px; position: relative; z-index: 2; color: var(--accent); opacity: 0.3; }
#mp-v3-root .mp-v3-studio-ans { background: #fafafa; padding: 20px 25px 25px 25px; border-top: 1px dashed #eee; margin-top: auto; }
#mp-v3-root .mp-v3-studio-ans span { font-size: 10px; text-transform: uppercase; color: #999; letter-spacing: 1px; font-weight: 700; display: block; margin-bottom: 5px; }
#mp-v3-root .mp-v3-studio-ans h4 { font-size: 18px; color: var(--text-main); font-weight: 800; margin-bottom: 5px; }
#mp-v3-root .mp-v3-studio-ans .mp-tiny { font-size: 12px; color: var(--accent); font-family: var(--mono); margin: 0; }

@media (max-width: 1024px) { #mp-v3-root .mp-v3-req-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { #mp-v3-root .mp-v3-req-grid { grid-template-columns: 1fr; } }


/* --- CINEMA REEL PORTFOLIO --- */
#mp-v3-root .mp-v3-cinema-reel { background-color: #050505; padding: 100px 0; color: #fff; overflow: hidden; position: relative; }
#mp-v3-root .mp-v3-container-fluid { padding-left: 5vw; }
#mp-v3-root .mp-v3-reel-header { display: flex; justify-content: space-between; align-items: flex-end; padding-right: 5vw; margin-bottom: 50px; position: relative; z-index: 10; }
#mp-v3-root .mp-v3-nav-controls { display: flex; gap: 15px; position: relative; z-index: 200; pointer-events: auto !important; }
#mp-v3-root .mp-nav-circle {
    width: 50px; height: 50px; border-radius: 50%; border: 1px solid #444; background: #000; color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; outline: none; z-index: 201; transition: all 0.3s;
}
#mp-v3-root .mp-nav-circle:hover { background: #fff; color: #000; border-color: #fff; }
#mp-v3-root .mp-v3-reel-track {
    display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-bottom: 40px; position: relative; z-index: 5; -ms-overflow-style: none; scrollbar-width: none;
}
#mp-v3-root .mp-v3-reel-track::-webkit-scrollbar { display: none; }
#mp-v3-root .mp-v3-reel-card { flex: 0 0 auto; width: 650px; max-width: 85vw; scroll-snap-align: start; display: flex; flex-direction: column; }
#mp-v3-root .mp-v3-reel-video {
    height: 380px; width: 100%; position: relative; border-radius: 8px; overflow: hidden; background: #111; margin-bottom: 25px; border: 1px solid #222;
}
#mp-v3-root .mp-v3-reel-video video { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.5s; }
#mp-v3-root .mp-v3-reel-card:hover .mp-v3-reel-video video { opacity: 1; }
#mp-v3-root .mp-v3-reel-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 60%, #050505); pointer-events: none; }
#mp-v3-root .mp-reel-num { position: absolute; top: 20px; left: 20px; font-size: 14px; font-family: var(--mono); color: #fff; background: rgba(0,0,0,0.6); padding: 5px 10px; border-radius: 4px; }
#mp-v3-root .mp-v3-reel-info { padding: 0 10px; }
#mp-v3-root .mp-info-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #222; padding-bottom: 15px; }
#mp-v3-root .mp-info-head h3 { font-size: 26px; margin: 0; color: #fff; }
#mp-v3-root .mp-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; background: #222; padding: 6px 12px; border-radius: 4px; color: #ccc; }
#mp-v3-root .mp-info-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; }
#mp-v3-root .mp-strategy { font-size: 15px; color: #999; line-height: 1.6; margin: 0; }
#mp-v3-root .mp-strategy strong { color: #fff; display: block; margin-bottom: 5px; }
#mp-v3-root .mp-deliverables span { display: block; font-size: 12px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; font-weight: 700; }
#mp-v3-root .mp-deliverables ul { list-style: none; padding: 0; }
#mp-v3-root .mp-deliverables li { font-size: 13px; color: #ccc; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
#mp-v3-root .mp-deliverables i { color: var(--accent); font-size: 11px; }

@media (max-width: 1024px) { #mp-v3-root .mp-v3-reel-card { width: 70vw; } }
@media (max-width: 768px) {
    #mp-v3-root .mp-v3-container-fluid { padding-left: 20px; }
    #mp-v3-root .mp-v3-reel-header { padding-right: 20px; flex-direction: column; align-items: flex-start; gap: 20px; }
    #mp-v3-root .mp-v3-nav-controls { display: none; }
    #mp-v3-root .mp-v3-reel-card { width: 85vw; margin-right: 10px; }
    #mp-v3-root .mp-v3-reel-video { height: 220px; }
    #mp-v3-root .mp-info-body { grid-template-columns: 1fr; gap: 15px; }
    #mp-v3-root .mp-info-head h3 { font-size: 20px; }
}

/* --- SECURITY FIX FOR CINEMA REEL --- */
#mp-v3-root .mp-v3-reel-overlay {
    /* 1. Ensure it sits on top */
    z-index: 2; 
    
    /* 2. BLOCK INTERACTION (The Fix) */
    pointer-events: auto !important; 
    
    /* 3. Keep the gradient look */
    background: linear-gradient(to bottom, transparent 60%, #050505);
}

/* Optional: Disable selection on the whole card */
#mp-v3-root .mp-v3-reel-card {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/* GRAPHICS DESIGN */

/* --- GRAPHIC DESIGN V3 ISOLATED VARIABLES --- */
#gd-v3-root {
    --bg-main: #ffffff;
    --text-main: #18181b;   /* Zinc 900 */
    --text-light: #71717a;  /* Zinc 500 */
    --accent: #d946ef;      /* FUCHSIA / HOT PINK */
    --accent-dark: #c026d3;
    --border: #e4e4e7;
    --font: 'Inter', Helvetica, Arial, sans-serif;
    --mono: 'Courier New', Courier, monospace;
}

/* --- ISOLATION RESET --- */
#gd-v3-root {
    width: 100vw; margin-left: calc(-50vw + 50%);
    background: var(--bg-main); color: var(--text-main);
    font-family: var(--font); line-height: 1.5;
    overflow-x: hidden; position: relative; box-sizing: border-box;
    text-align: left;
}
#gd-v3-root * { box-sizing: border-box; margin: 0; padding: 0; }
#gd-v3-root a { text-decoration: none; color: inherit; transition: 0.3s; }
#gd-v3-root ul { list-style: none; padding: 0; margin: 0; }
#gd-v3-root img { width: 100%; display: block; max-width: 100%; }
#gd-v3-root .text-white { color: #fff !important; }

/* Force Colors */
#gd-v3-root h1, #gd-v3-root h2, #gd-v3-root h3, #gd-v3-root h4 { color: var(--text-main); font-weight: 800; margin: 0; }
#gd-v3-root p { color: var(--text-light); margin-bottom: 20px; }

/* --- GRID UTILS --- */
#gd-v3-root .gd-v3-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
#gd-v3-root .gd-v3-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
#gd-v3-root .align-center { align-items: center; }


/* --- 1. HERO --- */
#gd-v3-root .gd-v3-hero {
    padding: 140px 0 80px; position: relative; overflow: hidden;
    background: #fafafa; border-bottom: 1px solid var(--border);
}
#gd-v3-root .gd-v3-bg-grid {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(#d4d4d8 1px, transparent 1px);
    background-size: 30px 30px; opacity: 0.5; z-index: 0; pointer-events: none;
}
#gd-v3-root .gd-v3-bento-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }

/* Hero Text */
#gd-v3-root .hero-main { display: flex; flex-direction: column; justify-content: center; }
#gd-v3-root .gd-v3-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fae8ff; color: var(--accent-dark);
    padding: 6px 14px; border-radius: 50px; font-weight: 600; font-size: 13px;
    margin-bottom: 25px; align-self: flex-start;
}
#gd-v3-root .gd-v3-blink { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: gd-blink 1s infinite; }
@keyframes gd-blink { 50% { opacity: 0; } }

#gd-v3-root .gd-v3-h1 {
    font-size: clamp(42px, 5vw, 72px); line-height: 1.1; margin-bottom: 20px; letter-spacing: -1px;
}
#gd-v3-root .gd-v3-highlight { color: var(--accent); }
#gd-v3-root .gd-v3-lead { font-size: 18px; margin-bottom: 30px; max-width: 500px; }
#gd-v3-root .gd-v3-btn-primary {
    display: inline-block; background: var(--text-main); color: #fff !important;
    padding: 14px 30px; border-radius: 8px; font-weight: 600;
}
#gd-v3-root .gd-v3-btn-primary:hover { background: var(--accent); }

/* Hero Visual (Layers) */
#gd-v3-root .hero-visual { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; }
#gd-v3-root .gd-v3-layer-stack { position: relative; width: 320px; height: 380px; }
#gd-v3-root .gd-v3-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 16px; border: 1px solid var(--border);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); background: #fff; transition: 0.5s;
}
#gd-v3-root .layer-3 { background: #fdf4ff; top: 20px; left: 20px; z-index: 1; }
#gd-v3-root .layer-2 { background: #fff; top: 10px; left: 10px; z-index: 2; display: flex; align-items: flex-end; padding: 20px; }
#gd-v3-root .layer-1 { z-index: 3; display: flex; flex-direction: column; overflow: hidden; }

#gd-v3-root .gd-v3-ui-top {
    height: 30px; background: #f4f4f5; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 6px; padding: 0 12px;
}
#gd-v3-root .ui-dot { width: 8px; height: 8px; background: #d4d4d8; border-radius: 50%; }
#gd-v3-root .ui-txt { margin-left: auto; font-size: 10px; color: #a1a1aa; }
#gd-v3-root .gd-v3-ui-body { flex: 1; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
#gd-v3-root .gd-v3-vector-path { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--accent); }
#gd-v3-root .gd-v3-vector-path svg { width: 100%; height: auto; max-width: 150px; }
#gd-v3-root .gd-v3-ui-meta { display: flex; gap: 10px; }
#gd-v3-root .meta-tag { font-size: 11px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-light); }
#gd-v3-root .meta-tag.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#gd-v3-root .gd-v3-swatch-row { 
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 12px; color: var(--text-main);
}
#gd-v3-root .color-dot { width: 20px; height: 20px; background: var(--accent); border-radius: 4px; }


/* --- 2. TOOLS --- */
#gd-v3-root .gd-v3-tools { padding: 60px 0; background: #fff; border-bottom: 1px solid var(--border); }
#gd-v3-root .gd-v3-tool-label { text-align: center; font-size: 14px; text-transform: uppercase; font-weight: 700; color: #94a3b8; margin-bottom: 40px; letter-spacing: 1px; }
#gd-v3-root .gd-v3-logo-row { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; align-items: center; }
#gd-v3-root .gd-v3-logo { display: flex; align-items: center; justify-content: center; color: #d4d4d8; transition: all 0.3s ease; }
#gd-v3-root .gd-v3-logo svg { width: 50px; height: 50px; fill: currentColor; }
#gd-v3-root .gd-v3-logo:hover { color: var(--text-main); transform: scale(1.1); }


/* --- 3. NEW: ROI STATS --- */
#gd-v3-root .gd-v3-roi { padding: 80px 0; background: var(--text-main); color: #fff; }
#gd-v3-root .gd-v3-roi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
#gd-v3-root .gd-v3-stat { font-size: 50px; font-weight: 900; color: var(--accent); display: block; margin-bottom: 10px; }
#gd-v3-root .gd-v3-roi p { color: #a1a1aa; font-size: 16px; margin: 0; }


/* --- 4. SERVICES --- */
#gd-v3-root .gd-v3-process { padding: 100px 0; background: #fff; }
#gd-v3-root .gd-v3-sec-head { text-align: center; margin-bottom: 60px; }
#gd-v3-root .gd-v3-h2 { font-size: 36px; margin-bottom: 15px; }
#gd-v3-root .gd-v3-line { width: 60px; height: 4px; background: var(--accent); margin: 0 auto; border-radius: 2px; }

#gd-v3-root .gd-v3-bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
#gd-v3-root .gd-v3-box {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 30px; transition: 0.3s;
}
#gd-v3-root .gd-v3-box:hover, #gd-v3-root .gd-v3-active {
    border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(217, 70, 239, 0.1);
}
#gd-v3-root .gd-v3-icon-box {
    font-size: 24px; color: var(--accent); margin-bottom: 20px;
    background: #fae8ff; width: 50px; height: 50px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
#gd-v3-root .gd-v3-box h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
#gd-v3-root .gd-v3-box p { font-size: 14px; line-height: 1.6; }
#gd-v3-root .gd-v3-list li { font-size: 13px; color: var(--text-light); margin-bottom: 5px; }


/* --- 5. NEW: ENGAGEMENT MODELS --- */
#gd-v3-root .gd-v3-models { padding: 100px 0; background: #fdf4ff; }
#gd-v3-root .gd-v3-model-card {
    background: #fff; padding: 50px; border-radius: 16px; border: 1px solid var(--border);
    position: relative; transition: 0.3s;
}
#gd-v3-root .gd-v3-model-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
#gd-v3-root .gd-v3-model-card.active { border: 2px solid var(--accent); box-shadow: 0 20px 50px rgba(217, 70, 239, 0.15); }
#gd-v3-root .pop-tag {
    position: absolute; top: -15px; right: 30px; background: var(--accent); color: #fff;
    padding: 8px 16px; border-radius: 50px; font-size: 12px; font-weight: 700; text-transform: uppercase;
}
#gd-v3-root .gd-v3-model-card h3 { font-size: 28px; margin-bottom: 10px; }
#gd-v3-root .model-desc { margin-bottom: 30px; font-size: 16px; }
#gd-v3-root .gd-v3-list-simple li { font-size: 16px; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
#gd-v3-root .gd-v3-list-simple i { color: var(--accent); }
#gd-v3-root .gd-v3-btn-primary.full { width: 100%; text-align: center; }


/* --- 6. TIMELINE --- */
#gd-v3-root .gd-v3-roadmap { padding: 100px 0; background: #fff; border-top: 1px solid var(--border); }
#gd-v3-root .gd-v3-sticky-info { position: sticky; top: 100px; }
#gd-v3-root .gd-v3-lead-text { font-size: 18px; margin-bottom: 30px; color: var(--text-light); }
#gd-v3-root .gd-v3-btn-outline {
    display: inline-block; border: 1px solid var(--text-main); color: var(--text-main) !important;
    padding: 12px 28px; border-radius: 4px; font-weight: 700; transition: 0.3s;
}
#gd-v3-root .gd-v3-btn-outline:hover { background: var(--text-main); color: #fff !important; }

#gd-v3-root .gd-v3-timeline-wrap { position: relative; border-left: 2px solid #e5e5e5; padding-left: 40px; }
#gd-v3-root .gd-v3-time-step { position: relative; margin-bottom: 60px; }
#gd-v3-root .gd-v3-step-num {
    position: absolute; left: -56px; top: 0; background: #fff; width: 30px; height: 30px;
    border: 2px solid var(--accent); border-radius: 50%; color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
#gd-v3-root .gd-v3-step-content h4 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
#gd-v3-root .gd-v3-step-content p { font-size: 15px; line-height: 1.6; }


/* --- 7. NEW: TECH SPECS --- */
#gd-v3-root .gd-v3-tech-specs { padding: 80px 0; background: #fafafa; }
#gd-v3-root .gd-v3-spec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
#gd-v3-root .gd-v3-spec-box {
    background: #fff; padding: 40px; border-radius: 12px; border: 1px solid var(--border); text-align: center;
}
#gd-v3-root .gd-v3-spec-box i { font-size: 40px; color: var(--accent); margin-bottom: 20px; display: block; }
#gd-v3-root .gd-v3-spec-box h4 { margin-bottom: 15px; font-size: 20px; }
#gd-v3-root .gd-v3-spec-box p { line-height: 1.8; color: var(--text-light); }


/* --- 8. DELIVERABLES --- */
#gd-v3-root .gd-v3-toolkit { padding: 100px 0; background: #fff; border-top: 1px solid var(--border); }
#gd-v3-root .gd-v3-tool-visual img { box-shadow: 20px 20px 0px var(--text-main); border: 1px solid #000; }
#gd-v3-root .gd-v3-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
#gd-v3-root .gd-v3-check-item { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
#gd-v3-root .gd-v3-check-item i { color: var(--accent); font-weight: bold; }


/* --- 9. INDUSTRIES --- */
#gd-v3-root .gd-v3-industries { padding: 80px 0; background: #fdfdfd; border-top: 1px solid var(--border); }
#gd-v3-root .gd-v3-label-center { text-align: center; text-transform: uppercase; font-weight: 700; color: #999; margin-bottom: 40px; font-size: 14px; }
#gd-v3-root .gd-v3-ind-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
#gd-v3-root .gd-v3-ind-item {
    text-align: center; padding: 20px; background: #fff; border: 1px solid var(--border);
    border-radius: 4px; transition: 0.3s;
}
#gd-v3-root .gd-v3-ind-item:hover { transform: translateY(-5px); border-color: var(--accent); }
#gd-v3-root .gd-v3-ind-item i { font-size: 24px; color: var(--text-main); margin-bottom: 10px; display: block; }
#gd-v3-root .gd-v3-ind-item span { font-size: 12px; font-weight: 700; color: var(--text-light); }


/* --- 10. PORTFOLIO --- */
#gd-v3-root .gd-v3-work { padding: 100px 0; background: var(--text-main); color: #fff; }
#gd-v3-root .gd-v3-project-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
#gd-v3-root .gd-v3-project { cursor: pointer; }
#gd-v3-root .gd-v3-thumb {
    height: 350px; overflow: hidden; position: relative; border: 1px solid #333; margin-bottom: 20px; border-radius: 4px;
}
#gd-v3-root .gd-v3-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
#gd-v3-root .gd-v3-thumb:hover img { transform: scale(1.1); }
#gd-v3-root .gd-v3-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px;
    background: linear-gradient(to top, #000, transparent);
    font-weight: 700; font-size: 16px; color: var(--accent);
}
#gd-v3-root .gd-v3-meta h4 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 5px; }
#gd-v3-root .gd-v3-meta p { color: #a1a1aa; font-size: 14px; }

/* --- GD-V3 SECTION STYLES --- */
#gd-v3-root .gd-v3-work { padding: 100px 0; background: var(--text-main); color: #fff; }
#gd-v3-root .gd-v3-project-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
#gd-v3-root .gd-v3-project { cursor: pointer; }

/* Thumbs */
#gd-v3-root .gd-v3-thumb {
    height: 350px; overflow: hidden; position: relative; border: 1px solid #333; margin-bottom: 20px; border-radius: 4px;
}
#gd-v3-root .gd-v3-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; display: block; }
#gd-v3-root .gd-v3-thumb:hover img { transform: scale(1.1); }

/* Overlay */
#gd-v3-root .gd-v3-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px;
    background: linear-gradient(to top, #000, transparent);
    font-weight: 700; font-size: 16px; color: var(--accent);
}
#gd-v3-root .gd-v3-meta h4 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 5px; }
#gd-v3-root .gd-v3-meta p { color: #a1a1aa; font-size: 14px; }


/* --- GD-V3 LIGHTBOX (Full Screen) --- */
#gd-v3-root .gd-v3-lightbox {
    display: none;          /* Hidden by default */
    position: fixed; 
    z-index: 9999;          /* Top layer */
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.9); 
    backdrop-filter: blur(5px);
    flex-direction: column; justify-content: center; align-items: center;
}

#gd-v3-root .gd-v3-lightbox-content {
    margin: auto; display: block;
    
    /* --- ORIGINAL FORM FIX --- */
    width: auto; 
    height: auto; 
    max-width: 90vw; 
    max-height: 90vh; 
    object-fit: contain; /* Prevents stretching */
    /* ------------------------ */
    
    border: 2px solid #fff; border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    animation: gd-zoom 0.3s;
}

#gd-v3-root .gd-v3-close {
    position: absolute; top: 20px; right: 35px;
    color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000;
}
#gd-v3-root .gd-v3-close:hover { color: var(--accent, #bbb); }

@keyframes gd-zoom { from {transform:scale(0)} to {transform:scale(1)} }

/* --- PROTECTION: Disable Dragging/Selection --- */
#gd-v3-root img {
    -webkit-user-drag: none; user-drag: none;
    -webkit-user-select: none; user-select: none;
    pointer-events: auto;
}


/* --- 11. FAQ --- */
#gd-v3-root .gd-v3-faq { padding: 100px 0; background: #fff; }
#gd-v3-root .gd-v3-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
#gd-v3-root .gd-v3-faq-item h4 { font-size: 18px; margin-bottom: 10px; color: var(--text-main); }
#gd-v3-root .gd-v3-faq-item p { font-size: 15px; color: var(--text-light); }


/* --- 12. CTA --- */
#gd-v3-root .gd-v3-cta { padding: 80px 0 120px; }
#gd-v3-root .gd-v3-cta-box {
    background: var(--text-main); border-radius: 20px; padding: 80px; text-align: center;
    background-image: linear-gradient(135deg, #18181b 0%, #27272a 100%);
}
#gd-v3-root .gd-v3-cta-box h2 { color: #fff; font-size: 36px; margin-bottom: 15px; }
#gd-v3-root .gd-v3-cta-box p { color: #a1a1aa; font-size: 18px; margin-bottom: 40px; }
#gd-v3-root .gd-v3-btn-white {
    display: inline-block; background: #fff; color: var(--accent) !important;
    padding: 16px 40px; font-weight: 700; border-radius: 4px; transition: 0.3s;
}
#gd-v3-root .gd-v3-btn-white:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(217, 70, 239, 0.3); }

/* RESPONSIVE */
@media(max-width: 991px) {
    #gd-v3-root .gd-v3-bento-hero { grid-template-columns: 1fr; }
    #gd-v3-root .hero-visual { height: 350px; margin-top: 40px; }
    #gd-v3-root .gd-v3-bento-grid, #gd-v3-root .gd-v3-project-row { grid-template-columns: 1fr; gap: 40px; }
    #gd-v3-root .gd-v3-logo-row { gap: 30px; }
    #gd-v3-root .gd-v3-logo svg { width: 40px; height: 40px; }
    #gd-v3-root .gd-v3-ind-grid { grid-template-columns: repeat(3, 1fr); }
    #gd-v3-root .gd-v3-grid-2, #gd-v3-root .gd-v3-faq-grid, #gd-v3-root .gd-v3-roi-grid, #gd-v3-root .gd-v3-spec-row { grid-template-columns: 1fr; }
    #gd-v3-root { width: 100%; margin-left: 0; }
}

/*     Business Consultant page    */

/* --- BUSINESS CONSULTING V1 ISOLATED VARIABLES --- */
#bc-v1-root {
    --bg-main: #ffffff;
    --bg-off: #fdfdfd;
    --text-main: #1e293b;   /* Slate 800 */
    --text-light: #64748b;  /* Slate 500 */
    --accent: #f59e0b;      /* ROYAL AMBER / GOLD */
    --accent-dark: #d97706;
    --border: #e2e8f0;
    --font: 'Inter', Helvetica, Arial, sans-serif;
    --mono: 'Courier New', Courier, monospace;
}

/* --- ISOLATION RESET --- */
#bc-v1-root {
    width: 100vw; margin-left: calc(-50vw + 50%);
    background: var(--bg-main); color: var(--text-main);
    font-family: var(--font); line-height: 1.5;
    overflow-x: hidden; position: relative; box-sizing: border-box;
    text-align: left;
}
#bc-v1-root * { box-sizing: border-box; margin: 0; padding: 0; }
#bc-v1-root a { text-decoration: none; color: inherit; transition: 0.3s; }
#bc-v1-root ul { list-style: none; padding: 0; margin: 0; }
#bc-v1-root img { width: 100%; display: block; max-width: 100%; }
#bc-v1-root .text-white { color: #fff !important; }

/* Force Colors */
#bc-v1-root h1, #bc-v1-root h2, #bc-v1-root h3, #bc-v1-root h4 { color: var(--text-main); font-weight: 800; margin: 0; }
#bc-v1-root p { color: var(--text-light); margin-bottom: 20px; }

/* --- GRID UTILS --- */
#bc-v1-root .bc-v1-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
#bc-v1-root .bc-v1-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
#bc-v1-root .align-center { align-items: center; }
#bc-v1-root .center { text-align: center; margin-bottom: 60px; }


/* --- 1. HERO --- */
#bc-v1-root .bc-v1-hero {
    padding: 140px 0 100px; position: relative; overflow: hidden;
    background: var(--bg-off); border-bottom: 1px solid var(--border);
}
#bc-v1-root .bc-v1-bg-grid {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(#e5e5e5 1px, transparent 1px), linear-gradient(90deg, #e5e5e5 1px, transparent 1px);
    background-size: 60px 60px; opacity: 0.4; z-index: 0; pointer-events: none;
}
#bc-v1-root .bc-v1-bento-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }

/* Text */
#bc-v1-root .hero-main { display: flex; flex-direction: column; justify-content: center; }
#bc-v1-root .bc-v1-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fef3c7; color: var(--accent-dark);
    padding: 6px 14px; border-radius: 50px; font-weight: 600; font-size: 13px;
    margin-bottom: 25px; align-self: flex-start;
}
#bc-v1-root .bc-v1-blink { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: bc-blink 1s infinite; }
@keyframes bc-blink { 50% { opacity: 0; } }

#bc-v1-root .bc-v1-h1 {
    font-size: clamp(42px, 5vw, 72px); line-height: 1.1; margin-bottom: 20px; letter-spacing: -2px;
}
#bc-v1-root .bc-v1-highlight { color: var(--accent); }
#bc-v1-root .bc-v1-lead { font-size: 18px; margin-bottom: 30px; max-width: 500px; }

#bc-v1-root .bc-v1-actions { display: flex; align-items: center; gap: 20px; }
#bc-v1-root .bc-v1-btn-primary {
    display: inline-block; background: var(--text-main); color: #fff !important;
    padding: 14px 35px; border-radius: 4px; font-weight: 600;
}
#bc-v1-root .bc-v1-btn-primary:hover { background: var(--accent); }
#bc-v1-root .bc-v1-trust { font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 5px; font-size: 14px; }
#bc-v1-root .bc-v1-trust i { color: var(--accent); }

/* Visual: Strategy Dashboard */
#bc-v1-root .hero-visual { position: relative; height: 400px; }
#bc-v1-root .bc-v1-strat-card {
    background: #fff; width: 100%; border-radius: 8px; padding: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08); border: 1px solid var(--border);
    display: flex; flex-direction: column; justify-content: space-between; height: 100%;
}
#bc-v1-root .strat-header {
    display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 15px; font-weight: 700; font-size: 14px; color: var(--text-main);
}
#bc-v1-root .status-dot { width: 10px; height: 10px; background: #10b981; border-radius: 50%; }

#bc-v1-root .strat-body { margin-top: 20px; display: flex; flex-direction: column; gap: 20px; }
#bc-v1-root .strat-metric .m-label {
    display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; font-weight: 600;
}
#bc-v1-root .m-bar { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
#bc-v1-root .fill { height: 100%; background: var(--text-main); border-radius: 4px; }
#bc-v1-root .fill.active { background: var(--accent); }
#bc-v1-root .up { color: #10b981; }
#bc-v1-root .down { color: #ef4444; }

#bc-v1-root .strat-graph-line { margin-top: 20px; height: 50px; opacity: 0.5; }
#bc-v1-root svg { width: 100%; height: 100%; }


/* --- 2. TRUST STRIP --- */
#bc-v1-root .bc-v1-trust-strip { padding: 40px 0; background: #fff; border-bottom: 1px solid var(--border); }
#bc-v1-root .bc-v1-label-center { text-align: center; font-size: 12px; text-transform: uppercase; font-weight: 700; color: #94a3b8; margin-bottom: 20px; letter-spacing: 1px; }
#bc-v1-root .bc-v1-logo-row { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; align-items: center; }
#bc-v1-root .bc-v1-logo { display: flex; align-items: center; justify-content: center; color: #cbd5e1; transition: all 0.3s ease; }
#bc-v1-root .bc-v1-logo svg { width: 80px; height: auto; fill: currentColor; }
#bc-v1-root .bc-v1-logo:hover { color: var(--text-main); transform: scale(1.05); }


/* --- 3. ROADMAP (Framework) --- */
#bc-v1-root .bc-v1-roadmap { padding: 100px 0; background: #fff; }
#bc-v1-root .bc-v1-sticky-info { position: sticky; top: 100px; }
#bc-v1-root .bc-v1-lead-text { font-size: 18px; margin-bottom: 30px; color: var(--text-light); }
#bc-v1-root .bc-v1-btn-outline {
    display: inline-block; border: 1px solid var(--text-main); color: var(--text-main) !important;
    padding: 12px 28px; border-radius: 4px; font-weight: 600; transition: 0.3s;
}
#bc-v1-root .bc-v1-btn-outline:hover { background: var(--text-main); color: #fff !important; }

#bc-v1-root .bc-v1-timeline-wrap { position: relative; border-left: 2px solid #e5e5e5; padding-left: 40px; }
#bc-v1-root .bc-v1-time-step { position: relative; margin-bottom: 60px; }
#bc-v1-root .bc-v1-step-num {
    position: absolute; left: -56px; top: 0; background: #fff; width: 30px; height: 30px;
    border: 2px solid var(--accent); border-radius: 50%; color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
#bc-v1-root .bc-v1-step-content h4 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
#bc-v1-root .bc-v1-step-content p { font-size: 15px; line-height: 1.6; }


/* --- 4. SERVICES --- */
#bc-v1-root .bc-v1-services { padding: 100px 0; background: #fdfdfd; border-top: 1px solid var(--border); }
#bc-v1-root .bc-v1-sec-head { margin-bottom: 60px; max-width: 700px; }
#bc-v1-root .bc-v1-h2 { font-size: 40px; margin-bottom: 10px; }
#bc-v1-root .bc-v1-line { width: 60px; height: 4px; background: var(--accent); margin-bottom: 20px; }

#bc-v1-root .bc-v1-bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
#bc-v1-root .bc-v1-box {
    border: 1px solid var(--border); padding: 40px; transition: 0.3s; background: #fff; border-radius: 8px;
}
#bc-v1-root .bc-v1-box:hover, #bc-v1-root .bc-v1-active {
    border-color: var(--accent); box-shadow: 0 10px 30px rgba(245, 158, 11, 0.1); transform: translateY(-5px);
}
#bc-v1-root .bc-v1-icon-box {
    font-size: 30px; color: var(--accent); margin-bottom: 20px;
    background: #fef3c7; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
#bc-v1-root .bc-v1-box h3 { font-size: 24px; margin-bottom: 15px; }
#bc-v1-root .bc-v1-box p { font-size: 15px; margin-bottom: 25px; line-height: 1.6; }
#bc-v1-root .bc-v1-list li {
    font-size: 14px; margin-bottom: 8px; color: var(--text-light); padding-left: 15px; position: relative;
}
#bc-v1-root .bc-v1-list li::before { content: ''; width: 6px; height: 6px; background: var(--accent); position: absolute; left: 0; top: 8px; }


/* --- 5. IMPACT / ROI (Dark Mode) --- */
#bc-v1-root .bc-v1-impact { padding: 100px 0; background: var(--text-main); color: #fff; }
#bc-v1-root .bc-v1-imp-text h2 { color: #fff; margin-bottom: 20px; }
#bc-v1-root .bc-v1-imp-text p { color: #cbd5e1; }
#bc-v1-root .bc-v1-stat-row { display: flex; gap: 50px; margin-top: 40px; }
#bc-v1-root .bc-v1-stat strong { display: block; font-size: 40px; color: var(--accent); line-height: 1; margin-bottom: 5px; }
#bc-v1-root .bc-v1-stat span { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; }

#bc-v1-root .bc-v1-vs-card {
    background: #fff; padding: 40px; border-radius: 12px; color: var(--text-main);
}
#bc-v1-root .vs-header { font-size: 18px; font-weight: 700; margin-bottom: 30px; text-align: center; }
#bc-v1-root .vs-row { margin-bottom: 20px; }
#bc-v1-root .vs-row span { font-size: 12px; font-weight: 600; display: block; margin-bottom: 5px; }
#bc-v1-root .vs-bar {
    height: 30px; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; padding-left: 10px;
}
#bc-v1-root .vs-bar.gray { background: #94a3b8; width: 30%; }
#bc-v1-root .vs-bar.gold { background: var(--accent); width: 85%; }


/* --- 6. TOOLKIT --- */
#bc-v1-root .bc-v1-toolkit { padding: 100px 0; background: #fff; }
#bc-v1-root .bc-v1-tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
#bc-v1-root .bc-v1-tool-item {
    text-align: center; padding: 30px 20px; border: 1px solid var(--border); border-radius: 8px; background: #fdfdfd;
}
#bc-v1-root .bc-v1-tool-item i { font-size: 32px; color: var(--accent); margin-bottom: 15px; display: block; }
#bc-v1-root .bc-v1-tool-item h4 { font-size: 18px; margin-bottom: 10px; }
#bc-v1-root .bc-v1-tool-item p { font-size: 14px; color: var(--text-light); margin: 0; }


/* --- 7. INDUSTRIES --- */
#bc-v1-root .bc-v1-industries { padding: 80px 0; background: #f9fafb; border-top: 1px solid var(--border); }
#bc-v1-root .bc-v1-ind-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
#bc-v1-root .bc-v1-ind-item {
    text-align: center; padding: 20px; background: #fff; border: 1px solid var(--border);
    border-radius: 4px; transition: 0.3s;
}
#bc-v1-root .bc-v1-ind-item:hover { transform: translateY(-5px); border-color: var(--accent); }
#bc-v1-root .bc-v1-ind-item i { font-size: 24px; color: var(--text-main); margin-bottom: 10px; display: block; }
#bc-v1-root .bc-v1-ind-item span { font-size: 12px; font-weight: 700; color: var(--text-light); }


/* --- 8. FAQ --- */
#bc-v1-root .bc-v1-faq { padding: 100px 0; background: #fff; }
#bc-v1-root .bc-v1-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
#bc-v1-root .bc-v1-faq-item h4 { font-size: 18px; margin-bottom: 10px; }
#bc-v1-root .bc-v1-faq-item p { font-size: 15px; color: var(--text-light); }


/* --- 9. CTA --- */
#bc-v1-root .bc-v1-cta { padding: 120px 0; }
#bc-v1-root .bc-v1-cta-box {
    text-align: center; background: var(--text-main); color: #fff; padding: 80px; border-radius: 8px;
}
#bc-v1-root .bc-v1-cta-box h2 { font-size: 40px; margin-bottom: 20px; font-weight: 800; color: #fff; }
#bc-v1-root .bc-v1-cta-box p { font-size: 18px; margin-bottom: 40px; color: #cbd5e1; }
#bc-v1-root .bc-v1-btn-white {
    display: inline-block; background: #fff; color: var(--text-main) !important;
    padding: 16px 40px; font-weight: 700; border-radius: 4px; transition: 0.3s;
}
#bc-v1-root .bc-v1-btn-white:hover { transform: translateY(-3px); background: var(--accent); color: #fff !important; }

/* RESPONSIVE */
@media(max-width: 991px) {
    #bc-v1-root .bc-v1-bento-hero { grid-template-columns: 1fr; }
    #bc-v1-root .hero-visual { height: 350px; margin-top: 40px; }
    #bc-v1-root .bc-v1-bento-grid, #bc-v1-root .bc-v1-grid-2, #bc-v1-root .bc-v1-faq-grid, #bc-v1-root .bc-v1-tool-grid { grid-template-columns: 1fr; gap: 40px; }
    #bc-v1-root .bc-v1-logo-row { gap: 30px; }
    #bc-v1-root .bc-v1-logo svg { width: 60px; }
    #bc-v1-root .bc-v1-ind-grid { grid-template-columns: repeat(2, 1fr); }
    #bc-v1-root .bc-v1-cta-box { padding: 40px 20px; }
    #bc-v1-root { width: 100%; margin-left: 0; }
}



/*     SERVICE MAIN PAGE    */

/* =========================================
   1. GLOBAL LAB THEME & SECTIONS
   ========================================= */

/* Base Section Style */
.cld-glass-section {
    background-color: #ffffff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    font-family: "Plus Jakarta Sans", sans-serif;
    z-index: 1;

    /* TECHNICAL GRID PATTERN */
    background-image: 
        linear-gradient(#f0f0f0 1px, transparent 1px),
        linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
    background-size: 40px 40px;
}

/* HERO MODIFIER: Large top padding for the first section */
.cld-hero-padding {
    padding-top: 200px !important;
    padding-bottom: 120px !important;
}

/* Spacer between Services and Philosophy */
.cld-section-spacer {
    width: 100%;
    height: 120px;
    display: block;
}

/* CTA Spacer */
.cld-cta-spacer {
    height: 80px;
}

/* --- TYPOGRAPHY (Responsive via Clamp) --- */
.cld-pill-label {
    display: inline-block;
    background: #f3f4f6;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    margin-bottom: 20px;
}

.cld-display-title {
    /* Scales between 36px on mobile and 56px on desktop */
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    color: #111;
    letter-spacing: -1.5px;
    margin-bottom: 15px;
    line-height: 1.1;
}

.cld-display-desc {
    font-size: clamp(16px, 2vw, 20px);
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}


/* =========================================
   2. SERVICE GRID INTERFACE
   ========================================= */

.cld-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cld-glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 35px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.cld-card-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cld-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.cld-icon-circle {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #111;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #f3f4f6;
    transition: 0.4s;
}

.cld-num {
    font-family: monospace;
    color: #999;
    font-size: 14px;
    font-weight: 600;
}

.cld-main h3 {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    margin-bottom: 10px;
}

.cld-main p {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 25px;
}

.cld-tags {
    font-size: 13px;
    color: #555;
    font-weight: 700;
    margin-top: 15px;
    display: block;
}

.cld-tags span {
    color: #000;
    font-weight: 800;
}

.cld-full-click {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10;
}

/* Hover Effects (Desktop Only usually) */
@media (hover: hover) {
    .cld-glass-card:hover {
        background: #ffffff;
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.08);
        border-color: #d1d5db;
    }
    .cld-glass-card:hover .cld-icon-circle {
        background: #111;
        color: #fff;
        transform: scale(1.1);
        border-color: #111;
    }
    .cld-glass-card:hover .cld-tags span {
        color: #FD5B38;
    }
}

/* Centered 7th Card Logic (Only for large screens) */
@media (min-width: 992px) {
    .cld-centered-card {
        grid-column: 2 / 3; 
        border-color: #d1d5db;
    }
}


/* =========================================
   3. PHILOSOPHY LIST (VISIONARY LIST)
   ========================================= */

.cld-feature-list {
    display: flex;
    flex-direction: column;
}

.cld-feature-row {
    border-top: 1px solid #e5e7eb;
    padding: 30px 40px;
    background: #fff;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.cld-feature-row:last-child {
    border-bottom: 1px solid #e5e7eb;
}

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

.cld-row-num {
    font-family: monospace;
    font-size: 14px;
    color: #bbb;
    margin-right: 30px;
    font-weight: 700;
    transition: 0.4s;
    flex-shrink: 0; /* Prevents shrinking on mobile */
}

.cld-row-title {
    font-size: clamp(20px, 4vw, 32px);
    font-weight: 800;
    color: #111;
    margin: 0;
    flex-grow: 1;
    transition: 0.4s;
    letter-spacing: -1px;
}

.cld-row-icon {
    font-size: 24px;
    color: #111;
    transition: 0.4s;
    transform: rotate(0deg);
}

.cld-row-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s ease;
    opacity: 0;
}

.cld-row-body p {
    font-size: 18px;
    line-height: 1.6;
    color: #ccc;
    margin-top: 20px;
    margin-bottom: 0;
    max-width: 80%;
    padding-left: 50px;
}

/* Hover Interaction */
.cld-feature-row:hover {
    background: #111;
    padding-top: 40px;
    padding-bottom: 40px;
}
.cld-feature-row:hover .cld-row-title { color: #fff; transform: translateX(10px); }
.cld-feature-row:hover .cld-row-num { color: #FD5B38; }
.cld-feature-row:hover .cld-row-icon { color: #fff; transform: rotate(45deg); }
.cld-feature-row:hover .cld-row-body { max-height: 200px; opacity: 1; }


/* =========================================
   4. INTERACTIVE STRING SECTION
   ========================================= */

.cld-string-section {
    width: 100%;
    height: 150px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    display: block;
    background-image: 
        linear-gradient(#f0f0f0 1px, transparent 1px), 
        linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
    background-size: 40px 40px;
}

.cld-string-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cld-string-container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
    cursor: row-resize; 
}

#cld-string-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

#cld-string-path {
    stroke: #000000; 
    stroke-width: 3px;
    fill: transparent;
    vector-effect: non-scaling-stroke;
}


/* =========================================
   5. KINETIC CTA SECTION
   ========================================= */

.cld-kinetic-section {
    position: relative;
    padding: 80px 0;
    background: #ffffff;
    overflow: hidden;
    font-family: "Plus Jakarta Sans", sans-serif;
    background-image: linear-gradient(#f0f0f0 1px, transparent 1px), linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
    background-size: 40px 40px;
}

.cld-kinetic-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    margin-bottom: 20px;
}

.cld-kinetic-title {
    /* Scales between 40px and 80px */
    font-size: clamp(40px, 8vw, 80px);
    font-weight: 800;
    color: #111;
    line-height: 0.95;
    letter-spacing: -3px;
    margin-bottom: 0;
}

.cld-static-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 25px 60px;
    background: #111;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 20;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.cld-static-btn:hover {
    background: #FD5B38;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    color: #fff;
}


/* =========================================
   6. RESPONSIVE UTILITIES (Mobile Optimization)
   ========================================= */

/* Tablet (Max 991px) */
@media (max-width: 991px) {
    .cld-hero-padding {
        padding-top: 150px !important;
        padding-bottom: 80px !important;
    }
    .cld-grid-container { 
        grid-template-columns: repeat(2, 1fr); /* 2 Columns */
    }
    .cld-row-body p { 
        padding-left: 0; 
        max-width: 100%; 
        font-size: 16px;
    }
    .cld-string-wrapper { 
        display: none; /* Hide interactive string on mobile to allow scrolling */
    }
    .cld-string-section {
        height: 0; /* Collapse section height */
        padding: 0;
    }
}

/* Mobile (Max 768px) */
@media (max-width: 768px) {
    .cld-hero-padding {
        padding-top: 120px !important;
        padding-bottom: 60px !important;
    }
    .cld-grid-container { 
        grid-template-columns: 1fr; /* 1 Column */
    }
    .cld-section-spacer {
        height: 60px; /* Smaller gap on mobile */
    }
    .cld-feature-row {
        padding: 20px;
    }
    .cld-row-num {
        margin-right: 15px;
    }
    .cld-static-btn {
        padding: 20px 40px;
        font-size: 16px;
    }
    .cld-cta-spacer {
        height: 40px;
    }
}


/*   PRICING PAGE   */


/* --- 1. VARIABLES & RESET --- */
:root {
    --cld-font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --cld-bg-color: #ffffff;
    --cld-grid-color: #f3f4f6;
    --cld-text-black: #111827;
    --cld-text-grey: #6b7280;
    --cld-primary-dark: #0f172a;
    --cld-accent-blue: #2563eb;
    --cld-radius: 24px;
    --cld-transition: 0.3s ease;
}

.cld-holo-wrapper * {
    box-sizing: border-box; margin: 0; padding: 0; border: none; outline: none;
    list-style: none; text-decoration: none; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* --- 2. LAYOUT WRAPPER --- */
.cld-holo-wrapper {
    font-family: var(--cld-font-main);
    padding: 100px 20px;
    width: 100%;
    background-color: var(--cld-bg-color);
    background-image:
        linear-gradient(to right, var(--cld-grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--cld-grid-color) 1px, transparent 1px);
    background-size: 50px 50px;
    overflow: hidden; 
}

.cld-holo-container { max-width: 1140px; margin: 0 auto; }

/* --- 3. TYPOGRAPHY & HEADER --- */
.cld-header-box { text-align: center; margin-bottom: 60px; }

.cld-eyebrow {
    font-size: 13px; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; color: #9ca3af; display: block; margin-bottom: 12px;
}

.cld-main-title {
    font-size: 48px; font-weight: 900; color: var(--cld-text-black);
    letter-spacing: -1.5px; margin-bottom: 25px; line-height: 1.1;
}

.cld-title-gradient {
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- 4. TOGGLE SWITCHER --- */
.cld-toggle-wrapper {
    display: flex; justify-content: center; align-items: center;
    gap: 20px; margin-top: 30px; position: relative; z-index: 10;
    /* Prevent selection on double tap */
    user-select: none; -webkit-user-select: none;
}

.cld-toggle-text {
    font-size: 16px; font-weight: 700; color: var(--cld-text-black);
    opacity: 0.5; transition: 0.3s; cursor: pointer;
}

.cld-toggle-text.active { opacity: 1; color: var(--cld-accent-blue); }

.cld-switch-ui {
    width: 60px; height: 32px; background: #e5e7eb; border-radius: 50px;
    position: relative; cursor: pointer; transition: 0.3s; border: 1px solid #d1d5db;
    touch-action: manipulation; /* Improves touch response */
}

.cld-switch-ball {
    width: 24px; height: 24px; background: #fff; border-radius: 50%;
    position: absolute; top: 3px; left: 4px;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Toggle Active State */
.cld-holo-wrapper.pro-mode .cld-switch-ui { background: var(--cld-accent-blue); border-color: var(--cld-accent-blue); }
.cld-holo-wrapper.pro-mode .cld-switch-ball { transform: translateX(28px); }

/* --- 5. GRID SYSTEM --- */
.cld-holo-grid {
    display: grid;
    /* Optimized for mobile: won't break on 320px screens */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* --- 6. CARD STYLES --- */
.cld-card { height: 100%; border-radius: var(--cld-radius); position: relative; }

/* Base Tilt Logic */
.cld-tilt-card {
    will-change: transform; transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.cld-tilt-card.cld-manual-move { transition: none; }

.cld-content-wrap {
    position: relative; z-index: 2; height: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 35px 30px; border-radius: var(--cld-radius); overflow: hidden;
}

/* Light vs Dark Themes */
.cld-card-light .cld-content-wrap {
    background: #ffffff; border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
}

.cld-card-dark .cld-content-wrap {
    background: var(--cld-primary-dark); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px -5px rgba(0,0,0,0.3);
}

/* Header & Text Details */
.cld-card-header { margin-bottom: 25px; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 20px; }
.cld-card-dark .cld-card-header { border-bottom: 1px solid rgba(255,255,255,0.1); }

.cld-plan-name { font-size: 24px; font-weight: 800; margin-bottom: 4px; display: block; }
.cld-plan-desc { font-size: 14px; color: var(--cld-text-grey); margin-bottom: 12px; display: block; }
.cld-card-dark .cld-plan-desc { color: #9ca3af; }
.cld-gradient-text { background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Badges & Pricing */
.cld-delivery-badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 10px;
    border-radius: 6px; background: #f3f4f6; color: #4b5563;
}
.cld-card-dark .cld-delivery-badge { background: rgba(255,255,255,0.1); color: #d1d5db; }

.cld-price-lockup { margin: 15px 0 0 0; display: flex; align-items: baseline; gap: 4px; }
.cld-period { font-size: 12px; text-transform: uppercase; color: #9ca3af; margin-right: 5px; }
.cld-currency { font-size: 18px; font-weight: 600; opacity: 0.6; }
.cld-amount { font-size: 36px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.cld-card-dark .cld-price-lockup { color: #fff; }

/* Features & Scroll */
.cld-feature-scroll { flex-grow: 1; margin-bottom: 30px; }
.cld-feature-group { margin-bottom: 15px; }
.cld-group-title {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    color: var(--cld-text-black); opacity: 0.4; margin-bottom: 8px; display: block; letter-spacing: 1px;
}
.cld-card-dark .cld-group-title { color: #fff; opacity: 0.5; }

.cld-specs li {
    font-size: 14px; margin-bottom: 8px; display: flex; align-items: flex-start; line-height: 1.4; color: #4b5563;
}
.cld-specs li::before {
    content: "✓"; font-weight: 900; color: var(--cld-accent-blue);
    margin-right: 8px; font-size: 12px; margin-top: 2px;
}
.cld-card-dark .cld-specs li { color: #e5e7eb; }
.cld-card-dark .cld-specs li::before { color: #a78bfa; }

/* --- 7. BUTTONS --- */
.cld-btn-wireframe {
    width: 100%; display: block; padding: 14px; text-align: center;
    border: 1px solid #e5e5e5; color: var(--cld-text-black); font-weight: 600; border-radius: 12px;
    background: transparent; transition: all 0.2s ease; margin-top: auto;
}
.cld-btn-wireframe:hover { background: var(--cld-text-black); border-color: var(--cld-text-black); color: #fff; }

.cld-btn-glow {
    width: 100%; display: block; padding: 1px; border-radius: 12px;
    background: linear-gradient(90deg, #2563eb, #7c3aed); position: relative; z-index: 10; margin-top: auto;
}
.cld-btn-inner {
    display: block; background: #000; color: #fff; padding: 14px; text-align: center;
    border-radius: 11px; font-weight: 600; transition: background 0.3s ease;
}
.cld-btn-glow:hover .cld-btn-inner { background: transparent; }

/* --- 8. CTA BOX (Custom Quote) --- */
.cld-cta-wrapper { margin-top: 60px; padding: 0 10px; }
.cld-cta-box {
    background: #0f172a; border-radius: 24px; padding: 60px 30px;
    text-align: center; border: 1px solid rgba(255,255,255,0.1); 
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.4);
}
.cld-cta-title { font-size: 32px; color: #fff; font-weight: 800; margin-bottom: 10px; }
.cld-cta-desc { font-size: 16px; color: #9ca3af; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }

.cld-btn-mega {
    display: inline-block; background: #fff; color: #000; padding: 16px 32px;
    border-radius: 50px; font-weight: 700; transition: transform 0.2s; box-shadow: 0 0 20px rgba(255,255,255,0.2);
}
.cld-btn-mega:hover { transform: scale(1.05); }

/* --- 9. ANIMATIONS & DECORATION --- */
.cld-gradient-blob {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 0deg, #3b82f6 90deg, #8b5cf6 180deg, #ec4899 270deg, transparent 360deg);
    opacity: 0.15; filter: blur(60px); animation: cld-spin 20s linear infinite; z-index: 1; pointer-events: none;
}
@keyframes cld-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.cld-anim-hidden { opacity: 0; transform: translateY(30px); transition: 0.8s ease; }
.cld-anim-visible { opacity: 1; transform: translateY(0); }

/* --- 10. TOGGLE VISIBILITY LOGIC --- */
.cld-view-pro { display: none; animation: cld-fade-up 0.4s ease; }
.cld-view-basic { display: block; animation: cld-fade-up 0.4s ease; }

.cld-holo-wrapper.pro-mode .cld-view-basic { display: none; }
.cld-holo-wrapper.pro-mode .cld-view-pro { display: block; }

@keyframes cld-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 11. RESPONSIVE OPTIMIZATIONS --- */
@media (max-width: 768px) {
    .cld-holo-wrapper { padding: 60px 15px; }
    .cld-main-title { font-size: 32px; }
    .cld-cta-title { font-size: 26px; }
    /* Fix Card Height Consistency on Mobile */
    .cld-content-wrap { padding: 30px 20px; }
    /* Simplify animations on mobile */
    .cld-tilt-card { transform: none !important; transition: none !important; }
}

@media (max-width: 480px) {
    .cld-toggle-wrapper { gap: 10px; }
    .cld-toggle-text { font-size: 14px; }
    .cld-plan-name { font-size: 22px; }
    .cld-amount { font-size: 30px; }
}

/*     ABOUT PAGE       */

/* =========================================
   CLD SWISS KINETIC (GSAP READY)
   ========================================= */

:root {
    --cld-bg: #ffffff;
    --cld-black: #111111;
    --cld-orange: #FF5500;
    --cld-line: #e5e5e5;
    --cld-font-main: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

.cld-about-wrapper {
    background-color: var(--cld-bg);
    color: var(--cld-black);
    font-family: var(--cld-font-main);
    overflow-x: hidden;
    position: relative;
    /* Subtle background grid */
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
}

.cld-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    /* Borders are now drawn via JS, so we use relative positioning */
    position: relative;
    z-index: 2;
}

/* --- THE "AWARD WINNING" TEXT MASK --- */
/* This hides the text until it slides up */
.cld-mask-wrap {
    overflow: hidden;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
}

.cld-mask-text {
    display: block;
    transform: translateY(110%); /* Start hidden below */
    opacity: 0;
    /* Transition handled by GSAP */
}

/* --- GRID LINES (To be drawn by GSAP) --- */
.cld-grid-line-vert, .cld-grid-line-horiz {
    position: absolute;
    background: var(--cld-black);
    z-index: 10;
}
.cld-grid-line-vert { top: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: top; }
.cld-grid-line-horiz { left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: left; }

.cld-left-border { left: 0; }
.cld-right-border { right: 0; }


/* --- 1. HERO --- */
.cld-hero-section-2 {
    padding: 140px 0 0 0;
    position: relative;
}

.cld-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: end;
    padding-bottom: 80px;
}

.cld-label {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cld-orange);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cld-label::before { content: ''; width: 0px; height: 2px; background: var(--cld-orange); transition: width 0.5s; }
.cld-label.active::before { width: 30px; }

.cld-hero-title {
    font-size: clamp(3.5rem, 8vw, 8.5rem);
    line-height: 0.85;
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

.cld-hero-intro {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #444;
    padding-left: 30px;
    border-left: 4px solid var(--cld-orange);
    opacity: 0; /* Handle via GSAP */
}

.cld-hero-banner {
    width: 100%;
    height: 500px; /* Taller for parallax room */
    overflow: hidden;
    position: relative;
}

.cld-hero-img {
    width: 100%;
    height: 120%; /* 120% height allows parallax movement */
    object-fit: cover;
    filter: grayscale(100%);
    transform: translateY(-10%); /* Start slightly up */
}

/* --- 2. IDENTITY GRID --- */
.cld-identity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
}

.cld-id-box {
    padding: 80px 40px;
    position: relative;
    background: white;
    transition: background 0.4s, color 0.4s;
}

/* Hover Physics */
.cld-id-box:hover { background: var(--cld-black); color: white; }
.cld-id-box:hover .cld-id-title { color: var(--cld-orange); }
.cld-id-box:hover .cld-id-text { color: #ccc; }
.cld-id-box:hover .cld-check-icon { color: var(--cld-orange); transform: scale(1.2); }

.cld-id-title { font-size: 2.2rem; font-weight: 800; margin-bottom: 20px; line-height: 1; }
.cld-id-text { font-size: 1.05rem; line-height: 1.6; color: #555; }

.cld-check-list { list-style: none; padding: 0; margin: 0; }
.cld-check-list li { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; font-weight: 600; font-size: 1.1rem; }
.cld-check-icon { color: var(--cld-black); font-size: 1.2rem; transition: 0.3s; }

/* --- 3. EXPERIENCE STRIP --- */
.cld-exp-section {
    padding: 100px 0;
    background: var(--cld-black);
    color: white;
    position: relative;
}

.cld-exp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    text-align: center;
}

.cld-exp-num { font-size: 3.5rem; font-weight: 900; color: var(--cld-orange); display: block; line-height: 1; margin-bottom: 10px; }
.cld-exp-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; opacity: 0.8; }

/* --- 4. TEAM --- */
.cld-team-header { padding: 100px 0 60px; }
.cld-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
}

.cld-team-member { position: relative; overflow: hidden; }

.cld-team-img-wrap { width: 100%; aspect-ratio: 3/4; overflow: hidden; position: relative; }
.cld-team-img { 
    width: 100%; height: 100%; object-fit: cover; 
    filter: grayscale(100%); 
    transition: 0.5s ease;
    transform: scale(1.05); /* Slight zoom for parallax */
}

.cld-team-member:hover .cld-team-img { filter: grayscale(0%); transform: scale(1); }

.cld-team-info { padding: 20px; border-top: 1px solid var(--cld-black); background: white; transition: 0.3s; position: relative; z-index: 5; }
.cld-team-member:hover .cld-team-info { background: var(--cld-black); }
.cld-team-member:hover h3, .cld-team-member:hover span { color: white; }

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .cld-container { padding: 0 20px; }
    .cld-hero-section { padding-top: 80px; }
    .cld-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .cld-identity-grid { grid-template-columns: 1fr; }
    .cld-id-box { border-bottom: 1px solid #eee; padding: 60px 20px; }
    .cld-exp-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .cld-team-grid { grid-template-columns: 1fr 1fr; }
    .cld-hero-banner { height: 300px; }
}

@media (max-width: 767px) {
    .cld-hero-title { font-size: 3rem; }
    .cld-exp-grid { grid-template-columns: 1fr; }
    .cld-team-grid { grid-template-columns: 1fr; }
}

/*  Footer 2  */

/* =========================================
   1. CLD BASE FOOTER CONTAINER (Floating Overlay)
   ========================================= */
.cld-footer-section {
    /* PULL UP: This negative margin moves the footer UP over the previous section */
    margin: -100px auto 30px; 
    
    /* Position & Size */
    max-width: 1140px;
    width: 90%;
    position: relative;
    z-index: 99; /* High Z-Index ensures it sits ON TOP of the section above */
    
    /* STYLE: Black Pill */
    background: #000000; 
    border-radius: 50px;
    padding: 15px 40px;
    
    /* Shadow for depth */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); 
    
    color: #fff;
}

/* =========================================
   2. CLD LOWER CONTENT
   ========================================= */
.cld-footer-section .cld-footer-lower {
    margin: 0;
    padding: 0;
    border: none;
}

/* Copyright Text */
.cld-footer-section .cld-copyright {
    color: #cbcbcb;       /* Dark Grey */
    font-size: 14px;
    margin: 0;
    line-height: 40px;    /* Centers text vertically */
    font-weight: 500;
}

/* =========================================
   3. CLD SOCIAL ICONS (Dark Colors)
   ========================================= */
.cld-footer-section .cld-widget-social {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.cld-footer-section .cld-widget-social li {
    list-style: none;
}

.cld-footer-section .cld-widget-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    
    /* Dark Border for visibility on white */
    border: 1px solid #cbcbcb; 
    color: #cbcbcb;       /* Dark Icon Color */
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    text-decoration: none;
}

.cld-footer-section .cld-widget-social a:hover {
    background: #00cad8;  /* Cyan hover */
    color: #ffffff;       /* White text on hover */
    border-color: #00cad8;
    box-shadow: 0 5px 15px rgba(0, 202, 216, 0.3);
}

/* =========================================
   4. RESPONSIVE / MOBILE
   ========================================= */
@media (max-width: 991px) {
    .cld-footer-section {
        margin: 20px auto;
        padding: 20px;
        border-radius: 20px; 
    }
    
    /* Stack content vertically on mobile */
    .cld-footer-section .row {
        display: flex;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .cld-footer-section .cld-widget-social {
        justify-content: center;
    }

    .cld-footer-section .cld-copyright {
        line-height: normal;
    }
}


/* =========================================
   5. MOBILE ALIGNMENT FOR FOOTER LOGO
   ========================================= */
@media (max-width: 991px) {
    
    /* Center the Logo Area Container */
    .footer-section-s2 .footer-logo-area {
        display: flex;
        flex-direction: column; /* Stacks logo and text vertically */
        align-items: center;    /* Centers items horizontally */
        text-align: center;     /* Centers the text inside paragraph */
        margin-bottom: 30px !important; /* Adds space below description on mobile */
    }

    /* Optional: Ensure the SVG respects the centering */
    .footer-section-s2 .footer-logo-area svg {
        margin: 0 auto;
    }
}


/*   CONTACT US  */


    /* --- SECTION & BACKGROUND --- */
/* --- SECTION & BACKGROUND --- */
.cld-editorial-section {
    padding: 80px 0;
    
    /* 1. Base White Background */
    background-color: #ffffff; 

    /* 2. The Grid Pattern */
    /* Creates vertical and horizontal lines using gradients */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    
    /* 3. Grid Size */
    background-size: 40px 40px; /* 40px squares. Change this to resize the grid */
    
    background-position: center top;
    position: relative;
    overflow: hidden;
}

.cld-editorial-card {
    background: #fff;
    box-shadow: 0 40px 80px rgba(0,0,0,0.12);
    border: 1px solid #fff;
    border-radius: 0; /* Sharp corners for editorial look */
}

/* --- LEFT PANEL: The Dark Billboard --- */
.cld-dark-billboard {
    background-color: #111; /* Nearly Black */
    height: 100%;
    position: relative;
    padding: 60px 50px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

/* Texture Effect */
.cld-noise-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.cld-billboard-content {
    position: relative;
    z-index: 2;
}

/* Status Sticker */
.cld-sticker {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    margin-bottom: 30px;
}
.cld-sticker span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #00e676;
}
.cld-sticker span::before {
    content: '●'; margin-right: 5px;
}

/* Typography */
.cld-headline-2 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 10px;
    color: #fff;
}

.cld-subline {
    font-size: 16px;
    color: #888;
    margin-bottom: 60px;
}

/* Big Contact Details */
.cld-detail-block {
    margin-bottom: 40px;
}

.cld-detail-block label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #FF7236; /* Brand Orange */
    margin-bottom: 8px;
}

.cld-big-link {
    font-size: 32px; /* Massive Phone Number */
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
    display: block;
}

.cld-big-link.small-font {
    font-size: 20px;
}

.cld-address-text {
    font-size: 18px;
    line-height: 1.5;
    color: #fff;
    opacity: 0.8;
}

.cld-big-link:hover {
    color: #FF7236;
    transform: translateX(10px);
}

/* --- RIGHT PANEL: The Workspace --- */
.cld-workspace-panel {
    padding: 60px;
    background: #fff;
}

.cld-form-intro { margin-bottom: 40px; }
.cld-form-intro h3 { font-size: 24px; font-weight: 700; color: #111; margin-bottom: 15px; }
.cld-progress-line { width: 40px; height: 4px; background: #FF7236; }

/* Material / Animated Inputs */
.cld-mat-input {
    position: relative;
    margin-bottom: 35px;
}

.cld-mat-input input, 
.cld-mat-input textarea,
.cld-mat-input select {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #111;
    border: none;
    border-bottom: 1px solid #ddd;
    outline: none;
    background: transparent;
    transition: 0.3s;
    border-radius: 0;
}

.cld-mat-input textarea { height: 100px; resize: none; padding-top: 10px; }

/* Focus Effects */
.cld-mat-input input:focus, 
.cld-mat-input textarea:focus,
.cld-mat-input select:focus {
    border-bottom-color: #FF7236;
}

/* Floating Label Logic */
.cld-mat-input label {
    position: absolute;
    top: 10px; left: 0;
    color: #999;
    font-size: 16px;
    pointer-events: none;
    transition: 0.3s ease all;
}

/* Move label up when focused or has content */
.cld-mat-input input:focus ~ label,
.cld-mat-input input:not(:placeholder-shown) ~ label,
.cld-mat-input textarea:focus ~ label,
.cld-mat-input textarea:not(:placeholder-shown) ~ label,
.cld-mat-input select:focus ~ label,
.cld-mat-input select:not([value=""]) ~ label {
    top: -15px;
    font-size: 12px;
    color: #FF7236;
    font-weight: 700;
}

/* ====================================
   SELECT DROPDOWN STYLE
   ==================================== */
.cld-mat-input select {
    appearance: none; /* Remove default browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-color: transparent;
    z-index: 2; /* Ensure click goes to select */
    position: relative;
    padding-right: 20px; /* Space for arrow */
}

/* Custom Orange Arrow */
.select-wrapper {
    position: relative;
}
.arrow-icon {
    position: absolute;
    right: 0;
    top: 15px;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #FF7236; /* Orange Arrow */
    pointer-events: none;
}

.cld-mat-input select:required:invalid { color: transparent; }
.cld-mat-input select option { color: #111; }

/* ====================================
   BUTTON STYLE
   ==================================== */
.cld-solid-btn {
    width: 100%;
    padding: 18px;
    background-color: #111; /* Dark button */
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.cld-solid-btn:hover {
    background-color: #FF7236; /* Brand Orange on hover */
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 114, 54, 0.2);
}

/* Validation Errors */
.error-msg {
    color: #ff4d4d;
    font-size: 11px;
    position: absolute;
    bottom: -18px;
    left: 0;
    display: none;
}
.cld-mat-input.error input { border-bottom-color: #ff4d4d; }
.cld-mat-input.error .error-msg { display: block; }
.cld-mat-input.success input { border-bottom-color: #00e676; }

/* Status Boxes */
.cld-status-box {
    margin-top: 20px; padding: 15px; font-size: 14px; display: none;
}
.cld-status-box.success { background: #e6fffa; color: #009688; }
.cld-status-box.error { background: #fff5f5; color: #c53030; }

/* --- MOBILE --- */
@media (max-width: 991px) {
    .cld-editorial-section { padding: 0; background: #111; }
    .cld-editorial-card { border: none; }
    .cld-dark-billboard { padding: 40px 20px; text-align: center; }
    
    .cld-headline { font-size: 32px; }
    .cld-big-link { font-size: 26px; } /* Slightly smaller for mobile */
    .cld-big-link:hover { transform: none; }
    
    .cld-workspace-panel {
        padding: 40px 20px;
        border-radius: 20px 20px 0 0;
        margin-top: -20px; /* Overlap effect */
    }
}

/* Container */
.cld-typing-widget {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #FF7236; /* Brand Orange Border */
    padding: 15px 20px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 35px;
    width: fit-content;
    backdrop-filter: blur(5px);
}



/* --- DESKTOP / BASE STYLES --- */
.cld-speed-widget {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 15px 22px;
    border-radius: 16px;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 35px;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

/* Visual Area - Locked Size */
.speed-visual {
    position: relative;
    width: 14px;
    height: 14px;
    flex: 0 0 14px; /* Prevents squishing */
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pulse-core {
    width: 10px;
    height: 10px;
    background: #2ecc71;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.8);
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(46, 204, 113, 0.6);
    border-radius: 50%;
    z-index: 1;
    animation: speed-pulse 1.5s infinite ease-out;
}

/* Text Styling */
.speed-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.speed-status {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

.speed-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    line-height: 1.4;
}

.speed-highlight {
    color: #2ecc71;
    font-weight: 700;
    white-space: nowrap;
}

.speed-hours {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.4;
}

@keyframes speed-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* --- MOBILE SPECIFIC FIXES (Centered) --- */
@media (max-width: 768px) {
    .cld-speed-widget {
        /* 1. Center the block itself */
        margin-left: auto;
        margin-right: auto;
        
        /* 2. Don't stretch to full width, fit the content */
        width: fit-content;
        min-width: 250px; /* Ensures it's not too small */
        
        /* 3. Adjust spacing for mobile */
        padding: 12px 20px;
        margin-bottom: 30px;
        
        /* 4. Ensure it respects flex parents */
        align-self: center;
    }

    .speed-status { font-size: 14px; }
    .speed-sub { font-size: 12px; }
    .speed-hours { font-size: 10px; }
}

/* 1. Custom tweaks for phone input */
    .iti { width: 100%; }
    
    .cld-mat-input input[type="tel"] {
        padding-left: 90px !important; /* Space for the flag */
    }

    /* 2. Fix overlapping label */
    .cld-mat-input.phone-container label {
        left: 90px;
        z-index: 2;
    }

    /* 3. THE FIX: Scrollable Dropdown */
    .iti__country-list {
        max-height: 200px !important;    /* Limit height so it doesn't go off-screen */
        overflow-y: auto !important;     /* Force scrollbar */
        z-index: 9999 !important;        /* Ensure it sits on top of everything */
        background-color: white;         /* Ensure transparent backgrounds don't ruin text */
        border: 1px solid #ccc;
    }



/*   HERO SECTION   */


/* --- 1. RESET & BASE LAYOUT --- */
.cld-hero-section {
    all: initial;
    position: relative;
    height: 100vh;
    min-height: 800px; /* Ensures space on large screens */
    background-color: #050505;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.cld-hero-section * { box-sizing: border-box; margin: 0; padding: 0; }

/* --- 2. BACKGROUND --- */
.cld-bg-layer { position: absolute; inset: 0; z-index: 0; }
.cld-bg-img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.25; filter: grayscale(100%) contrast(1.2);
    animation: cldBreathe 20s infinite alternate ease-in-out;
}
@keyframes cldBreathe { 0% { transform: scale(1.1); } 100% { transform: scale(1.25); } }

/* --- 3. QUANTUM GYROSCOPE (Wireframe Shape) --- */
.cld-geo-layer {
    position: absolute; inset: 0;
    z-index: 1; /* Behind text */
    pointer-events: none;
    overflow: hidden;
}

/* CONTAINER: Controls Position */
.cld-gyro-container {
    position: absolute;
    top: 50%; /* Upper Position */
    right: 5%;
    transform: translateY(-50%);
    width: 800px; height: 800px;
    opacity: 0.8;
    transition: all 0.5s ease;
}

.cld-svg-gyro { width: 100%; height: 100%; overflow: visible; }

/* Gyro Animations */
.cld-ring-outer { transform-origin: center; animation: cldSpinRight 60s linear infinite; }
.cld-ring-middle-group { transform-origin: center; animation: cldSpinTilt 20s linear infinite; }
.cld-ring-inner { transform-origin: center; animation: cldSpinLeft 30s linear infinite; }
.cld-core-pulse { transform-origin: center; animation: cldPulseCore 2s ease-in-out infinite; }
.cld-core-ring { transform-origin: center; animation: cldPing 2s ease-out infinite; }

/* Horizon Grid */
.cld-svg-horizon {
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 40vh;
    opacity: 0.5; mix-blend-mode: screen;
}

/* Keyframes */
@keyframes cldSpinRight { 100% { transform: rotate(360deg); } }
@keyframes cldSpinLeft { 100% { transform: rotate(-360deg); } }
@keyframes cldSpinTilt {
    0% { transform: rotate(0deg) rotateX(60deg) rotateY(10deg); }
    100% { transform: rotate(360deg) rotateX(60deg) rotateY(10deg); }
}
@keyframes cldPulseCore {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}
@keyframes cldPing {
    0% { transform: scale(0.8); opacity: 0.8; stroke-width: 2px; }
    100% { transform: scale(2.5); opacity: 0; stroke-width: 0px; }
}



/* --- 6. CONTENT WRAPPER (Grid Layout) --- */
.cld-content-wrapper {
    position: absolute; inset: 0;
    z-index: 100;
    padding: 120px 5vw 40px;
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Desktop: 60% Left, 40% Right */
    align-items: center;
    pointer-events: none;
}
.cld-main-text, .cld-services-area { pointer-events: auto; }


/* LEFT CONTENT (Headline) */
.cld-main-text { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    
    /* 1. DISABLE CLICKS ON THE CONTAINER */
    pointer-events: none; 
    
    /* Optional: Prevent text selection (Highlighting) */
    user-select: none; 
    -webkit-user-select: none; 
}

.cld-small-tag {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 2px; color: #FD5B38; margin-bottom: 20px; display: block;
}

.cld-headline {
    font-size: clamp(40px, 6vw, 100px); font-weight: 700;
    line-height: 1.05; color: #fff; margin-bottom: 30px;
}

.cld-desc {
    font-size: 18px; line-height: 1.6; color: #ccc;
    max-width: 550px; border-left: 2px solid #FD5B38;
    padding-left: 25px; margin-bottom: 40px;
}

/* 2. RE-ENABLE CLICKS FOR THE BUTTON (Crucial!) */
.cld-btn {
    pointer-events: auto; /* Force button to be clickable */
    cursor: pointer;
    
    position: relative; display: inline-block;
    padding: 15px 40px;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff; text-transform: uppercase; text-decoration: none;
    font-size: 14px; letter-spacing: 1px; font-weight: 700;
    width: fit-content; overflow: hidden; z-index: 5;
    transition: border-color 0.3s, color 0.3s;
}

.cld-btn::before {
    content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%;
    background: #00cad8; z-index: -1; 
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.cld-btn:hover { border-color: #00cad8; color: #000; }
.cld-btn:hover::before { width: 100%; }

/* BUTTON */
.cld-btn {
    position: relative; display: inline-block;
    padding: 15px 40px;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff; text-transform: uppercase; text-decoration: none;
    font-size: 14px; letter-spacing: 1px; font-weight: 700;
    width: fit-content; overflow: hidden; z-index: 1;
    transition: border-color 0.3s, color 0.3s;
}
.cld-btn::before {
    content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%;
    background: #00cad8; z-index: -1; 
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.cld-btn:hover { border-color: #00cad8; color: #000; }
.cld-btn:hover::before { width: 100%; }

/* --- RIGHT SERVICES (Non-Selectable but Animated) --- */
.cld-services-area {
    display: flex; flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end; 
    height: 100%; text-align: right;
    padding-bottom: 50px;

    /* 1. PREVENT TEXT HIGHLIGHTING (Makes it feel like an app/image) */
    user-select: none; 
    -webkit-user-select: none; 
}

.cld-service-item {
    font-size: clamp(22px, 3.5vw, 42px);
    font-weight: 800; text-transform: uppercase;
    color: #FD5B38; 
    margin-bottom: 10px; 
    transition: all 0.3s ease;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);

    /* 2. FORCE MOUSE TO REMAIN AN ARROW (Not a text bar) */
    cursor: default; 
}

.cld-service-item:hover {
    color: #ffffff;
    transform: translateX(-20px);
    text-shadow: 0 0 20px rgba(253, 91, 56, 0.8);
}

/* Mobile Adjustment (Keep your existing mobile block at the bottom) */

/* REVEAL STATES */
.cld-reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s ease; }
.cld-active-site .cld-reveal { opacity: 1; transform: translateY(0); }
.cld-d1 { transition-delay: 0.6s; }
.cld-d2 { transition-delay: 0.7s; }
.cld-d3 { transition-delay: 0.8s; }


/* ========================================= */
/* --- MOBILE & TABLET OPTIMIZATION --- */
/* ========================================= */

/* Default: Hide Mobile Shape on Desktop */
.cld-mobile-shape { display: none; }

@media (max-width: 991px) {
    
    .cld-hero-section {
        /* FIX 1: STOP FORCING FULL SCREEN HEIGHT */
        height: auto;
        min-height: auto; 
        
        /* FIX 2: Only add enough space for the shape (reduced from huge gap) */
        padding-bottom: 550px; 
        
        /* Allow scroll if needed */
        overflow: hidden; 
    }

    /* 1. LAYOUT & SPACING */
    .cld-content-wrapper { 
        grid-template-columns: 1fr; 
        grid-template-rows: auto auto; 
        
        /* Top padding 140px clears navbar */
        padding: 140px 20px 0px; 
        
        display: flex;
        flex-direction: column;
        gap: 0; 
    }

    /* 2. TEXT TYPOGRAPHY */
    .cld-main-text { 
        height: auto; 
        flex: 0 0 auto;
        margin-bottom: 0; 
        padding-bottom: 20px; 
        pointer-events: none;
        user-select: none;
    }
    
    .cld-small-tag { margin-bottom: 15px; font-size: 11px; }

    .cld-headline { 
        font-size: 52px; 
        line-height: 1.05; 
        margin-bottom: 25px;
        letter-spacing: -1px; 
    }
    
    .cld-desc {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 30px;
        color: #ddd;
        max-width: 100%;
        border-left-width: 2px;
    }
    
    .cld-btn { 
        pointer-events: auto; 
        padding: 12px 30px; 
        font-size: 13px; 
        z-index: 5; 
        display: inline-block; 
    }

    /* 3. NEW: 3D CUBE SHAPE (Smaller & Adjusted) */
    .cld-mobile-shape {
        display: block; 
        position: absolute;
        
        /* FIX 3: Make it smaller to reduce required gap */
        width: 180px; 
        height: 180px;
        
        /* Position it nicely in the padding area */
        bottom: 20px; 
        right: -10%; 
        
        opacity: 0.8; 
        z-index: 0; 
        pointer-events: none;
    }
    
    .cld-mobile-cube {
        transform-origin: center;
        animation: cldCubeFloat 8s ease-in-out infinite alternate;
    }
    
    @keyframes cldCubeFloat {
        0% { transform: translateY(0) rotate(0deg); }
        100% { transform: translateY(-15px) rotate(5deg); }
    }

    /* Hide Desktop Gyro */
    .cld-gyro-container { display: none; }

    /* Hide Services List if you removed it, or keep it compact */
    .cld-services-area { display: none; } 

    /* Hide Background Clutter */
    .cld-watermark { display: none; }
    .cld-svg-horizon { display: none; }
}

@media (max-width: 380px) {
    .cld-headline { font-size: 42px; }
}



/*   Partners section */



/* --- Base Section (Mobile First approach for speed) --- */
.cld-partners-section {
    background-color: #e0e0e0; /* Silver background */
    padding: 20px 0; /* Compact padding for mobile */
    overflow: hidden;
}

/* --- Slider Setup --- */
.cld-partners-slider {
    display: flex;
    align-items: center;
    margin: 0;
}

.cld-partners-slider .slick-track {
    display: flex;
    align-items: center;
    will-change: transform; /* Performance booster for scrolling */
}

/* --- The Uniform Box --- */
.logo-box {
    /* Mobile Size: Slightly smaller */
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0 10px; /* Safety padding inside the box */
}

.logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* On Mobile: Show logos clearly by default (No Grayscale) */
    filter: none; 
    opacity: 0.9;
    transition: transform 0.3s ease;
}

/* --- DESKTOP OPTIMIZATIONS (Larger Screens) --- */
@media (min-width: 768px) {
    
    .cld-partners-section {
        padding: 40px 0; /* More breathing room on desktop */
    }

    .logo-box {
        /* Desktop Size: Larger */
        width: 160px;
        height: 100px;
    }

    /* Default State on Desktop: Grayscale & Dimmed */
    .logo-box img {
        filter: grayscale(100%) opacity(0.7);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* --- THE SPOTLIGHT EFFECT (Only for Mouse Users) --- */
    /* This prevents sticky hover states on touch screens */
    @media (hover: hover) {
        
        /* 1. When hovering the wrapper, fade everyone out */
        .cld-partners-slider:hover .logo-box img {
            opacity: 0.3;
            filter: grayscale(100%) blur(1px);
            transform: scale(1);
        }

        /* 2. When hovering a specific logo, bring it to life */
        .cld-partners-slider .logo-box:hover img {
            opacity: 1;
            filter: grayscale(0%) blur(0px);
            transform: scale(1.2); /* Pop out */
        }
    }
}


/*     preloader-new     */

/* --- Preloader Container --- */
.cld-preloader {
    background-color: #040402;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cld-content-2 {
    width: 150px; 
    height: auto;
}

.cld-logo {
    width: 100%;
    height: 100%;
}

/* --- 1. The Background Container (Always visible, faint) --- */
.cld-container-2 {
    fill: #ffffff;
    opacity: 0.1; /* Very faint so you see the empty shape */
    stroke: none;
}

/* --- 2. The Loading Liquid (Fills up) --- */
.cld-liquid {
    fill: #ffffff; /* Bright Solid White */
    stroke: none;
    
    /* Animation Loop */
    animation: cld-fill-loop 1.25s ease-in-out infinite;
    
    /* Add a glow to the filled part */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

/* --- Animation Keyframes --- */
@keyframes cld-fill-loop {
    0% {
        /* Starts empty (Masked from Right) */
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }
    10% {
        /* Fade in */
        opacity: 1;
    }
    90% {
        /* Fully Filled */
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
    100% {
        /* Fade out at the very end to reset smoothly */
        clip-path: inset(0 0 0 0);
        opacity: 0;
    }
}


/*   PRELOADER MAIN HOMEPAGE   */



/* --- 5. INTRO PRELOADER (FIXED OVERLAY) --- */
.cld-intro-layer {
    /* CHANGED: 'fixed' ensures it covers the whole screen, no matter what */
    position: fixed; 
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #050505;
    z-index: 99999; /* Highest priority */
    display: flex; 
    justify-content: center; 
    align-items: center;
    
    /* The Reveal Effect (Circle Wipe) */
    clip-path: circle(150% at 50% 50%);
    transition: clip-path 1.2s cubic-bezier(0.85, 0, 0.15, 1);
}

.cld-intro-hidden { 
    clip-path: circle(0% at 50% 50%); 
    pointer-events: none; 
}

.cld-intro-text {
    font-size: clamp(60px, 15vw, 200px);
    font-weight: 800; 
    text-transform: uppercase; 
    color: #fff;
    position: absolute; 
    opacity: 0;
    transform: scale(0.9); 
    transition: all 0.5s ease;
}

.cld-text-show { opacity: 1; transform: scale(1); }
.cld-text-exit { opacity: 0; transform: scale(1.1); filter: blur(10px); }


/*  blogs  */


/* =========================================
   1. CORE VARIABLES & GLOBAL RESET
   ========================================= */
:root {
    --cld-bg: #ffffff;             /* Default White */
    --cld-bg-warm: #fdfbf7;        /* Warm Paper (For single posts) */
    --cld-line: #000000;           /* Pitch black lines */
    --cld-text: #121212;
    --cld-accent: #FD5B38;         /* International Orange */
    --cld-font-main: "Plus Jakarta Sans", sans-serif;
}

body { margin: 0; padding: 0; }

/* Base Section Style */
.cld-blog-section {
    padding: 100px 0;
    background-color: var(--cld-bg);
    color: var(--cld-text);
    font-family: var(--cld-font-main);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* Modifier for Single Post Pages (Warm Background) */
.cld-blog-section.single-mode {
    background-color: var(--cld-bg-warm);
    padding: 0; /* Reset padding for full control */
}
.cld-blog-section.single-mode .container {
    padding-top: 80px; 
    padding-bottom: 120px;
}

/* Grid Background Pattern */
.cld-grid-background {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
    z-index: 0; pointer-events: none;
}

/* Ensure content sits above the grid */
.cld-blog-section .container { position: relative; z-index: 2; }


/* =========================================
   2. HERO HEADER (Shared)
   ========================================= */
.cld-hero-header {
    margin-bottom: 80px;
    border-bottom: 4px solid var(--cld-line); 
    padding-bottom: 40px;
}

.cld-hero-sub {
    font-family: monospace; font-size: 14px; letter-spacing: 2px;
    text-transform: uppercase; display: block; margin-bottom: 20px; color: var(--cld-accent);
}

.cld-hero-title {
    font-size: 90px; font-weight: 800; line-height: 0.9;
    text-transform: uppercase; margin: 0; letter-spacing: -3px; word-spacing: 10px;
}

/* Breadcrumbs (Single Page Only) */
.cld-breadcrumbs {
    font-family: monospace; font-size: 12px; text-transform: uppercase;
    color: #888; margin-bottom: 20px; display: flex; gap: 10px;
}
.cld-breadcrumbs a { color: var(--cld-text); text-decoration: none; font-weight: 700; }
.cld-breadcrumbs span { color: var(--cld-accent); }


/* =========================================
   3. LISTING PAGE STYLES (blog.php)
   ========================================= */

/* Filter Bar */
.cld-filter-bar { margin-bottom: 40px; border-bottom: 1px solid #000; padding-bottom: 20px; }
.cld-filter-btn {
    display: inline-block; padding: 8px 16px; margin-right: 10px; margin-bottom: 10px;
    border: 1px solid #000; background: transparent; cursor: pointer;
    font-family: monospace; text-transform: uppercase; font-size: 14px; transition: 0.3s;
}
.cld-filter-btn:hover, .cld-filter-btn.active { background: #000; color: #fff; }

/* Feed Animation */
.cld-feed-container { min-height: 200px; transition: min-height 0.3s ease; }
.cld-filter-item { display: none; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; }
.cld-filter-item.visible { opacity: 1; transform: translateY(0); }

/* Post Row */
.cld-post-row {
    display: flex; align-items: stretch; border-bottom: 1px solid var(--cld-line);
    padding: 60px 0; transition: background 0.3s; position: relative;
    background: transparent;
}
.cld-post-row:hover { background: #f4f4f4; }

/* Post Row Columns */
.cld-row-meta {
    width: 15%; padding-right: 20px; display: flex; flex-direction: column;
    justify-content: space-between; border-right: 1px solid var(--cld-line);
    font-family: monospace; font-size: 14px;
}
.cld-row-date { display: block; margin-bottom: 10px; color: #666; }
.cld-row-cat { 
    display: inline-block; text-transform: uppercase; font-weight: 700; 
    color: var(--cld-text); border: 1px solid var(--cld-line); padding: 2px 8px;
    text-align: center; width: fit-content;
}

.cld-row-content { width: 45%; padding: 0 40px; display: flex; flex-direction: column; justify-content: center; }
.cld-row-title { font-size: 42px; font-weight: 700; line-height: 1.1; margin-bottom: 20px; text-transform: uppercase; }
.cld-row-title a {
    text-decoration: none; color: var(--cld-text);
    background: linear-gradient(to right, var(--cld-text) 0%, var(--cld-text) 100%);
    background-size: 0% 3px; background-repeat: no-repeat; background-position: left bottom;
    transition: background-size 0.4s ease;
}
.cld-post-row:hover .cld-row-title a { background-size: 100% 3px; }
.cld-row-excerpt { font-size: 16px; line-height: 1.6; color: #555; max-width: 90%; }

.cld-read-link {
    margin-top: 25px; font-weight: 800; text-transform: uppercase; font-size: 12px;
    letter-spacing: 2px; text-decoration: none; color: var(--cld-text);
    border-bottom: 2px solid var(--cld-accent); display: inline-flex; align-items: center;
    gap: 10px; width: fit-content; padding-bottom: 5px; transition: 0.3s;
}
.cld-read-link:hover { color: var(--cld-accent); gap: 15px; }

.cld-row-image {
    width: 40%; height: 300px; overflow: hidden; position: relative;
    border: 1px solid var(--cld-line); filter: grayscale(100%); transition: all 0.5s ease;
}
.cld-row-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.cld-post-row:hover .cld-row-image { filter: grayscale(0%); }
.cld-post-row:hover .cld-row-image img { transform: scale(1.1); }

/* Animation Header */
.cld-animate-item { opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
.cld-animate-item.visible { opacity: 1; transform: translateY(0); }

/* Pagination */
.cld-pagination { 
    margin-top: 80px; border-top: 4px solid var(--cld-line); padding-top: 40px; 
    display: flex; justify-content: space-between; align-items: center; 
}
.cld-pg-btn { font-size: 24px; font-weight: 700; text-decoration: none; color: var(--cld-text); text-transform: uppercase; }
.cld-pg-btn:hover { color: var(--cld-accent); }
.cld-pg-nums { font-family: monospace; font-size: 18px; }


/* =========================================
   4. SINGLE POST LAYOUT (Standard Article)
   ========================================= */

/* Reading Progress Bar */
.cld-read-progress {
    position: fixed; top: 0; left: 0; height: 4px; background: var(--cld-accent);
    z-index: 9999; width: 0%; transition: width 0.1s;
}

/* Layout Wrapper */
.cld-single-layout { display: flex; flex-wrap: wrap; position: relative; }

/* Sidebar */
.cld-meta-sidebar { width: 25%; padding-right: 40px; border-right: 1px solid var(--cld-line); }
.cld-sticky-wrapper { position: sticky; top: 100px; }

.cld-toc-header {
    font-family: monospace; font-size: 12px; color: #888;
    text-transform: uppercase; margin-bottom: 20px; letter-spacing: 1px; font-weight: 700;
}
.cld-toc-list { list-style: none; padding: 0; border-left: 1px solid #ddd; margin-bottom: 40px; }
.cld-toc-item a {
    display: block; padding: 8px 0 8px 15px; font-family: monospace; font-size: 13px;
    color: var(--cld-text); text-decoration: none; transition: 0.2s;
    border-left: 2px solid transparent; margin-left: -1px;
}
.cld-toc-item a:hover { color: var(--cld-accent); font-weight: 700; border-left-color: var(--cld-accent); }

/* Main Content Area */
.cld-article-content { width: 75%; padding-left: 60px; }
.cld-featured-media {
    width: 100%; height: 500px; border: 1px solid var(--cld-line);
    margin-bottom: 60px; overflow: hidden;
}
.cld-featured-media img { width: 100%; height: 100%; object-fit: cover; }

/* Typography */
.entry-content { max-width: 850px; font-size: 20px; line-height: 1.7; color: #222; }
.lead-text { font-size: 26px; font-weight: 500; color: var(--cld-text); margin-bottom: 40px; line-height: 1.5; }
.entry-content p { margin-bottom: 30px; }
.entry-content h2 {
    font-size: 42px; font-weight: 800; text-transform: uppercase;
    margin-top: 70px; margin-bottom: 30px; letter-spacing: -1px;
    padding-top: 20px; border-top: 1px solid #eee;
}
.entry-content h3 { font-size: 24px; font-weight: 700; margin-top: 40px; margin-bottom: 20px; color: var(--cld-accent); }
.entry-content blockquote {
    border: 1px solid var(--cld-line); padding: 40px; margin: 50px 0;
    font-size: 26px; font-weight: 800; text-transform: uppercase;
    background: #f4f4f4; line-height: 1.2;
}
.entry-content ul { padding-left: 0; margin-bottom: 40px; }
.entry-content li {
    list-style: none; padding: 10px 0; border-bottom: 1px solid #eee;
    font-family: monospace; font-size: 16px; display: flex; gap: 15px;
}
.entry-content li::before { content: '→'; color: var(--cld-accent); font-weight: 700; }
.cld-internal-link { color: var(--cld-text); text-decoration: none; border-bottom: 2px solid var(--cld-accent); font-weight: 700; transition: 0.2s; }
.cld-internal-link:hover { background: var(--cld-accent); color: #fff; padding: 0 5px; }


/* =========================================
   5. THE ENGAGEMENT TOOLKIT (Modules used in all posts)
   ========================================= */

/* A. Executive Summary */
.cld-exec-summary { background: #f4f4f4; border-left: 6px solid var(--cld-accent); padding: 40px; margin-bottom: 50px; }
.cld-summary-title { font-family: monospace; font-size: 14px; text-transform: uppercase; color: var(--cld-accent); display: block; margin-bottom: 15px; font-weight: 700; letter-spacing: 1px;}
.cld-summary-list { margin: 0; padding: 0; list-style: none; }
.cld-summary-list li { font-size: 18px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; align-items: flex-start; }
.cld-summary-list li::before { content: '→'; margin-right: 15px; color: var(--cld-text); font-weight: 800;}

/* B. Definition Box */
.cld-definition-box { border-left: 6px solid var(--cld-text); padding: 40px; background: #f9f9f9; margin: 50px 0; }
.cld-def-label { font-family: monospace; font-size: 14px; color: #888; text-transform: uppercase; display: block; margin-bottom: 15px; letter-spacing: 1px;}
.cld-def-text { font-size: 24px; font-weight: 600; line-height: 1.4; color: var(--cld-text); font-style: italic; font-family: "Times New Roman", serif;}

/* C. Warning Box */
.cld-warning-box { background: var(--cld-line); color: #fff; padding: 50px; margin: 60px 0; position: relative; }
.cld-warning-icon { font-size: 14px; color: var(--cld-accent); margin-bottom: 20px; display: block; font-family: monospace; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.cld-warning-text { font-size: 20px; line-height: 1.6; font-weight: 500; margin: 0; position: relative; z-index: 2;}

/* D. Checklist Grid */
.cld-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 40px 0; }
.cld-check-item { border: 1px solid var(--cld-line); padding: 25px; display: flex; align-items: center; gap: 20px; transition: 0.2s; background: #fff; }
.cld-check-item:hover { background: var(--cld-accent); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-color: var(--cld-accent); }
.cld-check-box { width: 24px; height: 24px; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cld-check-box::after { content: ''; width: 10px; height: 10px; background: currentColor; opacity: 0; transition: 0.2s; }
.cld-check-item:hover .cld-check-box::after { opacity: 1; }

/* E. Channel/Info Grid */
.cld-channel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--cld-line); border: 1px solid var(--cld-line); margin: 60px 0; }
.cld-channel-card { background: #fff; padding: 40px; display: flex; flex-direction: column; transition: 0.2s; }
.cld-channel-card:hover { background: #f9f9f9; }
.cld-channel-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--cld-line); padding-bottom: 15px; margin-bottom: 20px; }
.cld-channel-name { font-weight: 800; text-transform: uppercase; font-size: 20px; }
.cld-channel-tag { font-family: monospace; font-size: 12px; background: var(--cld-accent); color: #fff; padding: 2px 6px; }
.cld-channel-desc { font-size: 16px; color: #555; line-height: 1.6; margin: 0; }

/* F. FAQ Section */
.cld-faq-container { margin-top: 80px; border-top: 4px solid var(--cld-line); padding-top: 60px; }
.cld-faq-title { font-size: 36px; font-weight: 800; text-transform: uppercase; margin-bottom: 40px; letter-spacing: -1px; }
.cld-faq-item { margin-bottom: 30px; border: 1px solid #eee; padding: 30px; background: #fff; transition: 0.3s; }
.cld-faq-item:hover { border-color: var(--cld-accent); }
.cld-faq-q { font-size: 20px; font-weight: 700; color: var(--cld-text); margin-bottom: 15px; display: block; }
.cld-faq-q::before { content: 'Q: '; color: var(--cld-accent); font-family: monospace; }
.cld-faq-a { font-size: 16px; line-height: 1.7; color: #555; margin: 0; }

/* G. Call to Action (CTA) */
.cld-brand-cta { background: var(--cld-line); color: #fff; padding: 60px; margin: 80px 0; text-align: center; border: 1px solid var(--cld-line); }
.cld-cta-title { font-size: 36px; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; color: #fff; }
.cld-cta-form { display: flex; max-width: 500px; margin: 30px auto 0; border: 1px solid #fff; }
.cld-cta-input { flex: 1; background: transparent; border: none; padding: 20px; color: #fff; outline: none; font-family: monospace; }
.cld-cta-btn { background: #fff; color: var(--cld-line); border: none; padding: 0 40px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: 0.3s; }
.cld-cta-btn:hover { background: var(--cld-accent); color: #fff; }


/* =========================================
   6. NICHE MODULES (Specific to certain categories)
   ========================================= */

/* Branding: History Timeline */
.cld-history-wrapper { margin: 60px 0; border-top: 1px solid var(--cld-line); }
.cld-history-row { display: flex; border-bottom: 1px solid var(--cld-line); padding: 35px 0; transition: 0.3s; }
.cld-history-row:hover { background: #f4f4f4; padding-left: 20px; }
.cld-history-year { width: 100px; font-family: monospace; font-size: 16px; color: var(--cld-accent); font-weight: 700; flex-shrink: 0; padding-top: 5px; }
.cld-history-content h4 { font-size: 22px; font-weight: 800; text-transform: uppercase; margin: 0 0 10px 0; line-height: 1; }
.cld-history-content p { font-size: 18px; margin: 0; color: #555; line-height: 1.6; }

/* Branding: Atomic Matrix */
.cld-atomic-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-left: 1px solid var(--cld-line); border-top: 1px solid var(--cld-line); margin: 60px 0; }
.cld-atomic-item { border-right: 1px solid var(--cld-line); border-bottom: 1px solid var(--cld-line); padding: 40px; min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; transition: 0.3s; }
.cld-atomic-item:hover { background: var(--cld-line); color: #fff; }
.cld-atomic-item:hover .cld-atomic-icon { color: #fff; }
.cld-atomic-icon { font-size: 24px; color: var(--cld-accent); margin-bottom: 20px; }
.cld-atomic-label { font-family: monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 10px; }
.cld-atomic-desc { font-size: 16px; line-height: 1.6; margin: 0; }

/* Development: Code Manifest */
.cld-code-manifest { background: #1a1a1a; color: #00ff00; border: 1px solid #000; padding: 40px; font-family: monospace; font-size: 14px; margin: 60px 0; position: relative; border-radius: 4px; }
.cld-code-title { display: block; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; color: #fff; border-bottom: 1px dashed #555; padding-bottom: 10px;}
.cld-code-line { display: block; margin-bottom: 10px; }
.cld-code-line::before { content: '> system.log: '; color: #555; }

/* Marketing: Algo Flow */
.cld-algo-step { border-left: 2px solid var(--cld-accent); padding-left: 30px; margin-left: 20px; padding-bottom: 40px; position: relative; }
.cld-algo-step::before { content: ''; position: absolute; left: -6px; top: 0; width: 10px; height: 10px; background: #fff; border: 2px solid var(--cld-accent); }
.cld-algo-step:last-child { border-left: 2px dashed #ddd; }
.cld-algo-title { font-family: monospace; font-size: 14px; text-transform: uppercase; color: var(--cld-accent); margin-bottom: 10px; display: block; font-weight: 700; }

/* Marketing: Data Viz */
.cld-stat-block { margin: 60px 0; border: 1px solid var(--cld-line); padding: 40px; background: #fff; }
.cld-stat-row { margin-bottom: 25px; }
.cld-stat-label { display: flex; justify-content: space-between; font-family: monospace; font-size: 13px; margin-bottom: 10px; text-transform: uppercase; font-weight: 700; }
.cld-stat-bar-bg { width: 100%; height: 24px; background: #f0f0f0; border: 1px solid var(--cld-line); }
.cld-stat-bar-fill { height: 100%; background: var(--cld-accent); display: block; }

.cld-metric-box { background: #111; color: #fff; padding: 40px; font-family: monospace; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 50px 0; }
.cld-metric-item span { display: block; color: #888; font-size: 12px; margin-bottom: 5px; }
.cld-metric-item strong { display: block; font-size: 32px; color: #00ff00; }


/* =========================================
   7. RESPONSIVE (MOBILE)
   ========================================= */
@media (max-width: 991px) {
    /* Layout */
    .cld-single-layout { flex-direction: column; }
    .cld-meta-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--cld-line); padding-bottom: 30px; margin-bottom: 40px; }
    .cld-sticky-wrapper { position: relative; top: 0; }
    .cld-article-content { width: 100%; padding-left: 0; }
    
    /* Post Row */
    .cld-hero-title { font-size: 48px; }
    .cld-post-row { flex-direction: column; padding: 40px 0; }
    .cld-row-meta { width: 100%; border-right: none; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; flex-direction: row; align-items: center;}
    .cld-row-content { width: 100%; padding: 0; margin-bottom: 30px; }
    .cld-row-image { width: 100%; height: 250px; filter: grayscale(0%); }
    .cld-row-title { font-size: 28px; }

    /* Modules */
    .cld-checklist { grid-template-columns: 1fr; }
    .cld-cta-form { flex-direction: column; }
    .cld-cta-btn { width: 100%; padding: 20px; }
    .cld-channel-grid, .cld-metric-box { grid-template-columns: 1fr; }
    .cld-atomic-grid, .cld-history-row { flex-direction: column; grid-template-columns: 1fr; }
    .cld-history-year { margin-bottom: 10px; }
}

/*  Career page  */

/* =========================================
   CLOUDDITOR CAREER (cld-cr) - DETAILED VERSION
   ========================================= */

:root {
    --cld-cr-black: #111111;
    --cld-cr-white: #ffffff;
    --cld-cr-orange: #FF5500;
    --cld-cr-gray: #f4f4f4;
    --cld-cr-border: #e0e0e0;
}

/* --- MAIN SECTION --- */
/* --- UPDATED SECTION WITH GRID BACKGROUND --- */
.cld-cr-section {
    padding: 100px 0;
    background-color: var(--cld-cr-white);
    
    /* 1. The Grid Pattern */
    background-image:
        linear-gradient(to right, rgba(17, 17, 17, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(17, 17, 17, 0.05) 1px, transparent 1px);
        
    /* 2. Grid Size (Change 40px to make squares bigger/smaller) */
    background-size: 40px 40px; 
    
    position: relative;
    z-index: 1;
}

.cld-cr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

/* --- JOB CARD (Preview) --- */
.cld-cr-card {
    background: var(--cld-cr-white);
    border: 1px solid var(--cld-cr-border);
    padding: 40px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 320px;
}

.cld-cr-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: var(--cld-cr-black);
}

.cld-cr-dept-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cld-cr-orange);
    margin-bottom: 15px;
    display: block;
}

.cld-cr-card-title {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 20px 0;
    color: var(--cld-cr-black);
}

.cld-cr-card-meta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 30px;
    display: flex;
    gap: 20px;
}
.cld-cr-card-meta span { display: flex; align-items: center; gap: 5px; }

/* View Button */
.cld-cr-btn-view {
    background: transparent;
    border: 1px solid var(--cld-cr-black);
    color: var(--cld-cr-black);
    padding: 15px 0;
    width: 100%;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.3s;
}
.cld-cr-btn-view:hover { background: var(--cld-cr-black); color: var(--cld-cr-white); }


/* --- THE POPUP MODAL (Detailed) --- */
.cld-cr-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999;
    background: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: flex-start; /* Align to top so we can scroll long content */
    padding: 40px 20px;
    overflow-y: auto; /* Allow overlay to scroll */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cld-cr-modal-overlay.active { display: flex; opacity: 1; }

.cld-cr-modal-box {
    background: var(--cld-cr-white);
    width: 100%;
    max-width: 1000px;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    margin: auto 0; /* Centers vertically if short, scrolls if long */
    transform: translateY(30px);
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
}

.cld-cr-modal-overlay.active .cld-cr-modal-box { transform: translateY(0); }

/* Modal Header */
.cld-cr-modal-header {
    background: var(--cld-cr-black);
    color: var(--cld-cr-white);
    padding: 50px;
    position: relative;
}

.cld-cr-close {
    position: absolute;
    top: 30px; right: 30px;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; transition: 0.3s;
}
.cld-cr-close:hover { background: var(--cld-cr-orange); transform: rotate(90deg); }

/* Modal Grid Layout (Sidebar + Content) */
.cld-cr-modal-layout {
    display: grid;
    grid-template-columns: 280px 1fr; /* Sidebar | Content */
    border-bottom: 1px solid var(--cld-cr-border);
}

/* Sidebar (Meta Info) */
.cld-cr-modal-sidebar {
    background: var(--cld-cr-gray);
    padding: 40px;
    border-right: 1px solid var(--cld-cr-border);
}

.cld-cr-meta-item { margin-bottom: 25px; }
.cld-cr-meta-label { 
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; 
    color: #888; display: block; margin-bottom: 5px; 
}
.cld-cr-meta-value { 
    font-size: 1rem; font-weight: 600; color: var(--cld-cr-black); display: block; 
}

/* Main Content Area */
.cld-cr-modal-content { padding: 50px; }

.cld-cr-section-title {
    font-size: 1.2rem; font-weight: 800; text-transform: uppercase;
    color: var(--cld-cr-black); margin: 40px 0 20px; padding-bottom: 10px;
    border-bottom: 2px solid var(--cld-cr-border);
}
.cld-cr-section-title:first-child { margin-top: 0; }

.cld-cr-sub-title {
    font-size: 1rem; font-weight: 700; margin: 25px 0 10px; color: var(--cld-cr-orange);
}

.cld-cr-text { font-size: 1.05rem; line-height: 1.7; color: #444; margin-bottom: 20px; }

.cld-cr-list-ul { padding-left: 20px; margin: 0; }
.cld-cr-list-ul li { margin-bottom: 10px; color: #444; line-height: 1.6; }

/* Modal Footer */
.cld-cr-modal-footer {
    padding: 30px;
    text-align: center;
    background: var(--cld-cr-white);
}

.cld-cr-apply-btn {
    background: var(--cld-cr-orange);
    color: white;
    padding: 18px 60px;
    font-size: 1rem; font-weight: 800; text-transform: uppercase;
    text-decoration: none; display: inline-block;
    transition: 0.3s;
}
.cld-cr-apply-btn:hover { background: var(--cld-cr-black); transform: translateY(-2px); }

/* Responsive */
@media (max-width: 991px) {
    .cld-cr-modal-layout { grid-template-columns: 1fr; }
    .cld-cr-modal-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-right: none; border-bottom: 1px solid var(--cld-cr-border); }
}
@media (max-width: 600px) {
    .cld-cr-modal-sidebar { grid-template-columns: 1fr; }
    .cld-cr-modal-header { padding: 30px; }
    .cld-cr-modal-content { padding: 30px; }
}



/* Portfolio Page */

/* --- Base Layout --- */
.cld-clean-section {
    padding: 100px 0;
    background-color: #f8f9fa;
    font-family: 'Inter', system-ui, sans-serif;
    position: relative;
    overflow: hidden;
}
.cld-container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }

/* --- Header & Tabs --- */
.cld-top-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-bottom: 50px; 
    border-bottom: 1px solid rgba(0,0,0,0.08); 
    padding-bottom: 20px;
    flex-wrap: wrap; 
    gap: 20px;
}
.cld-heading { font-size: 50px; font-weight: 800; color: #111; margin: 0; line-height: 1; }
.cld-heading span { color: #aaa; font-weight: 400; }
.cld-super-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #6366f1; letter-spacing: 2px; display: block; margin-bottom: 10px; }

/* Filter Scroll Wrapper (For Mobile) */
.cld-filters-wrapper { overflow-x: auto; padding-bottom: 5px; -webkit-overflow-scrolling: touch; }
.cld-filters { display: flex; gap: 8px; white-space: nowrap; }

/* Tabs */
.cld-tab { 
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    background: #fff; border: 1px solid #000; padding: 10px 24px; border-radius: 100px; 
    font-size: 13px; font-weight: 600; color: #000; cursor: pointer; transition: all 0.3s ease; 
}
.cld-tab:hover, .cld-tab.active { background: #000; color: #fff; }

/* --- Grid System --- */
.cld-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    min-height: 500px;
}

/* --- Card Design --- */
.cld-item-wrap { perspective: 1000px; z-index: 1; }
.cld-magnet-area { display: block; width: 100%; height: 100%; position: relative; cursor: pointer; }

/* THE CARD CONTAINER */
.cld-clean-card {
    position: relative; /* Essential reference for absolute positioning */
    border-radius: 16px;
    overflow: hidden;
    height: 420px; 
    background: #e5e5e5;
    transition: transform 0.1s ease-out, box-shadow 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transform-style: preserve-3d;
    will-change: transform; 
}

/* THE IMAGE */
.cld-clean-card > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    position: relative;
    z-index: 1; /* Lowest layer */
}

/* THE GRADIENT OVERLAY (Middle Layer) */
.cld-overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 0 0 16px 16px;
    z-index: 10; /* Middle layer */
}

/* --- CLIENT INFO (Top Layer) --- */
.cld-card-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 20;            /* Top layer - above image and gradient */
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: 80%;
    pointer-events: none;   /* Allows clicks to pass through to the card */
}

/* LOGO FIXES */
.cld-mini-logo {
    display: block;
    width: 36px !important;       /* Strict width */
    height: 36px !important;      /* Strict height */
    min-width: 36px !important;   /* Prevents squishing into an oval */
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    object-fit: cover;            /* Crops rectangular logos into circles */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* TEXT FIXES */
.cld-client-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff !important;       /* Force white */
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;      /* Adds "..." if name is too long */
}

/* --- Expand Indicator --- */
.cld-expand-indicator {
    position: absolute; bottom: 20px; right: 20px;
    width: 50px; height: 50px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; opacity: 0; transform: scale(0.6);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 20; /* Top layer */
}

/* --- Hover Effects (Desktop) --- */
@media (min-width: 992px) {
    .cld-magnet-area:hover .cld-clean-card > img { transform: scale(1.08); }
    .cld-magnet-area:hover .cld-clean-card { box-shadow: 0 30px 60px rgba(0,0,0,0.15); }
    
    .cld-magnet-area:hover .cld-expand-indicator {
        opacity: 1; transform: scale(1.1); background: #fff; color: #000; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    
    /* Slight lift animation for text */
    .cld-magnet-area:hover .cld-card-info {
        transform: translateY(-5px);
    }
}

/* --- Fullscreen Modal --- */
.cld-modal { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.95); z-index: 9999; 
    display: flex; align-items: center; justify-content: center; 
    opacity: 0; visibility: hidden; transition: all 0.4s ease; padding: 20px;
}
.cld-modal.active { opacity: 1; visibility: visible; }
.cld-modal-content { 
    width: auto; height: auto; max-width: 100%; max-height: 100%; 
    display: flex; align-items: center; justify-content: center;
    transform: scale(0.95); transition: transform 0.4s ease; 
}
.cld-modal.active .cld-modal-content { transform: scale(1); }
#cld-modal-img { 
    max-width: 90vw; max-height: 85vh; object-fit: contain; 
    border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
}
.cld-close-btn { 
    position: absolute; top: 20px; right: 30px; 
    background: transparent; border: none; color: #fff; font-size: 40px; 
    cursor: pointer; line-height: 1; opacity: 0.7; z-index: 10000;
}

/* --- RESPONSIVE BREAKPOINTS --- */

/* Standard Laptops (1200px - 1400px) */
@media (max-width: 1399px) {
    .cld-container { max-width: 1140px; }
    .cld-clean-card { height: 380px; } 
    .cld-heading { font-size: 45px; }
}

/* Small Laptops / Landscape Tablets (992px - 1199px) */
@media (max-width: 1199px) {
    .cld-grid-layout { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .cld-clean-card { height: 340px; }
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
    .cld-grid-layout { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .cld-clean-card { height: 320px; }
    .cld-top-bar { display: block; }
    .cld-filters { margin-top: 20px; }
}

/* Mobile (Under 600px) */
@media (max-width: 600px) {
    .cld-container { padding: 0 20px; }
    .cld-heading { font-size: 36px; }
    .cld-grid-layout { grid-template-columns: 1fr; gap: 20px; }
    .cld-clean-card { height: 300px; }
    
    /* Ensure arrow is always visible on mobile */
    .cld-expand-indicator { 
        opacity: 1; transform: scale(1); 
        background: rgba(255, 255, 255, 0.9); color: #000; 
        bottom: 15px; right: 15px; 
    }
    
    /* MOBILE TEXT & LOGO ADJUSTMENTS */
    .cld-card-info {
        bottom: 15px;
        left: 15px;
        max-width: 65%;
    }
    .cld-mini-logo {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important; /* Critical for mobile too */
    }
    .cld-client-name {
        font-size: 13px;
    }
}

/* --- New Text Grouping --- */
.cld-text-group {
    display: flex;
    flex-direction: column; /* Stacks name and desc vertically */
    justify-content: center;
    line-height: 1.2;       /* Tighter spacing */
}

/* --- Description Style --- */
.cld-client-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85); /* Slightly transparent white */
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Mobile Adjustment --- */
@media (max-width: 600px) {
    .cld-client-desc {
        font-size: 10px; /* Smaller on mobile */
    }
}

/* --- Popular Tag Style --- */
.cld-popular-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 30; /* Higher than the info and gradient */
    background: #6366f1; /* Using your 'Our Works' accent color */
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 50px;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    pointer-events: none;
    transition: transform 0.3s ease;
}

/* Ensure tag doesn't scale too much when the card is hovered */
.cld-magnet-area:hover .cld-popular-tag {
    transform: translateY(-2px);
    background: #4f46e5; /* Slightly darker on hover */
}

/* Mobile Adjustment */
@media (max-width: 600px) {
    .cld-popular-tag {
        top: 10px;
        left: 10px;
        padding: 4px 10px;
        font-size: 9px;
    }
}