/*
 * ═══════════════════════════════════════════════════════════════════════════
 * NUMERO6 TITANIUM THEME  –  Theme.css  v2.0
 * Oqtane v10+ / .NET 10+
 *
 * Art direction: Steel-grey light surfaces · Deep crimson footer · Corporate
 * Palette: Steel grey bg (#b2bec9), white card surfaces, crimson accent (#DC143C)
 *          Deep red footer (#7a1020)
 * Typography: Rajdhani (display) + Inter (body)
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════
   0. GOOGLE FONTS
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════ */
:root {
    /* ── Accent ─────────────────────────────────────────────── */
    --nt6-accent: #DC143C;
    --nt6-accent-hover: #a80e2c;
    --nt6-accent-dim: rgba(220, 20, 60, 0.10);
    --nt6-accent-glow: rgba(220, 20, 60, 0.18);
    --nt6-accent-border: rgba(220, 20, 60, 0.40);
    /* ── Surfaces — brushed aluminium palette ──────────────── */
    --nt6-bg: #b8c4ce; /* page bg: warm aluminium grey          */
    --nt6-bg-light: #c8d2da; /* lighter aluminium                     */
    --nt6-surface: #edf1f4; /* card base: cool off-white             */
    --nt6-surface-2: #f8f9fb; /* elevated card: near-white             */
    --nt6-surface-3: #dde4ea; /* hover / pressed                       */
    --nt6-navbar-bg: rgba(215,224,232,0.55); /* more translucent frosted bar */
    --nt6-divider: rgba(0,0,0,0.07);
    --nt6-border: rgba(0,0,0,0.11);
    --nt6-border-hi: rgba(0,0,0,0.20);
    /* ── Hero split layout (text left / image right) ──────────────── */
    .nt6-hero {
        position: relative;
        overflow: hidden;
    }

    .nt6-hero__content {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: var(--nt6-sp-12);
        padding-block: clamp(3rem, 8vw, 6rem);
    }

    .nt6-hero--split .nt6-hero__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--nt6-sp-12);
        align-items: center;
    }

    .nt6-hero__text {
        flex: 1 1 0;
    }

    .nt6-hero__image-wrap {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nt6-hero__image {
        width: 100%;
        max-height: 480px;
        object-fit: contain;
        border-radius: var(--nt6-r-xl);
        filter: drop-shadow(0 24px 48px rgba(0,0,0,0.18));
        animation: nt6-hero-float 6s ease-in-out infinite;
    }

    @keyframes nt6-hero-float {
        0%, 100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    @media (max-width: 767px) {
        .nt6-hero--split .nt6-hero__content {
            grid-template-columns: 1fr;
        }

        .nt6-hero__image-wrap {
            display: flex;
        }
    }
    /* ── Footer ─────────────────────────────────────────────── */
    --nt6-footer-bg: #7a1020; /* deep crimson red footer               */
    --nt6-footer-text: #f0d0d4;
    --nt6-footer-muted: rgba(240,208,212,0.65);
    /* ── Text (dark on light surfaces) ────────────────────── */
    --nt6-text: #1a1e28;
    --nt6-text-muted: #4a5568;
    --nt6-text-faint: #8898aa;
    /* ── Typography ─────────────────────────────────────────── */
    --nt6-font-display: 'Rajdhani', 'Helvetica Neue', sans-serif;
    --nt6-font-body: 'Inter', 'Helvetica Neue', sans-serif;
    /* ── Type scale ─────────────────────────────────────────── */
    --nt6-text-xs: clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem);
    --nt6-text-sm: clamp(0.875rem, 0.80rem + 0.35vw, 1rem);
    --nt6-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --nt6-text-lg: clamp(1.125rem, 1.00rem + 0.75vw, 1.5rem);
    --nt6-text-xl: clamp(1.5rem, 1.20rem + 1.25vw, 2.25rem);
    --nt6-text-2xl: clamp(2rem, 1.20rem + 2.50vw, 3.5rem);
    --nt6-text-3xl: clamp(2.5rem, 1.00rem + 4.00vw, 5rem);
    /* ── Spacing ─────────────────────────────────────────────── */
    --nt6-sp-1: 0.25rem;
    --nt6-sp-2: 0.5rem;
    --nt6-sp-3: 0.75rem;
    --nt6-sp-4: 1rem;
    --nt6-sp-5: 1.25rem;
    --nt6-sp-6: 1.5rem;
    --nt6-sp-8: 2rem;
    --nt6-sp-10: 2.5rem;
    --nt6-sp-12: 3rem;
    --nt6-sp-16: 4rem;
    /* ── Radius ──────────────────────────────────────────────── */
    --nt6-r-sm: 0.25rem;
    --nt6-r-md: 0.375rem;
    --nt6-r-lg: 0.5rem;
    --nt6-r-xl: 0.75rem;
    --nt6-r-full: 9999px;
    /* ── Motion ──────────────────────────────────────────────── */
    --nt6-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --nt6-t: 150ms ease;
    --nt6-t-m: 240ms ease;
    --nt6-t-spring: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    /* ── Layout ──────────────────────────────────────────────── */
    --nt6-navbar-h: 72px;
    --nt6-navbar-h-scrolled: 52px;
    --nt6-content-w: 1200px;
}

/* ═══════════════════════════════════════════════════════════
   2. RESET / BASE
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nt6-navbar-h);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-base);
    color: var(--nt6-text);
    /* Brushed-aluminium: angled light sweep across warm grey */
    background-color: var(--nt6-bg);
    /* ── Brushed aluminium background ─────────────────────────────────
     Layer order (top to bottom):
     1. Fractal noise SVG overlay at 4% — surface microstructure
     2. Diagonal linear gradient — the "grain direction" of the metal
     3. Broad radial specular — the reflection of an overhead light source
     4. Base tonal colour
  ────────────────────────────────────────────────────────────────── */
    background-color: #b8c4ce;
    background-image:
    /* 1. Fractal noise at 4% — gives the random surface variation of brushed metal */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend in='SourceGraphic' mode='overlay'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
    /* 2. Diagonal grain — ~125° matches the angle in reference aluminium images */
    repeating-linear-gradient( 125deg, rgba(255,255,255,0.00) 0px, rgba(255,255,255,0.055) 1px, rgba(255,255,255,0.00) 2px, rgba(255,255,255,0.00) 18px ),
    /* 3. Radial specular highlight — top-left light source */
    radial-gradient( ellipse 90% 70% at 35% 15%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 65% ),
    /* 4. Tonal base — slightly cooler at top, warmer at bottom */
    linear-gradient(170deg, #c8d4de 0%, #b4c2cc 50%, #9eacba 100%);
    background-size: 200px 200px, auto, auto, auto;
    background-attachment: fixed;
    padding-top: var(--nt6-navbar-h) !important;
    transition: padding-top var(--nt6-t-spring);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

    body.nt6-scrolled {
        padding-top: var(--nt6-navbar-h-scrolled) !important;
    }

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

ul[role="list"], ol[role="list"] {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--nt6-font-display);
    color: var(--nt6-text);
    line-height: 1.15;
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

a {
    color: var(--nt6-accent);
    text-decoration: none;
    transition: color var(--nt6-t);
}

    a:hover {
        color: var(--nt6-accent-hover);
    }

::selection {
    background: var(--nt6-accent-dim);
    color: var(--nt6-text);
}

:focus-visible {
    outline: 2px solid var(--nt6-accent);
    outline-offset: 3px;
    border-radius: var(--nt6-r-sm);
}

.nt6-skip-link {
    position: absolute;
    top: -100%;
    left: var(--nt6-sp-4);
    z-index: 9999;
    background: var(--nt6-accent);
    color: #fff;
    padding: var(--nt6-sp-2) var(--nt6-sp-4);
    border-radius: var(--nt6-r-sm);
    font-size: var(--nt6-text-sm);
    font-weight: 600;
    transition: top 0.15s;
}

    .nt6-skip-link:focus {
        top: var(--nt6-sp-4);
    }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   3. NAVBAR
   White bar, flat, no glass. Shrinks on scroll.
   ═══════════════════════════════════════════════════════════ */
/* Keyframe for the animated crimson scan sweep on the navbar bottom edge */
@keyframes nt6-navbar-scan {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        transform: translateX(200%);
        opacity: 0;
    }
}

.nt6-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: var(--nt6-navbar-h);
    background: var(--nt6-navbar-bg);
    /* Frosted-glass aluminium look */
    backdrop-filter: blur(18px) saturate(1.6) brightness(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.6) brightness(1.08);
    /* Static crimson bottom border */
    border-bottom: 2px solid rgba(220,20,60,0.55);
    /* Top inset highlight (metallic edge light) */
    box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset, 0 2px 12px rgba(0,0,0,0.10);
    overflow: visible;
    transition: height var(--nt6-t-spring), background var(--nt6-t-m), box-shadow var(--nt6-t-m), border-color var(--nt6-t-m);
}

    /* Animated crimson sweep on top of the static border */
    .nt6-navbar::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 45%;
        height: 2px;
        background: linear-gradient( 90deg, rgba(220,20,60,0) 0%, rgba(220,20,60,0.9) 45%, rgba(220,20,60,1) 50%, rgba(220,20,60,0.9) 55%, rgba(220,20,60,0) 100% );
        animation: nt6-navbar-scan 8s ease-in-out infinite;
        pointer-events: none;
    }

    .nt6-navbar.is-scrolled {
        height: var(--nt6-navbar-h-scrolled);
        background: rgba(200,210,218,0.90);
        border-bottom-color: rgba(220,20,60,0.70);
        box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 20px rgba(0,0,0,0.14);
    }

.nt6-navbar__inner {
    max-width: var(--nt6-content-w);
    margin: 0 auto;
    padding: 0 var(--nt6-sp-6);
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-6);
    overflow: visible;
}

/* ── Brand ──────────────────────────────────────────────── */
.nt6-brand {
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-3);
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity var(--nt6-t);
}

    .nt6-brand:hover {
        opacity: 0.80;
    }

.nt6-brand__mark {
    display: block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    transition: width var(--nt6-t-spring), height var(--nt6-t-spring);
}

.nt6-navbar.is-scrolled .nt6-brand__mark {
    width: 30px;
    height: 30px;
}

/* On white navbar the circle stroke should be crimson, text dark */
.nt6-brand__mark circle {
    stroke: var(--nt6-accent);
}

.nt6-brand__mark text {
    fill: var(--nt6-accent);
}

.nt6-brand__wordmark {
    font-family: var(--nt6-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--nt6-text);
    text-transform: uppercase;
    transition: font-size var(--nt6-t-spring);
}

.nt6-navbar.is-scrolled .nt6-brand__wordmark {
    font-size: 1.05rem;
}

.nt6-brand__six {
    color: var(--nt6-accent);
}

/* ── Right controls ─────────────────────────────────────── */
.nt6-navbar__controls {
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-3);
    margin-left: auto;
}

.nt6-btn-ghost {
    background: transparent;
    border: 1px solid var(--nt6-border);
    color: var(--nt6-text-muted);
    padding: var(--nt6-sp-2) var(--nt6-sp-4);
    border-radius: var(--nt6-r-md);
    font-size: var(--nt6-text-sm);
    font-family: var(--nt6-font-body);
    cursor: pointer;
    transition: border-color var(--nt6-t), color var(--nt6-t), background var(--nt6-t);
}

    .nt6-btn-ghost:hover {
        border-color: var(--nt6-accent-border);
        color: var(--nt6-text);
        background: var(--nt6-accent-dim);
    }

.nt6-btn-ghost--sm {
    padding: var(--nt6-sp-1) var(--nt6-sp-3);
}

/* "Request Demo" style primary CTA in navbar */
.nt6-navbar__controls .btn-primary,
.nt6-navbar__controls a.btn-primary {
    background: var(--nt6-accent) !important;
    border-color: var(--nt6-accent) !important;
    color: #fff !important;
    font-family: var(--nt6-font-display);
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: var(--nt6-r-md);
    padding: var(--nt6-sp-2) var(--nt6-sp-5);
}

    .nt6-navbar__controls .btn-primary:hover,
    .nt6-navbar__controls a.btn-primary:hover {
        background: var(--nt6-accent-hover) !important;
        border-color: var(--nt6-accent-hover) !important;
    }

/* ═══════════════════════════════════════════════════════════
   4. DESKTOP NAV (Oqtane Menu)
   Dark text links on white navbar.
   ═══════════════════════════════════════════════════════════ */
.nt6-nav-desktop {
    display: flex;
    align-items: center;
    flex: 1;
    overflow: visible;
    min-width: 0;
}

    .nt6-nav-desktop .navbar-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0;
        list-style: none;
        padding: 0;
        margin: 0;
        flex-wrap: nowrap;
        overflow: visible;
    }

    .nt6-nav-desktop .nav-item {
        position: relative;
        margin-right: 12px;
    }

    .nt6-nav-desktop .nav-link {
        display: block;
        /* Slightly smaller text + more padding to create clear separation */
        padding: var(--nt6-sp-2) var(--nt6-sp-6);
        color: var(--nt6-text-muted);
        font-family: var(--nt6-font-body);
        font-size: 0.85rem; /* smaller than --nt6-text-sm */
        font-weight: 500;
        letter-spacing: 0.035em;
        text-decoration: none;
        white-space: nowrap;
        transition: color var(--nt6-t);
        position: relative;
    }

        /* ── Crimson underline — !important prevents Bootstrap .active override ── */
        .nt6-nav-desktop .nav-link::after {
            /* Disabled by default; we only create the underline on the active item. */
            content: none;
        }


    /* Do not draw the full-width crimson underline on dropdown toggles; they get
   their own caret and a tiny dot indicator instead so the visuals do not
   collide. */
    .nt6-nav-desktop .dropdown > .nav-link::after,
    .nt6-nav-desktop .dropdown.show > .nav-link::after {
        width: 0 !important;
    }

    /* Prevent Bootstrap .active from painting its own dark underline */
    .nt6-nav-desktop .nav-link.active,
    .nt6-nav-desktop .nav-link[aria-current="page"] {
        color: var(--nt6-text) !important;
        border-bottom-color: transparent !important;
        text-decoration: none !important;
    }

    .nt6-nav-desktop .nav-link:hover {
        color: var(--nt6-text);
    }

    /* Active page underline — only non-dropdown top-level links */
    .nt6-nav-desktop ul > li:not(.dropdown) > a.nav-link.active::after,
    .nt6-nav-desktop ul > li:not(.dropdown) > a.nav-link[aria-current="page"]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        width: 70%;
        height: 2px;
        background: #DC143C;
        transform: translateX(-50%);
        border-radius: var(--nt6-r-full);
    }


    /* Override any Bootstrap nav underline that Oqtane Menu renders */


    /* Dropdown */
    .nt6-nav-desktop .dropdown-menu {
        position: absolute;
        /* Move menu flush against the navbar bottom so there's zero gap.
     The transparent padding-top creates an invisible hover bridge. */
        top: 100%;
        left: 0;
        min-width: 210px;
        background: rgba(240,245,249,0.97);
        border: 1px solid rgba(220,20,60,0.18);
        border-top: 2px solid #DC143C; /* crimson top accent */
        border-radius: 0 0 var(--nt6-r-lg) var(--nt6-r-lg);
        box-shadow: 0 12px 32px rgba(0,0,0,0.14);
        /* Transparent top padding = hover bridge — mouse can move down
     from the nav link to the menu without the gap triggering mouseleave */
        padding: var(--nt6-sp-2) 0 var(--nt6-sp-3);
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
        z-index: 1041;
        /* Ensure the menu itself is always pointer-interactive when visible */
        pointer-events: none;
    }
    /* Keep dropdown open when hovering the NAV ITEM (which wraps both
   the trigger link AND the menu), not just the link alone.
   Using the parent .nav-item:hover covers the gap. */
    .nt6-nav-desktop .nav-item:hover > .dropdown-menu,
    .nt6-nav-desktop .dropdown.show > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nt6-nav-desktop .dropdown-item {
        display: block;
        padding: var(--nt6-sp-2) var(--nt6-sp-5);
        color: var(--nt6-text-muted);
        font-size: var(--nt6-text-sm);
        text-decoration: none;
        transition: color var(--nt6-t), background var(--nt6-t);
        /* Ensure each item fills the full width so no hover dead-zones */
        width: 100%;
    }

        .nt6-nav-desktop .dropdown-item:hover {
            color: var(--nt6-accent);
            background: rgba(220,20,60,0.06);
        }

        .nt6-nav-desktop .dropdown-item.active {
            color: var(--nt6-accent);
            font-weight: 600;
        }

/* ═══════════════════════════════════════════════════════════
   5. HAMBURGER
   ═══════════════════════════════════════════════════════════ */
.nt6-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--nt6-border);
    border-radius: var(--nt6-r-md);
    cursor: pointer;
    color: var(--nt6-text);
    flex-shrink: 0;
    transition: border-color var(--nt6-t), background var(--nt6-t);
}

    .nt6-hamburger:hover {
        border-color: var(--nt6-accent-border);
        background: var(--nt6-accent-dim);
    }

.nt6-hamburger__icon {
    display: block;
    pointer-events: none;
}

.nt6-hamburger__icon--close {
    display: none;
}

.nt6-hamburger.is-open .nt6-hamburger__icon--open {
    display: none;
}

.nt6-hamburger.is-open .nt6-hamburger__icon--close {
    display: block;
}

/* ═══════════════════════════════════════════════════════════
   6. MOBILE DRAWER & BACKDROP
   ═══════════════════════════════════════════════════════════ */
.nt6-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100dvh;
    background: var(--nt6-surface-2);
    border-left: 1px solid var(--nt6-border);
    z-index: 1045;
    transform: translateX(100%);
    transition: transform var(--nt6-t-spring);
    overflow-y: auto;
    overscroll-behavior: contain;
}

    .nt6-mobile-drawer.is-open {
        transform: translateX(0);
    }

.nt6-mobile-drawer__inner {
    padding: calc(var(--nt6-navbar-h) + var(--nt6-sp-6)) var(--nt6-sp-6) var(--nt6-sp-8);
    display: flex;
    flex-direction: column;
    gap: var(--nt6-sp-6);
}

/* Mobile drawer brand mark at the very top of the panel */
.nt6-mobile-brand {
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-3);
    margin-bottom: var(--nt6-sp-6);
    text-decoration: none;
}

.nt6-mobile-brand__mark {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.nt6-mobile-brand__wordmark {
    font-family: var(--nt6-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nt6-text);
}

.nt6-mobile-drawer .navbar-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nt6-mobile-drawer .nav-link {
    display: block;
    padding: var(--nt6-sp-3) var(--nt6-sp-4);
    color: var(--nt6-text-muted);
    font-size: var(--nt6-text-base);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--nt6-divider);
    transition: color var(--nt6-t), padding-left var(--nt6-t);
}

    .nt6-mobile-drawer .nav-link:hover,
    .nt6-mobile-drawer .nav-link.active {
        color: var(--nt6-text);
        padding-left: var(--nt6-sp-6);
    }

/* In the mobile drawer, dropdown submenus should behave like inline lists,
   not absolute-positioned overlays. Make them part of the normal flow so
   content below is pushed down and the drawer can scroll. */
.nt6-mobile-drawer .dropdown-menu {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    float: none !important;
    min-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

    .nt6-mobile-drawer .dropdown-menu .dropdown-item {
        padding: var(--nt6-sp-2) var(--nt6-sp-6);
        border-bottom: 1px solid var(--nt6-divider);
    }

.nt6-mobile-drawer__controls {
    display: flex;
    flex-direction: column;
    gap: var(--nt6-sp-3);
}

.nt6-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.30);
    z-index: 1044;
    opacity: 0;
    transition: opacity var(--nt6-t-m);
}

    .nt6-mobile-backdrop.is-visible {
        display: block;
        opacity: 1;
    }



/* In the mobile drawer, always show the Oqtane Menu collapse and hide its
   internal toggler (three-dots button). Otherwise the nav items stay hidden
   until that toggler is clicked. */
.nt6-mobile-drawer .app-menu-toggler {
    display: none !important;
}

.nt6-mobile-drawer .navbar-collapse {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}

    .nt6-mobile-drawer .navbar-collapse.collapse {
        display: block !important;
    }

/* Ensure mobile drawer nav text is always dark and visible, regardless of
   Bootstrap navbar-dark/navbar-light classes that Oqtane might emit. */
.nt6-mobile-drawer .navbar,
.nt6-mobile-drawer .navbar-nav,
.nt6-mobile-drawer .nav-link,
.nt6-mobile-drawer .dropdown-menu,
.nt6-mobile-drawer .dropdown-item,
.nt6-mobile-drawer .nav-link i,
.nt6-mobile-drawer .nav-link span {
    color: var(--nt6-text) !important;
    background-color: transparent !important;
}

.nt6-mobile-drawer .nav-link {
    border-bottom: 1px solid var(--nt6-divider);
}

/* ═══════════════════════════════════════════════════════════
   7. HERO SECTION
   Light steel-grey gradient background, dark text left, image right.
   ═══════════════════════════════════════════════════════════ */
@keyframes nt6-scan-line {
    0% {
        transform: translateY(-8px);
        opacity: 0;
    }

    5% {
        opacity: 0.7;
    }

    95% {
        opacity: 0.7;
    }

    100% {
        transform: translateY(600px);
        opacity: 0;
    }
}

@keyframes nt6-hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nt6-hero {
    position: relative;
    min-height: clamp(420px, 56vh, 620px);
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Aluminium hero: lighter at top, picks up the page tone */
    background: linear-gradient(155deg, #d2dce4 0%, #bcc8d2 40%, #a8b6c2 100%);
    border-bottom: 1px solid rgba(220,20,60,0.35);
}

/* Subtle grid overlay on hero */
.nt6-hero__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.5;
}

.nt6-hero__scan-line {
    animation: nt6-scan-line 10s cubic-bezier(0.4,0,0.2,1) infinite;
    transform-origin: center top;
}

.nt6-hero__content {
    position: relative;
    z-index: 2;
    padding-block: var(--nt6-sp-16);
}

.nt6-hero__default {
    max-width: 680px;
    animation: nt6-hero-fade-up 0.8s var(--nt6-ease) both;
}

.nt6-hero__eyebrow {
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-sm);
    font-weight: 400;
    color: var(--nt6-text-muted);
    margin-bottom: var(--nt6-sp-5);
}

.nt6-hero__title {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-2xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--nt6-text);
    margin-bottom: var(--nt6-sp-5);
}

.nt6-hero__title--accent {
    color: var(--nt6-accent);
}

.nt6-hero__subtitle {
    font-size: var(--nt6-text-base);
    color: var(--nt6-text-muted);
    line-height: 1.65;
    max-width: 50ch;
    margin-bottom: var(--nt6-sp-8);
}

.nt6-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nt6-sp-4);
}

/* Buttons */
.nt6-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--nt6-sp-2);
    padding: var(--nt6-sp-3) var(--nt6-sp-6);
    border-radius: var(--nt6-r-md);
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-sm);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--nt6-t), border-color var(--nt6-t), color var(--nt6-t), box-shadow var(--nt6-t), transform 80ms ease;
}

    .nt6-btn:active {
        transform: scale(0.97);
    }

.nt6-btn--primary {
    background: var(--nt6-accent);
    border-color: var(--nt6-accent);
    color: #fff;
}

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

.nt6-btn--ghost {
    background: rgba(255,255,255,0.55);
    border-color: rgba(255,255,255,0.75);
    color: var(--nt6-text);
    backdrop-filter: blur(4px);
}

    .nt6-btn--ghost:hover {
        background: rgba(255,255,255,0.80);
        border-color: rgba(255,255,255,0.95);
        color: var(--nt6-text);
    }

/* ═══════════════════════════════════════════════════════════
   8. PAGE WRAPPER & PANE SECTIONS
   Main page area sits on the steel-grey bg.
   ═══════════════════════════════════════════════════════════ */
.nt6-page {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nt6-admin-pane {
    width: 100%;
}

.nt6-pane-section {
    width: 100%;
}

.nt6-pane-section--full {
    max-width: 100%;
    padding: 0;
}

.nt6-content {
    padding-block: var(--nt6-sp-10);
    flex: 1;
}

.nt6-row {
    margin-bottom: var(--nt6-sp-4);
}

/* ═══════════════════════════════════════════════════════════
   9. MODULE CONTAINERS  (5 animated styles)
   All on white/near-white cards floating on grey bg.
   ═══════════════════════════════════════════════════════════ */

/* ── Shared base ─────────────────────────────────────────── */
.nt6-container {
    position: relative;
    margin-bottom: var(--nt6-sp-6);
    overflow: hidden;
}

.nt6-container__title-bar {
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-3);
    padding: var(--nt6-sp-3) var(--nt6-sp-5);
    border-bottom: 1px solid var(--nt6-divider);
}

.nt6-container__title-bar--minimal {
    padding: 0 0 var(--nt6-sp-3) 0;
    border-bottom: none;
}

.nt6-container__title-text {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nt6-text-muted);
    flex: 1;
}

.nt6-container__body {
    padding: var(--nt6-sp-5);
}

.nt6-container__actions-only {
    display: flex;
    justify-content: flex-end;
    padding: var(--nt6-sp-2);
}

/* ─────────────────────────────────────────────────────────
   CONTAINER 1: Titanium Panel
   White card · animated corner brackets · hover scan line
   ───────────────────────────────────────────────────────── */
@keyframes nt6-tp-scan {
    0% {
        top: 0%;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.nt6-container--titanium-panel {
    background: var(--nt6-surface-2);
    border: 1px solid var(--nt6-border);
    border-radius: var(--nt6-r-lg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: border-color var(--nt6-t-m), box-shadow var(--nt6-t-m);
}

    .nt6-container--titanium-panel:hover {
        border-color: var(--nt6-accent-border);
        box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 0 0 1px var(--nt6-accent-border);
    }

.nt6-tp__corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--nt6-accent);
    border-style: solid;
    opacity: 0.4;
    transition: opacity var(--nt6-t-m);
    pointer-events: none;
}

.nt6-container--titanium-panel:hover .nt6-tp__corner {
    opacity: 1;
}

.nt6-tp__corner--tl {
    top: 6px;
    left: 6px;
    border-width: 1.5px 0 0 1.5px;
}

.nt6-tp__corner--tr {
    top: 6px;
    right: 6px;
    border-width: 1.5px 1.5px 0 0;
}

.nt6-tp__corner--bl {
    bottom: 6px;
    left: 6px;
    border-width: 0 0 1.5px 1.5px;
}

.nt6-tp__corner--br {
    bottom: 6px;
    right: 6px;
    border-width: 0 1.5px 1.5px 0;
}

.nt6-tp__scan {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    z-index: 1;
    animation: nt6-tp-scan 6s ease-in-out infinite;
    animation-play-state: paused;
}

.nt6-container--titanium-panel:hover .nt6-tp__scan {
    animation-play-state: running;
}

/* ─────────────────────────────────────────────────────────
   CONTAINER 2: Glass Card
   Semi-transparent white · shimmer + top-edge crimson reveal
   ───────────────────────────────────────────────────────── */
@keyframes nt6-gc-shimmer {
    0% {
        transform: translateX(-100%) rotate(25deg);
    }

    100% {
        transform: translateX(300%) rotate(25deg);
    }
}

.nt6-container--glass-card {
    background: rgba(235,242,248,0.70);
    border: 1px solid rgba(255,255,255,0.85);
    border-radius: var(--nt6-r-xl);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 4px 16px rgba(0,0,0,0.10);
    transition: box-shadow var(--nt6-t-m), border-color var(--nt6-t-m);
}

    .nt6-container--glass-card:hover {
        border-color: rgba(220,20,60,0.30);
        box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 32px rgba(0,0,0,0.14);
    }

.nt6-gc__shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient( 105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    animation: nt6-gc-shimmer 4s ease-in-out infinite;
    animation-play-state: paused;
}

.nt6-container--glass-card:hover .nt6-gc__shimmer {
    animation-play-state: running;
}

.nt6-gc__border-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(220,20,60,0) 0%, rgba(220,20,60,0.7) 50%, rgba(220,20,60,0) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--nt6-ease);
}

.nt6-container--glass-card:hover .nt6-gc__border-top {
    transform: scaleX(1);
}

/* ─────────────────────────────────────────────────────────
   CONTAINER 3: Crimson Accent
   White card · left SVG gradient bar · glow pulse
   ───────────────────────────────────────────────────────── */
@keyframes nt6-ca-pulse {
    0%, 100% {
        opacity: 0;
        transform: scaleX(1);
    }

    50% {
        opacity: 0.4;
        transform: scaleX(1.5);
    }
}

.nt6-container--crimson-accent {
    background: var(--nt6-surface-2);
    border: 1px solid var(--nt6-border);
    border-left: none;
    border-radius: 0 var(--nt6-r-lg) var(--nt6-r-lg) 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding-left: var(--nt6-sp-4);
    transition: border-color var(--nt6-t-m), box-shadow var(--nt6-t-m);
}

    .nt6-container--crimson-accent:hover {
        border-color: var(--nt6-border-hi);
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }

.nt6-ca__pulse {
    position: absolute;
    left: 0;
    top: 10%;
    width: 20px;
    height: 80%;
    background: radial-gradient(ellipse at left center, rgba(220,20,60,0.25) 0%, transparent 70%);
    pointer-events: none;
    animation: nt6-ca-pulse 3s ease-in-out infinite;
}

.nt6-ca__side-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   CONTAINER 4: Data Cell
   White card · subtle dot-grid bg · SVG underline draw
   ───────────────────────────────────────────────────────── */
.nt6-container--data-cell {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0 L0 0 0 24' fill='none' stroke='rgba(0,0,0,0.04)' stroke-width='0.5'/%3E%3C/svg%3E"), var(--nt6-surface-2);
    border: 1px solid var(--nt6-border);
    border-radius: var(--nt6-r-lg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: border-color var(--nt6-t-m);
}

    .nt6-container--data-cell:hover {
        border-color: var(--nt6-accent-border);
    }

.nt6-dc__header {
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-3);
    padding: var(--nt6-sp-3) var(--nt6-sp-5);
}

.nt6-dc__icon {
    display: block;
    width: 20px;
    height: 20px;
    color: var(--nt6-accent);
    flex-shrink: 0;
}

.nt6-dc__divider {
    padding: 0 var(--nt6-sp-5);
    overflow: hidden;
    height: 2px;
}

    .nt6-dc__divider svg {
        width: 100%;
        height: 2px;
        display: block;
    }

    .nt6-dc__divider line {
        stroke-dasharray: 300;
        stroke-dashoffset: 300;
        transition: stroke-dashoffset 0.6s var(--nt6-ease);
    }

.nt6-container--data-cell:hover .nt6-dc__divider line {
    stroke-dashoffset: 0;
}

/* ─────────────────────────────────────────────────────────
   CONTAINER 5: Borderless
   Transparent · zero chrome · content-first
   ───────────────────────────────────────────────────────── */
.nt6-container--borderless {
    background: transparent;
    border: none;
    padding: 0;
}

    .nt6-container--borderless .nt6-container__body {
        padding: 0;
    }

    .nt6-container--borderless .nt6-container__title-bar--minimal {
        border-bottom: 1px solid var(--nt6-divider);
        margin-bottom: var(--nt6-sp-5);
    }

/* ═══════════════════════════════════════════════════════════
   10. FOOTER
   Deep crimson red background, light text.
   ═══════════════════════════════════════════════════════════ */
.nt6-footer {
    background: var(--nt6-footer-bg);
    padding-block: var(--nt6-sp-12) var(--nt6-sp-8);
    position: relative;
    flex-shrink: 0;
    color: var(--nt6-footer-text);
}

.nt6-footer__separator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    display: block;
}

/* Footer text overrides */
.nt6-footer h1, .nt6-footer h2, .nt6-footer h3,
.nt6-footer h4, .nt6-footer h5, .nt6-footer h6 {
    color: var(--nt6-footer-text);
}

.nt6-footer p {
    color: var(--nt6-footer-muted);
}

.nt6-footer a {
    color: var(--nt6-footer-text);
}

    .nt6-footer a:hover {
        color: #fff;
    }

.nt6-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-3);
    text-decoration: none;
    margin-bottom: var(--nt6-sp-4);
}

.nt6-footer__logo-mark {
    width: 52px;
    height: 52px;
}
    /* In footer the logo circle / text should be light */
    .nt6-footer__logo-mark circle {
        stroke: var(--nt6-footer-text);
    }

    .nt6-footer__logo-mark text {
        fill: var(--nt6-footer-text);
    }

.nt6-footer__wordmark {
    font-family: var(--nt6-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nt6-footer-text);
}

.nt6-footer__tagline {
    font-size: var(--nt6-text-sm);
    color: var(--nt6-footer-muted);
    line-height: 1.6;
}

/* Footer nav */
.nt6-footer__nav .navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--nt6-sp-1) var(--nt6-sp-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.nt6-footer__nav .nav-link {
    color: var(--nt6-footer-muted);
    font-size: var(--nt6-text-sm);
    text-decoration: none;
    transition: color var(--nt6-t);
}

    .nt6-footer__nav .nav-link:hover {
        color: #fff;
    }

.nt6-footer__copy {
    font-size: var(--nt6-text-sm);
    color: var(--nt6-footer-muted);
    margin-bottom: var(--nt6-sp-1);
}

.nt6-footer__copy--muted {
    color: rgba(240,208,212,0.40);
    font-size: var(--nt6-text-xs);
}

/* Footer column headings */
.nt6-footer .nt6-footer__col-title {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nt6-footer-text);
    margin-bottom: var(--nt6-sp-4);
}

/* ═══════════════════════════════════════════════════════════
   11. UTILITY CLASSES & REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
.nt6-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--nt6-ease), transform 0.6s var(--nt6-ease);
}

    .nt6-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

.nt6-text-accent {
    color: var(--nt6-accent);
}

.nt6-text-muted {
    color: var(--nt6-text-muted);
}

.nt6-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* ═══════════════════════════════════════════════════════════
   12. BOOTSTRAP OVERRIDES (light surface context)
   ═══════════════════════════════════════════════════════════ */
.btn-primary {
    background-color: var(--nt6-accent) !important;
    border-color: var(--nt6-accent) !important;
    color: #fff !important;
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--nt6-accent-hover) !important;
        border-color: var(--nt6-accent-hover) !important;
    }

.btn-outline-primary {
    color: var(--nt6-accent) !important;
    border-color: var(--nt6-accent) !important;
}

    .btn-outline-primary:hover {
        background-color: var(--nt6-accent) !important;
        color: #fff !important;
    }

/* Forms — keep legible on light bg */
.form-control, .form-select {
    background-color: var(--nt6-surface-2) !important;
    border-color: var(--nt6-border) !important;
    color: var(--nt6-text) !important;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--nt6-accent-border) !important;
        box-shadow: 0 0 0 2px rgba(220,20,60,0.12) !important;
    }

/* Tables */
.table {
    --bs-table-bg: var(--nt6-surface-2) !important;
    --bs-table-color: var(--nt6-text) !important;
    --bs-table-border-color: var(--nt6-border) !important;
    --bs-table-striped-bg: var(--nt6-surface) !important;
    --bs-table-hover-bg: var(--nt6-surface-3) !important;
}

/* Alerts */
.alert-info {
    background: var(--nt6-surface);
    border-color: var(--nt6-border);
    color: var(--nt6-text);
}

.alert-success {
    background: #e6f4ea;
    border-color: #a8d5b0;
    color: #1e4d28;
}

.alert-danger {
    background: #fdeaec;
    border-color: var(--nt6-accent-border);
    color: #7a1020;
}

.alert-warning {
    background: #fef8e7;
    border-color: #f0d060;
    color: #7a5a00;
}

/* Modal */
.modal-content {
    background: var(--nt6-surface-2) !important;
    border-color: var(--nt6-border) !important;
    color: var(--nt6-text) !important;
}

.modal-header {
    border-bottom-color: var(--nt6-divider) !important;
}

.modal-footer {
    border-top-color: var(--nt6-divider) !important;
}

/* ═══════════════════════════════════════════════════════════
   13. OQTANE ADMIN / OFFCANVAS OVERRIDES
   ═══════════════════════════════════════════════════════════ */
.nt6-admin-pane > * {
    color: var(--nt6-text);
}

.app-control-panel > button,
.nt6-btn-ghost {
    color: var(--nt6-text-muted) !important;
}

/* ── Offcanvas / Control Panel – full-height, never clipped ─────────────
   Oqtane renders the ControlPanel as a Bootstrap offcanvas.
   Rules here ensure it is always full-height, scrollable, and sits above
   the navbar without being constrained by the theme's page wrappers.     */
.offcanvas {
    position: fixed !important; /* never relative / absolute          */
    top: 0 !important;
    height: 100dvh !important; /* full viewport height               */
    max-height: 100dvh !important;
    /* sit above navbar (1030) and mobile drawer (1045) */
    z-index: 1055 !important;
    background-color: var(--nt6-surface-2) !important;
    color: var(--nt6-text) !important;
    border-color: var(--nt6-border) !important;
    display: flex !important;
    flex-direction: column !important;
    /* Never clip content; the body scrolls instead */
    overflow: hidden !important;
}

    .offcanvas.offcanvas-end {
        right: 0 !important;
        left: auto !important;
        width: min(400px, 92vw) !important;
    }

    .offcanvas.offcanvas-start {
        left: 0 !important;
        right: auto !important;
        width: min(400px, 92vw) !important;
    }

.offcanvas-header {
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--nt6-divider) !important;
    background: var(--nt6-surface) !important;
    padding: var(--nt6-sp-4) var(--nt6-sp-5) !important;
}

.offcanvas-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important; /* scroll the content, not the panel  */
    overscroll-behavior: contain !important;
    background: var(--nt6-surface-2) !important;
    color: var(--nt6-text) !important;
    padding: var(--nt6-sp-5) !important;
}

.offcanvas h1, .offcanvas h2, .offcanvas h3,
.offcanvas h4, .offcanvas h5, .offcanvas h6,
.offcanvas label, .offcanvas .form-label {
    color: var(--nt6-text) !important;
}

.offcanvas p, .offcanvas small, .offcanvas span {
    color: var(--nt6-text-muted);
}

.offcanvas a {
    color: var(--nt6-accent);
}

.offcanvas .btn-close { /* already dark-mode-safe on light bg */
}

.app-module-manage {
    border: 1px dashed var(--nt6-accent-border) !important;
}

.app-sidebar {
    background: var(--nt6-surface) !important;
}

/* ═══════════════════════════════════════════════════════════
   14. SCROLLBAR
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--nt6-bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.20);
    border-radius: var(--nt6-r-full);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--nt6-accent);
    }

/* ═══════════════════════════════════════════════════════════
   15. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .nt6-nav-desktop {
        display: none;
    }

    .nt6-hamburger {
        display: flex;
    }
}

@media (max-width: 767px) {
    :root {
        --nt6-navbar-h: 60px;
        --nt6-navbar-h-scrolled: 48px;
    }

    .nt6-hero {
        min-height: auto;
    }

    .nt6-hero__content {
        padding-block: var(--nt6-sp-12);
    }

    .nt6-hero__actions {
        flex-direction: column;
    }

        .nt6-hero__actions .nt6-btn {
            justify-content: center;
        }

    .nt6-container__body {
        padding: var(--nt6-sp-4);
    }

    .nt6-footer {
        padding-block: var(--nt6-sp-8) var(--nt6-sp-6);
    }
}

@media (max-width: 480px) {
    .nt6-brand__wordmark {
        display: none;
    }
}

.nt6-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
}




.nt6-hamburger {
    display: flex;
    margin-left: auto;
    flex-shrink: 0;
}

}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE – CLEAN CONSOLIDATED RULES
   ═══════════════════════════════════════════════════════════ */

/* ≤ 991px: hide desktop nav, show hamburger */
@media (max-width: 991.98px) {
    .nt6-nav-desktop {
        display: none;
    }

    .nt6-hamburger {
        display: flex;
    }
}

/* ≤ 575px: tighten navbar spacing so brand + controls + hamburger all fit */
@media (max-width: 575.98px) {
    .nt6-navbar__inner {
        padding-inline: var(--nt6-sp-3);
        gap: var(--nt6-sp-2);
    }
    /* controls stay VISIBLE — profile, edit, sidebar buttons show before hamburger */
    .nt6-navbar__controls {
        display: flex !important;
        align-items: center;
        gap: var(--nt6-sp-1);
    }
        /* Shrink icon buttons slightly so they fit */
        .nt6-navbar__controls .btn,
        .nt6-navbar__controls button {
            padding: 0.25rem 0.45rem;
            font-size: 0.8rem;
        }

    .nt6-hamburger {
        display: flex;
        flex-shrink: 0;
    }

    /* On very small screens, hide the top Login button (it exists in the menu) */
    .nt6-navbar__controls .app-login {
        display: none !important;
    }

    /* Ensure language switcher icon is always visible */
    .nt6-navbar__controls .app-language {
        display: inline-flex !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE NAVBAR – FINAL
   ═══════════════════════════════════════════════════════════ */

/* Base: controls visible, desktop nav flex, hamburger hidden by default */
.nt6-navbar__controls {
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-3);
    margin-left: auto;
}

.nt6-hamburger {
    display: none;
}

/* ≤ 991.98px: hide desktop nav, show hamburger */
@media (max-width: 991.98px) {
    .nt6-nav-desktop {
        display: none;
    }

    .nt6-hamburger {
        display: flex;
        flex-shrink: 0;
    }
}

/* ≤ 575.98px: compress navbar so brand + controls + hamburger all fit */
@media (max-width: 575.98px) {
    .nt6-brand__wordmark {
        display: none;
    }

    .nt6-navbar__inner {
        padding-inline: var(--nt6-sp-3);
        gap: var(--nt6-sp-2);
    }

    .nt6-navbar__controls {
        display: flex !important;
        align-items: center;
        gap: var(--nt6-sp-1);
        margin-left: auto;
        flex: 0 1 auto;
    }

        /* Shrink admin/profile/edit/sidebar buttons a bit */
        .nt6-navbar__controls .btn,
        .nt6-navbar__controls button {
            padding: 0.15rem 0.35rem;
            min-width: auto;
            font-size: 0.8rem;
        }

    .nt6-hamburger {
        display: flex;
        flex-shrink: 0;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   CONTAINERS — BATCH 2: DARK / TONED BACKGROUNDS
   Three new containers with non-white surfaces.
   All support hidden title (nt6-title-hidden).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared title-hidden helper ──────────────────────────────────────── */
.nt6-title-hidden {
    padding: 0;
    min-height: 0;
    overflow: hidden;
}

    .nt6-title-hidden .nt6-container__title-text {
        display: none;
    }

/* ──────────────────────────────────────────────────────────────────────
   1. GLASS TITANIUM
   Frosted glass panel on a brushed-titanium field.
   Animation: DRADIS-style concentric rings pulse from the top-left corner
   on hover — evoking Colonial sensor displays without being explicit.
   ──────────────────────────────────────────────────────────────────────*/
.nt6-container--glass-titanium {
    position: relative;
    overflow: hidden;
    border-radius: var(--nt6-r-xl);
    /* Mid-tone titanium base */
    background: linear-gradient(140deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 60%, rgba(180,195,210,0.18) 100%), linear-gradient(170deg, #aab8c5 0%, #8fa0b0 100%);
    backdrop-filter: blur(20px) saturate(1.5) brightness(1.05);
    -webkit-backdrop-filter: blur(20px) saturate(1.5) brightness(1.05);
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 2px 8px rgba(0,0,0,0.20); /* match TitaniumPanel */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.nt6-container--glass-titanium:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

/* Titanium grain overlay */
.nt6-gt__grain {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient( 118deg, rgba(255,255,255,0.00) 0px, rgba(255,255,255,0.035) 1px, rgba(255,255,255,0.00) 2px, rgba(255,255,255,0.00) 14px );
    pointer-events: none;
    border-radius: inherit;
}

/* DRADIS rings — positioned at top-left corner */
.nt6-gt__dradis {
    pointer-events: none;
    position: absolute;
    top: -30px;
    left: -30px;
    width: 260px;
    height: 260px;
    pointer-events: none;
    overflow: visible;
}

.nt6-gt__ring {
    fill: none;
    stroke: rgba(220,20,60,0.25);
    stroke-width: 1;
    opacity: 0;
    transform-origin: 0px 0px;
}

@keyframes nt6-dradis-ping {
    0% {
        opacity: 0.8;
        transform: scale(0.2);
    }

    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

.nt6-container--glass-titanium:hover .nt6-gt__ring--1 {
    animation: nt6-dradis-ping 1.6s ease-out infinite;
}

.nt6-container--glass-titanium:hover .nt6-gt__ring--2 {
    animation: nt6-dradis-ping 1.6s ease-out 0.38s infinite;
}

.nt6-container--glass-titanium:hover .nt6-gt__ring--3 {
    animation: nt6-dradis-ping 1.6s ease-out 0.76s infinite;
}

/* Top crimson edge — slim line that draws in from left on hover */
.nt6-gt__edge-top {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #DC143C 0%, rgba(220,20,60,0.2) 100%);
    border-radius: var(--nt6-r-full);
    transition: width 0.55s cubic-bezier(0.16,1,0.3,1);
}

.nt6-container--glass-titanium:hover .nt6-gt__edge-top {
    pointer-events: none;
    width: 100%;
}

/* Title bar on glass titanium */
.nt6-gt__title-bar {
    background: rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.20);
    backdrop-filter: blur(6px);
    border-radius: var(--nt6-r-xl) var(--nt6-r-xl) 0 0;
}

    .nt6-gt__title-bar .nt6-container__title-text {
        color: var(--nt6-text);
        font-weight: 600;
        letter-spacing: 0.04em;
    }

/* ──────────────────────────────────────────────────────────────────────
   2. STEEL DARK
   Deep charcoal-slate surface. Crimson left-edge pillar. A single
   telemetry sweep line scans top-to-bottom continuously — reminiscent
   of status readouts on combat systems.
   ──────────────────────────────────────────────────────────────────────*/
.nt6-container--steel-dark {
    position: relative;
    overflow: hidden;
    border-radius: var(--nt6-r-xl);
    background: linear-gradient(155deg, #1e2630 0%, #141c24 60%, #0e1620 100%);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid #DC143C;
    box-shadow: 0 2px 8px rgba(0,0,0,0.50);
    transition: box-shadow 0.3s ease;
}

.nt6-container--steel-dark:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.50);
}

/* Telemetry sweep */
@keyframes nt6-sd-sweep {
    0% {
        transform: translateY(-8px);
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 0.7;
    }

    100% {
        transform: translateY(600px);
        opacity: 0;
    }
}

.nt6-sd__sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.nt6-sd__sweep-bar {
    animation: nt6-sd-sweep 4.5s cubic-bezier(0.4,0,0.6,1) infinite;
}

/* Clipped corner accent — top-right notch in crimson */
.nt6-sd__clip-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 28px 0;
    border-color: transparent #DC143C transparent transparent;
    opacity: 0.5;
}

.nt6-sd__title-bar {
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .nt6-sd__title-bar .nt6-container__title-text {
        color: rgba(230,235,240,0.90);
        font-family: var(--nt6-font-display);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-size: var(--nt6-text-sm);
    }

.nt6-container--steel-dark .nt6-container__body {
    color: rgba(200,215,228,0.85);
}

/* ──────────────────────────────────────────────────────────────────────
   3. IRON SLATE
   Mid-tone slate-blue-steel surface with a crimson right-edge rule.
   Animated SVG chevron pulses on the top-right corner — a minimal nod
   to Colonial Fleet rank pips without being literal.
   ──────────────────────────────────────────────────────────────────────*/
.nt6-container--iron-slate {
    position: relative;
    overflow: hidden;
    border-radius: var(--nt6-r-xl);
    background: linear-gradient(150deg, #4a5a6e 0%, #3a4a5c 50%, #2e3c4e 100%);
    border: 1px solid rgba(255,255,255,0.10);
    border-right: 2px solid rgba(220,20,60,0.55);
    box-shadow: 0 2px 8px rgba(0,0,0,0.50);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.nt6-container--iron-slate:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.50);
    transform: translateY(-1px);
}

/* Chevron pips */
.nt6-is__chevron {
    position: absolute;
    top: var(--nt6-sp-3);
    right: var(--nt6-sp-4);
    width: 36px;
    height: 22px;
    pointer-events: none;
    z-index: 1;
}

@keyframes nt6-chv-pulse {
    0%, 100% {
        opacity: 0.7;
        transform: translateY(0);
    }

    50% {
        opacity: 0.3;
        transform: translateY(3px);
    }
}

.nt6-is__chv--1 {
    animation: nt6-chv-pulse 2.4s ease-in-out infinite;
}

.nt6-is__chv--2 {
    animation: nt6-chv-pulse 2.4s ease-in-out 0.6s infinite;
}

/* Right crimson rule — expands height on hover */
.nt6-is__right-rule {
    position: absolute;
    top: 50%;
    right: -2px;
    width: 2px;
    height: 40%;
    background: linear-gradient(180deg, rgba(220,20,60,0) 0%, #DC143C 50%, rgba(220,20,60,0) 100%);
    transform: translateY(-50%);
    transition: height 0.4s cubic-bezier(0.16,1,0.3,1);
    border-radius: var(--nt6-r-full);
}

.nt6-container--iron-slate:hover .nt6-is__right-rule {
    height: 75%;
}

.nt6-is__title-bar {
    background: rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.09);
}

    .nt6-is__title-bar .nt6-container__title-text {
        color: rgba(215,228,240,0.90);
        font-family: var(--nt6-font-display);
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        font-size: var(--nt6-text-sm);
    }

.nt6-container--iron-slate .nt6-container__body {
    color: rgba(195,210,225,0.85);
}


/* CRIMSON PLATE — dominant crimson surface, to be used sparingly */
.nt6-container--crimson-plate {
    position: relative;
    overflow: hidden;
    border-radius: var(--n6-r-lg);
    background: linear-gradient(160deg, #b01834 0%, #7e0f26 45%, #5b0b1c 100%);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.50);
}

.nt6-cp__title-bar .nt6-container__title-text {
    color: #ffffff !important;
    font-weight: 600;
}

.nt6-cp__title-bar {
    background: linear-gradient(90deg, rgba(0,0,0,0.20), rgba(0,0,0,0));
    border-bottom: 1px solid rgba(255,255,255,0.25);
}

.nt6-cp__body {
    color: #ffe5eb;
}

/* Specular sweep across top half */
.nt6-cp__specular {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.28) 0%, transparent 45%), linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0) 60%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-30%);
    transition: opacity 0.6s var(--n6-ease), transform 0.6s var(--n6-ease);
}

.nt6-container--crimson-plate:hover .nt6-cp__specular {
    pointer-events: none;
    opacity: 1;
    transform: translateX(0);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TITLE CONTAINERS — pure CSS shells, no title bar
   Usage: place an HTML Text module inside and paste the snippet below.
   The container itself is transparent; all visual chrome is in the HTML.
═══════════════════════════════════════════════════════════════════════════ */

/* Shared: strip all chrome from every title container */
.nt6-container--title-ruled,
.nt6-container--title-classified,
.nt6-container--title-signal,
.nt6-container--title-split,
.nt6-container--title-beacon {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: var(--nt6-sp-6);
}

    .nt6-container--title-ruled .nt6-container__body,
    .nt6-container--title-classified .nt6-container__body,
    .nt6-container--title-signal .nt6-container__body,
    .nt6-container--title-split .nt6-container__body,
    .nt6-container--title-beacon .nt6-container__body {
        padding: 0;
    }

    /* Hide the container's own title bar when used as a title shell */
    .nt6-container--title-ruled > .nt6-container__title-bar,
    .nt6-container--title-classified > .nt6-container__title-bar,
    .nt6-container--title-signal > .nt6-container__title-bar,
    .nt6-container--title-split > .nt6-container__title-bar,
    .nt6-container--title-beacon > .nt6-container__title-bar {
        display: none;
    }

/* ─────────────────────────────────────────────────────────────────────────
   TITLE 1 — RULED HEADLINE
   Crimson pip + large uppercase heading + gradient rule draws left→right
───────────────────────────────────────────────────────────────────────── */
@keyframes nt6-t1-pip {
    from {
        transform: scaleY(0);
        opacity: 0;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes nt6-t1-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nt6-t1-rule {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.nt6-title-ruled {
    padding: var(--nt6-sp-4) 0 var(--nt6-sp-2) 0;
}

.nt6-title-ruled__inner {
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-4);
}

.nt6-title-ruled__pip {
    flex-shrink: 0;
    width: 4px;
    height: 1.6em;
    background: var(--nt6-accent);
    border-radius: var(--nt6-r-sm);
    transform-origin: center;
    animation: nt6-t1-pip 0.4s var(--nt6-ease) both;
}

.nt6-title-ruled__text {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-xl);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nt6-text);
    margin: 0;
    animation: nt6-t1-fade 0.5s var(--nt6-ease) 0.1s both;
}

    .nt6-title-ruled__text em {
        font-style: normal;
        color: var(--nt6-accent);
    }

.nt6-title-ruled__rule {
    display: block;
    margin-top: var(--nt6-sp-3);
    height: 1px;
    width: 100%;
    background: linear-gradient( 90deg, #DC143C 0%, rgba(220,20,60,0.25) 40%, rgba(220,20,60,0) 100% );
    transform-origin: left;
    animation: nt6-t1-rule 0.7s var(--nt6-ease) 0.2s both;
}

/* ─────────────────────────────────────────────────────────────────────────
   TITLE 2 — CLASSIFIED STAMP
   Crimson eyebrow with flanking dashes + large title + dashed leader line
───────────────────────────────────────────────────────────────────────── */
@keyframes nt6-t2-slide {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0% 0 0);
    }
}

.nt6-title-classified {
    padding: var(--nt6-sp-4) 0;
}

.nt6-title-classified__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--nt6-sp-2);
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nt6-accent);
    margin-bottom: var(--nt6-sp-2);
    animation: nt6-t2-slide 0.45s var(--nt6-ease) both;
}

    .nt6-title-classified__eyebrow::before,
    .nt6-title-classified__eyebrow::after {
        content: '';
        display: block;
        width: 18px;
        height: 1px;
        background: var(--nt6-accent);
        opacity: 0.7;
    }

.nt6-title-classified__heading {
    display: flex;
    align-items: baseline;
    gap: var(--nt6-sp-4);
}

.nt6-title-classified__text {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-2xl);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--nt6-text);
    line-height: 1.1;
    white-space: nowrap;
    margin: 0;
    animation: nt6-t2-slide 0.55s var(--nt6-ease) 0.1s both;
}

.nt6-title-classified__leader {
    flex: 1;
    height: 0;
    border-top: 2px dashed rgba(0,0,0,0.10);
    align-self: center;
    animation: nt6-t1-fade 0.6s ease 0.3s both;
}

/* ─────────────────────────────────────────────────────────────────────────
   TITLE 3 — SIGNAL BAR
   Three animated crimson bars + small label + divider + title
───────────────────────────────────────────────────────────────────────── */
@keyframes nt6-t3-bar1 {
    0%,100% {
        height: 8px
    }

    50% {
        height: 18px
    }
}

@keyframes nt6-t3-bar2 {
    0%,100% {
        height: 14px
    }

    50% {
        height: 6px
    }
}

@keyframes nt6-t3-bar3 {
    0%,100% {
        height: 18px
    }

    50% {
        height: 10px
    }
}

@keyframes nt6-t3-fadex {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nt6-title-signal {
    padding: var(--nt6-sp-3) 0;
}

.nt6-title-signal__inner {
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-4);
}

.nt6-title-signal__bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 22px;
    flex-shrink: 0;
}

.nt6-title-signal__bar {
    width: 3px;
    border-radius: var(--nt6-r-sm);
    background: var(--nt6-accent);
    transform-origin: bottom;
}

    .nt6-title-signal__bar:nth-child(1) {
        height: 8px;
        animation: nt6-t3-bar1 1.8s ease-in-out infinite;
        opacity: .50;
    }

    .nt6-title-signal__bar:nth-child(2) {
        height: 14px;
        animation: nt6-t3-bar2 1.8s ease-in-out .3s infinite;
        opacity: .75;
    }

    .nt6-title-signal__bar:nth-child(3) {
        height: 18px;
        animation: nt6-t3-bar3 1.8s ease-in-out .6s infinite;
        opacity: 1;
    }

.nt6-title-signal__label {
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nt6-text-faint);
    animation: nt6-t3-fadex 0.5s var(--nt6-ease) both;
}

.nt6-title-signal__divider {
    width: 1px;
    height: 1.4em;
    background: var(--nt6-border-hi);
    flex-shrink: 0;
}

.nt6-title-signal__text {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-xl);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nt6-text);
    margin: 0;
    animation: nt6-t3-fadex 0.55s var(--nt6-ease) 0.08s both;
}

    .nt6-title-signal__text em {
        font-style: normal;
        color: var(--nt6-accent);
    }

/* ─────────────────────────────────────────────────────────────────────────
   TITLE 4 — SPLIT (overline + clip-path reveal + right bracket)
───────────────────────────────────────────────────────────────────────── */
@keyframes nt6-t4-reveal {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0% 0 0);
    }
}

.nt6-title-split {
    position: relative;
    padding: var(--nt6-sp-4) var(--nt6-sp-10) var(--nt6-sp-2) 0;
}

.nt6-title-split__overline {
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-3);
    margin-bottom: var(--nt6-sp-2);
    animation: nt6-t1-fade 0.4s var(--nt6-ease) both;
}

.nt6-title-split__over-text {
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nt6-text-faint);
}

.nt6-title-split__main {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-2xl);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--nt6-text);
    line-height: 1.08;
    margin: 0;
    animation: nt6-t4-reveal 0.65s var(--nt6-ease) 0.1s both;
}

.nt6-title-split__bracket {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% - var(--nt6-sp-4));
    width: 18px;
}

/* ─────────────────────────────────────────────────────────────────────────
   TITLE 5 — BEACON (large outlined index + vertical rule + stacked text)
───────────────────────────────────────────────────────────────────────── */
@keyframes nt6-t5-index {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.nt6-title-beacon {
    padding: var(--nt6-sp-3) 0 var(--nt6-sp-2) 0;
}

.nt6-title-beacon__inner {
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-5);
}

.nt6-title-beacon__index {
    font-family: var(--nt6-font-display);
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 700;
    line-height: 1;
    -webkit-text-stroke: 1.5px var(--nt6-accent);
    color: transparent;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    animation: nt6-t5-index 0.6s var(--nt6-ease) both;
}

.nt6-title-beacon__vdivider {
    width: 1px;
    height: 3em;
    background: linear-gradient( 180deg, transparent 0%, var(--nt6-accent) 30%, var(--nt6-accent) 70%, transparent 100% );
    flex-shrink: 0;
    opacity: 0.55;
}

.nt6-title-beacon__stack {
    display: flex;
    flex-direction: column;
    gap: var(--nt6-sp-1);
}

.nt6-title-beacon__eyebrow {
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nt6-accent);
    animation: nt6-t1-fade 0.4s var(--nt6-ease) 0.1s both;
}

.nt6-title-beacon__text {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-xl);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nt6-text);
    margin: 0;
    animation: nt6-t1-fade 0.5s var(--nt6-ease) 0.18s both;
}

.nt6-title-beacon__underline {
    margin-top: var(--nt6-sp-3);
    height: 2px;
    overflow: visible;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .nt6-title-ruled__pip,
    .nt6-title-ruled__rule,
    .nt6-title-ruled__text,
    .nt6-title-classified__eyebrow,
    .nt6-title-classified__text,
    .nt6-title-classified__leader,
    .nt6-title-signal__bar,
    .nt6-title-signal__label,
    .nt6-title-signal__text,
    .nt6-title-split__overline,
    .nt6-title-split__main,
    .nt6-title-beacon__index,
    .nt6-title-beacon__eyebrow,
    .nt6-title-beacon__text {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TITLE CONTAINERS T6–T10
   Same technique: transparent shell, all chrome in HTML Text module.
═══════════════════════════════════════════════════════════════════════════ */

/* Shared shell stripping */
.nt6-container--title-gradient,
.nt6-container--title-ticker,
.nt6-container--title-grid,
.nt6-container--title-redline,
.nt6-container--title-mono {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: var(--nt6-sp-6);
}

    .nt6-container--title-gradient > .nt6-container__title-bar,
    .nt6-container--title-ticker > .nt6-container__title-bar,
    .nt6-container--title-grid > .nt6-container__title-bar,
    .nt6-container--title-redline > .nt6-container__title-bar,
    .nt6-container--title-mono > .nt6-container__title-bar {
        display: none;
    }

    .nt6-container--title-gradient .nt6-container__body,
    .nt6-container--title-ticker .nt6-container__body,
    .nt6-container--title-grid .nt6-container__body,
    .nt6-container--title-redline .nt6-container__body,
    .nt6-container--title-mono .nt6-container__body {
        padding: 0;
    }

/* ─────────────────────────────────────────────────────────────────────────
   TITLE 6 — GRADIENT WORD  (Stripe / Linear DNA)
   Large display heading where one key word gets a crimson→dark gradient
   fill. Sub-label sits below in tight tracking. A hairline rule fades in.
   On-load: heading slides up; gradient word fades in last with a shimmer.
───────────────────────────────────────────────────────────────────────── */
@keyframes nt6-t6-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nt6-t6-shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

.nt6-title-gradient {
    padding: var(--nt6-sp-5) 0 var(--nt6-sp-3) 0;
}

.nt6-title-gradient__label {
    display: block;
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nt6-text-faint);
    margin-bottom: var(--nt6-sp-3);
    animation: nt6-t6-up 0.4s var(--nt6-ease) both;
}

.nt6-title-gradient__heading {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-2xl);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--nt6-text);
    line-height: 1.08;
    margin: 0 0 var(--nt6-sp-4) 0;
    animation: nt6-t6-up 0.5s var(--nt6-ease) 0.07s both;
}

/* The gradient word — wrap target word in <mark class="nt6-title-gradient__mark"> */
.nt6-title-gradient__mark {
    background: linear-gradient( 120deg, #DC143C 0%, #8b0d27 40%, #DC143C 60%, #ff4d6d 100% );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: nt6-t6-up 0.5s var(--nt6-ease) 0.15s both, nt6-t6-shimmer 3s linear 0.7s 1 forwards;
}

.nt6-title-gradient__sub {
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-sm);
    color: var(--nt6-text-muted);
    line-height: 1.55;
    max-width: 55ch;
    margin: 0;
    animation: nt6-t6-up 0.55s var(--nt6-ease) 0.18s both;
}

.nt6-title-gradient__rule {
    display: block;
    margin-top: var(--nt6-sp-5);
    height: 1px;
    background: var(--nt6-divider);
    animation: nt6-t1-rule 0.8s var(--nt6-ease) 0.3s both;
    transform-origin: left;
}

/* ─────────────────────────────────────────────────────────────────────────
   TITLE 7 — STATUS TICKER  (Vercel / monitoring dashboard DNA)
   A pill badge animates in on the left (green "LIVE" or custom status),
   then the title text types in via a clip reveal. A blinking cursor sits
   at the end for 2 s, then disappears. Pure CSS, no JS.
───────────────────────────────────────────────────────────────────────── */
@keyframes nt6-t7-badge {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes nt6-t7-type {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0% 0 0);
    }
}

@keyframes nt6-t7-cursor {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes nt6-t7-cursor-hide {
    to {
        opacity: 0;
    }
}

.nt6-title-ticker {
    padding: var(--nt6-sp-4) 0;
}

.nt6-title-ticker__row {
    display: flex;
    align-items: center;
    gap: var(--nt6-sp-4);
    flex-wrap: wrap;
}

.nt6-title-ticker__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nt6-sp-2);
    padding: 0.2em 0.75em;
    border-radius: var(--nt6-r-full);
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-xs);
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    /* Default: crimson status */
    background: rgba(220,20,60,0.10);
    color: var(--nt6-accent);
    border: 1px solid rgba(220,20,60,0.30);
    flex-shrink: 0;
    animation: nt6-t7-badge 0.35s var(--nt6-ease) both;
}

/* Optional modifier classes for other status colors */
.nt6-title-ticker__badge--active {
    background: rgba(34,197,94,0.10);
    color: #16a34a;
    border-color: rgba(34,197,94,0.30);
}

.nt6-title-ticker__badge--pending {
    background: rgba(234,179,8,0.10);
    color: #a16207;
    border-color: rgba(234,179,8,0.30);
}

/* Pulsing dot inside badge */
.nt6-title-ticker__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: nt6-t7-cursor 1.2s ease-in-out infinite;
}

.nt6-title-ticker__text {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-xl);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nt6-text);
    margin: 0;
    position: relative;
    animation: nt6-t7-type 0.7s var(--nt6-ease) 0.2s both;
}

    /* Blinking cursor — fades out after 2 s */
    .nt6-title-ticker__text::after {
        content: '|';
        display: inline-block;
        margin-left: 2px;
        color: var(--nt6-accent);
        font-weight: 300;
        animation: nt6-t7-cursor 0.7s ease-in-out 0.9s 3, nt6-t7-cursor-hide 0.3s ease 2.9s forwards;
    }

.nt6-title-ticker__sub {
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-sm);
    color: var(--nt6-text-muted);
    margin-top: var(--nt6-sp-3);
    max-width: 60ch;
    animation: nt6-t6-up 0.5s var(--nt6-ease) 0.4s both;
}

/* ─────────────────────────────────────────────────────────────────────────
   TITLE 8 — GRID CROSS  (Palantir / precision intelligence DNA)
   The heading sits inside a subtle coordinate-grid surface. Thin axis
   lines cross exactly at the left edge of the title, referencing targeting
   reticles. A crimson horizontal rule expands from the cross-point.
   No neon — purely structural.
───────────────────────────────────────────────────────────────────────── */
@keyframes nt6-t8-expand-h {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes nt6-t8-expand-v {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

.nt6-title-grid {
    position: relative;
    padding: var(--nt6-sp-8) 0 var(--nt6-sp-4) var(--nt6-sp-8);
}

    /* Faint coordinate grid on the container surface */
    .nt6-title-grid::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
        background-size: 32px 32px;
        pointer-events: none;
        border-radius: var(--nt6-r-lg);
        mask-image: radial-gradient(ellipse 90% 90% at 10% 50%, black 30%, transparent 100%);
        -webkit-mask-image: radial-gradient(ellipse 90% 90% at 10% 50%, black 30%, transparent 100%);
    }

/* Horizontal axis line */
.nt6-title-grid__h-axis {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: linear-gradient( 90deg, var(--nt6-accent) 0px, var(--nt6-accent) 32px, rgba(0,0,0,0.10) 32px, rgba(0,0,0,0) 50% );
    transform-origin: left;
    animation: nt6-t8-expand-h 0.6s var(--nt6-ease) both;
}

/* Vertical axis line */
.nt6-title-grid__v-axis {
    position: absolute;
    left: var(--nt6-sp-8);
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient( 180deg, rgba(220,20,60,0) 0%, var(--nt6-accent) 30%, var(--nt6-accent) 70%, rgba(220,20,60,0) 100% );
    transform-origin: top;
    animation: nt6-t8-expand-v 0.5s var(--nt6-ease) 0.1s both;
    opacity: 0.55;
}

.nt6-title-grid__content {
    position: relative;
    z-index: 1;
}

.nt6-title-grid__coord {
    font-family: var(--nt6-font-body);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.10em;
    color: var(--nt6-text-faint);
    text-transform: uppercase;
    margin-bottom: var(--nt6-sp-2);
    animation: nt6-t1-fade 0.4s var(--nt6-ease) 0.3s both;
}

.nt6-title-grid__text {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-xl);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--nt6-text);
    margin: 0;
    animation: nt6-t1-fade 0.5s var(--nt6-ease) 0.35s both;
}

.nt6-title-grid__sub {
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-sm);
    color: var(--nt6-text-muted);
    margin-top: var(--nt6-sp-2);
    max-width: 52ch;
    animation: nt6-t1-fade 0.5s var(--nt6-ease) 0.42s both;
}

/* ─────────────────────────────────────────────────────────────────────────
   TITLE 9 — RED LINE  (McKinsey / consulting report DNA)
   Extremely minimal. A thick crimson left border sits against a very
   faint surface tint. The text is set in two weights on one line — the
   section name in light weight followed by the topic in bold — separated
   by an em-dash. A bottom hairline the full width of the container fades in.
   No animation other than a clean fade-up on load. Zero decoration.
───────────────────────────────────────────────────────────────────────── */
.nt6-title-redline {
    display: flex;
    gap: 0;
    padding: 0;
    margin-bottom: var(--nt6-sp-8);
}

.nt6-title-redline__bar {
    width: 3px;
    flex-shrink: 0;
    background: var(--nt6-accent);
    border-radius: var(--nt6-r-sm);
    align-self: stretch;
    transform-origin: top;
    animation: nt6-t8-expand-v 0.45s var(--nt6-ease) both;
}

.nt6-title-redline__body {
    flex: 1;
    padding: var(--nt6-sp-4) var(--nt6-sp-6);
    border-bottom: 1px solid var(--nt6-divider);
    animation: nt6-t6-up 0.5s var(--nt6-ease) 0.1s both;
}

.nt6-title-redline__section {
    display: block;
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-xs);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nt6-text-faint);
    margin-bottom: var(--nt6-sp-1);
}

.nt6-title-redline__heading {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-xl);
    font-weight: 700;
    color: var(--nt6-text);
    letter-spacing: 0.02em;
    margin: 0 0 var(--nt6-sp-2) 0;
    line-height: 1.1;
}

/* Light-weight prefix before the em-dash */
.nt6-title-redline__prefix {
    font-weight: 300;
    color: var(--nt6-text-muted);
}

.nt6-title-redline__desc {
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-sm);
    color: var(--nt6-text-muted);
    line-height: 1.6;
    max-width: 60ch;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   TITLE 10 — MONO STAMP  (IBM / engineering spec DNA)
   Monospaced eyebrow + proportional display title in two sizes on a
   faintly tinted surface. A dashed top border spans the full width.
   Corner coordinate labels (top-left, top-right) reference document
   coordinates — engineering drawing aesthetic, no overt sci-fi.
───────────────────────────────────────────────────────────────────────── */
@keyframes nt6-t10-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.nt6-title-mono {
    position: relative;
    padding: var(--nt6-sp-5) var(--nt6-sp-6) var(--nt6-sp-4) var(--nt6-sp-6);
    background: rgba(255,255,255,0.40);
    border-top: 1px dashed rgba(220,20,60,0.35);
    border-bottom: 1px solid var(--nt6-divider);
    border-radius: 0 0 var(--nt6-r-md) var(--nt6-r-md);
}

    /* Top-left coordinate label */
    .nt6-title-mono::before {
        content: attr(data-ref);
        position: absolute;
        top: -0.55em;
        left: var(--nt6-sp-4);
        font-family: 'Courier New', 'Lucida Console', monospace;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--nt6-accent);
        background: var(--nt6-bg);
        padding: 0 var(--nt6-sp-2);
        animation: nt6-t10-in 0.4s ease 0.3s both;
    }

    /* Top-right sequence label */
    .nt6-title-mono::after {
        content: attr(data-seq);
        position: absolute;
        top: -0.55em;
        right: var(--nt6-sp-4);
        font-family: 'Courier New', 'Lucida Console', monospace;
        font-size: 0.6rem;
        color: var(--nt6-text-faint);
        background: var(--nt6-bg);
        padding: 0 var(--nt6-sp-2);
        animation: nt6-t10-in 0.4s ease 0.35s both;
    }

.nt6-title-mono__pre {
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: var(--nt6-text-xs);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--nt6-text-faint);
    text-transform: uppercase;
    margin-bottom: var(--nt6-sp-2);
    animation: nt6-t6-up 0.4s var(--nt6-ease) 0.1s both;
}

.nt6-title-mono__heading {
    font-family: var(--nt6-font-display);
    font-size: var(--nt6-text-xl);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nt6-text);
    margin: 0 0 var(--nt6-sp-2) 0;
    animation: nt6-t6-up 0.5s var(--nt6-ease) 0.15s both;
}

.nt6-title-mono__accent {
    color: var(--nt6-accent);
}

.nt6-title-mono__desc {
    font-family: var(--nt6-font-body);
    font-size: var(--nt6-text-sm);
    color: var(--nt6-text-muted);
    line-height: 1.6;
    max-width: 60ch;
    margin: 0;
    animation: nt6-t6-up 0.5s var(--nt6-ease) 0.2s both;
}

/* Reduced motion for T6–T10 */
@media (prefers-reduced-motion: reduce) {
    .nt6-title-gradient__label,
    .nt6-title-gradient__heading,
    .nt6-title-gradient__mark,
    .nt6-title-gradient__sub,
    .nt6-title-gradient__rule,
    .nt6-title-ticker__badge,
    .nt6-title-ticker__text,
    .nt6-title-ticker__text::after,
    .nt6-title-ticker__sub,
    .nt6-title-grid__h-axis,
    .nt6-title-grid__v-axis,
    .nt6-title-grid__coord,
    .nt6-title-grid__text,
    .nt6-title-grid__sub,
    .nt6-title-redline__bar,
    .nt6-title-redline__body,
    .nt6-title-mono__pre,
    .nt6-title-mono__heading,
    .nt6-title-mono__desc,
    .nt6-title-mono::before,
    .nt6-title-mono::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}