/* ═══════════════════════════════════════════════════════════
   Starlit — новий дизайн: токени, шрифти, хедер, футер.
   Підключається ГЛОБАЛЬНО на всіх шаблонах (старих і нових),
   тому всі селектори мають префікс .nw- і не чіпають старі стилі.
════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Montserrat';
    src: url('../../fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../../fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --petrol:      #0d4a5f;
    --petrol-deep: #073143;
    --petrol-mid:  #15536b;
    --teal:        #3d8ba8;
    --teal-light:  #7db4c8;
    --ice:         #d9e7ec;
    --ice-soft:    #eef4f6;
    --paper:       #ffffff;
    --warm:        #faf8f4;
    --ink:         #1f2d33;
    --muted:       #5b6d74;
    --line:        rgba(13,74,95,.14);
    --line-light:  rgba(217,231,236,.18);
    --section-gap: 90px;
    --container:   1200px;
    --font:        "Montserrat", -apple-system, sans-serif;
}

/* ─── STICKY HEADER ─── */
.nw-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    height: 80px;
    display: flex; align-items: center;
    font-family: var(--font);
    box-sizing: border-box;
}
.nw-header *, .nw-header *::before, .nw-header *::after { box-sizing: border-box; }
.nw-header-inner {
    max-width: var(--container); margin: 0 auto; padding: 0 40px; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
}
.nw-logo {
    font-family: var(--font);
    font-size: 20px; font-weight: 700; letter-spacing: 0.1em;
    color: var(--petrol-deep); text-decoration: none;
    display: flex; align-items: center; gap: 10px;
}
.nw-logo img { height: 52px; width: auto; display: block; }
.nw-nav { display: flex; gap: 30px; }
.nw-nav a {
    font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none;
    letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.2s;
    font-family: var(--font); line-height: 1.65;
}
.nw-nav a:hover { color: var(--petrol); }
.nw-btn-header {
    font-family: var(--font); font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    background: var(--petrol); color: #fff;
    padding: 13px 26px; border: none; border-radius: 40px;
    text-decoration: none; transition: background 0.2s;
    line-height: 1.65; white-space: nowrap;
}
.nw-btn-header:hover { background: var(--petrol-deep); color: #fff; }

/* ─── MOBILE NAV TOGGLE ─── */
.nw-nav-toggle {
    display: none; flex-direction: column; gap: 5px; background: none; border: none;
    cursor: pointer; padding: 8px; z-index: 1010;
}
.nw-nav-toggle span { width: 24px; height: 2px; background: var(--petrol-deep); display: block; transition: all 0.25s; }
.nw-nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nw-nav-toggle.open span:nth-child(2) { opacity: 0; }
.nw-nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
    .nw-header { height: 66px; }
    .nw-header-inner { padding-left: 22px; padding-right: 22px; }
    .nw-logo img { height: 42px; }
    .nw-nav-toggle { display: flex; }
    .nw-nav {
        display: flex; flex-direction: column; gap: 0; position: fixed;
        top: 66px; left: 0; right: 0; background: var(--paper);
        border-bottom: 1px solid var(--line); padding: 8px 24px 20px;
        transform: translateY(-130%); opacity: 0; transition: all 0.25s; pointer-events: none;
    }
    .nw-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .nw-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .nw-btn-header { padding: 9px 18px; font-size: 11.5px; }
}

/* ─── FOOTER ─── */
.nw-footer {
    background: var(--petrol-deep); padding: 48px 0;
    font-family: var(--font); font-size: 16px; line-height: 1.65;
    box-sizing: border-box;
}
.nw-footer *, .nw-footer *::before, .nw-footer *::after { box-sizing: border-box; }
.nw-footer-container { max-width: var(--container); margin: 0 auto; padding: 0 40px; }
.nw-footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.nw-footer-logo { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 0.1em; }
.nw-footer-logo img { height: 38px; width: auto; display: block; }
.nw-footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.nw-footer-links a { font-size: 13px; color: rgba(255,255,255,.55); text-decoration: none; font-family: var(--font); }
.nw-footer-links a:hover { color: #fff; }
.nw-footer-copy { font-size: 12px; color: rgba(255,255,255,.35); }

@media (max-width: 560px) {
    .nw-footer-container { padding: 0 22px; }
    .nw-footer-inner { flex-direction: column; text-align: center; gap: 16px; }
}