:root {
    --opex-primary: #0184c1;
    --opex-secondary: #082645;
    --bg-stone: #f5f5f4;
}

body { font-family: 'Inter', sans-serif; background-color: var(--bg-stone); margin: 0; padding: 0; overflow-x: hidden; }

/* Lang Switcher - Pill Shape */
.lang-switcher-container { max-width: 1200px; margin: 20px auto 0; display: flex; justify-content: flex-end; padding: 0 20px; }
.lang-switcher { background: #e7e5e4; padding: 4px; border-radius: 50px; display: inline-flex; }
.lang-switcher a { text-decoration: none; color: #78716c; padding: 6px 16px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; transition: 0.3s; }
.lang-switcher a.active { background: white; color: var(--opex-primary); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* Header */
header { background-color: #e5e5e7; padding: 3.5rem 1.5rem 6rem; text-align: center; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; }
.brand-logo { height: 65px; width: auto; display: block; margin: 0 auto 2rem; }
h1 { font-family: 'Poppins', sans-serif; font-size: 2.8rem; font-weight: 800; color: var(--opex-secondary); margin: 0; }
.subtitle { color: var(--opex-primary); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.1em; }

/* Framework Section */
.framework-section { max-width: 1200px; margin: -4rem auto 5rem; display: flex; flex-direction: column; align-items: center; min-height: 1000px; }
.circular-container { position: relative; width: 100%; height: 850px; display: flex; justify-content: center; align-items: center; }
.center-hub { position: absolute; width: 220px; height: 220px; background: var(--opex-secondary); color: white; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; border: 6px solid white; box-shadow: 0 20px 25px -5px rgba(8, 38, 69, 0.4); }
.joe-profile-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }

.shape-card { position: absolute; width: 290px; background: white; padding: 1.6rem; border-radius: 1.25rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08); border-top: 5px solid var(--opex-primary); }
.shape-card h2 { color: var(--opex-secondary); font-size: 1.1rem; margin: 0.6rem 0; font-weight: 700; }
.letter-tag { background: var(--bg-stone); color: var(--opex-primary); font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 0.4rem; }
.shape-card ul { padding-left: 1.1rem; font-size: 0.85rem; color: #444; line-height: 1.4; }

/* Grid Positioning */
.card-s { transform: translate(0, -320px); }
.card-h { transform: translate(360px, -80px); }
.card-a { transform: translate(230px, 280px); }
.card-p { transform: translate(-230px, 280px); }
.card-e { transform: translate(-360px, -80px); }

/* Standardized Footer */
footer { background-color: #e7e5e4; padding: 4rem 2rem; text-align: center; border-top: 1px solid #d6d3d1; }
.footer-logo { height: 45px; opacity: 0.6; margin-bottom: 1.5rem; }
.footer-name { font-size: 0.9rem; font-weight: 700; color: var(--opex-secondary); margin: 0 0 8px 0; }
.footer-title { font-size: 0.8rem; color: #444; line-height: 1.6; max-width: 900px; margin: 0 auto; }

@media (max-width: 1024px) {
    .framework-section { min-height: auto; }
    .circular-container { height: auto; flex-direction: column; }
    .center-hub { position: relative; margin-bottom: 2rem; }
    .shape-card { position: relative; transform: none !important; width: 90%; margin-bottom: 1rem; }
}