/* =====================================================
   PROTOLICORNE
   Technology Studio by BFB Ltd
   Premium Dark Theme
===================================================== */

:root {

    --bg: #050505;
    --bg2: #0d0d0d;
    --bg3: #141414;

    --gold: #d4af37;
    --gold-light: #f0d87a;

    --white: #ffffff;
    --grey: #a0a0a0;
    --grey2: #666666;

    --border: rgba(212,175,55,0.15);

    --container: 1280px;
    --container-small: 820px;

    --radius: 16px;

}

/* =====================================================
   RESET
===================================================== */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {

    background:var(--bg);
    color:var(--white);

    font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

    line-height:1.7;

    overflow-x:hidden;
}

img {
    max-width:100%;
    display:block;
}

a {
    text-decoration:none;
    color:inherit;
}

ul {
    list-style:none;
}

/* =====================================================
   CONTAINERS
===================================================== */

.container {

    width:100%;
    max-width:var(--container);

    margin:auto;

    padding-left:40px;
    padding-right:40px;
}

.container-small {

    width:100%;
    max-width:var(--container-small);

    margin:auto;

    padding-left:40px;
    padding-right:40px;
}

/* =====================================================
   HEADER
===================================================== */

.header {

    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:1000;

    backdrop-filter: blur(16px);

    background:rgba(5,5,5,0.75);

    border-bottom:1px solid rgba(255,255,255,0.04);

    transition:all .3s;
}

.header .container {

    display:flex;
    justify-content:space-between;
    align-items:center;

    min-height:90px;
}

.logo-title {

    font-size:1.2rem;
    font-weight:700;
    letter-spacing:4px;
}

.logo-subtitle {

    color:var(--grey);

    font-size:0.8rem;

    margin-top:4px;
}

.menu {

    display:flex;
    gap:35px;
}

.menu a {

    color:var(--grey);

    transition:.25s;
}

.menu a:hover {

    color:var(--gold);
}

.menu-mobile-button {

    display:none;

    font-size:2rem;

    cursor:pointer;
}

.mobile-menu {

    display:none;

    position:fixed;

    top:90px;
    left:0;
    right:0;

    z-index:999;

    background:#0d0d0d;

    border-top:1px solid var(--border);
}

.mobile-menu a {

    display:block;

    padding:18px 25px;

    border-bottom:1px solid rgba(255,255,255,0.05);
}

/* =====================================================
   HERO
===================================================== */

.hero {

    position:relative;

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;
}

.hero-background {

    position:absolute;

    inset:0;
}

.hero-background img {

    width:100%;
    height:100%;

    object-fit:cover;

    filter:brightness(0.35);
}

.hero-overlay {

    position:absolute;
    inset:0;

    background:
            radial-gradient(
                    circle at center,
                    rgba(212,175,55,0.10),
                    transparent 50%
            );
}

.hero-content {

    position:relative;

    z-index:5;

    max-width:900px;

    text-align:center;

    padding:40px;
}

.hero-label {

    display:inline-block;

    margin-bottom:20px;

    color:var(--gold);

    letter-spacing:3px;

    font-size:.9rem;
}

.hero h1 {

    font-size:clamp(3rem,8vw,7rem);

    line-height:1;

    font-weight:700;

    margin-bottom:30px;
}

.hero p {

    max-width:720px;

    margin:auto;

    color:#d0d0d0;

    font-size:1.25rem;
}

.hero-buttons {

    margin-top:50px;

    display:flex;
    justify-content:center;
    gap:20px;

    flex-wrap:wrap;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn-primary {

    background:var(--gold);

    color:#000;

    padding:16px 28px;

    border-radius:999px;

    font-weight:600;

    transition:.3s;
}

.btn-primary:hover {

    transform:translateY(-2px);

    box-shadow:0 10px 30px rgba(212,175,55,.25);
}

.btn-secondary {

    border:1px solid rgba(255,255,255,0.2);

    padding:16px 28px;

    border-radius:999px;

    transition:.3s;
}

.btn-secondary:hover {

    border-color:var(--gold);

    color:var(--gold);
}

/* =====================================================
   SECTIONS
===================================================== */

.section {

    padding-top:140px;
    padding-bottom:140px;
}

.section-dark {

    background:var(--bg);
}

.section-black {

    background:var(--bg2);
}

.section-tag {

    color:var(--gold);

    letter-spacing:3px;

    font-size:.8rem;

    margin-bottom:18px;
}

.section h2 {

    font-size:clamp(2rem,4vw,4rem);

    line-height:1.1;

    margin-bottom:30px;
}

.section p {

    color:#d0d0d0;

    font-size:1.1rem;

    margin-bottom:20px;
}

.section-intro {

    font-size:1.3rem !important;

    color:#ffffff !important;
}

/* =====================================================
   STATS
===================================================== */

.stats-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:50px;
}

.stat-card {

    background:linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
    );

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:35px;

    transition:.3s;
}

.stat-card:hover {

    transform:translateY(-4px);

    border-color:rgba(212,175,55,.35);
}

.stat-number {

    color:var(--gold);

    font-size:2rem;

    font-weight:700;
}

.stat-label {

    color:var(--grey);

    margin-top:10px;
}

/* =====================================================
   EXPERTISE
===================================================== */

.expertise-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:50px;
}

.expertise-card {

    background:var(--bg3);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:35px;

    transition:.3s;
}

.expertise-card:hover {

    transform:translateY(-4px);

    border-color:rgba(212,175,55,.35);
}

.expertise-card h3 {

    color:var(--gold);

    margin-bottom:15px;

    font-size:1.2rem;
}

.expertise-card p {

    margin:0;

    color:#cfcfcf;
}

/* =====================================================
   TIMELINE
===================================================== */

.timeline {

    margin-top:60px;

    display:flex;
    flex-direction:column;
    gap:25px;
}

.timeline-item {

    border-left:2px solid var(--gold);

    padding-left:25px;
}

.timeline-year {

    color:var(--gold);

    font-weight:700;

    margin-bottom:6px;
}

.timeline-text {

    color:#d0d0d0;
}

/* =====================================================
   LINK
===================================================== */

.text-link {

    display:inline-block;

    margin-top:20px;

    color:var(--gold);

    transition:.3s;
}

.text-link:hover {

    transform:translateX(5px);
}

/* =====================================================
   CONTACT
===================================================== */

.section-contact {

    background:#080808;

    padding:140px 0;
}

form {

    margin-top:40px;
}

input,
textarea {

    width:100%;

    margin-bottom:18px;

    background:#121212;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    color:#fff;

    padding:18px;

    font-size:1rem;
}

input:focus,
textarea:focus {

    outline:none;

    border-color:var(--gold);
}

button {

    background:var(--gold);

    color:#000;

    border:none;

    border-radius:999px;

    padding:16px 32px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

button:hover {

    transform:translateY(-2px);
}

/* =====================================================
   FOOTER
===================================================== */

footer {

    padding:80px 20px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,0.05);
}

.footer-title {

    letter-spacing:4px;

    font-weight:700;

    margin-bottom:10px;
}

.footer-subtitle {

    color:var(--grey);

    margin-bottom:20px;
}

.footer-copy {

    color:var(--grey2);

    font-size:.9rem;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

    .stats-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .expertise-grid {
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width: 768px) {

    .container,
    .container-small {

        padding-left:24px;
        padding-right:24px;
    }

    .menu {
        display:none;
    }

    .menu-mobile-button {
        display:block;
    }

    .hero {

        min-height:auto;

        padding-top:160px;
        padding-bottom:120px;
    }

    .hero-content {

        padding:20px;
    }

    .hero p {

        font-size:1.05rem;
    }

    .stats-grid {

        grid-template-columns:1fr;
    }

    .expertise-grid {

        grid-template-columns:1fr;
    }

    .section {

        padding-top:90px;
        padding-bottom:90px;
    }
}

.section-image {
    margin-bottom: 50px;
}

.section-image img {
    width: 100%;
    display: block;
    border-radius: 18px;
    border: 1px solid rgba(212,175,55,0.15);
}

.language-switcher,
.mobile-language-switcher {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lang-button {
    width: 42px;
    height: 42px;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    border-radius: 8px !important;
    padding: 3px !important;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none !important;
}

.lang-button:hover {
    transform: none !important;
    border-color: rgba(212,175,55,0.55) !important;
}

.lang-button img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 4px;
}

.lang-button.active {
    border-color: #d4af37 !important;
}
.vision-logo {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 30px auto;
    opacity: 0.95;
}
.language-dropdown {
    position: relative;
}

.language-current {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
    color: #fff;
}

.language-current img,
.language-option img {
    width: 26px;
    height: 18px;
    object-fit: cover;
    border-radius: 3px;
}

.language-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 50px;
    min-width: 150px;
    background: #080808;
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 10px;
    padding: 8px;
    z-index: 1000;
}

.language-dropdown.open .language-menu {
    display: block;
}

.language-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    color: #fff;
    padding: 9px 10px;
    cursor: pointer;
    border-radius: 7px;
    text-align: left;
}

.language-option:hover,
.language-option.active {
    background: rgba(212,175,55,0.12);
}

.menu-mobile-button {
    cursor: pointer;
    z-index: 3000;
}

.mobile-menu {
    display: none;
}

.mobile-menu.open {
    display: block !important;
}