/* База */
* { margin: 0; padding: 0; box-sizing: border-box;  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
}
main{
    min-height: calc(100vh);
    width: 80%;
    margin-inline: auto;
    margin-top: 120px;
    margin-bottom: 90px;

}

/*--------------------------- ХЕАДЕР -------------------------*/
header {
    position: fixed; top: 0; z-index: 50;
    left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-around;
    padding: 8px 16px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
    user-select: none;
}
header a{
    margin-block: auto;
}
.logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.logo-accent {
    color: var(--primary);
}

header .btn{
    transition: .2s ease;
}
nav { display: flex; gap: 30px; font-weight: bold}

.mobile-nav{
    position: relative;
}
nav a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 15px;
    transition: color .2s;
    position: relative;
}
nav a:hover {
    color: var(--primary);
}
.header-actions { display: flex; align-items: center; gap: 14px; }
header .btn {
    padding: 8px 40px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 15px;
}
.btn-order {
    background: var(--primary);
    color: var(--text-primary);
    font-weight: 700;
}
#btn-order-header{
    border-radius: 15px;
}
.socials { display: flex; gap: 10px; align-items: center; height: 36px}

.socials a {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.socials a svg {
    fill: var(--text-secondary);
    transition: fill .2s;
}
.socials a:hover svg {
    fill: var(--primary);
}
.socials a img {
    transition: filter .2s;
}
.socials a:hover img {
    filter: invert(39%) sepia(91%) saturate(7471%) hue-rotate(245deg) brightness(94%) contrast(91%);
}

.burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; margin-right: 8px; }
.burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    margin: 4px 0;
    transition: transform .2s, opacity .2s;
}
.burger[aria-expanded="true"] .l1 { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .l2 { opacity: 0; }
.burger[aria-expanded="true"] .l3 { transform: translateY(-6px) rotate(-45deg); }

.btn-order:hover{
    background: var(--primary-hover);
    transform: scale(102%);
    color: white;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}
.mobile-panel { display: none; }

@media (max-width: 1024px) {
    nav a { font-size: 13px; }
    .btn { padding: 6px 12px; font-size: 13px; }
}
@media (max-width: 1080px) {
    .socials{
        display: none;
    }
}

@media (max-width: 900px) {

    .socials{
        display: block;
    }


    header { gap: 10px;
         justify-content: space-between;}
    header > nav > a[class*="btn"] { display: block; }
    header > nav > a { display: none; }
    .burger { display: inline-block; }

    .mobile-panel{
        position: absolute;
        display: none;
        top: var(--header-h, 56px);
        left: 0; right: 0;
        z-index: 999;
        background: var(--bg-dark);
        border-top: 1px solid var(--border);
        max-height: calc(100dvh - var(--header-h, 56px));
        overflow: auto;
    }
    .mobile-panel.open{
        opacity: 1;
        display: block;
        visibility: visible;
        transition-delay: 0s;
    }

    .mobile-inner { padding: 16px 16px; display: grid; gap: 15px;}
    .mobile-nav { display: grid; gap: 15px; }
    .mobile-nav a {
        text-decoration: none;
        color: var(--text-secondary);
        font-weight: bold;
        padding: 8px 0;
        border-bottom: 1px solid var(--border);
    }
    .mobile-nav a:hover { color: var(--primary); }
    .btn-order {
        width: 100%;
        text-align: center;
        padding: 8px 16px;
        font-size: 15px;
    }
}
@media (max-width: 480px) {
    .logo { font-size: 18px; }
}
.logo-img{
    width: 50px;
    height: 50px;

    border-radius: 50%;
    object-fit: cover;

    border: 2px solid #7C3AED;
}
/*--------------------------- ФУТЕР -------------------------*/
footer{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    border-top: 1px solid var(--border);
}
/* Безопасные отступы */
html, body { max-width: 100vw; overflow-x: clip; }
header, footer {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    box-sizing: border-box;
}

header nav {
    max-width: calc(100vw - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

footer img, footer svg { max-width: 100%; height: auto; }
footer .container { max-width: min(1200px, 100vw); box-sizing: border-box; }

@media (max-width: 900px) {
    .mobile-panel {
        left: 0; right: 0;
        max-width: 100vw;
        overflow-x: hidden;
    }
}
@media (max-width: 644px) {
    #btn-order-header{
        display: none;
    }
}
.footer-text{
    color: var(--text-muted);
    display:flex;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
}