:root{
  --bg:        #141414;
  --bg-2:      #1b1b1b;
  --card:      #1f1f1f;
  --olive:     #6f8c0a;
  --olive-dk:  #5d7507;
  --lime:      #c8fa3c;
  --lime-2:    #d4ff3f;
  --white:     #f4f4f0;
  --grey:      #8d8d86;
  --line:      rgba(244,244,240,.14);

  --font:  'Space Grotesk', system-ui, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;

  --pad: clamp(20px, 5vw, 90px);
  --ease: cubic-bezier(.16,1,.3,1);
  
  /* Бои за новото мени */
  --neon-green: #D2FF00;
  --bg-olive: #5B631B;
  --text-dark: #1A1A1A;
  --text-light: #FFFFFF;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--white);
  line-height:1.4;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
::selection{ background:var(--lime); color:#111; }

.section{ position:relative; padding:clamp(80px,14vh,160px) var(--pad); }

header {
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 2rem 3rem; display: flex; justify-content: space-between;
    align-items: flex-start; z-index: 100; pointer-events: none;
}

.logo {
    font-family: 'Bodoni Moda', serif;
    font-optical-sizing: auto;
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.10;
    letter-spacing: -0.01em;
    pointer-events: auto;
    color: #ffff;
    transition: color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 101;
}
.logo span {
    display: block;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: inherit;
    opacity: 1;
}
header a { text-decoration: none; }

.menu-btn {
    background-color: var(--neon-green); color: var(--text-dark);
    border: none; padding: 0.8rem 2rem; border-radius: 20px 0px 0px 0px;
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.9rem;
    cursor: pointer; pointer-events: auto; transition: transform 0.3s ease;
    z-index: 101;
}

/* =========================================================
   PROJECTS SLIDER
   ========================================================= */
.projects{ background:#0f0f0f; overflow:hidden; padding:0; height:100svh; }
.projects__viewport{ position:relative; height:100svh; display:flex; align-items:center; perspective:1200px; }
.slider{
  --sw: min(76vw, 620px);
  display:flex; align-items:center; gap:clamp(22px,4vw,52px);
  padding-inline:calc(50vw - var(--sw)/2);
  will-change:transform;
}
.slide{ flex:0 0 var(--sw); }
.slide__media{
  border-radius:18px; overflow:hidden; background:#1c1c1c;
  height:clamp(360px,58svh,620px);
  will-change:transform;
  box-shadow:0 40px 80px -36px rgba(0,0,0,.8);
}
.slide__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.slide:hover .slide__media img{ transform:scale(1.05); }
.slide__media--ph{ display:grid; place-items:center; border:1px solid var(--line); }
.slide__media--ph span{ color:var(--grey); letter-spacing:.2em; font-size:.8rem; text-transform:uppercase; }
.slide__meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:1.1rem; }
.slide__meta h3{ font-size:clamp(1.2rem,5vw,1.8rem); font-weight:700; }
.slide__meta span{ color:var(--grey); font-size:.8rem; }

.projects__hint{
  position:absolute; left:50%; bottom:clamp(16px,3vh,30px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--grey); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  z-index:5;
}

@media (min-width:900px){
  .slider{ --sw: min(60vw, 920px); gap:clamp(20px,3vw,44px); }
  .slide__media{ height:clamp(420px,68svh,720px); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .projects{ height:auto; padding:clamp(60px,10vh,120px) 0; }
  .projects__viewport{ height:auto; perspective:none; }
  .slider{ overflow-x:auto; transform:none !important; }
}

/* =========================================
   CENTERED FULL SCREEN MENU 
========================================= */
#full-menu {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background-color: rgba(43, 46, 36, 0.95); 
    z-index: 200; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    transform: translateY(-100%); 
    visibility: hidden; 
    overflow: hidden;
}

.close-menu {
    position: absolute; top: 2rem; right: 3rem; background: #fff; border: none; width: 50px; height: 50px;
    font-family: 'Syne', sans-serif; font-weight: 700; cursor: pointer;
    border-radius: 5px; font-size: 1.2rem; z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

.close-menu:hover {
    background-color: #D2FF00;
}

.menu-center-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: -5vh; 
}

.nav-links {
    list-style: none; 
    display: flex; 
    flex-direction: column; 
    gap: 0rem; 
    align-items: center; 
    padding: 0; 
    margin-bottom: 3rem; 
    width: 100%;
}

.nav-links li {
    display: flex; 
    align-items: flex-start; 
    justify-content: center; 
    opacity: 0; 
    transform: translateY(30px); 
    position: relative;
    border: none; 
    padding: 0;
}

.roll-link {
    font-family: 'Space Grotesk', sans-serif; 
    font-size: 8vw; 
    font-weight: 800; 
    color: #E5E5E5; 
    line-height: 1; 
    text-transform: uppercase;
    letter-spacing: -2px;
    padding: 0;
    text-decoration: none;
}

.nav-links .num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    color: var(--neon-green);
    font-weight: 700;
    margin-left: 1rem;
    margin-top: 1.5rem;
}

.menu-logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0; 
    animation: fadeInMenu 0.5s forwards 0.8s;
}

.logo-icon {
    font-size: 2rem;
    color: #888888;
    letter-spacing: 5px;
}

.menu-logo-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #888888;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

.menu-socials {
    position: absolute;
    bottom: 3rem;
    display: flex;
    gap: 3rem;
    opacity: 0;
    animation: fadeInMenu 0.5s forwards 1s;
}

.menu-socials a {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.menu-socials a:hover {
    color: var(--neon-green);
}

@keyframes fadeInMenu {
    to { opacity: 1; }
}

@media (max-width: 1024px) {
    header {
        padding: 1.5rem;
    }

    .logo {
        font-size: 1.1rem;
        color: #FFFFFF !important;
    }

    .menu-btn {
        padding: 0.6rem 1.5rem;
        border-radius: 14px 0px 0px 0px;
        color: #000000 !important;
    }

    #full-menu {
        flex-direction: column;
    }

    .menu-left {
        display: none !important;
    }

    .menu-right {
        width: 100%;
        height: 100%;
        padding: 6rem 2rem 2rem 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-links {
        width: 100%;
        transform: none !important;
        align-items: center;
    }

    .nav-links li {
        width: 100%;
        max-width: 320px;
        padding-bottom: 1.2rem;
    }

    .roll-link {
        font-size: 2.2rem !important;
    }

    .nav-links .num {
        font-size: 1rem;
    }

    .close-menu {
        top: 1.5rem;
        right: 1.5rem;
        width: 44px;
        height: 44px;
    }
}