/* DNDB site header, GENERATED FILE. Do not hand-edit.
   =========================================================================
   Source of truth: the header block inside index.html's <style>.
   Regenerate with:  python3 tools/make-header-css.py

   Every page links this file LAST, after its own stylesheet, so these rules
   win wherever a page still carries an older transcription of the same
   selectors. That is deliberate: it makes the header identical everywhere
   without having to cut the old rules out of a 6000-line inline stylesheet
   first. The leftovers are dead weight, not a second opinion.

   Depends on: --dark, --m6, --t1 from the page's own token block, and on
   assets/css/header-cta.css for the Contact Us button's @property set and
   keyframes. Load header-cta.css before this file.

   Pages using it: index.html, reviews.html, capabilities.html, terms.html,
   privacy.html, agreement.html, and the three funnel pages under
   previews/2026-09-offer/. */

.site-header { position:fixed; top:0; left:0; right:0; z-index:100; }
@media (max-width: 1024px) {
    .site-header, .nav-wrap-halo { transition: transform .28s cubic-bezier(.4,0,.2,1); will-change: transform; }
    .site-header.nav-hidden { transform: translateY(-130%); }
    .site-header.nav-hidden ~ .nav-wrap-halo { transform: translateY(-130%); }
}
@media (prefers-reduced-motion: reduce) {
    .site-header, .nav-wrap-halo { transition: none; }
}
.nav-wrap-halo {
            position: fixed;
            left: max(4px, calc(50% - 620px));
            top: 14px;
            width: min(1240px, calc(100% - 8px));
            height: 101px;
            border-radius: 32px;
            background: rgba(255,255,255,0.03);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            pointer-events: none;
            z-index: 2;
            /* 30px feather on every side — no visible box edge to the effect */
            -webkit-mask-image:
                linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%),
                linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
            -webkit-mask-composite: source-in;
            mask-image:
                linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%),
                linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
            mask-composite: intersect;
        }
.nav-wrap {
            display:flex; flex-direction:row;
            justify-content:space-between; align-items:center;
            padding:0 24px; gap:60px;
            width:min(1200px, calc(100% - 48px)); height:69px;
            position:relative; left:max(24px, calc(50% - 600px)); top:30px;
            /* Liquid Glass — майже прозоре, фон проглядається наскрізь */
            background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
            backdrop-filter: blur(36px) saturate(140%) brightness(1.05);
            -webkit-backdrop-filter: blur(36px) saturate(140%) brightness(1.05);
            border-radius:16px;
            box-shadow:
                /* нижній темний край — глибина скла */
                0 -1px 0 rgba(120,130,160,0.18) inset,
                /* лівий відблиск */
                1px 0 0 rgba(255,255,255,0.4) inset,
                /* зовнішня тінь (м'яка віньєтка навколо скла) */
                0 6px 32px rgba(28,43,74,0.08),
                0 1px 6px rgba(28,43,74,0.04);
            overflow: hidden;
            transition: box-shadow .3s, background .3s;
        }
.nav-wrap-rim {
            position:absolute; inset:0;
            border-radius:inherit;
            border:1px solid rgba(255,255,255,0.55);
            mix-blend-mode:plus-lighter;
            pointer-events:none; z-index:1;
        }
.nav-wrap::before {
            content:'';
            position:absolute;
            top:0; left:0; right:0; height:55%;
            background: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 100%);
            border-radius:16px 16px 0 0;
            mix-blend-mode:plus-lighter;
            pointer-events:none; z-index:0;
        }
.nav-wrap::after {
            content:'';
            position:absolute;
            bottom:0; left:0; right:0; height:40%;
            background: linear-gradient(0deg, rgba(180,190,220,0.08) 0%, rgba(255,255,255,0) 100%);
            border-radius:0 0 16px 16px;
            mix-blend-mode:multiply;
            pointer-events:none; z-index:0;
        }
.site-header.scrolled .nav-wrap {
            background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 100%);
            box-shadow:
                0 -1px 0 rgba(120,130,160,0.18) inset,
                1px 0 0 rgba(255,255,255,0.4) inset,
                0 10px 44px rgba(28,43,74,0.12),
                0 2px 10px rgba(28,43,74,0.06);
        }
.nav-left { display:flex; flex-direction:row; align-items:center; gap:60px; flex:none; }
.nav-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.nav-logo img { width:113px; height:auto; display:block; }
.nav-links { display:flex; flex-direction:row; align-items:center; gap:4px; list-style:none; }
.nav-socials-item { display:none; }
.nav-lbl-mob { display:none; }
.nav-links li a {
            display:flex; align-items:center; justify-content:center;
            padding:5px 18px; height:35px; border-radius:10px;
            font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
            font-weight:400; font-size:16px; letter-spacing:-0.01em;
            font-variant:all-small-caps; color:var(--m6);
            text-decoration:none; transition:background .2s,color .2s; white-space:nowrap;
        }
.nav-links li a:hover { background:rgba(181,193,232,0.12); color:#7A8EC8; }
.nav-links li a.nav-active {
            background:rgba(181,193,232,0.18);
            color:var(--dark);
            font-weight:600;
        }
[data-theme="dark"] .nav-links li a.nav-active { color:#EDEFF5; }
.nav-has-sub { position:relative; }
.nav-caret { width:10px; height:6px; margin-left:7px; flex:none;
            transition:transform .2s; }
.nav-has-sub.is-open .nav-caret { transform:rotate(180deg); }
.nav-sub {
            position:fixed; top:0; left:0; z-index:130;
            min-width:236px; padding:8px; margin:0; list-style:none;
            border-radius:14px; z-index:120;
            background:linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.93) 100%);
            backdrop-filter:blur(36px) saturate(140%);
            -webkit-backdrop-filter:blur(36px) saturate(140%);
            box-shadow:
                0 -1px 0 rgba(120,130,160,0.18) inset,
                1px 0 0 rgba(255,255,255,0.4) inset,
                0 10px 44px rgba(28,43,74,0.14),
                0 2px 10px rgba(28,43,74,0.06);
            opacity:0; visibility:hidden;
            transform:translateX(-50%) translateY(-6px);
            transition:opacity .18s, transform .18s, visibility .18s;
        }
.nav-sub::before {
            content:''; position:absolute; left:0; right:0; top:-14px; height:14px;
        }
.nav-has-sub.is-open .nav-sub,
        .nav-sub.is-open {
            opacity:1; visibility:visible;
            transform:translateX(-50%) translateY(0);
        }
[data-theme="dark"] .nav-sub {
            background:linear-gradient(180deg, rgba(20,22,34,0.97) 0%, rgba(20,22,34,0.93) 100%);
        }
.nav-links .nav-sub li a,
        .nav-sub li a {
            display:flex; align-items:center; justify-content:flex-start;
            text-align:left; text-decoration:none;
            height:auto; min-height:38px; padding:9px 14px;
            font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
            font-weight:400; font-size:15px; letter-spacing:-0.01em;
            font-variant:all-small-caps; color:var(--t1);
            border-radius:10px; white-space:nowrap;
            transition:background .2s, color .2s;
        }
.nav-links .nav-sub li a:hover,
        .nav-sub li a:hover { background:rgba(181,193,232,0.18); color:var(--t1); }
[data-theme="dark"] .nav-links .nav-sub li a,
        [data-theme="dark"] .nav-sub li a { color:#EDEFF5; }
@media (prefers-reduced-motion: reduce) {
    .nav-sub, .nav-caret { transition:none; }
}
.nav-cta {
            display:flex; align-items:center; justify-content:center;
            padding:8px 22px; width:120px; height:36px; flex-shrink:0;
            background: linear-gradient(96.58deg, #71B5C9 -17.37%, var(--t1) 57.3%);
            border: none;
            border-radius:10px;
            font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
            font-size:13px; letter-spacing:0.01em; color:#fff;
            text-decoration:none; cursor:pointer; transition:opacity .2s,transform .2s;
        }
.nav-cta:hover { opacity:0.9; transform:translateY(-2px); }
.nav-burger {
            display:none; position:relative;
            width:22px; height:18px;
            background:none; border:none; cursor:pointer; padding:0;
        }
.nav-burger span {
            display:block; position:absolute;
            left:0; right:0; margin:0 auto;
            top:50%; margin-top:-1px;
            width:22px; height:2px;
            background:var(--dark); border-radius:2px;
            /* Rotation about each bar's own centre, which is the shared centre
               once the outer two have travelled there. */
            transform-origin:50% 50%;
            transition:transform .32s cubic-bezier(.22,.61,.36,1),
                       opacity .18s ease;
        }
.nav-burger span:nth-child(1) { transform:translateY(-7px); }
.nav-burger span:nth-child(3) { transform:translateY(7px); }
.nav-burger.is-open span:nth-child(1) { transform:translateY(0) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity:0; transform:scaleX(.4); }
.nav-burger.is-open span:nth-child(3) { transform:translateY(0) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
    .nav-burger span { transition:none; }
}
.nav-cta, .h-cta, .about-btn, .svc-contact-btn, .wfm-cta, .qo-btn, .btn-outline,
        .contacts-submit-btn, .proposal-submit-btn, .proposal-adddetails-btn {
            --sc-bg: #0d0d16;
            --sc-bg-subtle: #1a1818;
            --sc-hi: #67e8f9;
            --sc-hi-sub: #06b6d4;
            --sc-anim: gradient-angle linear infinite;
            --sc-dur: 3s;
            isolation: isolate; position: relative; overflow: hidden;
            border: 1px solid transparent !important;
            color: #fff !important;
            background:
                linear-gradient(var(--sc-bg), var(--sc-bg)) padding-box,
                conic-gradient(
                    from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
                    transparent,
                    var(--sc-hi) var(--gradient-percent),
                    var(--gradient-shine) calc(var(--gradient-percent) * 2),
                    var(--sc-hi) calc(var(--gradient-percent) * 3),
                    transparent calc(var(--gradient-percent) * 4)
                ) border-box !important;
            box-shadow: inset 0 0 0 1px var(--sc-bg-subtle);
            transition:
                --gradient-angle-offset 800ms cubic-bezier(0.25,1,0.5,1),
                --gradient-percent 800ms cubic-bezier(0.25,1,0.5,1),
                --gradient-shine 800ms cubic-bezier(0.25,1,0.5,1),
                opacity .2s, transform .2s;
            animation: var(--sc-anim) var(--sc-dur);
        }
.nav-cta::before, .nav-cta::after, .h-cta::before, .h-cta::after,
        .about-btn::before, .about-btn::after, .svc-contact-btn::before, .svc-contact-btn::after, .wfm-cta::before, .wfm-cta::after,
        .qo-btn::before, .qo-btn::after, .btn-outline::before, .btn-outline::after,
        .contacts-submit-btn::before, .contacts-submit-btn::after,
        .proposal-submit-btn::before, .proposal-submit-btn::after,
        .proposal-adddetails-btn::before, .proposal-adddetails-btn::after {
            content: ""; pointer-events: none; position: absolute;
            left: 50%; top: 50%; translate: -50% -50%; z-index: -1;
            animation: var(--sc-anim) var(--sc-dur);
        }
.nav-cta::before, .h-cta::before, .about-btn::before, .svc-contact-btn::before, .wfm-cta::before,
        .qo-btn::before, .btn-outline::before, .contacts-submit-btn::before, .proposal-submit-btn::before,
        .proposal-adddetails-btn::before {
            width: calc(100% - 6px); height: calc(100% - 6px);
            background: radial-gradient(circle at 2px 2px, #fff 0.5px, transparent 0) padding-box;
            background-size: 4px 4px; background-repeat: space;
            mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
            border-radius: inherit; opacity: .4;
        }
.nav-cta::after, .h-cta::after, .about-btn::after, .svc-contact-btn::after, .wfm-cta::after,
        .qo-btn::after, .btn-outline::after, .contacts-submit-btn::after, .proposal-submit-btn::after,
        .proposal-adddetails-btn::after {
            --sc-anim: shimmer linear infinite;
            width: 100%; aspect-ratio: 1;
            background: linear-gradient(-50deg, transparent, var(--sc-hi), transparent);
            mask-image: radial-gradient(circle at bottom, transparent 40%, black);
            opacity: .55;
        }
.nav-cta:hover, .h-cta:hover, .about-btn:hover, .svc-contact-btn:hover, .wfm-cta:hover, .qo-btn:hover, .btn-outline:hover,
        .contacts-submit-btn:hover, .proposal-submit-btn:hover, .proposal-adddetails-btn:hover {
            --gradient-percent: 20%;
            --gradient-angle-offset: 95deg;
            --gradient-shine: var(--sc-hi-sub);
        }
@media (max-width: 1024px) {
    .nav-cta, .h-cta, .about-btn, .svc-contact-btn, .wfm-cta, .qo-btn, .btn-outline,
            .contacts-submit-btn, .proposal-submit-btn, .proposal-adddetails-btn,
            .nav-cta::before, .nav-cta::after, .h-cta::before, .h-cta::after,
            .about-btn::before, .about-btn::after, .svc-contact-btn::before, .svc-contact-btn::after, .wfm-cta::before, .wfm-cta::after,
            .qo-btn::before, .qo-btn::after, .btn-outline::before, .btn-outline::after,
            .contacts-submit-btn::before, .contacts-submit-btn::after,
            .proposal-submit-btn::before, .proposal-submit-btn::after,
            .proposal-adddetails-btn::before, .proposal-adddetails-btn::after {
                animation: none !important;
            }
}
@media (min-width:1025px) and (max-width:1247px) {
    .nav-wrap { padding:0 16px; gap:24px; }
    .nav-left { gap:24px; }
    .nav-links li a { padding-left:10px; padding-right:10px; }
}
@media (max-width:1024px) {
    .nav-wrap { width:calc(100% - 48px); left:24px; gap:30px; }
    .nav-left { gap:30px; }
    .nav-wrap-halo { width:calc(100% - 8px); left:4px; }
}
@media (max-width:1024px) {
    .nav-links { display:none; }
    .nav-links.open {
                display:flex; flex-direction:column;
                position:fixed; inset:0;
                background:rgba(238,240,245,.97); backdrop-filter:blur(20px);
                justify-content:center; align-items:center;
                gap:0; z-index:90;
                /* Clears the floating pill at the top and the socials row at the
                   bottom, so the links centre in the space actually left over
                   rather than behind either of them. */
                padding:96px 24px 132px;
                box-sizing:border-box;
                overflow-y:auto;
            }
    .nav-links.open { gap:40px; }
    .nav-links.open li { width:100%; }
    .nav-links.open li a:not(.nav-social) {
                display:block; width:100%;
                /* The header rule pins every nav link to height:35px; the menu
                   rows are 25px of type instead.
                   The padding/negative-margin pair is deliberate: it grows the
                   touch target to 45px without adding to the laid-out height,
                   so the 40px gap above stays the real gap on screen while the
                   tappable area still clears the 44px minimum. */
                height:auto;
                line-height:25px;
                padding:10px 0; margin:-10px 0;
                text-align:center;
                font-family:'SF Pro Text',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
                font-size:22px; font-weight:400;
                letter-spacing:-0.05em;
                /* all-small-caps, not text-transform:uppercase — the labels stay
                   sentence case in the markup and the font draws the caps, which
                   is how the rest of the site sets this style. */
                text-transform:none; font-variant:all-small-caps;
                color:#60638A;
                background:none; border-radius:0;
            }
    .nav-links.open li a.nav-active {
                font-size:40px; font-weight:600;
                line-height:25px; letter-spacing:-0.05em;
                color:#222331; background:none;
            }
    .nav-links.open li a:not(.nav-social):hover { background:none; color:#222331; }
    .nav-lbl-wide { display:none; }
    .nav-lbl-mob { display:inline; }
    .nav-links.open .nav-socials-item {
                display:block;
                position:absolute; left:0; right:0; bottom:44px;
                width:auto;
            }
    .nav-socials {
                display:flex; justify-content:center; align-items:center;
                gap:34px;
            }
    .nav-links.open .nav-social {
                display:inline-flex; align-items:center; justify-content:center;
                width:24px; height:24px;
                min-width:24px; padding:0;
                /* Same ink as the contacts screen's row, not the draft's teal:
                   these are the same five marks and they should not change
                   colour depending on which screen you meet them on. */
                color:#60638A;
                transition:color .2s, transform .2s;
            }
    .nav-links.open .nav-social svg { height:16px; width:auto; display:block; }
    .nav-links.open .nav-social[aria-label="LinkedIn"]  svg { height:14px; }
    .nav-links.open .nav-social[aria-label="Upwork"]    svg { height:17px; }
    .nav-links.open .nav-social[aria-label="Dribbble"]  svg { height:18px; }
    .nav-links.open .nav-social[aria-label="Instagram"] svg { height:17px; }
    .nav-links.open .nav-social:hover { color:var(--t1); background:none; }
    .nav-links.open .nav-social:active { transform:scale(.92); }
    .nav-links.open .nav-caret {
                display:inline-block; width:12px; height:8px; margin-left:8px;
                vertical-align:middle; color:#60638A; transition:transform .2s;
            }
    .nav-links.open .nav-has-sub.is-open .nav-caret { transform:rotate(180deg); }
    .nav-links.open .nav-has-sub.is-open > a { color:#222331; }
    .nav-sub {
                position:static; opacity:1; visibility:visible; transform:none;
                min-width:0; padding:0; margin:18px 0 0;
                background:none; box-shadow:none; backdrop-filter:none;
                -webkit-backdrop-filter:none; border-radius:0;
                display:none; flex-direction:column; align-items:center; gap:14px;
            }
    .nav-links.open .nav-has-sub.is-open .nav-sub { display:flex; transform:none; }
    .nav-links.open .nav-sub li a {
                font-size:19px; font-weight:400; line-height:1.2;
                color:#60638A; padding:6px 0; min-height:0;
                justify-content:center; text-align:center; white-space:normal;
            }
    .nav-links.open .nav-sub li a:hover { color:#222331; background:none; }
    .nav-burger { display:block; }
    .nav-cta { display:none; }
}
body, .nav-wrap, .nav-wrap-halo, .qo-card,
        .about-title, .services-grid, .cases-inner {
            transition: background-color .35s ease, color .35s ease, border-color .35s ease;
        }
[data-theme="dark"] .nav-wrap {
            background: linear-gradient(180deg, rgba(20,22,34,0.55) 0%, rgba(20,22,34,0.32) 100%);
        }
[data-theme="dark"] .site-header.scrolled .nav-wrap {
            background: linear-gradient(180deg, rgba(20,22,34,0.72) 0%, rgba(20,22,34,0.5) 100%);
        }
[data-theme="dark"] .nav-wrap-halo { background: rgba(20,22,34,0.05); }
[data-theme="dark"] .nav-wrap-rim { border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .nav-wrap::before { background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 100%); }
[data-theme="dark"] .nav-wrap::after { background: linear-gradient(0deg, rgba(0,0,0,0.35) 0%, rgba(255,255,255,0) 100%); }
[data-theme="dark"] .nav-logo img { filter: brightness(0) invert(1); }
[data-theme="dark"] .nav-burger span { background: var(--dark); }
@media (max-width: 1024px) {
    .nav-wrap {
                width: min(calc(100% - 28px), 480px);
                left: 50%; transform: translateX(-50%);
                top: 14px;
                height: 64px; padding: 0 14px; gap: 12px;
                border-radius: 18px;
            }
    .nav-logo img { width: 106px; }
    .nav-burger {
                width: 44px; height: 44px;
                padding: 0;
                margin-right: -4px;
            }
    .nav-burger span { width: 24px; height: 2px; }
}
@media (max-width: 360px) {
    .nav-wrap { padding: 0 10px; }
    .nav-logo img { width: 92px; }
}
@media (max-width:1024px) {
    .nav-logo { position: relative; }
    .nav-logo::after {
                content: ''; position: absolute;
                left: 50%; top: 50%; translate: -50% -50%;
                width: max(100%, 44px); height: max(100%, 44px);
            }
}