:root {
      --primary-color: #111;  /* Black */
      --accent-color: #555;   /* Gray for interaction */
      --background-color: #f8f9fa;
      --text-color: #343a40;
      --white: #ffffff;
    }
    body {font-family: Arial, sans-serif; margin:0; padding:0; background:var(--background-color); color:var(--text-color);}
    header {display:flex; justify-content:space-between; align-items:center; padding:20px; background: var(--white); border-bottom: 1px solid #dee2e6;}
    .logo-motto-container {display: flex; align-items: center; gap: 20px;}
    .languages {display:flex; gap:10px;}
    .languages button {
        border: none;
        background: transparent;
        padding: 6px 10px;
        border-radius: 6px;
        cursor: pointer;
        transition: opacity 0.3s;
        font-size: 24px;
        opacity: 0.5;
    }
    .languages button:hover, .languages button.active {
        opacity: 1;
    }
    h1 {font-size:42px; margin:0; color: var(--primary-color);}
    h2 {font-size:32px; margin:40px 0 10px; color: var(--primary-color);}
    p {font-size:18px; line-height:1.6;}
    .motto {padding:0;align-items:center;}
    #motto-subtitle { font-size: 24px; color: #6c757d; margin: 0;}
    .stats {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 2vw;
        margin: 40px 0;
        padding: 40px 5vw;
        background: var(--white);
    }
    .circle {
        width: clamp(150px, 22vw, 220px);
        height: clamp(150px, 22vw, 220px);
        border-radius: 50%;
        border: clamp(4px, 1vw, 6px) solid var(--accent-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: clamp(16px, 3vw, 24px);
        font-weight: bold;
        padding: 20px;
        background: var(--white);
        color: var(--primary-color);
        flex-shrink: 0;
    }
    section {padding: 20px 60px;}
    ul {font-size:18px; line-height:1.8; list-style: none; padding: 0;}
    ul li { margin-bottom: 10px; }
    footer {background:var(--primary-color); color:var(--white); padding:40px 60px; text-align: center;}
    a.pdf-link {color:var(--accent-color); text-decoration:none; font-weight: bold;}
    a.pdf-link:hover {text-decoration:underline;}
    .social-media { margin-top: 20px; }
    .social-media a { color: var(--white); text-decoration: none; font-size: 28px; margin: 0 15px; transition: color 0.3s; }
    .social-media a:hover { color: var(--accent-color); }