/* DESIGN CORE v2.1 - B2B Professional Hub */
* { box-sizing: border-box; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    line-height: 1.6; color: #334155; margin: 0; background: #f1f5f9; 
}

.container { 
    max-width: 1140px; margin: 40px auto; display: grid; 
    grid-template-columns: 2fr 1fr; gap: 40px; padding: 0 20px; 
}

header { background: #1e293b; color: white; padding: 70px 20px; text-align: center; border-bottom: 5px solid #3b82f6; }
.header-wrap h1 { margin: 0; font-size: 2.6rem; font-weight: 800; letter-spacing: -1px; }

.content { 
    background: white; padding: 45px; border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); 
}
.body-text h2 { color: #0f172a; font-size: 1.8rem; margin-top: 0; }
.body-text h3 { color: #1e293b; margin-top: 35px; font-size: 1.4rem; }

.share-box { margin-top: 40px; padding-top: 25px; border-top: 1px solid #e2e8f0; }
.share-txt { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; color: #94a3b8; margin-right: 15px; }
.social-btn { 
    display: inline-block; padding: 8px 16px; border-radius: 6px; 
    text-decoration: none; color: white; font-size: 0.85rem; font-weight: bold; margin-right: 8px;
}
.fb { background: #1877f2; } .tw { background: #000000; } 

.widget { 
    background: white; padding: 30px; border-radius: 12px; 
    margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); 
}
.widget-title { margin-top: 0; font-size: 1.25rem; border-left: 5px solid #3b82f6; padding-left: 18px; color: #0f172a; }

.highlight { background: #3b82f6; color: white; text-align: center; }
.highlight .widget-title { color: white; border: none; padding: 0; }
.cta-button { 
    display: block; background: #0f172a; color: white; padding: 18px; 
    text-decoration: none; font-weight: 800; border-radius: 8px; margin-top: 20px;
    transition: all 0.3s ease; text-transform: uppercase;
}
.cta-button:hover { background: #334155; transform: translateY(-2px); }

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 10px; margin-top: 20px; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

footer { text-align: center; padding: 60px 20px; color: #64748b; font-size: 0.95rem; }
footer a { color: #3b82f6; text-decoration: none; font-weight: 600; }

@media (max-width: 900px) { .container { grid-template-columns: 1fr; } }