/* RESET & GLOBAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', 'Poppins', system-ui, -apple-system, sans-serif;
    background-color: #000000;
    color: #F5E7C8;
    line-height: 1.6;
    position: relative;
    min-height: 100vh;
}

.circuit-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: #000;
}

.circuit-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='none' stroke='%23D4AF37' stroke-width='0.8' stroke-opacity='0.2' d='M20 20 L40 20 L40 40 L60 40 L60 60 M80 20 L100 20 L100 40 L120 40 L120 60 M140 20 L160 20 L160 40 L180 40 L180 60 M20 80 L40 80 L40 100 L60 100 L60 120 M80 80 L100 80 L100 100 L120 100 L120 120 M140 80 L160 80 L160 100 L180 100 L180 120 M20 140 L40 140 L40 160 L60 160 L60 180 M80 140 L100 140 L100 160 L120 160 L120 180 M140 140 L160 140 L160 160 L180 160 L180 180' /%3E%3Ccircle cx='40' cy='40' r='3' fill='%23D4AF37' fill-opacity='0.3'/%3E%3Ccircle cx='100' cy='40' r='3' fill='%23D4AF37' fill-opacity='0.3'/%3E%3Ccircle cx='160' cy='40' r='3' fill='%23D4AF37' fill-opacity='0.3'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 60px 60px;
    opacity: 0.5;
    pointer-events: none;
}

header {
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid #D4AF37;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
}

nav a {
    color: #F5E7C8;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

nav a:hover {
    color: #D4AF37;
    text-shadow: 0 0 4px rgba(212,175,55,0.5);
}

.lang-switch button {
    background: none;
    border: 1px solid #D4AF37;
    color: #D4AF37;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: 0.2s;
}

.lang-switch button:hover {
    background: #D4AF37;
    color: black;
}

main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.hero {
    text-align: center;
    padding: 4rem 1rem;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1 {
    font-size: 3.5rem;
    color: #D4AF37;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.tagline {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 300;
}

.quote {
    font-size: 1.2rem;
    font-style: italic;
    margin-bottom: 2rem;
    color: #e6d5a8;
}

.btn {
    display: inline-block;
    background: transparent;
    border: 2px solid #D4AF37;
    color: #D4AF37;
    padding: 0.8rem 1.8rem;
    margin: 0.5rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 40px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn:hover {
    background: #D4AF37;
    color: #000;
    box-shadow: 0 0 15px rgba(212,175,55,0.4);
}

.content-section {
    background: rgba(0,0,0,0.7);
    padding: 2rem;
    border-radius: 20px;
    border-left: 4px solid #D4AF37;
    margin-bottom: 2rem;
}

.content-section h2, .content-section h3 {
    color: #D4AF37;
    margin-bottom: 1rem;
}

.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    margin-top: 1rem;
}

.skills-list li {
    background: rgba(212,175,55,0.15);
    border: 1px solid rgba(212,175,55,0.5);
    padding: 0.5rem 1.2rem;
    border-radius: 30px;
    font-size: 0.9rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.service-card {
    background: rgba(0,0,0,0.8);
    border: 1px solid #D4AF37;
    border-radius: 16px;
    padding: 1.5rem;
    transition: transform 0.2s;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(212,175,55,0.2);
}

.service-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.service-card p {
    font-size: 0.95rem;
    color: #e6d5a8;
}

.contact-page .contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
}

.email-display {
    text-align: center;
    font-size: 1.2rem;
    background: rgba(212,175,55,0.1);
    display: inline-block;
    width: auto;
    margin: 1rem auto;
    padding: 0.5rem 1.5rem;
    border-radius: 40px;
    border: 1px dashed #D4AF37;
}

footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.85rem;
    border-top: 1px solid rgba(212,175,55,0.3);
    margin-top: 2rem;
}

@media (max-width: 768px) {
    nav {
        flex-direction: column;
    }
    h1 {
        font-size: 2.2rem;
    }
    .tagline {
        font-size: 1.1rem;
    }
    .hero {
        padding: 2rem 0;
    }
    .content-section {
        padding: 1.5rem;
    }
}