/* ==========================================================================
   NOVICOM — messaging infrastructure design system
   Dark slate-indigo ground with delivery-status accents (amber = in flight,
   teal = delivered). Loaded after style.css; every rule is namespaced .nv-
   so it never collides with the legacy cabinet styles.

   Palette rationale: the two accents are not decoration — they are the two
   states a message can be in. Amber is a message in flight, teal is a
   confirmed delivery receipt. They are used consistently in that meaning
   across the ticker, the stats, the icons and the pricing table.
   ========================================================================== */

:root {
    /* ground */
    --nv-ink:        #0E1420;  /* page ground — slate-indigo, not pure black */
    --nv-ink-2:      #131B2B;  /* raised surface (cards) */
    --nv-ink-3:      #182133;  /* hover / inset */
    --nv-line:       #23304A;  /* hairline */
    --nv-line-soft:  #1B2537;  /* quieter hairline */

    /* text */
    --nv-paper:      #E8EDF7;
    --nv-paper-dim:  #8A98B4;
    --nv-paper-mute: #7A88A6;

    /* status accents — these carry meaning, see note above */
    --nv-inflight:   #F2A93B;  /* amber: queued / sent / in flight */
    --nv-inflight-d: #C98520;
    --nv-delivered:  #3BC9B0;  /* teal: delivered receipt */
    --nv-delivered-d:#2AA492;
    --nv-failed:     #E4685D;  /* red: only for genuine failure states */

    /* type */
    --nv-display: "Oswald", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
    --nv-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --nv-mono:    "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;

    /* metrics */
    --nv-max: 1280px;
    /* Gutter grows with the viewport so the content column has real margins on
       a large monitor instead of a fixed 24px hairline gap. */
    --nv-gut: clamp(20px, 5vw, 72px);
    --nv-header-h: 64px;
    --nv-radius: 4px;      /* deliberately tight — this is instrumentation, not a toy */
    --nv-radius-lg: 8px;
}

/* --------------------------------------------------------------------------
   Reset the legacy base. style.css targets bare elements (h1{width:600px},
   body{display:flex}, .container{width:1170px}) written for the old markup;
   neutralize inside our tree without touching the cabinet.
   -------------------------------------------------------------------------- */
body {
    font-family: var(--nv-body) !important;
    background: var(--nv-ink) !important;
    background-size: auto !important;
    color: var(--nv-paper);
    display: block !important;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.nv-header, .nv-header *, main#main, main#main *, .nv-footer, .nv-footer *,
.nv-top, .nv-top *, .nv-auth, .nv-auth * { box-sizing: border-box; }

main#main h1, main#main h2, main#main h3, main#main h4, main#main p,
.nv-auth h1, .nv-auth h2, .nv-auth h3, .nv-auth p { width: auto; max-width: 100%; }

/* The legacy stylesheet sets fixed pixel widths on bare elements, which
   overflow on small screens. Cap the media and text that can actually be
   oversized — NOT every descendant. A blanket `main#main *` rule has higher
   specificity than `.nv-container` and silently strips its max-width, which
   left every section full-bleed and pinned to the left edge on wide screens. */
main#main img, main#main svg, main#main video, main#main iframe, main#main table,
main#main pre, main#main blockquote, main#main li,
.nv-auth img, .nv-auth svg, .nv-auth video, .nv-auth iframe,
.nv-header img, .nv-header svg, .nv-footer img, .nv-footer svg { max-width: 100%; }

.nv-header { height: auto; background-image: none; }
main#main { display: block; }
main#main section { height: auto; }
main#main p { padding-top: 0; }
main#main h1, main#main h2, main#main h3 { font-family: var(--nv-display); color: var(--nv-paper); text-align: left; }

/* Content column. The section rules and backgrounds stay full-bleed on
   purpose — edge-to-edge hairlines are what make the page read as
   instrumentation — but everything you read sits inside this measure. */
.nv-container {
    width: 100%;
    max-width: var(--nv-max);
    margin-inline: auto;
    padding-inline: var(--nv-gut);
}

/* --------------------------------------------------------------------------
   Type scale
   Display is condensed, uppercase, tight — headline weight without huge size.
   Mono is reserved for machine output: IDs, statuses, throughput, prices.
   -------------------------------------------------------------------------- */
.nv-display {
    font-family: var(--nv-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 0.98;
}
.nv-mono {
    font-family: var(--nv-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* eyebrow — a channel/section label, always mono, always meaningful */
.nv-eyebrow {
    font-family: var(--nv-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nv-paper-mute);
    margin: 0 0 16px;
}
.nv-eyebrow::before {
    content: "";
    display: inline-block;
    width: 18px; height: 1px;
    background: var(--nv-inflight);
    vertical-align: middle;
    margin-right: 10px;
}

/* --------------------------------------------------------------------------
   Skip link + focus
   -------------------------------------------------------------------------- */
.nv-skip {
    position: absolute; left: -999px; top: 0; z-index: 1000;
    background: var(--nv-inflight); color: #0E1420; font-weight: 600;
    padding: 10px 16px; border-radius: 0 0 var(--nv-radius) 0; text-decoration: none;
}
.nv-skip:focus { left: 0; }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--nv-inflight);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Buttons
   Square-ish, hairline, no gradient. The primary action is amber because it
   starts a message on its way.
   -------------------------------------------------------------------------- */
.nv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--nv-body);
    font-weight: 600; font-size: 14px; line-height: 1;
    letter-spacing: 0.01em;
    padding: 13px 22px;
    border-radius: var(--nv-radius);
    border: 1px solid transparent;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
/* Legacy .reg-button/.enter-button classes remain for JS hooks — neutralize
   their old teal fill/height so only nv-btn styling shows. */
.nv-btn.reg-button, .nv-btn.enter-button {
    height: auto; background-color: transparent; font-size: 14px;
    padding: 13px 22px; border-radius: var(--nv-radius);
}
.nv-btn--primary, .nv-btn--primary.reg-button, .nv-btn--primary.enter-button {
    background-color: var(--nv-inflight); color: #0E1420; border-color: var(--nv-inflight);
}
.nv-btn--primary:hover, .nv-btn--primary.reg-button:hover, .nv-btn--primary.enter-button:hover {
    background-color: #FFC163; border-color: #FFC163; color: #0E1420; transform: translateY(-1px);
}
.nv-btn--ghost, .nv-btn--ghost.reg-button, .nv-btn--ghost.enter-button {
    background-color: transparent; color: var(--nv-paper); border-color: var(--nv-line);
}
.nv-btn--ghost:hover, .nv-btn--ghost.reg-button:hover, .nv-btn--ghost.enter-button:hover {
    background-color: var(--nv-ink-3); border-color: var(--nv-paper-mute); color: var(--nv-paper);
}
.nv-btn--lg { padding: 16px 30px; font-size: 15px; }
.nv-btn--lg.reg-button, .nv-btn--lg.enter-button { padding: 16px 30px; font-size: 15px; }
.nv-btn--link {
    background: transparent; color: var(--nv-paper-dim); border: 0; padding: 13px 4px;
    font-family: var(--nv-mono); font-size: 13px;
}
.nv-btn--link:hover { color: var(--nv-inflight); }

/* --------------------------------------------------------------------------
   Header — hairline, sticky, no blur/glass
   -------------------------------------------------------------------------- */
.nv-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(14, 20, 32, .88);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--nv-line-soft);
    transition: border-color .2s ease;
}
.nv-header.is-scrolled { border-bottom-color: var(--nv-line); }
.nv-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; min-height: var(--nv-header-h);
}

/* Logo — the mark is a delivery-receipt tick built from two strokes */
.nv-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.nv-logo__mark { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.nv-logo__text {
    font-family: var(--nv-display); font-weight: 600; font-size: 21px;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--nv-paper);
    line-height: 1;
}
.nv-logo__text span { color: var(--nv-inflight); }

/* Nav */
.nv-nav { display: flex; align-items: center; }
.nv-nav__list {
    display: flex; align-items: center; gap: 28px;
    list-style: none; margin: 0; padding: 0;
}
.nv-nav__link {
    font-size: 14px; color: var(--nv-paper-dim); text-decoration: none;
    padding: 6px 0; position: relative; transition: color .18s ease;
}
.nv-nav__link:hover, .nv-nav__link.is-active { color: var(--nv-paper); }
.nv-nav__link.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 1px; background: var(--nv-inflight);
}
.nv-nav__cta { display: flex; align-items: center; gap: 10px; margin-left: 6px; }
.nv-nav__toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 0 8px;
    background: transparent; border: 1px solid var(--nv-line); border-radius: var(--nv-radius);
    cursor: pointer;
}
.nv-nav__toggle span { display: block; height: 1.5px; background: var(--nv-paper); transition: transform .2s ease, opacity .2s ease; }

/* --------------------------------------------------------------------------
   HERO — the thesis. Copy on the left, live delivery-receipt stream on the
   right. The stream is the signature element: it shows messages landing with
   proof, which is the entire product promise.
   -------------------------------------------------------------------------- */
.nv-hero { padding: 88px 0 72px; border-bottom: 1px solid var(--nv-line-soft); position: relative; overflow: hidden; }
.nv-hero__inner {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 480px);
    gap: 64px; align-items: center;
}
.nv-hero__title {
    font-family: var(--nv-display); font-weight: 600;
    font-size: clamp(36px, 4.4vw, 62px);
    line-height: 0.96; letter-spacing: -0.01em; text-transform: uppercase;
    margin: 0 0 22px; color: var(--nv-paper);
    /* Ukrainian compounds like ПОВІДОМЛЕННЯ cannot wrap, so the display size
       is set by the longest single word, not by the column: too large and that
       word overflows the measure and crowds the receipt panel beside it. */
    max-width: 20ch;
}
.nv-hero__title em {
    font-style: normal; color: var(--nv-delivered);
}
.nv-hero__lead {
    font-size: 17px; line-height: 1.6; color: var(--nv-paper-dim);
    margin: 0 0 32px; max-width: 46ch;
}
.nv-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 40px; }

/* Hero stat strip — mono figures, hairline separators */
.nv-hero__stats {
    display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--nv-line-soft);
}
.nv-hero__stats li {
    padding: 18px 26px 0 0; margin-right: 26px;
    border-right: 1px solid var(--nv-line-soft);
}
.nv-hero__stats li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.nv-hero__stats strong {
    display: block; font-family: var(--nv-mono); font-size: 22px; font-weight: 500;
    color: var(--nv-paper); letter-spacing: -0.02em;
}
.nv-hero__stats span {
    display: block; margin-top: 4px; font-size: 12px; color: var(--nv-paper-mute);
    letter-spacing: 0.04em; text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   SIGNATURE: delivery-receipt stream
   A terminal-like panel of DLR rows. Each row arrives amber (in flight) and
   flips to teal (delivered) — the real lifecycle of a message.
   -------------------------------------------------------------------------- */
.nv-stream {
    background: var(--nv-ink-2);
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
}
.nv-stream__bar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--nv-line);
    background: var(--nv-ink-3);
}
.nv-stream__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nv-delivered); flex: 0 0 auto; }
.nv-stream__title {
    font-family: var(--nv-mono); font-size: 12px; color: var(--nv-paper-dim);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.nv-stream__live {
    margin-left: auto; font-family: var(--nv-mono); font-size: 11px;
    color: var(--nv-delivered); letter-spacing: 0.1em; text-transform: uppercase;
}
.nv-stream__rows { margin: 0; padding: 6px 0; list-style: none; min-height: 316px; }
.nv-stream__row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) auto minmax(0, .8fr) auto;
    align-items: center; gap: 12px;
    padding: 11px 16px;
    font-family: var(--nv-mono); font-size: 12.5px;
    border-bottom: 1px solid var(--nv-line-soft);
}
.nv-stream__row:last-child { border-bottom: 0; }
.nv-stream__to { color: var(--nv-paper); letter-spacing: -0.01em; }
.nv-stream__net { color: var(--nv-paper-mute); font-size: 11.5px; }
.nv-stream__chan {
    justify-self: start;
    font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--nv-paper-dim);
    border: 1px solid var(--nv-line); border-radius: 2px; padding: 3px 6px;
}
.nv-stream__status { justify-self: end; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.nv-stream__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nv-stream__row[data-state="sent"] .nv-stream__status { color: var(--nv-inflight); }
.nv-stream__row[data-state="delivered"] .nv-stream__status { color: var(--nv-delivered); }
.nv-stream__ms { color: var(--nv-paper-mute); font-size: 11px; margin-left: 8px; }

/* Row entry animation — only when JS is active and motion is allowed */
.nv-js .nv-stream__row { animation: nv-row-in .38s ease both; }
@keyframes nv-row-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.nv-stream__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-top: 1px solid var(--nv-line);
    background: var(--nv-ink-3);
    font-family: var(--nv-mono); font-size: 11.5px; color: var(--nv-paper-mute);
    letter-spacing: 0.04em;
}
.nv-stream__foot b { color: var(--nv-delivered); font-weight: 500; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.nv-section { padding: 72px 0; border-bottom: 1px solid var(--nv-line-soft); }
.nv-section--flush { border-bottom: 0; }
.nv-section__head { max-width: 62ch; margin-bottom: 36px; }
.nv-section__title {
    font-family: var(--nv-display); font-weight: 600; text-transform: uppercase;
    font-size: clamp(26px, 3.6vw, 40px); line-height: 1.04; letter-spacing: -0.005em;
    margin: 0 0 14px; color: var(--nv-paper);
}
.nv-section__sub { font-size: 16px; line-height: 1.6; color: var(--nv-paper-dim); margin: 0; }

/* --------------------------------------------------------------------------
   Capability cards — hairline grid, no shadows, icon is a thin-stroke SVG
   -------------------------------------------------------------------------- */
.nv-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--nv-line-soft); border: 1px solid var(--nv-line-soft); }
.nv-card { background: var(--nv-ink); padding: 30px 26px; transition: background-color .2s ease; }
.nv-card:hover { background: var(--nv-ink-2); }
.nv-card__icon { display: block; width: 28px; height: 28px; margin-bottom: 20px; color: var(--nv-inflight); }
.nv-card__icon svg { width: 100%; height: 100%; display: block; }
.nv-card__title {
    font-family: var(--nv-display); font-weight: 600; text-transform: uppercase;
    font-size: 17px; line-height: 1.2; letter-spacing: 0.005em;
    margin: 0 0 10px; color: var(--nv-paper);
}
.nv-card__text { font-size: 14.5px; line-height: 1.62; color: var(--nv-paper-dim); margin: 0; }

/* --------------------------------------------------------------------------
   Industries — compact hairline chips
   -------------------------------------------------------------------------- */
.nv-industries { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--nv-line-soft); border: 1px solid var(--nv-line-soft); }
.nv-industry {
    background: var(--nv-ink); padding: 28px 20px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
    transition: background-color .2s ease;
}
.nv-industry:hover { background: var(--nv-ink-2); }
.nv-industry svg { width: 28px; height: 28px; color: var(--nv-delivered); display: block; flex: 0 0 auto; }
.nv-industry span {
    font-size: 14px; line-height: 1.4; color: var(--nv-paper-dim);
    margin-top: auto; /* keeps one- and two-line labels bottom-aligned across the row */
}

/* --------------------------------------------------------------------------
   Pricing table — mono figures, tabular alignment, hairline rules
   -------------------------------------------------------------------------- */
.nv-pricing { border: 1px solid var(--nv-line); border-radius: var(--nv-radius-lg); overflow: hidden; }
.nv-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nv-price-table { width: 100%; border-collapse: collapse; min-width: 660px; }
.nv-price-table thead th {
    background: var(--nv-ink-3);
    font-family: var(--nv-mono); font-weight: 500; font-size: 11.5px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--nv-paper-dim);
    text-align: right; padding: 14px 18px; border-bottom: 1px solid var(--nv-line);
    white-space: nowrap;
}
.nv-price-table thead th:first-child { text-align: left; }
/* The Viber group header spans two channel columns; a centred label plus a
   rule under it ties the group to the columns it actually covers, so "RCS"
   is never read as a kind of Viber message. */
.nv-price-table thead th.nv-price-group {
    text-align: center;
    color: var(--nv-paper);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--nv-line);
}
.nv-price-table thead th.nv-price-group__col {
    padding-top: 8px;
    font-size: 10.5px;
    color: var(--nv-paper-mute);
}
.nv-price-table tbody td {
    font-family: var(--nv-mono); font-size: 13.5px; color: var(--nv-paper);
    text-align: right; padding: 15px 18px;
    border-bottom: 1px solid var(--nv-line-soft);
    white-space: nowrap;
}
.nv-price-table tbody td:first-child { text-align: left; color: var(--nv-paper-dim); }
.nv-price-table tbody tr:last-child td { border-bottom: 0; }
.nv-price-table tbody tr:hover td { background: var(--nv-ink-2); }
.nv-price-note {
    padding: 14px 18px; border-top: 1px solid var(--nv-line); background: var(--nv-ink-3);
    font-family: var(--nv-mono); font-size: 11.5px; color: var(--nv-paper-mute); letter-spacing: 0.03em;
}
.nv-cta-inline { margin-top: 28px; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.nv-cta-band { padding: 72px 0; border-bottom: 1px solid var(--nv-line-soft); background: var(--nv-ink-2); }
.nv-cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.nv-cta-band__title {
    font-family: var(--nv-display); font-weight: 600; text-transform: uppercase;
    font-size: clamp(24px, 3.2vw, 34px); line-height: 1.06; margin: 0 0 8px; color: var(--nv-paper);
}
.nv-cta-band__sub { font-size: 15px; color: var(--nv-paper-dim); margin: 0; }
.nv-cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   FAQ — hairline accordion
   -------------------------------------------------------------------------- */
.nv-faq__list { border-top: 1px solid var(--nv-line-soft); }
.nv-faq__item { border-bottom: 1px solid var(--nv-line-soft); }
.nv-faq__item summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 22px 0;
    font-family: var(--nv-display); font-weight: 500; text-transform: uppercase;
    font-size: 16px; letter-spacing: 0.01em; color: var(--nv-paper);
    transition: color .18s ease;
}
.nv-faq__item summary::-webkit-details-marker { display: none; }
.nv-faq__item summary:hover { color: var(--nv-inflight); }
.nv-faq__item summary::after {
    content: "+"; font-family: var(--nv-mono); font-size: 18px; color: var(--nv-paper-mute);
    flex: 0 0 auto; transition: transform .2s ease, color .2s ease;
}
.nv-faq__item[open] summary::after { content: "−"; color: var(--nv-inflight); }
.nv-faq__answer { padding: 0 0 24px; max-width: 76ch; }
.nv-faq__answer p { font-size: 15px; line-height: 1.68; color: var(--nv-paper-dim); margin: 0; }

/* --------------------------------------------------------------------------
   Contacts
   -------------------------------------------------------------------------- */
.nv-contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--nv-line-soft); border: 1px solid var(--nv-line-soft); }
.nv-contact { background: var(--nv-ink); padding: 28px 26px; }
.nv-contact__label {
    font-family: var(--nv-mono); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--nv-paper-mute); margin: 0 0 12px;
}
.nv-contact p { font-size: 15px; line-height: 1.6; color: var(--nv-paper-dim); margin: 0; }
.nv-contact a { color: var(--nv-paper); text-decoration: none; border-bottom: 1px solid var(--nv-line); }
.nv-contact a:hover { color: var(--nv-inflight); border-bottom-color: var(--nv-inflight); }
.nv-contact__hours { display: block; margin-top: 6px; font-family: var(--nv-mono); font-size: 12px; color: var(--nv-paper-mute); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.nv-footer { padding: 44px 0; background: var(--nv-ink); }
.nv-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.nv-footer__nav { display: flex; flex-wrap: wrap; gap: 24px; }
.nv-footer__nav a { font-size: 14px; color: var(--nv-paper-dim); text-decoration: none; }
.nv-footer__nav a:hover { color: var(--nv-paper); }
.nv-footer__copy { font-family: var(--nv-mono); font-size: 12px; color: var(--nv-paper-mute); margin: 0; }

/* Back to top */
.nv-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 90;
    width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--nv-ink-2); border: 1px solid var(--nv-line); border-radius: var(--nv-radius);
    color: var(--nv-paper-dim); text-decoration: none; font-size: 16px;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease, color .2s ease, border-color .2s ease;
}
.nv-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.nv-top:hover { color: var(--nv-inflight); border-color: var(--nv-inflight); }

/* --------------------------------------------------------------------------
   Reveal on scroll — subtle, and only with JS + motion allowed
   -------------------------------------------------------------------------- */
/* Content is visible by default and only hidden once main.js has confirmed it
   can actually reveal it again (class set after the observer is attached).
   Without that gate, any failure in the observer would leave the page blank. */
.nv-reveal-armed .nv-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.nv-reveal-armed .nv-reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .nv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nv-industries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .nv-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .nv-hero { padding: 60px 0 56px; }
    .nv-contacts { grid-template-columns: minmax(0, 1fr); }

    /* Mobile nav — panel drops under the hairline header */
    .nv-nav__toggle { display: flex; }
    .nv-nav__list {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--nv-ink-2); border-bottom: 1px solid var(--nv-line);
        padding: 8px 0; display: none;
    }
    .nv-nav__list.is-open { display: flex; }
    .nv-nav__list > li { padding: 0 var(--nv-gut); }
    .nv-nav__link { display: block; padding: 14px 0; border-bottom: 1px solid var(--nv-line-soft); }
    .nv-nav__cta { padding: 16px var(--nv-gut) 8px; gap: 10px; }
    .nv-nav__cta .nv-btn { flex: 1 1 0; }
}

@media (max-width: 640px) {
    :root { --nv-gut: 18px; }
    .nv-section { padding: 56px 0; }
    .nv-cards, .nv-industries { grid-template-columns: minmax(0, 1fr); }
    .nv-hero__stats li { padding-right: 18px; margin-right: 18px; }
    .nv-hero__stats strong { font-size: 19px; }
    .nv-cta-band__inner { flex-direction: column; align-items: flex-start; }
    .nv-cta-band__actions { width: 100%; }
    .nv-cta-band__actions .nv-btn { flex: 1 1 0; }
    .nv-stream__row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
    .nv-stream__net { grid-column: 1; }
    .nv-stream__chan { grid-column: 2; grid-row: 1; justify-self: end; }
    .nv-stream__status { grid-column: 2; grid-row: 2; }
    .nv-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Reduced motion — the stream renders fully populated and static
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .nv-reveal-armed .nv-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
    .nv-header, .nv-top, .nv-stream, .nv-cta-band { display: none !important; }
    body { background: #fff !important; color: #000; }
    main#main h1, main#main h2, main#main h3 { color: #000; }
}

/* ==========================================================================
   AUTH — login, registration, password recovery
   Split layout: a quiet brand panel that keeps the delivery-receipt language,
   and a form panel. On mobile the brand panel drops away entirely.
   ========================================================================== */

/* Mini header used on auth routes (registration/password/login) */
.nv-auth-top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px var(--nv-gut);
    border-bottom: 1px solid var(--nv-line-soft);
    background: var(--nv-ink);
}
.nv-auth-top__close {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--nv-paper-mute); text-decoration: none; font-size: 24px; line-height: 1;
    border: 1px solid var(--nv-line); border-radius: var(--nv-radius);
    transition: color .18s ease, border-color .18s ease;
}
.nv-auth-top__close:hover { color: var(--nv-paper); border-color: var(--nv-paper-mute); }

/* The auth mini-header sits above this block and is ~73px tall; using a flex
   column on the page would be cleaner but the platform controls that markup,
   so size the grid to the remaining viewport and let it grow if content is
   taller. */
.nv-auth {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: calc(100vh - var(--nv-authtop-h, 73px));
}
.nv-auth__panel { padding: 56px clamp(24px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.nv-auth__panel--brand {
    background: var(--nv-ink-2);
    border-right: 1px solid var(--nv-line);
}
.nv-auth__brandtitle {
    font-family: var(--nv-display); font-weight: 600; text-transform: uppercase;
    font-size: clamp(28px, 3.4vw, 42px); line-height: 1.02; margin: 0 0 16px; color: var(--nv-paper);
}
.nv-auth__brandtext { font-size: 16px; line-height: 1.62; color: var(--nv-paper-dim); margin: 0 0 30px; max-width: 44ch; }
.nv-auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nv-auth__points li {
    position: relative; padding-left: 26px;
    font-family: var(--nv-mono); font-size: 13px; color: var(--nv-paper-dim); letter-spacing: 0.01em;
}
/* delivered-tick bullet, consistent with the brand mark */
.nv-auth__points li::before {
    content: ""; position: absolute; left: 0; top: 4px;
    width: 12px; height: 7px;
    border-left: 1.5px solid var(--nv-delivered); border-bottom: 1.5px solid var(--nv-delivered);
    transform: rotate(-45deg);
}
.nv-auth__panel--form { background: var(--nv-ink); }
.nv-auth__mobilelogo { display: none; margin-bottom: 32px; }
.nv-auth__title {
    font-family: var(--nv-display); font-weight: 600; text-transform: uppercase;
    font-size: clamp(24px, 3vw, 32px); line-height: 1.05; margin: 0 0 10px; color: var(--nv-paper);
}
.nv-auth__subtitle { font-size: 15px; line-height: 1.6; color: var(--nv-paper-dim); margin: 0 0 30px; }

/* ---- form controls ---- */
.nv-form { width: 100%; max-width: 420px; }
.nv-field { margin-bottom: 18px; }
.nv-label {
    display: block; margin-bottom: 8px;
    font-family: var(--nv-mono); font-size: 11.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--nv-paper-mute);
}
.nv-input, .nv-select, .nv-textarea {
    display: block; width: 100%;
    background: var(--nv-ink-2); color: var(--nv-paper);
    border: 1px solid var(--nv-line); border-radius: var(--nv-radius);
    padding: 13px 14px; font-family: var(--nv-body); font-size: 15px; line-height: 1.3;
    transition: border-color .18s ease, background-color .18s ease;
    -webkit-appearance: none; appearance: none;
}
.nv-input::placeholder, .nv-textarea::placeholder { color: var(--nv-paper-mute); }
.nv-input:focus, .nv-select:focus, .nv-textarea:focus {
    border-color: var(--nv-inflight); background: var(--nv-ink-3); outline: none;
}
.nv-input--error { border-color: var(--nv-failed); }
/* Phone and code inputs are machine-shaped data — set them in mono */
.nv-input[type="tel"], .nv-input.the-phone, .nv-input--code { font-family: var(--nv-mono); letter-spacing: 0.04em; }
.nv-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A98B4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.nv-textarea { min-height: 110px; resize: vertical; }

.nv-btn--block { width: 100%; }
/* Disabled submit: the platform's phone-mask script enables this once the
   number validates. Render it as a neutral inert control rather than a faded
   amber fill, which reads as a broken button. */
.nv-btn[disabled], .nv-btn:disabled,
.nv-btn--primary[disabled], .nv-btn--primary:disabled {
    background-color: var(--nv-ink-3);
    border-color: var(--nv-line);
    color: var(--nv-paper-mute);
    cursor: not-allowed;
    transform: none;
    opacity: 1;
}
.nv-btn[disabled]:hover, .nv-btn:disabled:hover,
.nv-btn--primary[disabled]:hover, .nv-btn--primary:disabled:hover {
    background-color: var(--nv-ink-3);
    border-color: var(--nv-line);
    color: var(--nv-paper-mute);
    transform: none;
}

.nv-form__error {
    display: none; margin: 0 0 16px;
    font-size: 13.5px; line-height: 1.5; color: var(--nv-failed);
    border-left: 2px solid var(--nv-failed); padding: 8px 0 8px 12px; background: rgba(228, 104, 93, .07);
}
.nv-form__error.is-shown, .nv-form__error.show { display: block; }
.nv-form__foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    margin: 20px 0 0; font-size: 14px;
}
.nv-form__foot a { color: var(--nv-paper-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.nv-form__foot a:hover { color: var(--nv-inflight); border-bottom-color: var(--nv-inflight); }
.nv-form__hint { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--nv-paper-mute); }
.nv-form__hint a { color: var(--nv-paper-dim); }

/* checkbox / agreement row */
.nv-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 20px; }
.nv-check input[type="checkbox"] {
    flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px;
    accent-color: var(--nv-inflight); cursor: pointer;
}
.nv-check label { font-size: 13.5px; line-height: 1.55; color: var(--nv-paper-dim); cursor: pointer; }
.nv-check a { color: var(--nv-paper); }
.nv-check a:hover { color: var(--nv-inflight); }

/* success / error result panel after submit */
.nv-result { max-width: 460px; }
.nv-result__icon { width: 44px; height: 44px; margin-bottom: 20px; color: var(--nv-delivered); }
.nv-result__icon--error { color: var(--nv-failed); }
.nv-result__icon svg { width: 100%; height: 100%; display: block; }
.nv-result h2 {
    font-family: var(--nv-display); font-weight: 600; text-transform: uppercase;
    font-size: 24px; line-height: 1.1; margin: 0 0 12px; color: var(--nv-paper);
}
.nv-result p { font-size: 15px; line-height: 1.62; color: var(--nv-paper-dim); margin: 0 0 24px; }

@media (max-width: 900px) {
    .nv-auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .nv-auth__panel--brand { display: none; }
    .nv-auth__mobilelogo { display: inline-flex; }
    .nv-auth__panel { padding: 40px var(--nv-gut) 56px; }
    .nv-form { max-width: none; }
}

/* ==========================================================================
   LEGAL PAGES (terms / privacy) + 404
   ========================================================================== */
.nv-doc { padding: 64px 0 88px; }
.nv-doc__inner { max-width: 76ch; }
.nv-doc h1 {
    font-family: var(--nv-display); font-weight: 600; text-transform: uppercase;
    font-size: clamp(28px, 4vw, 44px); line-height: 1.04; margin: 0 0 12px; color: var(--nv-paper);
}
.nv-doc__meta { font-family: var(--nv-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nv-paper-mute); margin: 0 0 40px; }
.nv-doc h2 {
    font-family: var(--nv-display); font-weight: 600; text-transform: uppercase;
    font-size: 19px; line-height: 1.2; margin: 40px 0 14px; color: var(--nv-paper);
    padding-top: 24px; border-top: 1px solid var(--nv-line-soft);
}
.nv-doc h3 { font-family: var(--nv-display); font-weight: 500; text-transform: uppercase; font-size: 15px; margin: 26px 0 10px; color: var(--nv-paper); }
.nv-doc p, .nv-doc li { font-size: 15px; line-height: 1.72; color: var(--nv-paper-dim); }
.nv-doc p { margin: 0 0 14px; }
.nv-doc ul, .nv-doc ol { margin: 0 0 18px; padding-left: 22px; }
.nv-doc li { margin-bottom: 8px; }
.nv-doc a { color: var(--nv-paper); border-bottom: 1px solid var(--nv-line); text-decoration: none; }
.nv-doc a:hover { color: var(--nv-inflight); border-bottom-color: var(--nv-inflight); }
.nv-doc strong, .nv-doc b { color: var(--nv-paper); font-weight: 600; }

/* 404 — framed as an undeliverable message, in the brand's own vocabulary */
.nv-404 { padding: clamp(72px, 14vh, 140px) 0; text-align: center; }
.nv-404__code {
    font-family: var(--nv-mono); font-size: 13px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--nv-failed); margin: 0 0 20px;
}
.nv-404__title {
    font-family: var(--nv-display); font-weight: 600; text-transform: uppercase;
    font-size: clamp(34px, 6vw, 64px); line-height: 1.02; margin: 0 0 16px; color: var(--nv-paper);
    text-align: center;
}
.nv-404__text { font-size: 16px; line-height: 1.6; color: var(--nv-paper-dim); margin: 0 auto 32px; max-width: 48ch; }
.nv-404__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --------------------------------------------------------------------------
   Form details used by the registration / auth templates
   -------------------------------------------------------------------------- */
.nv-req { color: var(--nv-inflight); }
.nv-optional { color: var(--nv-paper-mute); font-weight: 400; text-transform: none; letter-spacing: 0; }
.nv-field__hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--nv-paper-mute); }

/* Agreement checkbox rendered as a <label> wrapping the input */
.nv-form__checkbox {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 4px 0 20px; cursor: pointer;
}
.nv-form__checkbox input[type="checkbox"] {
    flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px;
    accent-color: var(--nv-inflight); cursor: pointer;
}
.nv-form__checkbox span { font-size: 13.5px; line-height: 1.55; color: var(--nv-paper-dim); }
.nv-form__checkbox a { color: var(--nv-paper); }
.nv-form__checkbox a:hover { color: var(--nv-inflight); }

.nv-form__foot--center { justify-content: center; text-align: center; }
.nv-form__foot--center a { color: var(--nv-paper); border-bottom: 1px solid var(--nv-line); }
.nv-form__foot--center a:hover { color: var(--nv-inflight); border-bottom-color: var(--nv-inflight); }

/* Post-submit states on the registration form */
.nv-auth__success, .nv-auth__error-box { max-width: 460px; padding: 24px; border-radius: var(--nv-radius-lg); }
.nv-auth__success {
    background: rgba(59, 201, 176, .07);
    border: 1px solid rgba(59, 201, 176, .35);
}
.nv-auth__error-box {
    background: rgba(228, 104, 93, .07);
    border: 1px solid rgba(228, 104, 93, .35);
}
.nv-auth__success h3, .nv-auth__error-box h3 {
    font-family: var(--nv-display); font-weight: 600; text-transform: uppercase;
    font-size: 19px; line-height: 1.15; margin: 0 0 10px; color: var(--nv-paper);
}
.nv-auth__success p, .nv-auth__error-box p { font-size: 14.5px; line-height: 1.62; color: var(--nv-paper-dim); margin: 0; }

/* Verification-code entry (registration step 2) */
.nv-code {
    font-family: var(--nv-mono); font-size: 22px; letter-spacing: 0.4em;
    text-align: center; padding: 16px 14px;
}

/* --------------------------------------------------------------------------
   Legal pages (terms / privacy)
   These templates use the .nv-legal* vocabulary; the .nv-doc* rules above
   cover generic prose, these bind the page furniture.
   -------------------------------------------------------------------------- */
.nv-header--solid { background: var(--nv-ink); border-bottom-color: var(--nv-line); }

.nv-legal { padding: 56px 0 88px; }
.nv-legal__inner { max-width: 78ch; }
.nv-legal__eyebrow {
    font-family: var(--nv-mono); font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--nv-paper-mute); margin: 0 0 14px;
}
.nv-legal__eyebrow::before {
    content: ""; display: inline-block; width: 18px; height: 1px;
    background: var(--nv-inflight); vertical-align: middle; margin-right: 10px;
}
.nv-legal__title {
    font-family: var(--nv-display); font-weight: 600; text-transform: uppercase;
    font-size: clamp(30px, 4.4vw, 48px); line-height: 1.02; margin: 0 0 10px; color: var(--nv-paper);
}
.nv-legal__updated {
    font-family: var(--nv-mono); font-size: 12px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--nv-paper-mute); margin: 0 0 36px;
}
.nv-legal__note {
    border-left: 2px solid var(--nv-inflight);
    background: rgba(242, 169, 59, .06);
    padding: 14px 18px; margin: 0 0 36px;
    font-size: 14.5px; line-height: 1.6; color: var(--nv-paper-dim);
}
.nv-legal__note strong { color: var(--nv-paper); }

.nv-legal h2 {
    font-family: var(--nv-display); font-weight: 600; text-transform: uppercase;
    font-size: 19px; line-height: 1.2; color: var(--nv-paper);
    margin: 38px 0 14px; padding-top: 24px; border-top: 1px solid var(--nv-line-soft);
}
.nv-legal h3 {
    font-family: var(--nv-display); font-weight: 500; text-transform: uppercase;
    font-size: 15px; margin: 26px 0 10px; color: var(--nv-paper);
}
.nv-legal p, .nv-legal li { font-size: 15px; line-height: 1.72; color: var(--nv-paper-dim); }
.nv-legal p { margin: 0 0 14px; }
.nv-legal ul, .nv-legal ol { margin: 0 0 18px; padding-left: 22px; }
.nv-legal li { margin-bottom: 8px; }
.nv-legal strong, .nv-legal b { color: var(--nv-paper); font-weight: 600; }
.nv-legal a { color: var(--nv-paper); text-decoration: none; border-bottom: 1px solid var(--nv-line); }
.nv-legal a:hover { color: var(--nv-inflight); border-bottom-color: var(--nv-inflight); }

.nv-legal__back {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--nv-line-soft);
    font-family: var(--nv-mono); font-size: 13px; color: var(--nv-paper-dim);
    text-decoration: none;
}
.nv-legal__back:hover { color: var(--nv-inflight); }