/* Filename: homepage-styles.css */

/* =========================================
   1. GLOBAL VARIABLES
   ========================================= */
:root {
    /* --- HERO VARIABLES --- */
    --hero-bg-gradient: linear-gradient(135deg, hsl(220 13% 12%) 0%, hsl(220 8% 18%) 50%, hsl(220 13% 10%) 100%);
    --hero-primary: #00a859; /* Emerald Green */
    --hero-primary-glow: rgba(0, 168, 89, 0.4);
    --hero-text-main: #f1f5f9;
    --hero-text-muted: #CCCED0;
    --hero-grid-color: hsla(152, 100%, 40%, 0.05);

    /* --- FOUNDER VARIABLES (Slate Theme) --- */
    --founder-bg: #E2E4E9; 
    --founder-text: #1e293b;
    --founder-text-muted: #64748b;
    --founder-primary: #00a859;
    --founder-border: rgba(0, 0, 0, 0.1);
}

/* =========================================
   2. HERO SECTION CORE
   ========================================= */
.ybm-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #000000; /* Pure Black Fallback */
    font-family: 'Inter', sans-serif;
}

/* --- VIDEO BACKGROUND --- */
.ybm-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* --- PURE BLACK CINEMATIC OVERLAY --- */
.ybm-hero-overlay {
    position: absolute;
    inset: 0;
    /* Darker on the left (95%) for text contrast, fading to 40% on the right */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.95) 25%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 2;
}

.ybm-cad-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(var(--hero-grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--hero-grid-color) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.2;
    z-index: 3;
    pointer-events: none;
}

.ybm-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 10;
}

.ybm-hero-content {
    max-width: 800px;
}

/* =========================================
   3. COMPACT ISO PILL BADGE
   ========================================= */
.ybm-iso-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px 8px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.ybm-iso-pill-badge:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--ybm-primary);
    transform: translateY(-2px);
}

.ybm-pill-seal {
    width: 38px;
    height: 38px;
    color: var(--ybm-primary);
}

.ybm-pill-seal svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ybm-pill-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.pill-title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
}

.pill-subtitle {
    font-size: 10px;
    font-weight: 500;
    color: var(--ybm-primary);
    text-transform: uppercase;
}

/* =========================================
   4. TYPOGRAPHY
   ========================================= */
.ybm-hero-title {
    font-size: clamp(36px, 4.5vw, 68px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--hero-text-main);
    margin-bottom: 24px;
}

.ybm-text-gradient {
    background: linear-gradient(135deg, #00a859 0%, #4ade80 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ybm-hero-subtitle {
    font-size: 18px;
    color: var(--hero-text-muted);
    max-width: 600px;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* =========================================
   5. INTERACTIVE STATS
   ========================================= */
.ybm-micro-stats {
    display: flex;
    align-items: center;
    margin-bottom: 45px;
    flex-wrap: wrap;
}

.ybm-stat-item {
    text-align: left;
}

.ybm-stat-number, 
.ybm-stat-plus {
    font-size: 34px;
    font-weight: 700;
    color: var(--ybm-primary);
}

.ybm-stat-label {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    margin: 2px 0 0 0;
}

.ybm-stat-sub {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
}

.ybm-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 25px;
}

/* =========================================
   6. BUTTONS
   ========================================= */
.ybm-hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ybm-btn {
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- PRIMARY BUTTON --- */
.ybm-btn-primary {
    background-color: var(--ybm-primary) !important;
    color: #fff !important;
    border: 1px solid var(--ybm-primary) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 168, 89, 0.3);
}

.ybm-btn-primary:hover {
    background-color: #00b862 !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -6px rgba(0, 168, 89, 0.5) !important;
}

/* --- OUTLINE BUTTON --- */
.ybm-btn-outline {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: var(--ybm-primary) !important; /* Brand Green Text */
    backdrop-filter: blur(10px);
}

.ybm-btn-outline:hover {
    border-color: #fff !important;
    color: #4ade80 !important; /* Lighter Green */
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-3px);
}

/* =========================================
   7. ANIMATIONS & RESPONSIVE
   ========================================= */
.animate-fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

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

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .ybm-container {
        padding: 0 20px;
    }
    .ybm-stat-divider {
        margin: 0 15px;
    }
    .ybm-hero-title {
        font-size: 36px;
    }
}
/* =========================================
   3. FOUNDER SECTION (Slate/Double Bracket Style)
   ========================================= */
.ybm-founder-section {
    position: relative;
    padding: 100px 0;
    background-color: var(--founder-bg); /* #f8fafc */
    overflow: visible !important;
    font-family: 'Inter', sans-serif;
}

.ybm-founder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

/* --- LEFT SIDE: IMAGE STACK --- */
.ybm-founder-image-wrapper {
    position: relative;
    padding: 20px; 
}

.ybm-founder-img-box {
    position: relative;
    border-radius: 16px; 
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    aspect-ratio: 4/5;
    z-index: 10;
    background: #1f2937;
}

.ybm-founder-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.7s ease;
}
.ybm-founder-image-wrapper:hover .ybm-founder-img { transform: scale(1.02); }

/* Overlays */
.ybm-img-overlay-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(0, 168, 89, 0.1) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 168, 89, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.3; z-index: 15;
}
.ybm-img-gradient {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    z-index: 16;
}

/* DECORATIVE CORNERS (L-Brackets) */
.ybm-corner-decor {
    position: absolute; width: 80px; height: 80px;
    border: 4px solid var(--founder-primary);
    z-index: 5; pointer-events: none;
}
.corner-top-left {
    top: 0; left: 0; 
    margin-top: -16px; margin-left: -16px; 
    border-right: none; border-bottom: none;
    border-top-left-radius: 16px;
}
.corner-bottom-right {
    bottom: 0; right: 0;
    margin-bottom: -16px; margin-right: -16px; 
    border-left: none; border-top: none;
    border-bottom-right-radius: 16px;
}

/* Video Toggle Support */
.ybm-founder-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; visibility: hidden;
    z-index: 20; transition: opacity 0.4s ease-in-out;
}
.ybm-founder-img-box.is-playing .ybm-founder-video {
    opacity: 1; visibility: visible;
}

/* --- RIGHT SIDE: CONTENT --- */
.ybm-pill-label {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(0, 168, 89, 0.1);
    color: var(--founder-primary);
    border-radius: 50px;
    font-size: 14px; font-weight: 600;
    margin-bottom: 20px;
}

.ybm-founder-heading {
    font-size: clamp(32px, 3vw, 48px);
    font-weight: 800;
    color: var(--founder-text);
    line-height: 1.1;
    margin-bottom: 24px;
}
.ybm-text-gradient { 
    color: var(--founder-primary); 
    background: linear-gradient(135deg, #00a859 0%, #4ade80 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.ybm-founder-desc {
    font-size: 18px;
    color: var(--founder-text-muted);
    line-height: 1.7;
    margin-bottom: 30px;
}
.text-highlight { color: var(--founder-primary); font-weight: 600; }

/* Expertise */
.ybm-expertise-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-bottom: 40px;
}
.ybm-expertise-item {
    display: flex; align-items: center; gap: 10px;
    color: var(--founder-text-muted); font-weight: 500; font-size: 16px;
}
.ybm-dot {
    width: 8px; height: 8px; background: var(--founder-primary); border-radius: 50%; flex-shrink: 0;
}

/* Audio Player */
.ybm-audio-card {
    display: flex; align-items: center; gap: 16px;
    background: white;
    border: 1px solid var(--founder-border);
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}
.ybm-play-btn {
    width: 48px; height: 48px;
    background: var(--founder-primary);
    border-radius: 50%;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: white; flex-shrink: 0;
    transition: 0.2s;
    box-shadow: 0 4px 10px rgba(0, 168, 89, 0.3);
}
.ybm-play-btn:hover { background: #008f4c; transform: scale(1.05); }
.ybm-play-btn svg { width: 20px; height: 20px; fill: white; stroke: white; }

.ybm-audio-info p { margin: 0; line-height: 1.4; }
.ybm-audio-title { font-weight: 600; color: var(--founder-text); font-size: 15px; }
.ybm-audio-sub { font-size: 13px; color: var(--founder-text-muted); }
.ybm-audio-time { font-family: monospace; color: var(--founder-text-muted); font-size: 14px; margin-left: auto; }

/* Signature */
.ybm-signature-block {
    margin-top: 32px; /* Space from audio player */
    padding-top: 24px;
    border-top: 1px solid #e5e7eb; /* Subtle divider line */
}

.ybm-signature {
    /* Using bold italic Inter for a clean, strong signature look */
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 500; 
    font-style: italic;
    color: var(--ybm-primary); /* Brand Green */
    margin: 0 0 6px 0;
    line-height: 1.1;
}

.ybm-role {
    font-size: 13px;
    font-weight: 700;
    color: #9ca3af; /* Lighter muted grey */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em; /* Spaced out letters */
}

/* Responsive */
@media (max-width: 1024px) {
    .ybm-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .ybm-hero-subtitle { margin: 0 auto 40px auto; }
    .ybm-hero-buttons { justify-content: center; }
    .ybm-trust-badges { justify-content: center; }
    
    .ybm-founder-grid { grid-template-columns: 1fr; gap: 50px; }
    .ybm-founder-image-wrapper { max-width: 500px; margin: 0 auto; padding: 20px; }
    .ybm-founder-heading, .ybm-founder-desc { text-align: center; }
    .ybm-pill-label { margin: 0 auto 20px auto; display: block; width: fit-content; }
    .ybm-signature-block { text-align: center; }
}
/* =========================================
   4. SERVICES SECTION (New Addition)
   ========================================= */
.ybm-services-section {
    position: relative;
    padding: 100px 0;
    /* Dark gradient matching the Hero section */
    background: linear-gradient(135deg, #16181D 0%, #26282B 50%, #111215 100%);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

/* Background Grid (Same faint grid as Hero) */
.ybm-services-grid-bg {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(0, 168, 89, 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 168, 89, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.2; pointer-events: none;
}

/* --- SECTION HEADER --- */
.ybm-services-header {
    text-align: center; max-width: 800px; margin: 0 auto 60px auto;
}
.ybm-pill-badge {
    display: inline-block; padding: 6px 16px;
    background: rgba(0, 168, 89, 0.2); color: var(--ybm-primary);
    border-radius: 50px; font-size: 13px; font-weight: 700;
    margin-bottom: 20px;
}
.ybm-services-title {
    font-size: clamp(32px, 4vw, 48px); font-weight: 800;
    color: white; line-height: 1.1; margin-bottom: 16px;
}
.ybm-text-gradient {
    background: linear-gradient(135deg, #00a859 0%, #4ade80 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.ybm-services-desc {
    font-size: 18px; color: #94a3b8; line-height: 1.6;
}

/* --- SERVICES GRID --- */
.ybm-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Equal Columns */
    gap: 32px;
    position: relative; z-index: 10;
}

.ybm-service-card {
    /* Exact Linear Gradient from Lovable index.css */
    /* linear-gradient(135deg, hsla(0, 0%, 100%, 0.08) 0%, hsla(0, 0%, 100%, 0.02) 100%) */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    
    /* The "Blur" Effect */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Thin transparent border */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Standard Layout Styles */
    border-radius: 16px;
    padding: 32px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    
    /* Animation Initial State */
    opacity: 0; transform: translateY(20px);
}

/* Ensure they are visible if JS runs (keep this if you already have it) */
.ybm-service-card.visible {
    opacity: 1; transform: translateY(0);
}

/* Hover Effect (Keep existing) */
.ybm-service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 168, 89, 0.5);
    box-shadow: 0 10px 40px -10px rgba(0, 168, 89, 0.2);
}

/* Icon Box */
.ybm-service-icon {
    width: 64px; height: 64px;
    border-radius: 12px;
    background: rgba(0, 168, 89, 0.1);
    color: var(--ybm-primary);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
    transition: all 0.4s ease;
}
.ybm-service-icon svg { width: 32px; height: 32px; stroke-width: 2px; }

/* Hover: Icon Rotate & Fill */
.ybm-service-card:hover .ybm-service-icon {
    background: var(--ybm-primary);
    color: white;
    transform: rotate(0deg) scale(1.1);
}

/* Card Text Content */
.ybm-card-title {
    font-size: 20px; font-weight: 700; color: white; margin-bottom: 16px;
}

.ybm-card-list {
    list-style: none; margin: 0 0 24px 0; padding: 0;
}

.ybm-card-list li {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; 
    color: #C3C6C7; /* Uniform Grey Text for all items */
    margin-bottom: 12px;
}

/* Bullet Dot */
.ybm-list-dot {
    width: 6px; height: 6px; 
    background: rgba(255,255,255,0.3); /* Uniform Grey Dot */
    border-radius: 50%; flex-shrink: 0;
}

/* ISO Badge */
.ybm-iso-badge {
    display: inline-flex; align-items: center; padding: 4px 12px;
    background: rgba(0, 168, 89, 0.1); color: var(--ybm-primary);
    border-radius: 50px; font-size: 12px; font-weight: 600;
    transition: 0.3s;
}
.ybm-service-card:hover .ybm-iso-badge {
    background: var(--ybm-primary); color: white;
}

/* Learn More Link */
.ybm-learn-more {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; 
    color: var(--ybm-primary); /* Default dark green */
    text-decoration: none; 
    margin-top: 24px;
    transition: transform 0.3s ease; /* Smooth movement */
}

.ybm-learn-more svg { 
    width: 16px; height: 16px; 
    transition: stroke 0.3s ease;
    stroke: var(--ybm-primary); 
}

/* HOVER STATE */
.ybm-learn-more:hover {
    /* Apply the Lovable Green Gradient to text */
    background: linear-gradient(135deg, hsl(152, 100%, 40%) 0%, hsl(152, 80%, 55%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Make text fill transparent so gradient shows through */
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    /* Move arrow slightly right */
    transform: translateX(5px); 
}

/* Fix for the Arrow Icon on Hover */
.ybm-learn-more:hover svg {
    /* Set icon to the bright end of the gradient (Solid color) */
    stroke: hsl(152, 80%, 55%); 
    
    /* Prevent the icon from disappearing due to text-fill-color: transparent */
    -webkit-text-fill-color: initial; 
}
/* Responsive */
@media (max-width: 1024px) {
    .ybm-services-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   CONTACT SECTION - MOBILE OPTIMIZED MASTER
   ============================================================ */

/* 1. SECTION WRAPPER & BACKGROUND */
.ybm-contact-wrapper {
    position: relative; 
    padding: 64px 0; /* Reduced padding for mobile */
    background-color: hsl(220, 13%, 8%); 
    font-family: 'Inter', sans-serif; 
    overflow: hidden;
}
@media (min-width: 1024px) {
    .ybm-contact-wrapper { padding: 120px 0; } /* Restored widescreen padding */
}

.ybm-contact-glow-tl { position: absolute; inset: 0; background: radial-gradient(ellipse at top left, hsla(152, 100%, 40%, 0.08), transparent 50%); z-index: 1; pointer-events: none; }
.ybm-contact-glow-br { position: absolute; inset: 0; background: radial-gradient(ellipse at bottom right, hsla(152, 100%, 40%, 0.06), transparent 50%); z-index: 1; pointer-events: none; }
.ybm-contact-cad-grid {
    position: absolute; inset: 0; opacity: 0.03; z-index: 1; pointer-events: none;
    background-image: linear-gradient(hsla(152, 100%, 40%, 1) 1px, transparent 1px), linear-gradient(90deg, hsla(152, 100%, 40%, 1) 1px, transparent 1px);
    background-size: 50px 50px; 
}

/* 2. DECORATIVE SVGS (Hidden on very small screens to save space) */
.ybm-contact-drawing { position: absolute; top: -20px; right: -20px; width: 280px; height: 280px; color: hsla(152, 100%, 40%, 0.05); }
.ybm-contact-flow-line { position: absolute; top: 25%; left: -16px; width: 120px; height: 300px; color: hsla(152, 100%, 40%, 0.06); }
.ybm-contact-dot { position: absolute; border-radius: 50%; border: 1px solid hsla(152, 100%, 40%, 0.1); }
@media (max-width: 768px) {
    .ybm-contact-drawing, .ybm-contact-flow-line { display: none; }
}

/* 3. TYPOGRAPHY & GRID SETUP */
.ybm-contact-heading {
    font-size: clamp(36px, 8vw, 72px) !important; /* Scales smoothly from mobile text-4xl to desktop text-6xl */
    font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; color: #fff !important; margin: 0 0 16px 0 !important;
}
.ybm-contact-grid-wide {
    display: grid; grid-template-columns: 1fr; 
    gap: 32px; /* Smaller gap on mobile */
    max-width: 1320px !important; margin: 0 auto; padding: 0 16px;
}
@media (min-width: 1024px) {
    .ybm-contact-grid-wide { grid-template-columns: 1.4fr 1fr; gap: 48px; }
}

/* 4. MAP & INFO CARDS */
.ybm-contact-info-col { display: flex; flex-direction: column; gap: 24px; }
.ybm-map-wrap { 
    border-radius: 16px; overflow: hidden; border: 1px solid hsla(220, 13%, 87%, 0.15); 
    height: 280px; box-shadow: 0 15px 30px hsla(220, 13%, 4%, 0.5);
}
@media (min-width: 1024px) { .ybm-map-wrap { height: 420px; border-radius: 20px; } }

.ybm-info-card { 
    background-color: hsl(220, 13%, 12%); border: 1px solid hsla(220, 13%, 87%, 0.15);
    border-radius: 12px; padding: 16px; display: flex; align-items: flex-start; gap: 16px; 
}
.ybm-info-grid-half { 
    display: grid; 
    grid-template-columns: 1fr; /* Stacks phone and email on mobile */
    gap: 16px; 
}
@media (min-width: 640px) {
    .ybm-info-grid-half { grid-template-columns: 1fr 1fr; } /* Side-by-side on tablets/desktop */
}
.ybm-icon-box { padding: 10px; background: hsla(152, 100%, 40%, 0.1); border-radius: 10px; flex-shrink: 0; }
.ybm-icon-box i, .ybm-icon-box svg { width: 20px !important; height: 20px !important; color: hsl(152, 100%, 40%); stroke: hsl(152, 100%, 40%); }

/* 5. CF7 FORM CORE STYLING */
.ybm-form-card {
    background-color: hsl(220, 13%, 12%); border: 1px solid hsla(220, 13%, 87%, 0.15); 
    border-radius: 16px; 
    padding: 24px !important; /* Smaller padding for mobile */
    z-index: 10; position: relative; overflow: hidden;
    box-shadow: 0 10px 30px hsla(220, 13%, 4%, 0.4); 
}
@media (min-width: 768px) {
    .ybm-form-card { padding: 40px !important; border-radius: 20px; }
}

.ybm-form-card-decor {
    position: absolute; top: 0; right: 0; width: 120px; height: 120px;
    background-color: hsla(152, 100%, 40%, 0.03); border-bottom-left-radius: 100px; pointer-events: none;
}
@media (min-width: 768px) { .ybm-form-card-decor { width: 200px; height: 200px; border-bottom-left-radius: 120px; } }

/* Fix spacing and Auto-P Tags */
.ybm-quote-form-inner p { margin: 0 !important; padding: 0 !important; width: 100%; display: block; }
.ybm-quote-form-inner br { display: none !important; }
.wpcf7-form-control-wrap { display: block; width: 100%; position: relative; }

/* Flexbox Grid System (Mobile First) */
.ybm-form-row { display: flex; flex-direction: column; width: 100%; gap: 16px; margin-bottom: 16px; }
.ybm-form-col { width: 100%; display: flex; flex-direction: column; }
.ybm-quote-form-inner label { font-size: 13px !important; font-weight: 500; color: #fff; margin-bottom: 6px !important; display: block; }

@media (min-width: 768px) { 
    .ybm-form-row { flex-direction: row; gap: 24px; margin-bottom: 24px; } 
    .ybm-form-col { flex: 1; }
    .ybm-row-3col { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
    .ybm-action-row { display: grid !important; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: stretch; }
}

/* Inputs */
.wpcf7-form-control.ybm-input {
    width: 100% !important; min-width: 100% !important; height: 44px !important; padding: 10px 14px !important; box-sizing: border-box !important;
    background-color: hsla(220, 13%, 8%, 0.5) !important; border: 1px solid hsla(220, 13%, 87%, 0.2) !important;
    border-radius: 8px !important; color: white !important; font-size: 14px !important; transition: border-color 0.2s, box-shadow 0.2s;
}
.wpcf7-form-control.ybm-input:focus { outline: none !important; border-color: hsl(152, 100%, 40%) !important; box-shadow: 0 0 0 2px hsla(152, 100%, 40%, 0.2) !important; }
.wpcf7-form-control.ybm-textarea { height: 100px !important; resize: vertical; padding-top: 12px !important; }
input[type="number"].ybm-input { -moz-appearance: textfield !important; appearance: none !important; }

/* Custom Select Dropdown */
.wpcf7-form-control.ybm-select {
    appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important;
}
.wpcf7-form-control.ybm-select option { background-color: hsl(220, 13%, 12%); color: white; }

/* 6. FILE UPLOAD (INVISIBLE OVERLAY TRICK) */
.ybm-file-col { height: 100%; min-height: 160px; }
.ybm-file-upload-zone {
    border: 2px dashed hsla(220, 13%, 87%, 0.15); border-radius: 12px; padding: 32px 16px !important; 
    text-align: center; background-color: hsla(220, 13%, 8%, 0.2); height: 100%; min-height: 140px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box;
    position: relative; cursor: pointer; transition: all 0.3s ease; overflow: hidden;
}
.ybm-file-upload-zone:hover { border-color: hsla(152, 100%, 40%, 0.5); background-color: hsla(152, 100%, 40%, 0.05); }

.ybm-upload-icon-wrap { margin-bottom: 12px !important; pointer-events: none; }
.ybm-upload-title { font-size: 14px !important; font-weight: 600; color: white; margin: 0 !important; line-height: 1.4; pointer-events: none; }

.ybm-file-upload-zone .wpcf7-form-control-wrap {
    position: absolute !important; top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important; height: 100% !important; margin: 0 !important; display: block !important;
}
.wpcf7-form-control.ybm-file-input { 
    position: absolute !important; top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important; height: 100% !important; opacity: 0 !important; 
    cursor: pointer !important; z-index: 10; margin: 0 !important; padding: 0 !important;
}

/* 7. FIXED NDA TOGGLE SWITCH (PIXEL PERFECT) */
.ybm-submit-col { display: flex; flex-direction: column; justify-content: flex-end; }
.ybm-nda-box {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 16px !important; margin-bottom: 16px !important;
    background-color: hsla(220, 13%, 8%, 0.4); border: 1px dashed hsla(152, 100%, 40%, 0.4); border-radius: 10px; width: 100%; box-sizing: border-box;
}
.ybm-nda-text { display: flex; align-items: center; gap: 10px; white-space: nowrap; }

/* Switch Logic */
.ybm-toggle-switch .wpcf7-list-item { margin: 0 !important; position: relative; display: block !important; width: 44px; height: 22px; }
.ybm-toggle-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 10; margin: 0 !important; }
.ybm-toggle-switch .wpcf7-list-item-label { 
    display: block !important; position: relative; width: 44px; height: 22px; background-color: hsla(220, 13%, 30%, 1); 
    border-radius: 50px; transition: all 0.3s ease; text-indent: -9999px; overflow: hidden; border: 1px solid hsla(220, 13%, 87%, 0.2);
}
.ybm-toggle-switch .wpcf7-list-item-label::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background-color: #ffffff; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.ybm-toggle-switch input[type="checkbox"]:checked + .wpcf7-list-item-label { background-color: hsl(152, 100%, 40%); border-color: hsl(152, 100%, 40%); }
.ybm-toggle-switch input[type="checkbox"]:checked + .wpcf7-list-item-label::after { transform: translateX(22px); }

/* 8. SUBMIT BUTTON */
.wpcf7-submit.ybm-submit-btn {
    width: 100% !important; background: linear-gradient(135deg, hsl(152, 100%, 35%), hsl(152, 100%, 25%)) !important;
    color: white !important; font-weight: 700 !important; font-size: 16px !important; padding: 14px !important; height: 50px;
    border-radius: 10px !important; border: none !important; cursor: pointer; transition: transform 0.2s !important;
}
.wpcf7-submit.ybm-submit-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px hsla(152, 100%, 40%, 0.3) !important; }

/* 9. ERROR HANDLING */
.wpcf7-not-valid-tip { font-size: 12px !important; color: #ff4d4d !important; margin-top: 6px !important; position: absolute; top: 100%; left: 0; }
form.invalid .wpcf7-response-output { border-color: #ff4d4d !important; margin-top: 20px !important; border-radius: 8px; }
form.sent .wpcf7-response-output { border-color: hsl(152, 100%, 40%) !important; background: hsla(152, 100%, 40%, 0.1); border-radius: 8px; color: white; margin-top: 20px !important; }

/* ============================================================
   INDUSTRIES SECTION (VANILLA HTML/CSS)
   ============================================================ */
.ybm-ind-section { padding: 100px 0; background-color: #F8FAFB; font-family: 'Inter', sans-serif; overflow: hidden; position: relative; }
.ybm-ind-container { max-width: 1380px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 10; }

/* Header */
.ybm-ind-label { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ybm-line { width: 32px; height: 2px; background: #009B4D; }
.ybm-ind-label span { font-family: monospace; font-size: 12px; color: #009B4D; letter-spacing: 0.25em; text-transform: uppercase; }
.ybm-ind-header-grid { display: grid; gap: 30px; margin-bottom: 60px; }
@media(min-width: 1024px){ .ybm-ind-header-grid { grid-template-columns: 1fr 1fr; align-items: flex-end; } }
.ybm-ind-header h2 { font-size: clamp(32px, 4vw, 56px); color: #1E2025; line-height: 1.1; font-weight: 800; margin: 0; }
.ybm-ind-header .text-green { color: #009B4D; }
.ybm-ind-header p { color: #6b7280; font-size: 18px; line-height: 1.6; margin: 0; max-width: 600px; }

/* Layout Main */
.ybm-ind-layout { display: flex; flex-direction: column; gap: 30px; }
@media(min-width: 1024px){ .ybm-ind-layout { flex-direction: row; gap: 40px; } }

/* Sidebar Tabs */
.ybm-ind-sidebar { width: 100%; }
@media(min-width: 1024px){ .ybm-ind-sidebar { width: 280px; flex-shrink: 0; } }
.ybm-sidebar-title { font-family: monospace; font-size: 10px; color: #9ca3af; letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 16px; }
.ybm-ind-tabs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
@media(min-width: 1024px){ .ybm-ind-tabs { flex-direction: column; overflow: visible; } }

.ybm-tab-btn { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; cursor: pointer; text-align: left; transition: all 0.3s ease; min-width: 220px; position: relative; overflow: hidden; }
.ybm-tab-btn:hover { background: #f9fafb; transform: translateX(4px); }
.ybm-tab-icon { width: 36px; height: 36px; border-radius: 8px; background: #f3f4f6; display: flex; justify-content: center; align-items: center; transition: all 0.3s; }
.ybm-tab-icon svg { width: 18px; height: 18px; stroke: #6b7280; transition: all 0.3s; }
.ybm-tab-text strong { display: block; font-size: 14px; color: #1E2025; transition: color 0.3s; }
.ybm-tab-text span { font-family: monospace; font-size: 10px; color: #9ca3af; }
.ybm-tab-arrow { margin-left: auto; width: 16px; height: 16px; stroke: #009B4D; opacity: 0; transition: opacity 0.3s; }

/* Active Tab State */
.ybm-tab-btn.active { background: #1E2025; border-color: #1E2025; box-shadow: 0 10px 25px rgba(0,0,0,0.1); transform: translateX(6px); }
.ybm-tab-btn.active::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; background: var(--active-color, #009B4D); border-radius: 0 4px 4px 0; }
.ybm-tab-btn.active .ybm-tab-icon { background: rgba(255,255,255,0.1); }
.ybm-tab-btn.active .ybm-tab-icon svg { stroke: var(--active-color, #009B4D); }
.ybm-tab-btn.active .ybm-tab-text strong { color: #fff; }
.ybm-tab-btn.active .ybm-tab-text span { color: var(--active-color, #009B4D); }
.ybm-tab-btn.active .ybm-tab-arrow { opacity: 1; stroke: var(--active-color, #009B4D); }

/* Panels */
.ybm-ind-content { flex: 1; position: relative; min-height: 800px; }
.ybm-panel { display: none; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; }
.ybm-panel.active { display: block; animation: panelFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes panelFadeIn { to { opacity: 1; transform: translateY(0); } }

/* Panel Layouts */
.ybm-panel-top { display: grid; gap: 24px; margin-bottom: 30px; }
@media(min-width: 1024px){ .ybm-panel-top { grid-template-columns: 1fr 1fr; gap: 40px; } }

.ybm-panel-img { 
    position: relative; 
    width: 100%;
    height: 350px; 
    border-radius: 16px; 
    overflow: hidden; 
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    background-color: #f3f4f6; 
}

@media(min-width: 1024px){ 
    .ybm-panel-img { 
        height: 480px; 
    } 
}

/* Added absolute positioning and !important to override Elementor */
.ybm-panel-img img { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    object-position: center;
    display: block;
    transition: transform 0.7s ease; 
}

.ybm-panel:hover .ybm-panel-img img {
    transform: scale(1.05);
}

.ybm-img-tag { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    background: rgba(17, 24, 39, 0.7); 
    color: white; 
    padding: 8px 14px; 
    border-radius: 8px; 
    font-family: monospace; 
    font-size: 11px; 
    letter-spacing: 0.15em; 
    backdrop-filter: blur(4px); 
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 10;
}

.ybm-panel-text h3 { font-size: 32px; font-weight: 800; color: #1E2025; margin: 0 0 10px 0; line-height: 1.2; }
.ybm-panel-text h4 { font-size: 18px; margin: 0 0 20px 0; }
.ybm-panel-text p { color: #4b5563; line-height: 1.7; font-size: 15px; }

.ybm-panel-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
@media(min-width: 768px){ .ybm-panel-specs { grid-template-columns: repeat(4, 1fr); } }
.ybm-spec-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.ybm-spec-card svg { width: 16px; height: 16px; margin-bottom: 8px; }
.ybm-spec-card span { display: block; font-family: monospace; font-size: 10px; color: #9ca3af; text-transform: uppercase; margin-bottom: 4px; }
.ybm-spec-card strong { display: block; font-family: monospace; font-size: 18px; color: #1E2025; }

.ybm-panel-bot { display: grid; gap: 20px; }
@media(min-width: 768px){ .ybm-panel-bot { grid-template-columns: repeat(3, 1fr); } }
.ybm-bot-card { background: white; border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px; }
.ybm-bot-card h5 { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; font-weight: 700; margin: 0 0 16px 0; color: #1E2025; }
.ybm-bot-card h5 svg { width: 16px; height: 16px; }
.ybm-bot-card ul { list-style: none; padding: 0; margin: 0; }
.ybm-bot-card ul li { position: relative; padding-left: 16px; font-size: 13px; color: #4b5563; margin-bottom: 10px; line-height: 1.5; }
.ybm-bot-card ul li::before { content: '•'; position: absolute; left: 0; color: #009B4D; font-weight: bold; }
.ybm-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ybm-tags span { background: #f9fafb; border: 1px solid #e5e7eb; padding: 6px 10px; border-radius: 6px; font-family: monospace; font-size: 11px; color: #1E2025; }
.ybm-svg-card { display: flex; justify-content: center; align-items: center; background: #fafafa; }

/* Bottom Capability Cards */
.ybm-ind-capabilities {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #e5e7eb;
}

.ybm-ind-capabilities h3 {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    color: #1E2025;
    margin-bottom: 40px;
    line-height: 1.2;
}

.ybm-cap-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media(min-width: 768px) {
    .ybm-cap-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(min-width: 1024px) {
    .ybm-cap-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Base Card Styling - Fixed Border Width */
.ybm-cap-card {
    background: #ffffff;
    border: 1px solid #e5e7eb; /* Sets a permanent border to prevent layout shifts */
    border-radius: 16px;
    padding: 32px 24px;
    position: relative;
    overflow: hidden; /* Forces all styling to stay inside the rounded corners */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ybm-cap-card svg {
    color: #009B4D;
    margin-bottom: 20px;
    transition: transform 0.4s ease;
}

.ybm-cap-card h4 {
    font-size: 24px;
    font-weight: 800;
    font-family: monospace;
    color: #1E2025;
    margin: 0 0 8px 0;
}

.ybm-cap-card strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1E2025;
    margin-bottom: 12px;
}

.ybm-cap-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0;
}

/* Flawless Hover State */
.ybm-cap-card:hover {
    border-color: #009B4D; /* Only changes the color, not the size */
    box-shadow: 0 15px 35px rgba(0, 155, 77, 0.08); /* Premium soft green shadow */
    transform: translateY(-6px); /* Smooth floating lift */
}

/* Little icon bounce on hover */
.ybm-cap-card:hover svg {
    transform: scale(1.1) translateY(-2px);
}

/* --- YBM TECHNOCRAFT: ULTIMATE FAQ STYLES --- */
.ybm-faq-section { 
    position: relative; 
    padding: 100px 0; 
    background: #ffffff; 
    overflow: hidden; 
    font-family: 'Inter', sans-serif; 
}

.relative-z { position: relative; z-index: 10; }

/* 1. Technical Background Design */
.ybm-faq-bg-wrap { position: absolute; inset: 0; pointer-events: none; }

.ybm-faq-grid {
    position: absolute; inset: 0; opacity: 0.03;
    background-image: linear-gradient(#009B4D 1px, transparent 1px), 
                      linear-gradient(90deg, #009B4D 1px, transparent 1px);
    background-size: 50px 50px;
}

.ybm-faq-circle { 
    position: absolute; border-radius: 999px; border: 40px solid #009B4D; opacity: 0.05; 
}
.circle-lg { top: -10rem; right: -10rem; width: 25rem; height: 25rem; }
.circle-md { bottom: -5rem; left: -8rem; width: 20rem; height: 20rem; border-color: #1E2025; opacity: 0.04; }

/* 2. Header Typography & Elements */
.ybm-faq-header { text-align: center; margin-bottom: 60px; }

.ybm-faq-meta { 
    display: flex; align-items: center; justify-content: center; gap: 15px; 
    color: #009B4D; font-family: 'JetBrains Mono', monospace; font-size: 13px; 
    font-weight: 700; margin-bottom: 12px; letter-spacing: 0.1em;
}
.ybm-meta-line { height: 2px; width: 32px; background: #009B4D; }

.ybm-faq-title { 
    font-size: clamp(32px, 4vw, 40px); font-weight: 800; color: #1E2025; 
    margin: 0 0 16px 0; letter-spacing: -0.02em; 
}

.ybm-faq-subtitle { 
    color: #64748B; font-size: 16px; font-weight: 400; line-height: 1.6; 
    max-width: 600px; margin: 0 auto; 
}

.ybm-faq-divider { 
    height: 4px; width: 80px; background: linear-gradient(90deg, transparent, #009B4D, transparent); 
    margin: 24px auto 0; border-radius: 2px; 
}

/* 3. Accordion Item Styling */
.ybm-faq-accordion { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

.ybm-faq-item {
    background: #ffffff; border-radius: 12px; margin-bottom: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); border: 1px solid rgba(0, 155, 77, 0.05);
    position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;
}

.ybm-faq-accent-bar { 
    position: absolute; left: 0; top: 0; bottom: 0; width: 6px; 
    background: #E2E8F0; transition: 0.3s; z-index: 5;
}

.ybm-faq-item.active { 
    box-shadow: 0 10px 25px rgba(0, 155, 77, 0.1); 
    border-color: rgba(0, 155, 77, 0.2); 
    transform: translateY(-2px);
}
.ybm-faq-item.active .ybm-faq-accent-bar { background: #009B4D; }

/* 4. Trigger & Typography */
.ybm-faq-trigger { 
    width: 100%; display: flex; align-items: center; justify-content: space-between; 
    padding: 24px 32px; background: none; border: none; cursor: pointer;
}

.ybm-faq-q-left { display: flex; align-items: center; gap: 20px; text-align: left; }

.ybm-faq-badge {
    width: 32px; height: 32px; background: #F1F5F9; color: #64748B;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-weight: 800; font-size: 12px; flex-shrink: 0; transition: 0.3s;
}
.ybm-faq-item.active .ybm-faq-badge { background: #009B4D; color: #ffffff; }

.ybm-faq-q-text { 
    font-size: 18px; font-weight: 600; color: #1E2025; line-height: 1.4; 
}

/* 5. Custom Plus/Minus Toggle Box */
.ybm-faq-plus-box { 
    width: 36px; height: 36px; background: #F1F5F9; border-radius: 8px; 
    position: relative; transition: 0.3s; flex-shrink: 0; 
}

.ybm-faq-plus-icon { 
    position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; 
    background: #64748B; transform: translate(-50%, -50%); 
}

.ybm-faq-plus-icon::after { 
    content: ''; position: absolute; width: 2px; height: 14px; 
    background: #64748B; top: -6px; left: 6px; transition: 0.3s; 
}

.ybm-faq-item.active .ybm-faq-plus-box { background: #009B4D; transform: rotate(45deg); }
.ybm-faq-item.active .ybm-faq-plus-icon,
.ybm-faq-item.active .ybm-faq-plus-icon::after { background: #ffffff; }

/* 6. Answer Layout & Typography */
.ybm-faq-panel-inner { padding: 0 32px 28px 84px; } /* Perfect alignment offset */

.ybm-ans-flex { display: flex; gap: 15px; border-top: 1px solid #f1f5f9; padding-top: 20px; }

.ybm-check { margin-top: 4px; flex-shrink: 0; color: #009B4D; }

.ybm-ans-text { 
    color: #4B5563; font-size: 15.5px; font-weight: 400; line-height: 1.75; 
}

/* 7. Pill CTA Button */
.ybm-faq-cta-wrap { text-align: center; margin-top: 50px; }
.ybm-cta-prompt { font-size: 15px; color: #64748B; font-weight: 500; margin-bottom: 16px; }

.ybm-faq-btn {
    display: inline-flex; align-items: center; background-color: #009B4D; 
    color: #ffffff !important; padding: 14px 32px; border-radius: 8px; 
    font-weight: 600; font-size: 16px; text-decoration: none;
    box-shadow: 0 10px 20px rgba(0, 155, 77, 0.2); transition: all 0.3s ease;
}
.ybm-faq-btn:hover { 
    background-color: #008040; transform: translateY(-2px); 
    box-shadow: 0 15px 30px rgba(0, 155, 77, 0.3); 
}

/* Responsive Mobile Fix */
@media (max-width: 768px) {
    .ybm-faq-panel-inner { padding: 0 20px 20px 20px; }
    .ybm-faq-trigger { padding: 20px; }
    .ybm-faq-q-text { font-size: 16px; }
}
/* ============================================================
   OUR PROCESS SECTION (INTEGRATED FEATURE ROWS)
   ============================================================ */
.ybm-process-section { position: relative; padding: 100px 0; background-color: #ffffff; font-family: 'Inter', sans-serif; overflow: hidden; }

/* FIX 1: Container matched exactly to Industry width (1380px) */
.ybm-proc-container { max-width: 1380px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 10; }

/* Animated Injection Machine Background */
.ybm-proc-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ybm-proc-grid { position: absolute; inset: 0; width: 100%; height: 100%; }

.ybm-injection-bg-anim { 
    position: absolute; top: -10px; right: -10%; width: 320px; height: auto; 
    color: hsla(152, 100%, 40%, 0.12); pointer-events: none; 
}
@media(min-width: 768px) { .ybm-injection-bg-anim { top: -20px; right: 0; width: 400px; } }
@media(min-width: 1280px) { .ybm-injection-bg-anim { top: -30px; right: 5%; width: 500px; } }

.ybm-proc-watermark { position: absolute; top: 15%; left: 52%; font-family: monospace; font-size: 10px; letter-spacing: 0.3em; color: hsla(152, 100%, 40%, 0.05); transform: rotate(90deg); display: none; }
@media(min-width: 1280px) { .ybm-proc-watermark { display: block; } }

/* ============================================================
   PROCESS HEADER & WATERMARK TEXT
   ============================================================ */
/* Mobile First: Stack everything neatly */
.ybm-proc-header { 
    width: 100%; 
    display: flex; 
    flex-direction: column;
    margin-bottom: 60px; 
    opacity: 1; 
    transform: translateY(0); 
    transition: all 0.8s ease; 
}

/* FIX 2: Desktop Grid - Explicitly place elements on Left or Right */
@media(min-width: 1024px){ 
    .ybm-proc-header { 
        display: grid;
        grid-template-columns: 1.1fr 1fr; /* Left side slightly wider */
        column-gap: 60px; 
        row-gap: 16px;
    } 
}

/* Force Label to Top Left */
.ybm-proc-label { 
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px; 
    grid-column: 1; 
    grid-row: 1; 
    align-self: end;
}
.ybm-proc-label .ybm-line { width: 32px; height: 2px; background: #009B4D; }

/* FIX 3: Matched the 12px Monospace font perfectly */
.ybm-proc-label span { font-family: monospace; font-size: 12px; font-weight: normal; letter-spacing: 0.25em; text-transform: uppercase; color: #009B4D; }

/* Force Title to Bottom Left */
.ybm-proc-title-wrap { 
    position: relative; 
    z-index: 1; 
    grid-column: 1;
    grid-row: 2;
}

/* FIX 4: Matched the clamp(32px, 4vw, 56px) font sizing from Industry exactly */
.ybm-proc-title-wrap h2 { 
    position: relative;
    z-index: 2; 
    font-family: 'Inter', sans-serif;
    font-size: clamp(32px, 4vw, 56px); 
    font-weight: 800; 
    line-height: 1.1; 
    margin: 0; 
    color: #1E2025;
}
.ybm-proc-title-wrap .text-dark { color: #1E2025; }
.ybm-proc-title-wrap .text-green { color: #009B4D; }
.ybm-proc-title-wrap .text-gray-light { font-family: monospace; font-weight: 400; color: #9ca3af; font-size: clamp(20px, 2vw, 24px); margin-left: 8px; }

/* The Giant Background "PROCESS" Text */
.ybm-bg-text { 
    position: absolute; 
    top: -15px; 
    left: 25%; 
    font-size: clamp(80px, 12vw, 150px); 
    font-weight: 900; 
    color: rgba(0, 155, 77, 0.07); 
    line-height: 1; 
    pointer-events: none; 
    user-select: none;
    z-index: -1; 
    display: none; 
}
@media(min-width: 768px) { 
    .ybm-bg-text { display: block; } 
}

/* FIX 5: Force Paragraph to Top Right and matched sizing */
.ybm-proc-desc { 
    margin: 0; 
    font-size: 18px; 
    line-height: 1.6; 
    color: #6b7280; 
    max-width: 600px; 
    grid-column: 2;
    grid-row: 1;
    align-self: end; /* Pushes it down so it aligns nicely with the title */
}

/* Force Stats to Bottom Right */
.ybm-proc-stats { 
    display: flex; flex-wrap: wrap; gap: 32px; 
    margin-top: 10px; 
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}
.ybm-stat-item { display: flex; align-items: baseline; gap: 8px; }
.ybm-stat-item .val { font-family: monospace; font-size: 20px; font-weight: 700; color: #009B4D; }
.ybm-stat-item .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #9ca3af; font-weight: 600; }

/* ============================================================
   MASTER TIMELINE & INTEGRATED CARDS
   ============================================================ */
/* FIX 6: Restricted timeline width so it stays compact despite wider container */
.ybm-timeline-master { position: relative; padding-left: 45px; max-width: 1200px; margin: 0 auto; }
@media(min-width: 768px) { .ybm-timeline-master { padding-left: 60px; } }

/* The Line */
.ybm-track-bg { position: absolute; left: 16px; top: 20px; bottom: 20px; width: 2px; background: #f3f4f6; border-radius: 2px; }
.ybm-track-fill { position: absolute; left: 16px; top: 20px; width: 2px; height: var(--progress); background: #009B4D; border-radius: 2px; transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
@media(min-width: 768px) {
  .ybm-track-bg { left: 24px; }
  .ybm-track-fill { left: 24px; }
}

.ybm-timeline-grid { display: flex; flex-direction: column; gap: 40px; }

/* Step Node & Wrapper */
.ybm-step-item { position: relative; }
.ybm-step-node { 
    position: absolute; left: -46px; top: 20px; width: 36px; height: 36px; 
    border-radius: 50%; border: 2px solid #e5e7eb; background: #ffffff; 
    display: flex; justify-content: center; align-items: center; 
    font-family: monospace; font-size: 13px; font-weight: 700; color: #9ca3af; 
    z-index: 20; transition: all 0.5s ease; 
}
@media(min-width: 768px) {
  .ybm-step-node { left: -58px; top: 30px; width: 44px; height: 44px; font-size: 14px; }
}

/* Base Card Styling */
.ybm-integrated-card { 
    display: grid; grid-template-columns: 1fr;
    background: #ffffff; border: 1px solid #f3f4f6; border-radius: 20px; 
    overflow: hidden; opacity: 0.4; transform: translateY(30px); 
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@media(min-width: 768px) {
    .ybm-integrated-card { grid-template-columns: 1.2fr 1fr; }
}

/* Card Content Area */
.ybm-card-text-area { padding: 30px; display: flex; flex-direction: column; justify-content: center; }
@media(min-width: 768px) { .ybm-card-text-area { padding: 40px; } }

.ybm-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ybm-card-icon { width: 48px; height: 48px; border-radius: 12px; background: #f9fafb; display: flex; justify-content: center; align-items: center; color: #6b7280; transition: all 0.4s; }

.ybm-card-header h3 { font-size: 22px; font-weight: 800; color: #1E2025; margin: 0 0 4px 0; line-height: 1.2; }
.ybm-card-header span { display: block; font-family: monospace; font-size: 11px; text-transform: uppercase; color: #9ca3af; letter-spacing: 0.05em; }

.ybm-integrated-card p { font-size: 15px; line-height: 1.7; color: #4b5563; margin: 0 0 24px 0; }

.ybm-card-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ybm-card-tags span { font-size: 11px; font-weight: 600; padding: 6px 14px; border-radius: 50px; background: #f9fafb; border: 1px solid #e5e7eb; color: #6b7280; transition: all 0.4s; }

/* Card Visual Area */
.ybm-card-visual-area { 
    background: #f8fafb; border-top: 1px solid #e5e7eb; 
    display: flex; align-items: center; justify-content: center; 
    padding: 30px; position: relative; overflow: hidden;
}
@media(min-width: 768px) {
    .ybm-card-visual-area { border-top: none; border-left: 1px solid #e5e7eb; }
}

.ybm-step-svg { width: 100%; max-width: 200px; height: auto; display: block; opacity: 0.5; transition: opacity 0.5s ease; }

/* ============================================================
   ACTIVE STATES & COLOR THEMES
   ============================================================ */

.ybm-step-item.active .ybm-integrated-card { opacity: 1; transform: translateY(0); box-shadow: 0 20px 40px rgba(0,0,0,0.04); }
.ybm-step-item.active .ybm-step-svg { opacity: 1; }

/* Blue (Step 1) */
.theme-blue.active .ybm-step-node { border-color: #0EA5E9; background: #f0f9ff; color: #0EA5E9; box-shadow: 0 0 15px rgba(14,165,233,0.3); }
.theme-blue.active .ybm-integrated-card { border-color: rgba(14,165,233,0.3); }
.theme-blue.active .ybm-card-icon { background: rgba(14,165,233,0.1); color: #0EA5E9; }
.theme-blue.active .ybm-card-tags span { background: rgba(14,165,233,0.05); border-color: rgba(14,165,233,0.2); color: #0EA5E9; }
.theme-blue .ybm-step-svg { color: #0EA5E9; }
.theme-blue .ybm-card-visual-area { background: linear-gradient(135deg, rgba(14,165,233,0.05), transparent); }

/* Orange (Step 2) */
.theme-orange.active .ybm-step-node { border-color: #F59E0B; background: #fffbeb; color: #F59E0B; box-shadow: 0 0 15px rgba(245,158,11,0.3); }
.theme-orange.active .ybm-integrated-card { border-color: rgba(245,158,11,0.3); }
.theme-orange.active .ybm-card-icon { background: rgba(245,158,11,0.1); color: #F59E0B; }
.theme-orange.active .ybm-card-tags span { background: rgba(245,158,11,0.05); border-color: rgba(245,158,11,0.2); color: #F59E0B; }
.theme-orange .ybm-step-svg { color: #F59E0B; }
.theme-orange .ybm-card-visual-area { background: linear-gradient(135deg, rgba(245,158,11,0.05), transparent); }

/* Red (Step 3) */
.theme-red.active .ybm-step-node { border-color: #EF4444; background: #fef2f2; color: #EF4444; box-shadow: 0 0 15px rgba(239,68,68,0.3); }
.theme-red.active .ybm-integrated-card { border-color: rgba(239,68,68,0.3); }
.theme-red.active .ybm-card-icon { background: rgba(239,68,68,0.1); color: #EF4444; }
.theme-red.active .ybm-card-tags span { background: rgba(239,68,68,0.05); border-color: rgba(239,68,68,0.2); color: #EF4444; }
.theme-red .ybm-step-svg { color: #EF4444; }
.theme-red .ybm-card-visual-area { background: linear-gradient(135deg, rgba(239,68,68,0.05), transparent); }

/* Purple (Step 4) */
.theme-purple.active .ybm-step-node { border-color: #8B5CF6; background: #f5f3ff; color: #8B5CF6; box-shadow: 0 0 15px rgba(139,92,246,0.3); }
.theme-purple.active .ybm-integrated-card { border-color: rgba(139,92,246,0.3); }
.theme-purple.active .ybm-card-icon { background: rgba(139,92,246,0.1); color: #8B5CF6; }
.theme-purple.active .ybm-card-tags span { background: rgba(139,92,246,0.05); border-color: rgba(139,92,246,0.2); color: #8B5CF6; }
.theme-purple .ybm-step-svg { color: #8B5CF6; }
.theme-purple .ybm-card-visual-area { background: linear-gradient(135deg, rgba(139,92,246,0.05), transparent); }

/* Green (Step 5) */
.theme-green.active .ybm-step-node { border-color: #009B4D; background: #e6f5ec; color: #009B4D; box-shadow: 0 0 15px rgba(0,155,77,0.3); }
.theme-green.active .ybm-integrated-card { border-color: rgba(0,155,77,0.3); }
.theme-green.active .ybm-card-icon { background: rgba(0,155,77,0.1); color: #009B4D; }
.theme-green.active .ybm-card-tags span { background: rgba(0,155,77,0.05); border-color: rgba(0,155,77,0.2); color: #009B4D; }
.theme-green .ybm-step-svg { color: #009B4D; }
.theme-green .ybm-card-visual-area { background: linear-gradient(135deg, rgba(0,155,77,0.05), transparent); }

/* ============================================================
   MOULD TYPES SHOWCASE (LIGHT THEME INTERACTIVE MASTER-DETAIL)
   ============================================================ */
.ybm-moulds-section {
    position: relative;
    padding: 100px 0;
    background-color: #ffffff; /* Clean White Background to match screenshots */
    font-family: 'Inter', sans-serif;
    color: #1E2025;
    overflow: hidden;
}

/* 1. DYNAMIC DUAL-TONE AMBIENT GLOWS (Adjusted for Light Theme) */
.ybm-moulds-section::before,
.ybm-moulds-section::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0;
}
.ybm-moulds-section::before {
    width: 600px; height: 600px; background: rgba(0, 155, 77, 0.05); top: -10%; left: -10%;
    animation: floatAmbient 12s infinite alternate ease-in-out;
}
.ybm-moulds-section::after {
    width: 500px; height: 500px; background: rgba(14, 165, 233, 0.04); bottom: 10%; right: -5%;
    animation: floatAmbient 10s infinite alternate-reverse ease-in-out;
}
@keyframes floatAmbient {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, 50px) scale(1.1); }
}

/* Faint Green/Grey Grid Pattern to match other sections */
.ybm-moulds-bg-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: 
        linear-gradient(rgba(0, 155, 77, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 155, 77, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1;
}

.ybm-moulds-container {
    max-width: 1380px; margin: 0 auto; padding: 0 20px;
    position: relative; z-index: 10;
}

/* 2. HEADER ALIGNMENT */
.ybm-moulds-header { margin-bottom: 70px; position: relative; z-index: 2; }
.ybm-moulds-label { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ybm-moulds-label .ybm-line { width: 32px; height: 2px; background: #009B4D; box-shadow: 0 0 10px rgba(0,155,77,0.2); }
.ybm-moulds-label span {
    font-family: monospace; font-size: 12px; letter-spacing: 0.25em; 
    text-transform: uppercase; color: #009B4D;
}
.ybm-moulds-title { font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.1; margin: 0 0 16px 0; color: #1E2025; }

/* Changed to Solid Brand Green for the initial words to perfectly match your screenshot */
.ybm-moulds-title span { 
    color: #009B4D;
}

.ybm-moulds-desc { font-size: 18px; line-height: 1.6; color: #6b7280; max-width: 700px; margin: 0; }

/* 3. MASTER DETAIL LAYOUT */
.ybm-moulds-layout { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 1024px) {
    .ybm-moulds-layout { flex-direction: row; align-items: flex-start; }
}

/* 4. INTERACTIVE SIDEBAR (TABS) */
.ybm-moulds-sidebar { width: 100%; position: relative; z-index: 10; }
@media (min-width: 1024px) {
    .ybm-moulds-sidebar { width: 300px; flex-shrink: 0; position: sticky; top: 120px; }
}

.ybm-sidebar-title {
    font-family: monospace; font-size: 11px; color: #9ca3af; 
    letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 20px; display: none;
}
@media (min-width: 1024px) { .ybm-sidebar-title { display: block; } }

.ybm-mould-tabs {
    display: flex; gap: 12px; overflow-x: auto; padding-bottom: 15px; scrollbar-width: none;
    counter-reset: tech-index;
}
.ybm-mould-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
    .ybm-mould-tabs { flex-direction: column; overflow-x: visible; padding-bottom: 0; }
}

.ybm-m-tab {
    counter-increment: tech-index;
    background: #ffffff; border: 1px solid #e5e7eb;
    color: #6b7280; padding: 16px 20px 16px 50px; text-align: left;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600;
    border-radius: 12px; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap; position: relative; overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.ybm-m-tab::before {
    content: "0" counter(tech-index);
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    font-family: monospace; font-size: 12px; color: #9ca3af; font-weight: 700; transition: all 0.4s;
}

.ybm-m-tab:hover {
    background: #f9fafb; color: #1E2025; border-color: #d1d5db; transform: translateX(4px);
}

.ybm-m-tab.active {
    background: linear-gradient(90deg, rgba(0, 155, 77, 0.05) 0%, rgba(0, 155, 77, 0) 100%);
    color: #1E2025; border-color: rgba(0, 155, 77, 0.4); box-shadow: 0 10px 25px rgba(0, 155, 77, 0.08);
}
.ybm-m-tab.active::before { color: #009B4D; }

@media (min-width: 1024px) {
    .ybm-m-tab.active { transform: translateX(12px); }
    .ybm-m-tab::after {
        content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0px; background: #009B4D; transition: all 0.4s;
    }
    .ybm-m-tab.active::after {
        width: 4px; box-shadow: 0 0 12px rgba(0,155,77,0.5);
    }
}

/* 5. RIGHT CONTENT AREA */
.ybm-moulds-content-area { flex: 1; min-height: 600px; position: relative; perspective: 1000px; }

.ybm-m-panel { display: none; }
.ybm-m-panel.active { display: block; }

.ybm-m-panel-grid {
    background: #ffffff; border: 1px solid #e5e7eb;
    border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.06);
}
@media (min-width: 1024px) {
    .ybm-m-panel-grid { grid-template-columns: 1fr 1.1fr; }
}

/* 6. BULLETPROOF IMAGE CONTAINER (FIXED FOR WORDPRESS) */
.ybm-m-image-wrapper { 
    position: relative; 
    width: 100%;
    aspect-ratio: 4 / 3; 
    background: #f3f4f6; 
    overflow: hidden; 
}

@media (min-width: 1024px) {
    .ybm-m-image-wrapper { 
        aspect-ratio: auto; 
        height: 100%; 
        min-height: 100%;
    }
}

.ybm-m-image-wrapper img {
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    object-position: center !important; 
    display: block !important;
    max-width: none !important;
    opacity: 0; 
    transform: scale(1.15) translateX(-20px);
}

.ybm-m-panel.active .ybm-m-image-wrapper img {
    animation: cinematicImage 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cinematicImage {
    to { opacity: 1; transform: scale(1) translateX(0); }
}

/* Image Decorations (Kept dark for contrast over images) */
.ybm-tech-overlay {
    position: absolute; bottom: 20px; left: 20px; z-index: 2;
    background: rgba(30, 32, 37, 0.85); backdrop-filter: blur(8px);
    padding: 8px 14px; border-radius: 6px; font-family: monospace;
    font-size: 12px; font-weight: 700; color: white; letter-spacing: 0.15em;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.ybm-spec-badge {
    position: absolute; top: 20px; right: 20px; z-index: 2;
    background: rgba(30, 32, 37, 0.85); backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 155, 77, 0.4); padding: 8px 14px;
    border-radius: 6px; font-family: monospace; font-size: 12px; color: #fff;
    display: flex; align-items: center; gap: 10px; font-weight: 600;
}
.ybm-pulse {
    display: inline-block; width: 8px; height: 8px; background: #009B4D; 
    border-radius: 50%; animation: pulseAnim 2s infinite;
}
@keyframes pulseAnim {
    0% { box-shadow: 0 0 0 0 rgba(0, 155, 77, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(0, 155, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 155, 77, 0); }
}

/* 7. STAGGERED CASCADING CONTENT REVEAL */
.ybm-m-info { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1024px) { .ybm-m-info { padding: 50px; } }

.ybm-m-panel .ybm-tech-spec-line,
.ybm-m-panel h3,
.ybm-m-panel p,
.ybm-m-panel .ybm-m-bullets,
.ybm-m-panel .ybm-m-tags,
.ybm-m-panel .ybm-m-actions {
    opacity: 0; transform: translateY(20px);
}

.ybm-m-panel.active .ybm-tech-spec-line { animation: cascadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.1s; }
.ybm-m-panel.active h3 { animation: cascadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s; }
.ybm-m-panel.active p { animation: cascadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.3s; }
.ybm-m-panel.active .ybm-m-bullets { animation: cascadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s; }
.ybm-m-panel.active .ybm-m-tags { animation: cascadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s; }
.ybm-m-panel.active .ybm-m-actions { animation: cascadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.6s; }

@keyframes cascadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Text Styling */
.ybm-tech-spec-line {
    display: flex; align-items: center; gap: 10px; font-family: monospace;
    font-size: 11px; color: #009B4D; margin-bottom: 20px; letter-spacing: 0.15em;
}
.ybm-line-stretch { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0, 155, 77, 0.2), transparent); }

.ybm-m-info h3 { font-size: clamp(28px, 3vw, 36px); font-weight: 800; margin: 0 0 16px 0; color: #1E2025; letter-spacing: -0.02em; }
.ybm-m-info p { font-size: 16px; line-height: 1.7; color: #4b5563; margin: 0 0 28px 0; }

/* Custom Checkmark Bullets */
.ybm-m-bullets { list-style: none; padding: 0; margin: 0 0 32px 0; }
.ybm-m-bullets li {
    position: relative; padding-left: 32px; font-size: 15px; color: #4b5563;
    margin-bottom: 14px; line-height: 1.6;
}
.ybm-m-bullets li::before {
    content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009B4D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
    background-size: cover;
}

/* Industry Tags */
.ybm-m-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.ybm-m-tags span {
    background: rgba(0, 155, 77, 0.05); border: 1px solid rgba(0, 155, 77, 0.2);
    color: #009B4D; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;
    letter-spacing: 0.05em; transition: 0.3s;
}
.ybm-m-tags span:hover { background: rgba(0, 155, 77, 0.1); border-color: rgba(0, 155, 77, 0.4); }

/* 8. BUTTONS */
.ybm-m-actions { display: flex; flex-wrap: wrap; gap: 16px; }

.ybm-m-actions a.ybm-btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 28px; border: 1px solid rgba(0, 155, 77, 0.5) !important; color: #009B4D !important;
    border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none !important; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent !important;
}
.ybm-m-actions a.ybm-btn-outline:hover { 
    background: #009B4D !important; border-color: #009B4D !important; color: #ffffff !important; 
}

/* ============================================================
   COMPONENTS SECTION: MASSIVE EDITORIAL LAYOUT
   ============================================================ */
.ybm-comp-section {
    position: relative;
    padding: 120px 0;
    background-color: #F8FAFB; /* Premium Light Background */
    font-family: 'Inter', sans-serif;
    color: #1E2025;
    overflow: hidden;
}

/* 1. THEMATIC BACKGROUND ELEMENTS */
.ybm-comp-glow-1, .ybm-comp-glow-2 {
    position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0;
}
.ybm-comp-glow-1 {
    width: 600px; height: 600px; background: rgba(0, 155, 77, 0.05); top: 0; left: -10%;
    animation: floatAmbient 12s infinite alternate ease-in-out;
}
.ybm-comp-glow-2 {
    width: 500px; height: 500px; background: rgba(14, 165, 233, 0.03); bottom: -10%; right: -5%;
    animation: floatAmbient 10s infinite alternate-reverse ease-in-out;
}
@keyframes floatAmbient {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, 50px) scale(1.1); }
}

/* Plastic Flow Dynamics Background */
.ybm-flow-lines {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1; opacity: 0.8;
}

/* Multi-Cavity Runner System Schematic */
.ybm-runner-diagram {
    position: absolute; top: 15%; left: 5%; width: 400px; height: 400px;
    pointer-events: none; z-index: 1; opacity: 0.7;
}

/* Giant Faint Watermark */
.ybm-comp-watermark {
    position: absolute; top: 10%; right: -5%;
    font-size: clamp(120px, 20vw, 250px);
    font-family: monospace; font-weight: 900; color: rgba(0, 155, 77, 0.02);
    letter-spacing: 0.1em; transform: rotate(90deg); transform-origin: right top;
    pointer-events: none; z-index: 0; user-select: none;
}

.ybm-comp-container {
    max-width: 1380px; margin: 0 auto; padding: 0 20px;
    position: relative; z-index: 10;
}

/* 2. MASSIVE SPLIT-ROW ALIGNMENT */
.ybm-comp-top-row {
    display: flex; flex-direction: column; gap: 40px; margin-bottom: 80px;
}
@media (min-width: 1024px) {
    .ybm-comp-top-row { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

/* Left Side: Massive Header */
.ybm-comp-header { max-width: 800px; }
.ybm-comp-label { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.ybm-comp-label .ybm-line { width: 32px; height: 2px; background: #009B4D; }
.ybm-comp-label span { font-family: monospace; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #009B4D; }

/* The new massive, stacked, minimal-color heading */
.ybm-comp-title { 
    font-size: clamp(48px, 6vw, 85px); 
    font-weight: 800; 
    line-height: 1.05; 
    letter-spacing: -0.03em;
    margin: 0 0 24px 0; 
    color: #1E2025; /* Clean, normal dark color */
}

.ybm-comp-desc { font-size: 20px; line-height: 1.6; color: #6b7280; margin: 0; max-width: 600px; }

/* Right Side: Tab Alignment */
.ybm-comp-filters { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 1024px) {
    .ybm-comp-filters { justify-content: flex-end; max-width: 450px; padding-bottom: 10px; }
}

.ybm-comp-tab {
    background: #ffffff; border: 1px solid #e5e7eb;
    color: #4b5563; padding: 12px 24px; border-radius: 50px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.ybm-comp-tab:hover { background: #f9fafb; color: #1E2025; border-color: #d1d5db; transform: translateY(-2px); }
.ybm-comp-tab.active {
    background: #009B4D; border-color: #009B4D; color: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 155, 77, 0.2); transform: translateY(-2px);
}

/* 3. EDGE-TO-EDGE INFINITE LOOP */
.ybm-infinite-wrapper {
    width: 100vw; position: relative;
    left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
    overflow: hidden; padding: 20px 0;
}

/* Fades so cards don't cut off sharply */
.ybm-fade-left, .ybm-fade-right {
    position: absolute; top: 0; bottom: 0; width: 10vw; z-index: 5; pointer-events: none;
}
.ybm-fade-left { left: 0; background: linear-gradient(to right, #F8FAFB 0%, transparent 100%); }
.ybm-fade-right { right: 0; background: linear-gradient(to left, #F8FAFB 0%, transparent 100%); }

.ybm-loop-panel { display: none; opacity: 0; transition: opacity 0.5s ease; }
.ybm-loop-panel.active { display: block; opacity: 1; }

.ybm-loop-track {
    display: flex; gap: 24px; width: max-content;
    animation: scrollLoop 35s linear infinite; padding-left: 24px;
}
.ybm-loop-track:hover { animation-play-state: paused; }

@keyframes scrollLoop {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 12px)); }
}

/* 4. CARDS & LIGHT GLASSMORPHISM HOVER REVEAL */
.ybm-loop-card {
    position: relative; width: 380px; aspect-ratio: 4 / 5;
    border-radius: 20px; overflow: hidden; background: #e5e7eb;
    transform: scale(1); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer; box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}
.ybm-loop-card:hover {
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 155, 77, 0.15); z-index: 10;
}

.ybm-lc-image { position: absolute; inset: 0; }
.ybm-lc-image img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ybm-loop-card:hover .ybm-lc-image img { transform: scale(1.15); }

/* Default Title Bar */
.ybm-lc-title-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 40px 24px 24px;
    background: linear-gradient(to top, rgba(17, 18, 21, 0.9) 0%, transparent 100%);
    display: flex; justify-content: space-between; align-items: flex-end;
    transition: opacity 0.3s ease; z-index: 2;
}
.ybm-loop-card:hover .ybm-lc-title-bar { opacity: 0; pointer-events: none; }
.ybm-lc-title-bar h4 { margin: 0; font-size: 20px; font-weight: 700; color: #ffffff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.ybm-lc-title-bar svg { width: 22px; height: 22px; stroke: #009B4D; stroke-width: 2.5; fill: none; transition: 0.3s; }

/* The Light Glass Reveal Panel */
.ybm-lc-reveal {
    position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 30px;
    transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3; border: 1px solid rgba(255,255,255,0.5); border-radius: 20px;
}
.ybm-loop-card:hover .ybm-lc-reveal { transform: translateY(0); }

.ybm-lc-reveal-inner { transform: translateY(20px); opacity: 0; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; }
.ybm-loop-card:hover .ybm-lc-reveal-inner { transform: translateY(0); opacity: 1; }

.ybm-lc-spec { font-family: monospace; font-size: 11px; color: #6b7280; margin-bottom: 12px; letter-spacing: 0.1em; }
.ybm-lc-spec span { color: #009B4D; font-weight: 700; margin-right: 6px; }

.ybm-lc-reveal h4 { font-size: 24px; font-weight: 800; color: #1E2025; margin: 0 0 20px 0; line-height: 1.2; }

/* Tags */
.ybm-lc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.ybm-tag-g { background: rgba(0, 155, 77, 0.1); color: #009B4D; border: 1px solid rgba(0, 155, 77, 0.2); padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.ybm-tag-n { background: rgba(30, 32, 37, 0.05); color: #4b5563; border: 1px solid rgba(30, 32, 37, 0.1); padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; }

.ybm-lc-btn {
    display: block; width: 100%; text-align: center;
    padding: 14px 0; background: #009B4D !important; color: #fff !important;
    border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none !important;
    transition: all 0.3s; box-shadow: 0 10px 20px rgba(0, 155, 77, 0.2);
}
.ybm-lc-btn:hover { background: #00b359 !important; transform: translateY(-2px); box-shadow: 0 15px 25px rgba(0, 155, 77, 0.3); }

@media (max-width: 768px) {
    .ybm-loop-card { width: 300px; }
}