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

:root{
    --color-bg:#0a0a0b;
    --color-bg-secondary:#12121a;
    --color-bg-card:rgba(18,18,26,0.9);
    --color-text:#e8e8e8;
    --color-text-muted:#888899;
    --color-accent:#c4a35a;
    --color-accent-dim:#8b7a4a;
    --color-border:rgba(255,255,255,0.08);
    --color-positive:#4ade80;
    --color-negative:#f87171;
    --font-main:'Roboto',sans-serif;
    --font-heading:'Oswald',sans-serif;
    --transition:0.3s ease;
    --container-width:1400px;
    --header-height:70px
}

html{scroll-behavior:smooth}

body{
    font-family:var(--font-main);
    font-synthesis:none;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-size:15px;
    line-height:1.6;
    color:var(--color-text);
    background-color:var(--color-bg);
    min-height:100vh;
    overflow-x:hidden
}

.container{
    width:100%;
    max-width:var(--container-width);
    margin:0 auto;
    padding:0 24px
}

.header{
    position:fixed;
    top:0;left:0;
    width:100%;
    z-index:1000;
    background:rgba(10,10,11,0.9);
    will-change:background-color;
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--color-border)
}
.header__container{
    max-width:var(--container-width);
    margin:0 auto;
    padding:0 24px;
    height:var(--header-height);
    display:flex;
    align-items:center;
    justify-content:space-between
}
.header__logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--color-text)
}
.header__logo-text{
    font-family:var(--font-heading);
    font-size:20px;
    font-weight:600;
    letter-spacing:2px
}
.header__logo-accent{color:var(--color-accent)}
.header__nav{display:flex;align-items:center;gap:8px}

.nav-link{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    font-size:14px;
    font-weight:500;
    color:var(--color-text-muted);
    text-decoration:none;
    border-radius:8px;
    transition:var(--transition)
}
.nav-icon{width:18px;height:18px}
.nav-link:hover{background:rgba(255,255,255,0.05);color:var(--color-text)}
.nav-link--current{background:rgba(196,163,90,0.15);color:var(--color-accent)}
.nav-link--disabled{opacity:0.4;cursor:not-allowed}

.header__burger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:10px
}
.header__burger span{
    display:block;
    width:24px;height:2px;
    background:var(--color-text);
    transition:var(--transition)
}
.header__burger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.header__burger.active span:nth-child(2){opacity:0}
.header__burger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.mobile-menu{
    display:none;
    position:fixed;
    top:var(--header-height);
    left:0;
    width:100%;
    background:rgba(10,10,11,0.95);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--color-border);
    z-index:999;
    padding:20px 24px
}
.mobile-menu.active{display:block}
.mobile-menu__nav{display:flex;flex-direction:column;gap:8px}
.mobile-menu__link{
    display:block;
    padding:12px 16px;
    font-size:16px;
    color:var(--color-text);
    text-decoration:none;
    border-radius:8px;
    transition:var(--transition)
}
.mobile-menu__link:hover{background:rgba(255,255,255,0.05)}
.mobile-menu__link--current{background:rgba(196,163,90,0.15);color:var(--color-accent)}
.mobile-menu__link--disabled{opacity:0.4;cursor:not-allowed}

.footer{
    border-top:1px solid var(--color-border);
    padding:32px 0;
    background:rgba(0,0,0,0.3)
}
.footer__content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px
}
.footer__copy{font-size:14px;color:var(--color-text-muted)}
.footer__links{display:flex;gap:16px}
.footer__social{
    width:40px;height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.05);
    border-radius:10px;
    color:var(--color-text-muted);
    transition:var(--transition)
}
.footer__social svg{width:20px;height:20px}
.footer__social:hover{background:rgba(196,163,90,0.2);color:var(--color-accent)}

.scroll-top{
    position:fixed;
    bottom:30px;right:30px;
    width:48px;height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--color-accent);
    color:#0a0a0b;
    border:none;
    border-radius:12px;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:var(--transition);
    z-index:100
}
.scroll-top.visible{opacity:1;visibility:visible}
.scroll-top:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(196,163,90,0.3)}
.scroll-top svg{width:24px;height:24px}

.lang-switcher{position:relative;margin-left:16px}
.lang-switcher__btn{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    background:linear-gradient(135deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.02) 100%);
    border:1px solid var(--color-border);
    border-radius:12px;
    color:var(--color-text);
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    font-family:var(--font-main);
    font-size:14px;
    font-weight:500
}
.lang-switcher__btn:hover{
    border-color:var(--color-accent);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(196,163,90,0.15)
}
.lang-switcher__icon{
    width:20px;height:20px;
    color:var(--color-accent);
    transition:transform 0.3s ease
}
.lang-switcher__btn:hover .lang-switcher__icon{transform:rotate(20deg)}
.lang-switcher__current{
    font-weight:700;
    letter-spacing:1px;
    background:linear-gradient(135deg,var(--color-accent) 0%,#d4b86a 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text
}
.lang-dropdown{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    min-width:200px;
    background:rgba(18,18,26,0.98);
    backdrop-filter:blur(24px);
    border:1px solid rgba(196,163,90,0.2);
    border-radius:16px;
    padding:12px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px) scale(0.95);
    transform-origin:top right;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index:1001;
    box-shadow:0 20px 40px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.05) inset
}
.lang-dropdown::before{
    content:'';
    position:absolute;
    top:-6px;right:20px;
    width:12px;height:12px;
    background:rgba(18,18,26,0.98);
    border-left:1px solid rgba(196,163,90,0.2);
    border-top:1px solid rgba(196,163,90,0.2);
    transform:rotate(45deg)
}
.lang-dropdown.active{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.lang-dropdown__item{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:14px 16px;
    background:rgba(255,255,255,0.03);
    border:1px solid transparent;
    border-radius:12px;
    color:var(--color-text-muted);
    font-family:var(--font-main);
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
    text-align:left;
    position:relative
}
.lang-dropdown__item:not(:last-child){margin-bottom:8px}
.lang-dropdown__item:hover{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.1);
    color:var(--color-text);
    transform:translateX(4px)
}
.lang-dropdown__item.active{
    background:linear-gradient(135deg,rgba(196,163,90,0.15) 0%,rgba(196,163,90,0.08) 100%);
    border-color:rgba(196,163,90,0.3);
    color:var(--color-accent)
}
.lang-dropdown__flag{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;height:24px;
    font-size:24px;
    line-height:1;
    flex-shrink:0;
    border-radius:4px;
    overflow:hidden
}
.lang-dropdown__text{flex:1;line-height:24px}
.lang-dropdown__check{
    width:18px;height:18px;
    color:var(--color-accent);
    opacity:0;
    transform:scale(0.5);
    transition:all 0.2s ease
}
.lang-dropdown__item.active .lang-dropdown__check{opacity:1;transform:scale(1)}

.mobile-lang-switcher{
    display:flex;
    gap:12px;
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--color-border)
}
.mobile-lang-btn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:16px 20px;
    background:linear-gradient(135deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.02) 100%);
    border:1px solid var(--color-border);
    border-radius:12px;
    color:var(--color-text-muted);
    font-family:var(--font-main);
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1)
}
.mobile-lang-btn:hover{
    background:rgba(255,255,255,0.08);
    color:var(--color-text);
    transform:translateY(-2px)
}
.mobile-lang-btn.active{
    background:linear-gradient(135deg,rgba(196,163,90,0.2) 0%,rgba(196,163,90,0.1) 100%);
    border-color:var(--color-accent);
    color:var(--color-accent);
    box-shadow:0 4px 16px rgba(196,163,90,0.2)
}
.mobile-lang-btn .lang-dropdown__flag{width:28px;height:21px;font-size:22px}
.mobile-lang-btn span:not(.lang-dropdown__flag){line-height:21px}

.page-hero{padding:120px 0 40px;text-align:center}
.page-hero__title{
    font-family:var(--font-heading);
    font-size:clamp(36px,6vw,56px);
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;
    background:linear-gradient(135deg,var(--color-text) 0%,var(--color-accent) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:12px
}
.page-hero__subtitle{font-size:18px;color:var(--color-text-muted)}

@media(max-width:1200px){
    .header__nav{gap:4px}
    .nav-link{padding:8px 12px;font-size:13px}
    .lang-switcher{margin-left:8px}
}
@media(max-width:1024px){
    .header__nav{display:none}
    .header__burger{display:flex}
    .lang-switcher{display:none}
}
@media(max-width:768px){
    :root{--header-height:60px}
    .page-hero{padding:100px 0 30px}
    .page-hero__subtitle{font-size:16px}
    .mobile-lang-switcher{flex-direction:column}
}
@media(max-width:480px){
    .container{padding:0 16px}
    .scroll-top{bottom:20px;right:20px;width:44px;height:44px}
    .footer__content{flex-direction:column;text-align:center}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
    html{scroll-behavior:auto}
}
@media print{
    .header,.footer,.scroll-top,.bg-overlay,.mobile-menu{display:none}
    body{background:white;color:black}
}