/* =============================================================
   Hackers Nightlight: site theme
   A visual + layout layer loaded after styles.css.
   Keeps all functional selectors (3D model, carousel, popups,
   loading states) intact while re-skinning the page to match the
   layout: sticky top bar + centered-logo nav + dropdowns,
   big banner hero, white product tiles, red accents, dark footer.
   ============================================================= */

:root {
    --nl-red: #e11d26;
    --nl-red-bright: #ff2d33;
    --nl-red-dark: #b3141c;
    --nl-black: #000000;
    --nl-panel: #0b0b0d;
    --nl-panel-2: #121216;
    --nl-panel-3: #17171c;
    --nl-border: #26262c;
    --nl-border-soft: #1c1c21;
    --nl-text: #ffffff;
    --nl-text-dim: #c4c4cc;
    --nl-text-mute: #83838d;

    --nl-font-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
    --nl-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --header-h: 98px;
    --nl-maxw: 1240px;

    --nl-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* ---------- Base type ---------- */
body {
    font-family: var(--nl-font-body);
    color: var(--nl-text);
    letter-spacing: 0.01em;
    padding-top: var(--header-h);
}

h1, h2, h3, h4 {
    font-family: var(--nl-font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.05;
}

/* =============================================================
   HEADER: top utility bar + main nav + mega menu
   ============================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--nl-black);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Top utility bar */
.nl-topbar {
    background: var(--nl-black);
    border-bottom: 1px solid var(--nl-border-soft);
    height: 38px;
    display: flex;
    align-items: center;
}

.nl-topbar-inner {
    width: 100%;
    max-width: var(--nl-maxw);
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 22px;
}

.nl-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--nl-text-dim);
    text-decoration: none;
    font-family: var(--nl-font-display);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.nl-topbar-link:hover { color: var(--nl-text); }

.nl-topbar-link svg { width: 16px; height: 16px; stroke-width: 2; }

.nl-cart {
    background: var(--nl-red);
    color: #fff;
    padding: 6px 13px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
}

.nl-cart:hover { color: #fff; background: var(--nl-red-bright); }
.nl-cart svg { width: 15px; height: 15px; }
button.nl-cart { border: none; cursor: pointer; line-height: 1; }

/* Buttons that look like the surrounding menu/footer links (open the notify popup) */
.nl-link-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.nl-footer-col .nl-link-btn {
    color: var(--nl-text-mute);
    font-family: var(--nl-font-body);
    font-size: 14px;
    transition: color 0.18s ease, padding-left 0.18s ease;
}

.nl-footer-col .nl-link-btn:hover { color: var(--nl-red-bright); padding-left: 5px; }

/* Main navigation */
.nl-nav {
    background: var(--nl-black);
    height: 60px;
    border-bottom: 1px solid var(--nl-border-soft);
}

.nl-nav-inner {
    position: relative;
    height: 100%;
    max-width: var(--nl-maxw);
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Center brand wordmark */
.nl-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    z-index: 2;
}

.nl-brand-mark {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(225, 29, 38, 0.35));
}

.nl-brand-text {
    font-family: var(--nl-font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.12em;
    color: var(--nl-text);
    text-transform: uppercase;
    white-space: nowrap;
}

.nl-brand-text .accent { color: var(--nl-red); }

/* Nav link groups */
.nl-nav-group {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nl-nav-group.right { justify-content: flex-end; }

.nl-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nl-text);
    text-decoration: none;
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    padding: 8px 2px;
    background: none;
    border: none;
    cursor: pointer;
}

.nl-nav-link .caret {
    width: 12px;
    height: 12px;
    stroke-width: 3;
    transition: transform 0.25s ease;
    opacity: 0.85;
}

.nl-nav-link:hover { color: var(--nl-text); }
.nl-nav-link:hover::after,
.nl-nav-link[aria-expanded="true"]::after {
    transform: scaleX(1);
}

.nl-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--nl-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.nl-nav-item.open .nl-nav-link .caret { transform: rotate(180deg); }


/* Dropdowns: a small single-column list under its menu item */
.nl-nav-item { position: relative; }

.nl-drop {
    position: absolute;
    top: calc(100% + 10px);
    left: -16px;
    min-width: 210px;
    padding: 8px 0;
    background: var(--nl-panel);
    border: 1px solid var(--nl-border);
    border-top: 2px solid var(--nl-red);
    border-radius: 4px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 210;
}

/* invisible bridge so the menu doesn't close while the pointer crosses the gap */
.nl-drop::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.nl-nav-group.right .nl-drop { left: auto; right: -16px; }

.nl-nav-item.open .nl-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nl-drop a,
.nl-drop .nl-link-btn {
    display: block;
    width: 100%;
    padding: 9px 18px;
    color: var(--nl-text-dim);
    text-decoration: none;
    text-align: left;
    font-family: var(--nl-font-body);
    font-size: 14px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

.nl-drop a:hover,
.nl-drop a:focus-visible,
.nl-drop .nl-link-btn:hover,
.nl-drop .nl-link-btn:focus-visible {
    color: var(--nl-text);
    background: var(--nl-panel-3);
    outline: none;
}

/* Mobile toggle */
.nl-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nl-burger span {
    width: 26px;
    height: 2px;
    background: var(--nl-text);
    transition: transform 0.28s ease, opacity 0.2s ease;
}

.nl-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nl-burger.active span:nth-child(2) { opacity: 0; }
.nl-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile slide-down menu */
.nl-mobile-menu {
    display: none;
    background: var(--nl-panel);
    border-bottom: 1px solid var(--nl-border);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
}

.nl-mobile-menu.open { max-height: 80vh; overflow-y: auto; }

.nl-mobile-menu-inner { padding: 10px 22px 26px; }

.nl-mobile-menu a {
    display: block;
    padding: 14px 0;
    color: var(--nl-text);
    text-decoration: none;
    font-family: var(--nl-font-display);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--nl-border-soft);
}

.nl-mobile-menu .nl-link-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14px 0;
    text-align: center;
    background: var(--nl-red);
    color: #fff;
    border-radius: 3px;
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nl-mobile-menu a:hover { color: var(--nl-red-bright); }

/* =============================================================
   HERO: banner
   ============================================================= */
/* Neutralise the legacy full-screen centred section layout from styles.css */
.content > section {
    min-height: 0;
    display: block;
}

.content > section.hero,
.hero {
    position: relative;
    z-index: 4;
    height: auto;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: left;
    padding: 64px 22px 120px;
    overflow: hidden;
}

.hero-inner {
    position: relative;
    width: 100%;
    max-width: var(--nl-maxw);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Hero = copy over a full-bleed looping product render (video is the hero background) */
.hero .hero-inner.hero-layout {
    display: block;
}

.hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    max-width: 640px;
}

/* Background layer: sits behind the copy, never takes clicks */
.hero-render {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-render video,
.hero-render img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    background: #000;
}

/* Readability: darken behind the copy, fade the bottom into the next section */
.hero-render::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 22%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.62) 100%);
}

.hero .scroll-indicator {
    z-index: 2;
    pointer-events: none;   /* visual cue only: not clickable */
    cursor: default;
    user-select: none;
}

/* Portrait phones: don't blow the 16:9 clip up to cover a tall hero: show the whole product, smaller */
@media (max-width: 767px) and (orientation: portrait) {
    /* Video sits high in the hero, copy sits low, so the render is clearly visible */
    .hero-render video,
    .hero-render img {
        top: 0;
        left: 50%;
        right: auto;
        width: 165%;
        height: auto;
        aspect-ratio: 16 / 9;
        transform: translate(-50%, 0);
        object-fit: contain;
        -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
        mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
    }

    /* light over the video, darkening down behind the copy */
    .hero-render::after {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.15) 30%,
            rgba(0, 0, 0, 0.72) 52%,
            rgba(0, 0, 0, 0.9) 75%,
            #000 100%);
    }

    .content > section.hero,
    .hero {
        justify-content: flex-end;
    }

    /* frame tops are empty black: lift the clip a touch so more bulb clears the copy */
    .hero-render video,
    .hero-render img { top: -28px; }

    /* the big emblem repeats the nav logo; dropping it here frees room for the render */
    .hero .hero-inner .logo { display: none; }
}

@media (min-width: 1024px) {
    /* Product sits on the right; copy on the left over the faded side */
    .hero-render video,
    .hero-render img {
        width: 72%;
        right: -2%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 88%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 88%, transparent 100%);
    }

    .hero-render::after {
        background:
            linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 20%),
            linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 32%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%);
    }

    .hero-layout .mobile-break { display: inline; }

    .hero .hero-inner.hero-layout h1 {
        font-size: clamp(3.4rem, 5.8vw, 6rem);
        overflow-wrap: normal;
    }
}

/* styles.css offsets these upward with negative `top` values: undo that */
.hero .hero-inner h1,
.hero .hero-inner .notify-button,
.hero .hero-inner .hero-social-links,
.hero .hero-inner .hero-subtitle,
.hero .hero-inner .hero-actions {
    position: relative;
    top: 0;
    margin-top: 0;
}

.hero .hero-inner .hero-social-links {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    align-items: flex-start;
}

.hero .hero-inner .hero-social-links .social-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    max-width: none;
    margin: 0;
}

.hero .hero-inner .hero-social-links .social-buttons a {
    width: auto;
    margin: 0;
    padding: 9px 14px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero .hero-inner .hero-social-links .social-buttons svg {
    width: 15px;
    height: 15px;
}

.hero .notify-button {
    font-family: var(--nl-font-display);
    font-size: 14px;
    padding: 13px 26px;
    border-radius: 3px;
}

.hero .scroll-indicator {
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--nl-red);
    color: #fff;
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 3px;
    margin-bottom: 12px;
}

.hero-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: nlPulse 1.8s infinite;
}

@keyframes nlPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.hero .hero-inner h1 {
    max-width: none;
    font-family: var(--nl-font-display);   /* same face as the navbar wordmark */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.02;
    font-size: clamp(2.4rem, 10vw, 5.6rem);      /* Oswald is condensed: a touch larger than before */
    overflow-wrap: anywhere;
    margin: 0 0 12px;
    text-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
}

.hero h1 .thin { font-weight: 300; }

.hero-subtitle {
    font-family: var(--nl-font-body);
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 400;
    color: var(--nl-text-dim);
    max-width: 620px;
    line-height: 1.5;
    margin: 0 0 22px;
}

/* Hero CTA buttons: white filled + dark outline */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 26px;
    border-radius: 3px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--nl-text);
    color: var(--nl-black);
    border-color: var(--nl-text);
}

.btn-primary:hover {
    background: var(--nl-red);
    border-color: var(--nl-red);
    color: #fff;
}

.btn-outline {
    background: rgba(20, 20, 24, 0.7);
    color: var(--nl-text);
    border-color: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(4px);
}

.btn-outline:hover {
    border-color: var(--nl-text);
    background: rgba(40, 40, 46, 0.9);
}

.btn svg { width: 18px; height: 18px; }

/* Legacy notify button now acts as a primary CTA (kept clickable for the email popup) */
.notify-button {
    display: inline-flex;
}

/* Hero logo emblem */
.hero .logo {
    position: relative;
    top: auto;
    left: auto;
    max-width: none;
    z-index: 5;
    width: 56px;
    height: 56px;
    margin: 0 0 12px;
    object-fit: contain;
    filter: drop-shadow(0 8px 30px rgba(225, 29, 38, 0.4));
}

/* =============================================================
   SPEC STRIP: white product tiles
   ============================================================= */
.content > .spec-strip,
.spec-strip {
    position: relative;
    z-index: 4;
    background: var(--nl-black);
    padding: 24px 22px 70px;
}

.spec-strip-inner {
    max-width: var(--nl-maxw);
    margin: 0 auto;
}

.spec-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 26px;
}

.spec-eyebrow h2 {
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.22em;
    color: var(--nl-text-mute);
    white-space: nowrap;
}

.spec-eyebrow .rule {
    flex: 1;
    height: 1px;
    background: var(--nl-border);
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.spec-tile {
    position: relative;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--nl-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.spec-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.6);
}

.spec-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--nl-red);
    color: #fff;
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 11px;
    border-bottom-left-radius: 6px;
    z-index: 2;
}

.spec-visual {
    aspect-ratio: 1 / 0.82;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 40%, #ffffff 0%, #e9e9ee 100%);
}

.spec-visual svg {
    width: 78px;
    height: 78px;
    stroke: var(--nl-black);
    stroke-width: 1.3;
}

.spec-visual .spec-figure {
    font-family: var(--nl-font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    color: var(--nl-black);
    letter-spacing: 0.02em;
    line-height: 1;
}

.spec-caption {
    padding: 16px 18px 20px;
    text-align: center;
}

.spec-caption .name {
    display: block;
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6c6c74;
}

.spec-caption .sub {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    color: #9a9aa2;
    letter-spacing: 0.01em;
}

/* =============================================================
   HARDWARE: exploded render with numbered callouts on both sides
   ============================================================= */
.content > section.hw,
.hw {
    position: relative;
    z-index: 4;
    display: block;
    min-height: 0;
    background: var(--nl-black);
    padding: 40px 22px 80px;
}

.hw-inner {
    max-width: var(--nl-maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
        "title title title"
        "left  fig   right";
    align-items: center;
    column-gap: 56px;
}

.hw .hw-title { grid-area: title; text-align: center; margin: 0 0 34px; }
.hw-list--left  { grid-area: left; }
.hw-list--right { grid-area: right; }
.hw-figure      { grid-area: fig; }

.hw-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.hw-item h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nl-text);
}

.hw-num,
.hw-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: #f2f2f4;
    color: #111114;
    font-family: var(--nl-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1;
}

.hw-item p {
    margin: 0 0 0 38px;
    font-family: var(--nl-font-body);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--nl-text-dim);
}

.hw-figure {
    position: relative;
    margin: 0;
}

.hw-figure img {
    display: block;
    height: clamp(560px, 78vh, 820px);
    width: auto;
}

.hw-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55);
}

@media (max-width: 1024px) {
    .hw-inner { column-gap: 32px; }
    .hw-figure img { height: clamp(480px, 70vh, 640px); }
}

/* Phones / small tablets: render first, then the numbered list */
@media (max-width: 860px) {
    .hw-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "fig"
            "left"
            "right";
        row-gap: 0;
    }
    .hw-figure { justify-self: center; margin-bottom: 32px; }
    .hw-figure img { height: 520px; }
    .hw-list { gap: 22px; }
    .hw-list--left { margin-bottom: 22px; }
}

@media (max-width: 640px) {
    .content > section.hw,
    .hw { padding: 24px 16px 56px; }
    .hw-figure img { height: 460px; }
}

/* =============================================================
   INFO SECTION: intro split + feature cards
   ============================================================= */
.content > .info-section,
.info-section {
    position: relative;
    z-index: 4;
    background: linear-gradient(180deg, var(--nl-black) 0%, var(--nl-panel) 22%, var(--nl-black) 100%);
    padding: 40px 22px 90px;
    border-top: 0;          /* styles.css draws a thin red rule along the top */
}

.info-section::before { display: none; }

/* more room between the hero and the first content section */
.content > section#info { padding-top: 100px; }

@media (max-width: 860px) {
    .content > section#info { padding-top: 64px; }
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--nl-red-bright);
    margin: 0 0 16px;
}

.section-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--nl-red);
}

.section-title {
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: clamp(1.9rem, 4.5vw, 3.1rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.02;
    margin: 0 0 22px;
    text-align: left;
}

/* Booklet line sketches: white line art on dark panels between the spec tiles and the detail cards.
   Columns sized by each sketch's aspect (1.90 vs 1.13) so both panels come out the same height. */
.spec-sketches {
    display: grid;
    grid-template-columns: minmax(0, 1.67fr) minmax(0, 1fr);
    gap: 22px;
    margin: 22px 0 0;
}

.spec-sketch {
    margin: 0;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 80% 70% at 50% 45%, rgba(255, 255, 255, 0.045), transparent 70%),
        var(--nl-panel-2);
    border: 1px solid var(--nl-border-soft);
    border-radius: 6px;
    padding: 18px 18px 14px;
    box-shadow: var(--nl-shadow);
}

.spec-sketch img {
    display: block;
    width: 100%;
    height: auto;
}

.spec-sketch figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;      /* both captions sit on the panel's bottom edge */
    padding-top: 12px;
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nl-text-mute);
}

.spec-sketch figcaption .rule {
    width: 22px;
    height: 2px;
    background: var(--nl-red);
}

@media (max-width: 860px) {
    .spec-sketches { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* Detail cards now live in the Tech Specs section, under the spec tiles: same row width as the tiles,
   three across (so each is wider than a spec tile) and the same white product-tile look */
.spec-strip .description-cards {
    max-width: none;
    width: 100%;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.spec-strip .card.spec-tile--detail {
    background: #fff;
    border: 0;
    border-left: 0;
    border-radius: 6px;
    padding: 0;
    box-shadow: var(--nl-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.spec-strip .card.spec-tile--detail:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.6);
}

.spec-tile--detail .spec-visual {
    aspect-ratio: auto;
    height: 132px;
}

.spec-tile--detail .spec-visual svg {
    width: 58px;
    height: 58px;
}

.spec-strip .spec-tile--detail .spec-caption {
    padding: 20px 26px 26px;
    text-align: center;
    flex: 1;
}

.spec-strip .spec-tile--detail h3.name {
    display: block;
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1d1d22;
    margin: 0 0 10px;
}

.spec-strip .spec-tile--detail p {
    font-family: var(--nl-font-body);
    font-size: 14px;
    line-height: 1.62;
    color: #5d5d66;
    margin: 0;
}

.spec-strip .spec-tile--detail strong {
    color: #1d1d22;
    font-weight: 600;
}

/* "Under the Hood": scannable label/value spec list instead of a dense paragraph */
.spec-strip .spec-tile--detail .spec-caption--specs {
    text-align: left;
    padding: 18px 22px 22px;
}

.spec-rows {
    margin: 0;
}

.spec-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 4px 14px;
    align-items: baseline;
    padding: 9px 0;
    border-top: 1px solid #ececf1;
}

.spec-row:first-child {
    border-top: 0;
    padding-top: 2px;
}

.spec-row dt {
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a8a94;
    margin: 0;
}

.spec-row dd {
    font-family: var(--nl-font-body);
    font-size: 13.5px;
    line-height: 1.5;
    color: #2a2a30;
    margin: 0;
}

@media (max-width: 420px) {
    .spec-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

@media (max-width: 860px) {
    .spec-strip .description-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .spec-tile--detail .spec-visual { height: 104px; }
}

@media (max-width: 520px) {
    .spec-strip .description-cards { gap: 12px; margin-top: 12px; }
    .spec-strip .spec-tile--detail .spec-caption { padding: 16px 18px 20px; }
}

/* Section headings placed straight in a full-width section (e.g. "Capabilities"):
   centre them over the 1240px content grid instead of hugging the window's left edge */
.info-section > .section-eyebrow {
    display: flex;
    justify-content: center;
    max-width: var(--nl-maxw);
    margin: 0 auto 16px;
}

.info-section > .section-eyebrow::after {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--nl-red);
}

.info-section > .section-title {
    max-width: var(--nl-maxw);
    margin: 0 auto 34px;
    text-align: center;
}

/* Intro split ("let me be clear" style) */
.intro-split {
    max-width: var(--nl-maxw);
    margin: 0 auto 70px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 54px;
}

.intro-media {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--nl-shadow);
    border: 1px solid var(--nl-border);
}

.intro-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(225, 29, 38, 0.16), transparent 55%);
    pointer-events: none;
}

/* Booklet line drawing (page 5): same dark panel as the board sketches, drawing centred, no red wash */
.intro-media--sketch {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 24px;
    border-radius: 6px;
    border-color: var(--nl-border-soft);
    background:
        radial-gradient(ellipse 70% 65% at 50% 45%, rgba(255, 255, 255, 0.045), transparent 70%),
        var(--nl-panel-2);
}

.intro-media--sketch::after { display: none; }

.intro-media--sketch img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

@media (max-width: 860px) {
    .intro-media--sketch img { max-height: 300px; }
}

.intro-text {
    font-family: var(--nl-font-body);
    font-size: clamp(1.15rem, 2.4vw, 1.75rem);
    line-height: 1.55;
    color: var(--nl-text-dim);
    margin: 0 0 26px;
    max-width: none;
    text-align: left;   /* match the Overview heading's left edge */
}

.intro-text strong { color: var(--nl-text); font-weight: 600; }

/* Feature cards */
.features {
    max-width: var(--nl-maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.feature {
    position: relative;
    background: var(--nl-panel-2);
    border: 1px solid var(--nl-border-soft);
    border-radius: 6px;
    padding: 30px 28px 32px;
    overflow: hidden;
    transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

.feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--nl-red), var(--nl-red-bright));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.32s ease;
}

.feature:hover,
.feature.hover {
    transform: none;
    border-color: var(--nl-border);
    background: var(--nl-panel-3);
}

/* hover stays quiet: no red bar sweep (the bar still marks a card reached from the menu, see :target) */

.feature h3 {
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nl-text);
    margin-bottom: 13px;
}

.feature p {
    font-family: var(--nl-font-body);
    font-size: 15px;
    line-height: 1.62;
    color: var(--nl-text-dim);
    margin: 0;
}

.feature strong { color: var(--nl-text); font-weight: 600; }

/* Capabilities as a minimal icon grid: icon, title, short text; no card boxes */
.features {
    row-gap: 52px;
    column-gap: 40px;
}

.features .feature,
.features .feature:hover,
.features .feature.hover {
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
}

.features .feature {
    padding: 6px 12px;
    text-align: center;
    overflow: visible;
}

.features .feature::before { display: none; }

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border: 1px solid var(--nl-border);
    border-radius: 50%;
    color: var(--nl-text);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.feature-icon svg { width: 20px; height: 20px; stroke-width: 1.6; }

.features .feature:hover .feature-icon { border-color: var(--nl-text-mute); }

.features .feature h3 { font-size: 16px; margin-bottom: 10px; }

.features .feature p {
    max-width: 320px;
    margin: 0 auto;
    font-size: 14px;
}

/* a capability reached from the menu gets a quiet ring instead of a box */
.features .feature:target { animation: none; }
.features .feature:target .feature-icon { border-color: var(--nl-red); color: var(--nl-red-bright); }

@media (max-width: 860px) {
    .features { row-gap: 40px; }
}

/* Capabilities beside the booklet's bulb drawing (first section after the hero) */
.caps-split {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.6fr);
    align-items: stretch;
    gap: 56px;
    margin-bottom: 0;
}

.caps-split .intro-media--sketch { min-height: 0; align-self: center; }   /* panel wraps the drawing, centred beside the list */

.caps-body .section-title { margin-bottom: 30px; text-align: center; }   /* centred over the features grid */

.caps-body .features {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 38px;
    column-gap: 40px;
}

.caps-body .features .feature {
    padding: 0;
    text-align: left;
    align-items: flex-start;     /* styles.css centres .feature as a flex column */
}

.caps-body .features .feature h3 { text-align: left; }

.caps-body .features .feature p {
    max-width: none;
    margin: 0;
}

.caps-body .feature-icon { margin-bottom: 14px; }

@media (max-width: 1024px) {
    .caps-split { gap: 36px; }
}

@media (max-width: 860px) {
    .caps-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .caps-split .intro-media--sketch { min-height: 0; }
}

@media (max-width: 600px) {
    .caps-body .features { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
}

/* Learn more (red arrow link) */
.learn-more-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 2px 0;
    background: none;
    border: none;
    color: var(--nl-red-bright);
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.25s ease;
}

/* Static arrow; hover is just a quiet colour change */
.learn-more-btn::after {
    content: "→";
}

.learn-more-btn:hover,
.learn-more-btn:focus-visible {
    color: var(--nl-text);
    outline: none;
}

/* =============================================================
   FEATURED ON (carousel): restyle headers only
   ============================================================= */
.featured-on {
    max-width: var(--nl-maxw);
    margin: 80px auto 0;
    padding: 0;
}

.featured-on h2 {
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nl-text);
    margin-bottom: 26px;
}

.carousel-btn {
    background: var(--nl-panel-2) !important;
    border: 1px solid var(--nl-border) !important;
    color: var(--nl-text) !important;
    border-radius: 3px !important;
}

.carousel-btn:hover { background: var(--nl-red) !important; border-color: var(--nl-red) !important; }

.dot { background: var(--nl-border) !important; border-radius: 2px !important; }
.dot.active { background: var(--nl-red) !important; width: 22px !important; }

/* =============================================================
   MODEL / DESCRIPTION CARDS
   ============================================================= */
.model-section {
    display: block;
    max-width: var(--nl-maxw);
    margin: 80px auto 0;
    padding: 0;
}

.description-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 30px;
}

.card {
    background: var(--nl-panel-2);
    border: 1px solid var(--nl-border-soft);
    border-left: 3px solid var(--nl-red);
    border-radius: 5px;
    padding: 28px 26px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.card:hover {
    transform: none;
    border-color: var(--nl-border);
    border-left-color: var(--nl-red-bright);
}

.card h3 {
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nl-text);
    margin-bottom: 12px;
}

.card p {
    font-family: var(--nl-font-body);
    font-size: 15px;
    line-height: 1.62;
    color: var(--nl-text-dim);
    margin: 0;
}

.card strong { color: var(--nl-text); font-weight: 600; }

.brand-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 30px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--nl-border);
}

.brand-text {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--nl-text-mute);
    text-decoration: none;
    font-family: var(--nl-font-display);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.brand-text:hover { color: var(--nl-text); }

/* Quiet hovers: styles.css adds red glows and lifts to these; keep only the colour change */
.feature:hover,
.feature.hover,
.social-links .social-buttons a:hover,
.hero-social-links .social-buttons a:hover,
.learn-more-btn:hover,
.notify-button:hover {
    box-shadow: none;
}

.social-links .social-buttons a:hover,
.hero-social-links .social-buttons a:hover,
.learn-more-btn:hover,
.notify-button:hover,
.featured-carousel:hover {
    transform: none;
}

.hero-social-links .social-buttons a:hover svg { filter: none; }

/* styles.css gives the brand links a pulsing red glow: keep them plain */
.brand-text,
.brand-text:hover {
    text-shadow: none;
    animation: none;
}
.brand-text svg { width: 16px; height: 16px; }

/* =============================================================
   FOOTER
   ============================================================= */
.nl-footer {
    position: relative;
    z-index: 4;
    background: var(--nl-panel);
    border-top: 1px solid var(--nl-border);
    padding: 66px 22px 30px;
}

.nl-footer-inner {
    max-width: var(--nl-maxw);
    margin: 0 auto;
}

.nl-footer-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--nl-border);
}

.nl-footer-brand .nl-brand {
    position: static;
    transform: none;
    margin-bottom: 16px;
}

.nl-footer-brand p {
    color: var(--nl-text-mute);
    font-size: 14px;
    line-height: 1.7;
    max-width: 320px;
    margin: 0 0 20px;
}

.nl-footer-social {
    display: flex;
    gap: 12px;
}

.nl-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--nl-border);
    border-radius: 3px;
    color: var(--nl-text-dim);
    transition: all 0.22s ease;
}

.nl-footer-social a:hover {
    background: var(--nl-red);
    border-color: var(--nl-red);
    color: #fff;
    transform: translateY(-3px);
}

.nl-footer-social svg { width: 18px; height: 18px; }

.nl-footer-col h4 {
    font-family: var(--nl-font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--nl-text);
    margin-bottom: 18px;
}

.nl-footer-col ul { list-style: none; margin: 0; padding: 0; }
.nl-footer-col li { margin-bottom: 11px; }

.nl-footer-col a {
    color: var(--nl-text-mute);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.18s ease, padding-left 0.18s ease;
}

.nl-footer-col a:hover { color: var(--nl-red-bright); padding-left: 5px; }

.nl-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 26px;
}

.nl-footer-bottom p {
    margin: 0;
    color: var(--nl-text-mute);
    font-size: 12.5px;
    letter-spacing: 0.05em;
}

.nl-footer-legal {
    display: flex;
    gap: 22px;
}

.nl-footer-legal a {
    color: var(--nl-text-mute);
    text-decoration: none;
    font-size: 12.5px;
    letter-spacing: 0.05em;
}

.nl-footer-legal a:hover { color: var(--nl-text); }

/* =============================================================
   SCROLL-TO-TOP (created dynamically) + misc overrides
   ============================================================= */
.scroll-to-top {
    background: var(--nl-red) !important;
    color: #fff !important;
    border: none;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    font-size: 0;              /* hide the literal "↑" glyph */
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease;
}

/* Crisp up-chevron replaces the font arrow. animations.js toggles the button with an inline
   display:block (which defeats flex centring), so pin the chevron to the centre absolutely.
   The visible "^" fills only the top half of its rotated box: nudge down by a quarter of the
   diagonal (~3.5px, minus the stroke = 2.75px, measured) so the drawn shape, not its box, is centred. */
.scroll-to-top::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: 0;
    box-sizing: border-box;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, calc(-50% + 2.75px)) rotate(-135deg);
}

.scroll-to-top:hover {
    background: var(--nl-red-bright) !important;
    transform: none;
}

.scroll-to-top:active {
    transform: none;
}

.scroll-indicator {
    font-family: var(--nl-font-display);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nl-text-mute);
}

.hero-social-links .social-buttons a {
    border: 1px solid var(--nl-border) !important;
    border-radius: 3px;
    background: rgba(18, 18, 22, 0.6);
    color: var(--nl-text-dim) !important;
    font-family: var(--nl-font-display);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-social-links .social-buttons a:hover {
    border-color: var(--nl-red) !important;
    color: var(--nl-text) !important;
    background: rgba(225, 29, 38, 0.14);
}

/* Email popup polish */
.email-popup-content {
    background: var(--nl-panel-2) !important;
    border: 1px solid var(--nl-border);
    border-top: 3px solid var(--nl-red);
    border-radius: 6px;
}

.email-popup-content h2 {
    font-family: var(--nl-font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.email-form button {
    background: var(--nl-red) !important;
    font-family: var(--nl-font-display);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.email-form button:hover { background: var(--nl-red-bright) !important; }

.discord-link {
    background: rgba(88, 101, 242, 0.18) !important;
    border: 1px solid rgba(88, 101, 242, 0.5);
    border-radius: 4px;
    font-family: var(--nl-font-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Smooth in-page anchor offset for the fixed header */
#hero, #specs, #info, #features, #featured, #hardware, .model-section,
.feature[id], .card[id] {
    scroll-margin-top: calc(var(--header-h) + 24px);
}

/* Highlight the card a menu link jumped to */
.feature:target,
.card:target {
    border-color: var(--nl-red);
    animation: nlTarget 1.6s ease-out 1;
}

.feature:target::before { transform: scaleX(1); }

@keyframes nlTarget {
    0% { box-shadow: 0 0 0 0 rgba(225, 29, 38, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(225, 29, 38, 0); }
}


/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
    .features { grid-template-columns: repeat(2, 1fr); }
    .description-cards { grid-template-columns: repeat(2, 1fr); }
    .nl-footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    :root { --header-h: 60px; }

    .nl-topbar { display: none; }
    .nl-nav { height: 60px; }

    .nl-nav-group { display: none; }
    .nl-burger { display: flex; }
    .nl-mobile-menu { display: block; }

    .nl-brand { position: static; transform: none; }
    /* Burger | centred logo | empty column the burger's width, so the logo sits on the true centre line */
    .nl-nav-inner {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        align-items: center;
        column-gap: 12px;
    }
    .nl-burger { grid-column: 1; justify-self: start; }
    /* Wordmark scales with the screen and may shrink, so it can never be cut off
       (e.g. before Oswald loads, or with a larger system text size) */
    .nl-nav .nl-brand {
        grid-column: 2;
        justify-self: center;
        min-width: 0;
        max-width: 100%;
        gap: 8px;
    }
    .nl-nav .nl-brand-text {
        font-size: clamp(12px, calc(9vw - 16px), 18px);
        letter-spacing: 0.1em;
        min-width: 0;
        overflow: hidden;
        text-overflow: clip;
    }
    .nl-brand-mark { width: 30px; height: 30px; flex: 0 0 auto; }
    .nl-burger { flex: 0 0 auto; }

    .hero {
        min-height: calc(100vh - var(--header-h));
        padding: 50px 20px 100px;
    }

    .intro-split { grid-template-columns: 1fr; gap: 30px; }
    .features { grid-template-columns: 1fr; }
    .spec-grid { grid-template-columns: repeat(2, 1fr); }
    .description-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .content > section.hero,
    .hero { padding: 40px 16px 96px; }
    .content > .spec-strip,
    .spec-strip { padding-left: 16px; padding-right: 16px; }
    .content > .info-section,
    .info-section { padding-left: 16px; padding-right: 16px; }
    .nl-footer { padding-left: 16px; padding-right: 16px; }
    .nl-nav-inner { padding: 0 16px; }
    .hero .logo { width: 60px; height: 60px; }
    .feature, .card { padding: 24px 20px; }
    .model-section, .featured-on { margin-top: 56px; }
}

@media (max-width: 520px) {
    .nl-footer-cols { grid-template-columns: 1fr; }
    .spec-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .spec-visual svg { width: 52px; height: 52px; }
    .spec-visual .spec-figure { font-size: 2.1rem; }
    .spec-caption { padding: 12px 10px 14px; }
    .spec-caption .name { font-size: 11.5px; letter-spacing: 0.1em; }
    .spec-caption .sub { font-size: 11.5px; }
    .spec-badge { font-size: 9.5px; padding: 5px 8px; }
    .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .btn { width: 100%; }
    .nl-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}