/* ==========================================================================
   Nove-X company theme — "Ideas today | a smarter tomorrow"
   Logo colours: navy #0b1e3f, royal blue #0a46c8 → #1e8fff → cyan #19c3ff, silver.
   Active when SITE_THEME=novex.
   ========================================================================== */

:root {
    --nv-navy: #071430;
    --nv-navy-2: #0b1e3f;
    --nv-navy-3: #13295a;
    --nv-blue: #1561e8;
    --nv-blue-2: #1e8fff;
    --nv-cyan: #19c3ff;
    --nv-silver: #c3c9d4;
    --nv-silver-2: #8d96a8;
    --nv-bg: #050d20;
    --nv-card: rgba(255, 255, 255, .06);
    --nv-ink: #eef4ff;
    --nv-muted: #b3c1da;
    --nv-line: rgba(170, 215, 255, .22);
    --nv-sky: #7cc7ff;
    --nv-grad: linear-gradient(120deg, #0a46c8 0%, #1e8fff 55%, #19c3ff 100%);
    --nv-radius: 16px;
    --nv-shadow: 0 10px 30px rgba(7, 20, 48, .08);
    --nv-shadow-lg: 0 24px 60px rgba(7, 20, 48, .18);
    --nv-head: "Sora", "Segoe UI", system-ui, sans-serif;
    --nv-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --nv-max: 1220px;

    --nx-navy: var(--nv-navy-2);
    --nx-navy-deep: var(--nv-navy);
    --nx-accent: var(--nv-blue);
    --nx-accent-deep: #0a46c8;
    --nx-page-bg: var(--nv-bg);
    --nx-text: var(--nv-ink);
    --nx-text-muted: var(--nv-muted);
    --nx-border: var(--nv-line);
    --nx-font: var(--nv-body);
    --nx-max-width: var(--nv-max);
    --theme-text: var(--nv-ink);
}

html { background: var(--nv-bg); }
body.nv { background: transparent; color: var(--nv-ink); font: 400 16px/1.7 var(--nv-body); }
:where(body.nv) :where(h1, h2, h3, h4) { font-family: var(--nv-head); color: var(--nv-ink); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; }
body.nv a { color: inherit; }
body.nv .container, .nv-wrap { max-width: var(--nv-max); margin: 0 auto; padding: 0 22px; width: 100%; }
body.nv .section, body.nv .section-tight { background: transparent; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { flex: none; }
.nv-grad { background: var(--nv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nv-muted { color: var(--nv-muted); }
.nv-small { font-size: .85rem; }
.nv-center { text-align: center; }
.nv-narrow { max-width: 900px; }

/* Buttons */
.nv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; border-radius: 12px; border: 1.5px solid transparent; font: 600 .93rem/1 var(--nv-head); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.nv-btn svg { width: 17px; height: 17px; }
.nv-btn:hover { transform: translateY(-2px); }
.nv-btn-primary { background: var(--nv-grad); color: #fff !important; box-shadow: 0 10px 26px rgba(21, 97, 232, .35); }
.nv-btn-primary:hover { box-shadow: 0 14px 34px rgba(21, 97, 232, .45); }
.nv-btn-ghost { border-color: rgba(30, 143, 255, .45); color: var(--nv-blue) !important; background: rgba(30, 143, 255, .06); }
.nv-btn-ghost:hover { background: rgba(30, 143, 255, .14); }
.nv-hero .nv-btn-ghost, .nv-page-hero .nv-btn-ghost, .nv-cta .nv-btn-ghost, .nv-crm .nv-btn-ghost { color: #fff !important; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); }
.nv-btn-light { background: #fff; color: var(--nv-navy-2) !important; }
.nv-btn-wa { background: #1fae5b; color: #fff !important; box-shadow: 0 10px 24px rgba(31, 174, 91, .3); }
.nv-btn-wa:hover { background: #179a4f; }
.nv-link { display: inline-flex; gap: 6px; align-items: center; color: var(--nv-blue) !important; font: 600 .92rem var(--nv-head); text-decoration: none; }
.nv-link svg { width: 15px; height: 15px; transition: transform .2s; }
.nv-link:hover svg { transform: translateX(3px); }
.nv-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.nv-eyebrow { display: inline-block; font: 700 .76rem var(--nv-head); letter-spacing: .18em; text-transform: uppercase; color: var(--nv-blue-2); }
.nv-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: rgba(25, 195, 255, .1); border: 1px solid rgba(25, 195, 255, .35); color: #9be3ff; font: 600 .8rem var(--nv-head); }
.nv-pill svg { width: 14px; height: 14px; }
.nv-chip { display: inline-block; padding: 4px 10px; border-radius: 99px; background: rgba(21, 97, 232, .08); color: var(--nv-blue); font: 600 .74rem var(--nv-head); }

/* Decorative glows */
.nv-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .55; }
.nv-glow-a { width: 520px; height: 520px; background: #1561e8; top: -160px; right: -80px; }
.nv-glow-b { width: 420px; height: 420px; background: #19c3ff; bottom: -220px; left: -120px; opacity: .3; }
.nv-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(195, 201, 212, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(195, 201, 212, .06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%); pointer-events: none; }

/* Header */
.nv-header { position: sticky; top: 0; z-index: 900; background: rgba(7, 20, 48, .92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(195, 201, 212, .1); transition: box-shadow .25s; }
.nv-header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.nv-header-in { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.nv-logo img { height: 40px; width: auto; display: block; }
.nv-nav { margin-left: auto; }
.nv-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nv-nav a { display: block; padding: 9px 14px; border-radius: 10px; color: #d6deee !important; font: 500 .93rem var(--nv-head); text-decoration: none; transition: background .2s, color .2s; }
.nv-nav a:hover { color: #fff !important; background: rgba(255, 255, 255, .06); }
.nv-nav a.active { color: #fff !important; background: rgba(30, 143, 255, .16); box-shadow: inset 0 -2px 0 var(--nv-cyan); }
.nv-header-cta { display: flex; align-items: center; gap: 10px; }
.nv-header-cta .nv-btn { padding: 11px 20px; }
.nv-burger { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(195, 201, 212, .25); background: transparent; color: #fff; align-items: center; justify-content: center; cursor: pointer; }
.nv-burger svg { width: 22px; height: 22px; }
.nv-drawer { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.nv-drawer-bg { position: absolute; inset: 0; background: rgba(7, 20, 48, .6); opacity: 0; transition: opacity .25s; }
.nv-drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 88vw); background: var(--nv-navy); color: #fff; transform: translateX(100%); transition: transform .3s; display: flex; flex-direction: column; overflow-y: auto; }
.nv-drawer.open { pointer-events: auto; }
.nv-drawer.open .nv-drawer-bg { opacity: 1; }
.nv-drawer.open .nv-drawer-panel { transform: none; }
.nv-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nv-drawer-head img { height: 34px; }
.nv-drawer-head .nv-burger { display: inline-flex; }
.nv-drawer nav ul { list-style: none; margin: 0; padding: 8px 18px; }
.nv-drawer nav a { display: block; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); font: 600 1.05rem var(--nv-head); color: #e6ecf7 !important; text-decoration: none; }
.nv-drawer nav a.active { color: var(--nv-cyan) !important; }
.nv-drawer-contact { margin-top: auto; padding: 18px; display: grid; gap: 10px; background: var(--nv-navy-2); }
.nv-drawer-contact a { display: flex; gap: 10px; align-items: center; color: #cfe3ff !important; text-decoration: none; font-size: .92rem; }
.nv-drawer-contact svg { width: 17px; height: 17px; color: var(--nv-cyan); }
.nv-flash { max-width: var(--nv-max); margin: 18px auto 0; padding: 0 22px; }

/* Hero */
.nv-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 70% 20%, #13295a 0%, var(--nv-navy) 60%); color: #fff; }
.nv-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s, visibility .7s; }
.nv-slide.active { position: relative; opacity: 1; visibility: visible; }
.nv-slide-in { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: center; min-height: 600px; padding-top: 60px; padding-bottom: 100px; }
.nv-slide-copy h1, .nv-slide-copy h2 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.7rem); margin: 18px 0 16px; }
.nv-slide-copy p { color: #b9c6de; font-size: 1.1rem; max-width: 520px; margin: 0 0 30px; }
.nv-slide-visual { position: relative; }
.nv-slide-visual img { width: 100%; border-radius: 18px; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45)); }
.nv-slide.active .nv-slide-copy > * { animation: nvUp .7s both; }
.nv-slide.active .nv-slide-copy > *:nth-child(2) { animation-delay: .07s; }
.nv-slide.active .nv-slide-copy > *:nth-child(3) { animation-delay: .14s; }
.nv-slide.active .nv-slide-copy > *:nth-child(4) { animation-delay: .21s; }
.nv-slide.active .nv-slide-visual { animation: nvIn 1s both; }
@keyframes nvUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nvIn { from { opacity: 0; transform: translateX(30px) scale(.97); } to { opacity: 1; transform: none; } }
.nv-hero-nav { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 5; display: flex; align-items: center; }
.nv-dots { display: flex; gap: 8px; }
.nv-dot { width: 26px; height: 4px; border: 0; padding: 0; border-radius: 4px; background: rgba(255, 255, 255, .25); cursor: pointer; transition: width .3s, background .3s; }
.nv-dot.active { width: 48px; background: var(--nv-cyan); }
.nv-arrows { margin-left: auto; display: flex; gap: 8px; }
.nv-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nv-arrow svg { width: 18px; height: 18px; }

/* Trusted-by marquee */
.nv-trusted { background: var(--nv-navy-2); padding: 26px 0 30px; border-top: 1px solid rgba(195, 201, 212, .08); }
.nv-trusted-label { margin: 0 0 16px; text-align: center; color: var(--nv-silver-2); font: 600 .8rem var(--nv-head); letter-spacing: .14em; text-transform: uppercase; }
.nv-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nv-marquee-track { display: flex; width: max-content; animation: nvScroll 32s linear infinite; }
.nv-marquee-group { display: flex; gap: 18px; padding-right: 18px; flex: none; }
.nv-marquee:hover .nv-marquee-track { animation-play-state: paused; }
@keyframes nvScroll { to { transform: translateX(-50%); } }
.nv-logo-tile { flex: none; width: 200px; height: 86px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 14px 20px; transition: transform .2s; text-decoration: none; }
.nv-logo-tile:hover { transform: translateY(-3px); }
.nv-logo-tile img { max-width: 100%; max-height: 56px; object-fit: contain; }
.nv-logo-tile strong { color: var(--nv-navy-2); font-family: var(--nv-head); }

/* Sections */
.nv-section { padding: 90px 0; position: relative; }
.nv-section-alt { background: #fff; border-top: 1px solid var(--nv-line); border-bottom: 1px solid var(--nv-line); }
.nv-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.nv-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 10px 0 12px; }
.nv-head p { color: var(--nv-muted); margin: 0; font-size: 1.05rem; }
.nv-head-row { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; max-width: none; gap: 16px; flex-wrap: wrap; }
.nv-head-row h2 { margin-bottom: 0; }

/* Services */
.nv-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.nv-service { position: relative; background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 28px; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; overflow: hidden; display: block; }
.nv-service::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--nv-grad); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nv-service:hover { transform: translateY(-5px); box-shadow: var(--nv-shadow-lg); border-color: transparent; }
.nv-service:hover::after { transform: none; }
.nv-service-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--nv-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(21, 97, 232, .3); flex: none; }
.nv-service-icon svg { width: 26px; height: 26px; }
.nv-service-icon-lg { width: 68px; height: 68px; border-radius: 18px; }
.nv-service-icon-lg svg { width: 32px; height: 32px; }
.nv-service h3 { font-size: 1.2rem; margin: 18px 0 8px; }
.nv-service p { color: var(--nv-muted); margin: 0 0 14px; font-size: .95rem; }
.nv-more { display: inline-flex; gap: 6px; align-items: center; color: var(--nv-blue); font: 600 .88rem var(--nv-head); }
.nv-more svg { width: 15px; height: 15px; }

/* Work */
.nv-work { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.nv-work-card { background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: 18px; overflow: hidden; box-shadow: var(--nv-shadow); transition: transform .25s, box-shadow .25s; }
.nv-work-card:hover { transform: translateY(-5px); box-shadow: var(--nv-shadow-lg); }
.nv-browser { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #eef2f9; border-bottom: 1px solid var(--nv-line); }
.nv-browser span { width: 10px; height: 10px; border-radius: 50%; background: #c7cfdd; }
.nv-browser span:nth-child(1) { background: #ff6b6b; } .nv-browser span:nth-child(2) { background: #ffc145; } .nv-browser span:nth-child(3) { background: #33c26b; }
.nv-browser em { margin-left: 10px; font-style: normal; font-size: .78rem; color: var(--nv-muted); background: #fff; border-radius: 6px; padding: 2px 10px; }
.nv-work-shot { aspect-ratio: 16 / 10; overflow: hidden; }
.nv-work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.6s ease; }
.nv-work-card:hover .nv-work-shot img { transform: scale(1.04); }
.nv-work-body { padding: 20px 22px 24px; }
.nv-work-body h3 { margin: 10px 0 8px; font-size: 1.25rem; }
.nv-work-body p { color: var(--nv-muted); font-size: .94rem; margin: 0 0 12px; }
.nv-work-logo { display: block; margin-bottom: 10px; }
.nv-work-logo img { max-height: 42px; max-width: 170px; object-fit: contain; }

/* Steps */
.nv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.nv-steps li { counter-increment: s; background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 26px 22px; position: relative; }
.nv-steps li::before { content: "0" counter(s); display: block; font: 800 2rem var(--nv-head); background: var(--nv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.nv-steps strong { display: block; font: 700 1.1rem var(--nv-head); margin-bottom: 6px; }
.nv-steps span { color: var(--nv-muted); font-size: .93rem; }

/* Region toggle + pricing */
.nv-region { display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; background: #fff; border: 1px solid var(--nv-line); margin-top: 18px; box-shadow: var(--nv-shadow); }
.nv-region-btn { display: inline-flex; gap: 8px; align-items: center; padding: 10px 18px; border: 0; border-radius: 10px; background: transparent; color: var(--nv-muted); font: 600 .9rem var(--nv-head); cursor: pointer; transition: background .2s, color .2s; }
.nv-region-btn svg { width: 16px; height: 16px; }
.nv-region-btn.active { background: var(--nv-grad); color: #fff; }
.nv-region-note { margin-top: 12px !important; font-size: .9rem; }
.nv-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.nv-package { position: relative; background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: 20px; padding: 32px 28px; display: flex; flex-direction: column; }
.nv-package.is-featured { background: linear-gradient(160deg, #0b1e3f, #13295a); color: #fff; border-color: transparent; box-shadow: 0 24px 60px rgba(21, 97, 232, .3); transform: translateY(-8px); }
.nv-package.is-featured h3 { color: #fff; }
.nv-package-tag { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 99px; background: rgba(30, 143, 255, .14); color: var(--nv-blue-2); font: 700 .72rem var(--nv-head); }
.nv-package.is-featured .nv-package-tag { background: var(--nv-grad); color: #fff; }
.nv-package h3 { font-size: 1.3rem; margin: 0 0 14px; }
.nv-package-price { margin-bottom: 18px; }
.nv-price { font: 800 1.9rem var(--nv-head); letter-spacing: -.02em; }
.nv-package-price small { display: block; color: var(--nv-muted); font-size: .82rem; }
.nv-package.is-featured .nv-package-price small { color: #9fb2d6; }
.nv-package .nv-checks { margin: 0 0 24px; flex: 1; }
.nv-package.is-featured .nv-checks li { color: #d6e2f7; }
.nv-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.nv-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; }
.nv-checks svg { width: 18px; height: 18px; color: var(--nv-blue-2); margin-top: 3px; }
.nv-checks-2 { grid-template-columns: 1fr 1fr; gap: 8px 22px; }

/* Calculator */
.nv-calc { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; }
.nv-calc-block { background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 24px; margin-bottom: 18px; }
.nv-calc-block h3 { font-size: 1.1rem; margin: 0 0 12px; }
.nv-calc-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.nv-calc-row p { margin: 0; font-size: .9rem; }
.nv-calc-amt { text-align: right; }
.nv-calc-amt .nv-price { font-size: 1.3rem; }
.nv-calc-amt small { display: block; color: var(--nv-muted); font-size: .8rem; }
.nv-pages-label { display: block; margin: 18px 0 8px; font: 600 .95rem var(--nv-head); }
.nv-pages-label strong { color: var(--nv-blue); font-size: 1.2rem; }
#nvPages { width: 100%; accent-color: var(--nv-blue); height: 6px; }
.nv-calc .nv-small .nv-price { font-size: .9rem; font-weight: 700; }
.nv-addon { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 12px; border-radius: 12px; cursor: pointer; transition: background .2s; }
.nv-addon:hover { background: #f2f6ff; }
.nv-addon input { position: absolute; opacity: 0; pointer-events: none; }
.nv-addon-box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #c6d1e6; display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: background .2s, border-color .2s; }
.nv-addon-box svg { width: 15px; height: 15px; }
.nv-addon input:checked + .nv-addon-box { background: var(--nv-grad); border-color: transparent; color: #fff; }
.nv-addon input:focus-visible + .nv-addon-box { outline: 3px solid rgba(30, 143, 255, .4); }
.nv-addon-label { font-weight: 500; }
.nv-addon-price .nv-price { font-size: 1rem; font-weight: 700; color: var(--nv-ink); }
.nv-calc-sum { position: sticky; top: 100px; background: linear-gradient(160deg, #0b1e3f, #13295a); color: #fff; border-radius: 20px; padding: 26px; box-shadow: var(--nv-shadow-lg); display: grid; gap: 12px; }
.nv-calc-sum h3 { color: #fff; margin: 0; }
.nv-sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .9rem; color: #c8d5ec; max-height: 300px; overflow: auto; }
.nv-sum-list li { display: flex; justify-content: space-between; gap: 12px; }
.nv-sum-list li span:last-child { white-space: nowrap; color: #fff; }
.nv-sum-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 12px; }
.nv-sum-total strong { font: 800 1.7rem var(--nv-head); background: linear-gradient(120deg, #7cc7ff, #19c3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nv-calc-sum .nv-muted { color: #9fb2d6; margin: 0; }
.nv-calc-sum .nv-btn { width: 100%; }

/* CRM */
.nv-crm { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; background: radial-gradient(ellipse at 80% 20%, #13295a, var(--nv-navy) 70%); color: #fff; border-radius: 26px; padding: 54px; overflow: hidden; position: relative; }
.nv-crm h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 10px 0 12px; }
.nv-crm p { color: #b9c6de; }
.nv-crm .nv-checks { margin: 18px 0 26px; }
.nv-crm .nv-checks li { color: #d6e2f7; }
.nv-crm-visual img { width: 100%; border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .1); }
.nv-crm-products { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; }
.nv-crm-products .nv-actions { margin-top: 6px; }

/* Reviews */
.nv-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.nv-review { margin: 0; background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.nv-review-q svg { width: 28px; height: 28px; color: var(--nv-blue-2); }
.nv-review blockquote { margin: 0; color: var(--nv-ink); flex: 1; }
.nv-review figcaption { display: flex; gap: 12px; align-items: center; }
.nv-review figcaption img, .nv-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.nv-avatar { background: var(--nv-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 1rem var(--nv-head); }
.nv-review small { display: block; color: var(--nv-muted); }

/* CTA */
.nv-cta-wrap { padding-top: 20px; }
.nv-cta { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 46px 50px; border-radius: 24px; background: var(--nv-grad); color: #fff; box-shadow: 0 24px 60px rgba(21, 97, 232, .3); flex-wrap: wrap; }
.nv-cta h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 8px 0 8px; }
.nv-cta p { margin: 0; color: #e3efff; }
.nv-cta .nv-eyebrow { color: #d9f3ff; }
.nv-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Page hero */
.nv-page-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 75% 0%, #13295a, var(--nv-navy) 65%); color: #fff; padding: 56px 0 60px; }
.nv-page-hero .nv-glow { width: 420px; height: 420px; background: #1561e8; right: -120px; top: -200px; }
.nv-page-hero .nv-wrap { position: relative; }
.nv-page-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 10px 0 10px; }
.nv-page-hero p { color: #b9c6de; max-width: 760px; margin: 0; font-size: 1.05rem; }
.nv-crumbs { font-size: .85rem; color: var(--nv-silver-2); margin-bottom: 14px; }
.nv-crumbs a { color: #cfe0ff !important; text-decoration: none; }
.nv-crumbs span { margin: 0 7px; opacity: .5; }
.nv-crumbs em { font-style: normal; color: var(--nv-cyan); }

/* Services page */
.nv-service-rows { display: grid; gap: 22px; }
.nv-service-row { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: flex-start; background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: 20px; padding: 32px; scroll-margin-top: 100px; }
.nv-service-row h2 { font-size: 1.5rem; margin: 0 0 8px; }
.nv-lead { color: var(--nv-muted); margin: 0 0 16px; font-size: 1.02rem; }

/* About */
.nv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.nv-split h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 10px 0 14px; }
.nv-about-visual img { width: 100%; border-radius: 20px; box-shadow: var(--nv-shadow-lg); }
.nv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 50px; }
.nv-stat { background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 24px; text-align: center; }
.nv-stat strong { display: block; font: 800 1.8rem var(--nv-head); background: var(--nv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nv-stat span { color: var(--nv-muted); font-size: .9rem; }
.nv-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.nv-value { background: var(--nv-bg); border-radius: var(--nv-radius); padding: 24px; border: 1px solid var(--nv-line); }
.nv-value h3 { font-size: 1.1rem; margin: 0 0 8px; }
.nv-value p { margin: 0; color: var(--nv-muted); font-size: .93rem; }

/* Contact + forms */
.nv-contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; align-items: start; }
.nv-contact-card { display: flex; gap: 16px; align-items: center; background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 18px; margin-bottom: 14px; text-decoration: none; transition: border-color .2s; }
a.nv-contact-card:hover { border-color: var(--nv-blue-2); }
.nv-contact-card strong { display: block; font-family: var(--nv-head); }
.nv-wa-icon { background: #1fae5b; box-shadow: 0 10px 22px rgba(31, 174, 91, .3); }
.nv-map { border-radius: var(--nv-radius); overflow: hidden; border: 1px solid var(--nv-line); height: 250px; }
.nv-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.nv-panel { background: var(--nv-card); border: 1px solid var(--nv-line); border-radius: 20px; padding: 32px; box-shadow: var(--nv-shadow); }
.nv-form h2 { font-size: 1.5rem; margin: 0 0 6px; }
.nv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.nv-form label, .nv-panel form label { display: block; font: 600 .85rem var(--nv-head); margin: 12px 0 6px; }
.nv-form input, .nv-form textarea, .nv-form select { width: 100%; border: 1.5px solid var(--nv-line); border-radius: 12px; padding: 12px 14px; font: 500 .95rem var(--nv-body); background: #f8faff; color: var(--nv-ink); }
.nv-form input:focus, .nv-form textarea:focus { outline: 0; border-color: var(--nv-blue-2); box-shadow: 0 0 0 4px rgba(30, 143, 255, .14); background: #fff; }
.nv-form textarea { min-height: 140px; resize: vertical; }
.nv-form .nv-btn { margin-top: 18px; }
.nv-content a { color: var(--nv-blue); }

/* Footer */
.nv-footer { position: relative; overflow: hidden; background: var(--nv-navy); color: #9fb0cc; font-size: .93rem; }
.nv-glow-foot { width: 480px; height: 480px; background: #1561e8; opacity: .18; left: -160px; top: -240px; }
.nv-footer-grid { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px; padding-top: 64px; padding-bottom: 44px; }
.nv-footer-brand img { height: 40px; margin-bottom: 12px; }
.nv-tagline { color: var(--nv-silver); font: 600 .78rem var(--nv-head); letter-spacing: .18em; text-transform: uppercase; }
.nv-footer h4 { color: #fff; font-size: 1rem; margin: 0 0 14px; }
.nv-footer ul { list-style: none; margin: 0; padding: 0; }
.nv-footer li { margin-bottom: 9px; }
.nv-footer a { color: #b9c6de !important; text-decoration: none; }
.nv-footer a:hover { color: var(--nv-cyan) !important; }
.nv-footer-contact li { display: flex; gap: 10px; }
.nv-footer-contact svg { width: 16px; height: 16px; color: var(--nv-cyan); margin-top: 4px; }
.nv-social { display: flex; gap: 8px; margin-top: 12px; }
.nv-social a { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .06); display: inline-flex; align-items: center; justify-content: center; }
.nv-social svg, .nv-social img { width: 17px; height: 17px; }
.nv-footer-bottom { position: relative; border-top: 1px solid rgba(255, 255, 255, .07); font-size: .84rem; }
.nv-footer-bottom .nv-wrap { display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; padding-bottom: 20px; flex-wrap: wrap; }

/* Reveal */
.js-motion .nv-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js-motion .nv-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-motion .nv-reveal { opacity: 1; transform: none; } .nv-marquee-track, .nv-slide.active * { animation: none !important; } }
body.nv .whatsapp-widget { z-index: 950; }

/* Responsive */
@media (max-width: 1100px) {
    .nv-nav { display: none; }
    .nv-burger { display: inline-flex; }
    .nv-header-cta { margin-left: auto; }
    .nv-services, .nv-reviews { grid-template-columns: 1fr 1fr; }
    .nv-steps, .nv-values { grid-template-columns: 1fr 1fr; }
    .nv-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .nv-section { padding: 64px 0; }
    .nv-slide-in { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; padding-bottom: 96px; gap: 28px; }
    .nv-work, .nv-packages, .nv-crm, .nv-crm-products, .nv-calc, .nv-split, .nv-contact { grid-template-columns: 1fr; }
    .nv-package.is-featured { transform: none; }
    .nv-crm { padding: 34px 24px; }
    .nv-calc-sum { position: static; }
    .nv-service-row { grid-template-columns: 1fr; }
    .nv-stats { grid-template-columns: 1fr 1fr; }
    .nv-checks-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .nv-hide-sm { display: none; }
    .nv-logo img { height: 32px; }
    .nv-services, .nv-reviews, .nv-steps, .nv-values, .nv-footer-grid, .nv-form-grid { grid-template-columns: 1fr; }
    .nv-region { flex-direction: column; width: 100%; }
    .nv-region-btn { justify-content: center; }
    .nv-cta { padding: 32px 24px; }
    .nv-panel { padding: 22px; }
    .nv-logo-tile { width: 150px; height: 70px; }
    .nv-addon { grid-template-columns: auto 1fr; }
    .nv-addon-price { grid-column: 2; }
}
.nv-checks { align-content: start; }
.nv-slide-visual img { max-height: 520px; object-fit: contain; }
.nv-sum-list { max-height: none; }
.nv-calc-sum .nv-btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }

/* Website type picker on the pricing page: a strip of cards that slides sideways */
.nv-types-wrap { margin-bottom: 26px; }
.nv-types-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.nv-types-top h3 { margin: 0; font-size: 1.15rem; }
.nv-types-arrows { display: flex; gap: 8px; }
.nv-types-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--nv-line); background: #fff; color: var(--nv-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--nv-shadow); transition: background .2s, color .2s; }
.nv-types-arrow:hover { background: var(--nv-grad); color: #fff; border-color: transparent; }
.nv-types-arrow svg { width: 18px; height: 18px; }
.nv-types { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 4px 14px; scrollbar-width: thin; }
.nv-type { scroll-snap-align: start; display: grid; gap: 6px; align-content: start; text-align: left; padding: 18px; border-radius: var(--nv-radius); border: 2px solid var(--nv-line); background: var(--nv-card); color: var(--nv-ink); font: inherit; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.nv-type:hover { transform: translateY(-3px); box-shadow: var(--nv-shadow); }
.nv-type strong { font-family: var(--nv-head); font-size: 1rem; line-height: 1.3; }
.nv-type-icon { width: 42px; height: 42px; border-radius: 12px; background: #eef4ff; color: #1e8fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.nv-type-icon svg { width: 22px; height: 22px; }
.nv-type-from { font-size: .85rem; color: var(--nv-muted); }
.nv-type-from .nv-price { font-size: 1.05rem; font-weight: 700; color: var(--nv-ink); white-space: nowrap; }
.nv-type-pages { font-size: .78rem; color: var(--nv-muted); }
.nv-type.is-active { border-color: #1e8fff; box-shadow: 0 10px 30px rgba(30, 143, 255, .22); }
.nv-type.is-active .nv-type-icon { background: var(--nv-grad); color: #fff; }
.nv-type:focus-visible { outline: 3px solid rgba(30, 143, 255, .4); outline-offset: 2px; }
.nv-addon-incl { display: none; font-style: normal; font-weight: 700; font-size: .85rem; color: #0a8f5a; background: #e6f8ef; padding: 3px 10px; border-radius: 99px; }
.nv-addon.is-included { cursor: default; }
.nv-addon.is-included:hover { background: transparent; }
.nv-addon.is-included .nv-price { display: none; }
.nv-addon.is-included .nv-addon-incl { display: inline-block; }
@media (max-width: 600px) {
    .nv-types { grid-auto-columns: 74%; }
    .nv-types-top h3 { font-size: 1rem; }
}
.nv-calc-amt .nv-price { white-space: nowrap; }

/* ==========================================================================
   Glass UI: frosted panels with a bright edge over a fixed navy + blue light
   background. Sections stay transparent so every panel has light behind it.
   ========================================================================== */
:root {
    --nv-glass: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04) 55%, rgba(120, 190, 255, .08));
    --nv-glass-blue: linear-gradient(145deg, rgba(60, 150, 255, .42), rgba(21, 97, 232, .18) 60%, rgba(25, 195, 255, .2));
    --nv-glass-edge: rgba(150, 215, 255, .4);
    --nv-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 44px rgba(0, 8, 30, .4);
    --nv-glass-glow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(90, 190, 255, .35), 0 20px 50px rgba(20, 110, 255, .35);
    --nv-glass-radius: 34px 12px 34px 12px;
}
body.nv::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(46% 40% at 92% 6%, rgba(130, 175, 255, .5), transparent 72%),
        radial-gradient(60% 52% at 68% 38%, rgba(21, 97, 232, .5), transparent 74%),
        radial-gradient(44% 46% at 4% 88%, rgba(30, 125, 255, .42), transparent 72%),
        radial-gradient(34% 30% at 26% 22%, rgba(25, 195, 255, .12), transparent 72%),
        linear-gradient(160deg, #030a1c 0%, #071a45 52%, #030a1c 100%); }

body.nv h1, body.nv h2, body.nv h3, body.nv h4 { color: var(--nv-ink); }
/* Everything sits on the one background */
.nv-hero, .nv-page-hero, .nv-trusted, .nv-section-alt { background: transparent; border-color: rgba(170, 215, 255, .1); }
.nv-footer { background: rgba(3, 10, 28, .45); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid rgba(170, 215, 255, .14); }

/* Panels */
.nv-service, .nv-work-card, .nv-steps li, .nv-package, .nv-calc-block, .nv-calc-sum, .nv-review, .nv-service-row,
.nv-stat, .nv-value, .nv-contact-card, .nv-panel, .nv-map, .nv-type, .nv-crm, .nv-cta {
    background: var(--nv-glass); border: 1px solid var(--nv-glass-edge); border-radius: var(--nv-glass-radius); box-shadow: var(--nv-glass-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.nv-service:hover, .nv-work-card:hover, .nv-type:hover, a.nv-contact-card:hover { border-color: rgba(170, 225, 255, .75); box-shadow: var(--nv-glass-glow); }
.nv-service::after { display: none; }
.nv-package.is-featured, .nv-cta, .nv-type.is-active { background: var(--nv-glass-blue); border-color: rgba(170, 225, 255, .75); box-shadow: var(--nv-glass-glow); }
.nv-calc-sum { background: linear-gradient(150deg, rgba(40, 110, 230, .34), rgba(10, 30, 80, .5)); }
.nv-crm { background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(10, 30, 80, .35)); }

/* Buttons */
.nv-btn { border-width: 1px; border-radius: 14px; -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 26px rgba(0, 8, 30, .3); }
.nv-btn-primary { background: linear-gradient(135deg, rgba(60, 150, 255, .75), rgba(25, 195, 255, .32)); border-color: rgba(170, 225, 255, .7); }
.nv-btn-primary:hover { background: linear-gradient(135deg, rgba(80, 165, 255, .9), rgba(25, 195, 255, .5)); box-shadow: var(--nv-glass-glow); }
.nv-btn-ghost, .nv-hero .nv-btn-ghost, .nv-page-hero .nv-btn-ghost, .nv-cta .nv-btn-ghost, .nv-crm .nv-btn-ghost, .nv-calc-sum .nv-btn-ghost { background: rgba(255, 255, 255, .09); border-color: rgba(190, 225, 255, .4); color: #fff !important; }
.nv-btn-ghost:hover { background: rgba(255, 255, 255, .18); }
.nv-btn-light { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); color: #fff !important; }
.nv-btn-light:hover { background: rgba(255, 255, 255, .3); }
.nv-btn-wa { background: linear-gradient(135deg, rgba(31, 174, 91, .8), rgba(31, 174, 91, .4)); border-color: rgba(150, 240, 190, .6); }
.nv-btn-wa:hover { background: linear-gradient(135deg, rgba(31, 174, 91, .95), rgba(31, 174, 91, .6)); }
.nv-arrow, .nv-types-arrow, .nv-burger, .nv-social a { background: rgba(255, 255, 255, .09); border: 1px solid rgba(190, 225, 255, .35); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nv-arrow:hover, .nv-types-arrow:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: rgba(190, 225, 255, .6); }

/* Header */
.nv-header { background: rgba(5, 15, 42, .5); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border-bottom-color: rgba(170, 215, 255, .18); }
.nv-nav a.active { background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(170, 225, 255, .3); }
.nv-drawer-panel { background: rgba(5, 15, 42, .78); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border-left: 1px solid rgba(170, 215, 255, .25); }
.nv-drawer-contact { background: rgba(255, 255, 255, .05); }

/* Small parts */
.nv-eyebrow { color: var(--nv-sky); }
.nv-link, .nv-more, .nv-content a, .nv-pages-label strong { color: var(--nv-sky) !important; }
.nv-chip { background: rgba(124, 199, 255, .14); color: #cfeaff; }
.nv-package-tag { background: rgba(255, 255, 255, .12); color: #cfeaff; }
.nv-package.is-featured .nv-package-tag { background: rgba(255, 255, 255, .22); }
.nv-package.is-featured .nv-package-price small { color: #d6e6fb; }
.nv-checks svg, .nv-review-q svg { color: var(--nv-sky); }
.nv-service-icon, .nv-type-icon { background: linear-gradient(145deg, rgba(60, 150, 255, .5), rgba(25, 195, 255, .18)); border: 1px solid rgba(170, 225, 255, .5); color: #dff3ff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.nv-wa-icon { background: linear-gradient(145deg, rgba(31, 174, 91, .75), rgba(31, 174, 91, .3)); border-color: rgba(150, 240, 190, .6); }
.nv-type.is-active .nv-type-icon { background: rgba(255, 255, 255, .2); }
.nv-type-from .nv-price { color: #fff; }
.nv-logo-tile { background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(0, 8, 30, .3); }
.nv-browser { background: rgba(255, 255, 255, .07); border-bottom-color: rgba(170, 215, 255, .18); }
.nv-browser em { background: rgba(255, 255, 255, .1); color: #d6e2f7; }
.nv-work-logo img { background: rgba(255, 255, 255, .9); border-radius: 8px; padding: 4px 8px; }
.nv-grad, .nv-steps li::before, .nv-stat strong { background: linear-gradient(120deg, #7cc7ff, #19c3ff 60%, #d6f1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Region toggle, calculator, forms */
.nv-region { background: rgba(255, 255, 255, .08); border-color: var(--nv-glass-edge); box-shadow: var(--nv-glass-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nv-region-btn.active { background: linear-gradient(135deg, rgba(60, 150, 255, .75), rgba(25, 195, 255, .32)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(170, 225, 255, .5); }
.nv-addon:hover { background: rgba(255, 255, 255, .07); }
.nv-addon-box { border-color: rgba(190, 225, 255, .45); background: rgba(255, 255, 255, .05); }
.nv-addon-incl { background: rgba(31, 174, 91, .22); color: #a5f0c6; }
.nv-types { scrollbar-color: rgba(170, 215, 255, .4) transparent; }
#nvPages { accent-color: var(--nv-blue-2); }
.nv-form input, .nv-form textarea, .nv-form select { background: rgba(255, 255, 255, .07); border: 1px solid rgba(190, 225, 255, .3); color: #fff; }
.nv-form input::placeholder, .nv-form textarea::placeholder { color: #9fb2d6; }
.nv-form input:focus, .nv-form textarea:focus { background: rgba(255, 255, 255, .12); }
.nv-form select option { background: #0b1e3f; color: #fff; }

/* Browsers without blur get a solid enough panel to keep text readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nv-service, .nv-work-card, .nv-steps li, .nv-package, .nv-calc-block, .nv-review, .nv-service-row, .nv-stat, .nv-value, .nv-contact-card, .nv-panel, .nv-type { background: rgba(19, 41, 90, .88); }
}
@media (max-width: 600px) {
    :root { --nv-glass-radius: 26px 10px 26px 10px; }
}

/* ==========================================================================
   Liquid glass: wet highlights on every edge, light that follows the pointer,
   glossy blue icons, floating orbs and blurred banners behind the hero glass.
   ========================================================================== */
:root {
    --nv-liquid-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .6), inset 0 -1px 1px rgba(255, 255, 255, .16), inset 0 0 26px rgba(120, 190, 255, .14), 0 22px 50px rgba(0, 8, 30, .45);
    --nv-liquid-glow: inset 0 1.5px 1px rgba(255, 255, 255, .75), inset 0 -1px 1px rgba(255, 255, 255, .2), inset 0 0 30px rgba(120, 200, 255, .22), 0 0 0 1px rgba(90, 190, 255, .4), 0 24px 56px rgba(20, 110, 255, .42);
    --nv-liquid-icon: radial-gradient(60% 42% at 34% 16%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%), radial-gradient(85% 80% at 74% 96%, rgba(40, 215, 255, .9), rgba(40, 215, 255, 0) 62%), linear-gradient(155deg, rgba(40, 130, 255, .82), rgba(6, 46, 170, .92));
}
.nv-service, .nv-work-card, .nv-steps li, .nv-package, .nv-calc-block, .nv-calc-sum, .nv-review, .nv-service-row,
.nv-stat, .nv-value, .nv-contact-card, .nv-panel, .nv-type, .nv-crm, .nv-cta, .nv-slide-copy, .nv-slide-visual, .nv-page-glass {
    --nv-sheen: radial-gradient(340px circle at var(--mx, 22%) var(--my, 0%), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 70%);
    background: var(--nv-sheen), var(--nv-glass); box-shadow: var(--nv-liquid-shadow);
    -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); }
.nv-package.is-featured, .nv-cta, .nv-type.is-active { background: var(--nv-sheen), var(--nv-glass-blue); box-shadow: var(--nv-liquid-glow); }
.nv-calc-sum { background: var(--nv-sheen), linear-gradient(150deg, rgba(40, 110, 230, .34), rgba(10, 30, 80, .5)); }
.nv-crm { background: var(--nv-sheen), linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(10, 30, 80, .35)); }
.nv-service:hover, .nv-work-card:hover, .nv-type:hover, a.nv-contact-card:hover { box-shadow: var(--nv-liquid-glow); }

    box-shadow: inset -12px -16px 34px rgba(0, 20, 90, .6), 0 0 60px rgba(30, 140, 255, .55); animation: nvFloat 13s ease-in-out infinite alternate; }
.nv-slide-in { z-index: 2; gap: 30px; padding-top: 48px; padding-bottom: 96px; }
.nv-slide-copy { padding: 36px 34px; border: 1px solid var(--nv-glass-edge); border-radius: var(--nv-glass-radius); }
.nv-slide-copy h1, .nv-slide-copy h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.nv-slide-copy p { color: #d6e2f7; }
.nv-slide-visual { padding: 14px; border: 1px solid var(--nv-glass-edge); border-radius: var(--nv-glass-radius); }
.nv-slide-visual img { display: block; border-radius: 22px 8px 22px 8px; }
.nv-pill { background: rgba(255, 255, 255, .12); border-color: rgba(190, 230, 255, .5); color: #e4f5ff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nv-dot { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45); }

/* Page hero + logo band */
.nv-page-hero .nv-wrap { z-index: 2; }
.nv-page-glass { padding: 30px 34px; border: 1px solid var(--nv-glass-edge); border-radius: var(--nv-glass-radius); }
.nv-page-hero p { color: #d6e2f7; }
.nv-trusted { background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .28); position: relative; z-index: 2; }

/* Glossy blue icons */
.nv-service-icon, .nv-type-icon { background: var(--nv-liquid-icon); border: 1px solid rgba(190, 235, 255, .6); border-radius: 34%; color: #fff; box-shadow: inset 0 2px 2px rgba(255, 255, 255, .75), inset 0 -7px 12px rgba(0, 30, 130, .6), 0 12px 24px rgba(20, 110, 255, .5); }
.nv-service-icon svg, .nv-type-icon svg { filter: drop-shadow(0 2px 3px rgba(0, 20, 90, .7)); }
.nv-type.is-active .nv-type-icon { background: var(--nv-liquid-icon); }
.nv-wa-icon { background: radial-gradient(60% 42% at 34% 16%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%), linear-gradient(155deg, rgba(50, 215, 125, .9), rgba(10, 120, 70, .95)); border-color: rgba(190, 255, 220, .6); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .75), inset 0 -7px 12px rgba(0, 70, 40, .6), 0 12px 24px rgba(31, 174, 91, .45); }
.nv-checks svg, .nv-footer-contact svg, .nv-drawer-contact svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: #fff; background: var(--nv-liquid-icon); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -3px 5px rgba(0, 30, 130, .55), 0 4px 10px rgba(20, 110, 255, .4); margin-top: 1px; }
.nv-review-q svg { color: #bfe6ff; filter: drop-shadow(0 3px 8px rgba(30, 140, 255, .7)); }

/* Liquid buttons */
.nv-btn, .nv-region-btn { border-radius: 999px; }
.nv-region { border-radius: 999px; }
.nv-btn { --nv-gloss: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06) 46%, rgba(255, 255, 255, 0) 52%); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .7), inset 0 -2px 6px rgba(0, 20, 90, .3), 0 12px 28px rgba(0, 8, 30, .35); }
.nv-btn-primary { background: var(--nv-gloss), linear-gradient(135deg, rgba(40, 130, 255, .85), rgba(25, 195, 255, .5)); }
.nv-btn-primary:hover { background: var(--nv-gloss), linear-gradient(135deg, rgba(70, 155, 255, .95), rgba(25, 195, 255, .65)); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .8), 0 0 0 1px rgba(90, 190, 255, .4), 0 16px 36px rgba(20, 110, 255, .55); }
.nv-btn-ghost, .nv-hero .nv-btn-ghost, .nv-page-hero .nv-btn-ghost, .nv-cta .nv-btn-ghost, .nv-crm .nv-btn-ghost, .nv-calc-sum .nv-btn-ghost { background: var(--nv-gloss), rgba(255, 255, 255, .08); }
.nv-btn-wa { background: var(--nv-gloss), linear-gradient(135deg, rgba(31, 174, 91, .88), rgba(31, 174, 91, .5)); }
.nv-btn-light { background: var(--nv-gloss), rgba(255, 255, 255, .18); }

@media (max-width: 900px) {
    .nv-slide-in { padding-top: 26px; padding-bottom: 90px; gap: 18px; }
    }
@media (max-width: 600px) {
    .nv-slide-copy { padding: 24px 20px; }
    .nv-page-glass { padding: 22px 20px; }
    .nv-slide-visual { padding: 9px; }
}

/* ==========================================================================
   Liquid background + clear glass: flowing blue / violet waves (liquid-bg.webp)
   seen through thin, nearly clear panels, and a floating glass pill menu.
   ========================================================================== */
:root {
    --nv-lav: #c4baff;
    --nv-glass: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 50%, rgba(196, 186, 255, .08)), linear-gradient(rgba(5, 9, 58, .34), rgba(5, 9, 58, .34));
    --nv-glass-blue: linear-gradient(145deg, rgba(120, 130, 255, .3), rgba(60, 70, 240, .14) 55%, rgba(120, 90, 255, .24)), linear-gradient(rgba(10, 14, 90, .3), rgba(10, 14, 90, .3));
    --nv-glass-edge: rgba(255, 255, 255, .28);
    --nv-liquid-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 -1px 1px rgba(255, 255, 255, .12), 0 20px 46px rgba(2, 4, 34, .4);
    --nv-liquid-glow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -1px 1px rgba(255, 255, 255, .18), 0 0 0 1px rgba(196, 186, 255, .35), 0 22px 54px rgba(60, 70, 255, .4);
    --nv-liquid-icon: radial-gradient(60% 42% at 34% 16%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 72%), radial-gradient(85% 80% at 74% 96%, rgba(150, 130, 255, .85), rgba(150, 130, 255, 0) 62%), linear-gradient(155deg, rgba(50, 110, 255, .72), rgba(30, 30, 170, .8));
}
body.nv::before { background: linear-gradient(rgba(3, 6, 38, .22), rgba(3, 6, 38, .22)), url("liquid-bg.webp") center / cover no-repeat; }
.nv-hero, .nv-page-hero, .nv-trusted, .nv-section-alt { border: 0; }
.nv-section-alt { background: transparent; }
.nv-trusted { background: rgba(5, 9, 58, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .08); }
.nv-footer { background: rgba(3, 6, 38, .55); }
.nv-head, .nv-types-top h3, .nv-trusted-label { text-shadow: 0 2px 16px rgba(3, 6, 38, .75); }
.nv-grad, .nv-head .nv-grad { text-shadow: none; }
.nv-head p { color: #dbe3f7; }
.nv-eyebrow { color: var(--nv-lav); }
.nv-link, .nv-more, .nv-content a, .nv-pages-label strong { color: var(--nv-lav) !important; }
.nv-grad, .nv-steps li::before, .nv-stat strong { background: linear-gradient(120deg, #d8d0ff, #8fc8ff 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nv-sum-total strong { background: linear-gradient(120deg, #d8d0ff, #8fc8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nv-slide-copy p, .nv-page-hero p { color: #e4e9fa; }
.nv-calc-sum, .nv-crm { background: var(--nv-sheen), var(--nv-glass); }

.nv-split > :first-child { padding: 34px; border: 1px solid var(--nv-glass-edge); border-radius: var(--nv-glass-radius); background: var(--nv-glass); box-shadow: var(--nv-liquid-shadow); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); }

/* Floating header with the glass pill menu */
.nv-header { background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .25s; }
.nv-header.is-scrolled { background: rgba(3, 6, 38, .4); box-shadow: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nv-header-in { min-height: 96px; }
.nv-nav { position: relative; margin: 0 auto; padding: 6px; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .3); background: linear-gradient(120deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 55%, rgba(196, 186, 255, .12)); box-shadow: var(--nv-liquid-shadow); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); }
.nv-nav::after { content: ""; position: absolute; right: 7%; top: 5px; width: 130px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none; }
.nv-nav ul { position: relative; z-index: 1; gap: 2px; }
.nv-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 76px; padding: 7px 12px 6px; border-radius: 999px; font: 500 .74rem var(--nv-body); color: #fff !important; }
.nv-nav a svg { width: 21px; height: 21px; }
.nv-nav a:hover { background: rgba(255, 255, 255, .1); }
.nv-nav a.active { background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5); }

/* Clear buttons */
.nv-btn-primary { background: var(--nv-gloss), linear-gradient(135deg, rgba(60, 110, 255, .6), rgba(130, 100, 255, .42)); border-color: rgba(255, 255, 255, .45); }
.nv-btn-primary:hover { background: var(--nv-gloss), linear-gradient(135deg, rgba(80, 130, 255, .8), rgba(150, 120, 255, .6)); box-shadow: var(--nv-liquid-glow); }
.nv-btn-ghost, .nv-hero .nv-btn-ghost, .nv-page-hero .nv-btn-ghost, .nv-cta .nv-btn-ghost, .nv-crm .nv-btn-ghost, .nv-calc-sum .nv-btn-ghost { border-color: rgba(255, 255, 255, .34); }
.nv-region-btn.active { background: linear-gradient(135deg, rgba(60, 110, 255, .6), rgba(130, 100, 255, .42)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .3); }
.nv-dot.active { background: var(--nv-lav); }
.nv-addon-box { border-color: rgba(255, 255, 255, .4); }
.nv-addon input:checked + .nv-addon-box { background: var(--nv-liquid-icon); }

/* Logo in the centre: inside the glass pill on desktop, between the edges on small screens */
.nv-header-in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; }
.nv-nav { grid-column: 2; margin: 0; }
.nv-header-cta { grid-column: 3; justify-self: end; margin: 0; }
.nv-header-in > .nv-logo { display: none; }
.nv-nav ul { align-items: center; }
.nv-nav-logo { padding: 0 14px; }
.nv-nav .nv-nav-logo a { min-width: 0; padding: 4px 6px; background: none; box-shadow: none; }
.nv-nav .nv-nav-logo a:hover { background: none; }
.nv-nav-logo img { display: block; height: 34px; width: auto; }
@media (max-width: 1100px) {
    .nv-header-in { min-height: 76px; }
    .nv-header-in > .nv-logo { display: block; grid-column: 2; }
}

/* Eight menu items: the pill needs the full width, so the burger menu takes over earlier */
.nv-services > :last-child:nth-child(3n+1) { grid-column: 2; }
@media (max-width: 1280px) {
    .nv-nav { display: none; }
    .nv-burger { display: inline-flex; }
    .nv-header-in { min-height: 76px; }
    .nv-header-in > .nv-logo { display: block; grid-column: 2; }
}
@media (max-width: 1100px) {
    .nv-services > :last-child:nth-child(3n+1) { grid-column: auto; }
}
.nv-nav li:not(.nv-nav-logo) a { width: 74px; min-width: 0; padding-left: 0; padding-right: 0; }

/* CRM catalogue page: contents chips, one section per module, cards, tables, notes and step flows */
.nv-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.nv-cat-chips .nv-chip { font-size: .8rem; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .18); }
.nv-cat { padding-top: 10px; }
.nv-cat-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 30px; max-width: 1000px; }
.nv-cat-nav a { padding: 8px 14px; border-radius: 999px; font: 600 .82rem var(--nv-head); color: #e8edff !important; text-decoration: none; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s; }
.nv-cat-nav a:hover { background: rgba(255, 255, 255, .18); }
.nv-cat-sec { padding: 46px 0 10px; scroll-margin-top: 110px; }
.nv-cat-head { max-width: 820px; margin: 0 0 24px; }
.nv-cat-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 8px 0 10px; }
.nv-cat-head p { margin: 0; color: #dbe3f7; font-size: 1.04rem; }
.nv-cat-head, .nv-cat-head h2 { text-shadow: 0 2px 16px rgba(3, 6, 38, .75); }
.nv-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-bottom: 18px; }
.nv-cat-card { padding: 24px; }
.nv-cat-card h3 { font-size: 1.12rem; margin: 0 0 12px; }
.nv-cat-card p { margin: 0; color: var(--nv-muted); font-size: .95rem; }
.nv-cat-card .nv-checks li { font-size: .92rem; color: #dfe6f8; }
.nv-cat-card .nv-checks svg { flex: none; }
.nv-cat-letter h3 { font-size: 1.7rem; margin-bottom: 6px; background: linear-gradient(120deg, #d8d0ff, #8fc8ff 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nv-cat-sec:has(.nv-cat-letter) .nv-cat-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.nv-cat-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: #dfe6f8; font-size: .93rem; }
.nv-cat-steps li::marker { color: var(--nv-lav); font-weight: 700; }
.nv-cat-note { margin: 0 0 18px; padding: 16px 20px; border-radius: 18px 6px 18px 6px; border: 1px solid rgba(196, 186, 255, .4); background: linear-gradient(120deg, rgba(120, 130, 255, .22), rgba(60, 70, 240, .1)); color: #eef1ff; font-size: .95rem; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nv-cat-note a { color: var(--nv-lav) !important; }
.nv-cat-table-wrap { overflow-x: auto; margin: 0 0 18px; border-radius: var(--nv-glass-radius); border: 1px solid var(--nv-glass-edge); background: var(--nv-glass); box-shadow: var(--nv-liquid-shadow); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); }
.nv-cat-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.nv-cat-table th { text-align: left; padding: 14px 18px; font: 700 .78rem var(--nv-head); letter-spacing: .08em; text-transform: uppercase; color: var(--nv-lav); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.nv-cat-table td { padding: 12px 18px; color: #e4e9fa; border-bottom: 1px solid rgba(255, 255, 255, .08); vertical-align: top; }
.nv-cat-table tr:last-child td { border-bottom: 0; }
.nv-cat-table tbody tr:hover td { background: rgba(255, 255, 255, .05); }
.nv-cat-flow { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; padding: 0; counter-reset: f; }
.nv-cat-flow li { counter-increment: f; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; color: #fff; font: 600 .9rem var(--nv-head); background: linear-gradient(135deg, rgba(60, 110, 255, .5), rgba(130, 100, 255, .32)); border: 1px solid rgba(255, 255, 255, .35); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5); }
.nv-cat-flow li::before { content: counter(f); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: .78rem; }
.nv-cat-flow li:not(:last-child)::after { content: "›"; margin-left: 6px; font-size: 1.3rem; opacity: .7; }
.nv-new { display: inline-block; margin: 0 4px; padding: 2px 8px; border-radius: 99px; font: 700 .66rem var(--nv-head); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; color: #052e1a; background: linear-gradient(120deg, #7ff0b5, #34d399); }
.nv-cat-head h2 .nv-new { font-size: .7rem; }
@media (max-width: 600px) {
    .nv-cat-flow { flex-direction: column; align-items: stretch; }
    .nv-cat-flow li { border-radius: 16px; }
    .nv-cat-flow li:not(:last-child)::after { content: none; }
}