/* === базове ================================= */
:root { --accent:#1A7A4A; }
::selection { background:var(--accent); color:#000; }
body { font-family:"Inter",sans-serif; }

.nav-link {
    position: relative;
    padding-bottom: 0.7rem;
    font-weight: 500;
    color: #111;
}
.nav-link::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.45rem;

    width: 4px;
    height: 4px;

    transform: translateX(-50%);
    border-radius: 50%;

    background-color: rgba(249, 121, 243, 0.55);

    opacity: 0;
    transition: opacity 0.2s ease;
}


.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;

    width: 140%;
    height: 220%;

    transform: translate(-50%, -50%);
    border-radius: 50%;

    background: radial-gradient(
            ellipse at center,
            rgb(26, 122, 74) 0%,
            rgba(121, 249, 132, 0.28) 28%,
            rgba(86, 159, 118, 0.12) 50%,
            rgba(232, 121, 249, 0.00) 75%
    );

    opacity: 0;
    filter: blur(14px);
    pointer-events: none;
    z-index: 0;

    transition: opacity 0.25s ease;
}

.nav-link.active::before {
    opacity: 1;
}
.nav-link:hover::before {
    opacity: 1;
}
.nav-link:hover::after {
    opacity: 1;
}
.nav-link {
    position: relative;
    z-index: 1;
}


.nav-link.active {
    color: #1A7A4A;
}
/* --- бургер --------------------------------- */
.burger-line{
    width:1.75rem;height:0.125rem;background:#111;
    transition:all .35s ease;
}
.burger-open .line-1{transform:translateY(9px) rotate(45deg);}
.burger-open .line-2{opacity:0;}
.burger-open .line-3{transform:translateY(-9px) rotate(-45deg);}

/* --- backdrop ------------------------------- */
.backdrop{
    position:fixed;inset:   0;z-index:40;
    background: rgba(34, 58, 67, 0.44);backdrop-filter:blur(4px);
    opacity:0;pointer-events:none;
    transition:opacity .35s ease;
}
.backdrop.show{opacity:1;pointer-events:auto;}

/* === drawer (градієнт) ====================== */
.mobile-drawer{
    margin-top: 88px;

    position: fixed;
    inset: 0;
    z-index: 45;

    padding: 3rem 1.5rem;

    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(248,248,255,0.82) 45%,
            rgb(15, 66, 40) 100%
    );

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.65,.05,.36,1);
}
.mobile-drawer.open{transform:translateX(0);}

.mobile-drawer::before{
    content:"";
    position:absolute;
    top:-32px;
    left:0;
    right:0;
    height:32px;

    background: linear-gradient(
            to bottom,
            rgba(29, 29, 142, 0),
            rgba(248,248,255,0.75)
    );

    pointer-events:none;
}
.site-nav{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;

    background: rgba(248,248,255,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

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


/* --- верхній рядок у drawer ----------------- */
.drawer-top{display:flex;justify-content:space-between;align-items:center;}
#closeBtn{
    font-size:2rem;line-height:1;color:#f3f3f3;cursor:pointer;
    transition:transform .25s ease;
}
#closeBtn:hover{transform:rotate(90deg);}

/* --- nav-пункти ----------------------------- */
.m-nav{
    margin-top:2.5rem;
    display:flex;flex-direction:column;gap:2.2rem;
    text-transform:uppercase;letter-spacing:.25em;
    font-size:1.1rem;font-weight:500;
}
.nav-link-mobile {
    position: relative;
    padding-left: 1.2rem;
    transition: color 0.25s ease;
}

.nav-link-mobile::after{
    content:"";position:absolute;left:0;bottom:-6px;
    width:0;height:2px;background:#e879f9;
    transition:width .3s ease;
}
.nav-link-mobile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;

    width: 6px;
    height: 6px;

    transform: translateY(-50%);
    border-radius: 50%;

    background: rgb(26, 122, 74);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.nav-link-mobile.active {
    color: #1A7A4A;;
}

.nav-link-mobile.active::before {
    opacity: 1;
}
.nav-link-mobile:active::before {
    opacity: 1;
}


.nav-link-mobile:hover{transform:translateX(8px);}
.nav-link-mobile:hover::after{width:2.5rem;}

/* --- "Запис" кнопка ------------------------- */
.btn-outline{
    border:1px solid #f3f3f3;padding:.75rem 2.2rem;
    text-transform:uppercase;letter-spacing:.18em;
    font-size:.9rem;margin-left:1rem;
    transition:background .25s,color .25s;
}
.btn-outline:hover{
    background:#f3f3f3;color:#1f1f1f;
}
/* тап-анімація */
.btn-outline:active,
.nav-link-mobile:active{transform:scale(.96);}

/* --- хрестик ----------------------------------------- */
.close-btn{
    position:relative;width:34px;height:34px;cursor:pointer;
    background:transparent;border:none;outline:none;
    /* плавна анімація обертання */
    transition:transform .25s ease;
}
.close-btn:hover{transform:rotate(90deg);}

.close-btn::before,
.close-btn::after{
    content:"";position:absolute;left:50%;top:50%;
    width:100%;height:2px;background:#f3f3f3;
    transform-origin:center;
}
.close-btn::before{transform:translate(-50%,-50%) rotate(45deg);}
.close-btn::after {transform:translate(-50%,-50%) rotate(-45deg);}
.close-btn{position:absolute;top:1.25rem;right:1rem;z-index:55;}

.mobile-drawer{
    color:#111;
}
.mobile-drawer *{
    color:#111;
}