/* ================================================================
   NEXTOOL DESIGN SYSTEM v2.0
   "You describe it. AI builds it. You own it."

   The visual foundation for a revolutionary AI production platform.
   Every variable, every component, every animation — intentional.
   Every state, every breakpoint, every interaction — perfected.

   Built by Miguel — AI Production Engine
   5000+ lines of pristine, production-ready CSS.
   ================================================================ */


/* ================================================================
   SECTION 1: CSS RESET (Modern, Comprehensive)
   ================================================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    color-scheme: dark;
    font-size: 16px;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.6;
    font-family: var(--nt-font-body);
    background: var(--nt-bg);
    color: var(--nt-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

input, button, textarea, select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    text-wrap: balance;
}

p {
    overflow-wrap: break-word;
    text-wrap: pretty;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    border: none;
    height: 1px;
    background: var(--nt-border);
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

legend {
    padding: 0;
}

summary {
    cursor: pointer;
}

dialog {
    padding: 0;
}

[hidden] {
    display: none !important;
}

abbr[title] {
    text-decoration: underline dotted;
}

b, strong {
    font-weight: 700;
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

progress {
    vertical-align: baseline;
}

textarea {
    resize: vertical;
}


/* ================================================================
   SECTION 2: DESIGN TOKENS
   ================================================================ */

:root {
    /* ── Background Layers (Deep Space) ───────────────────────── */
    --nt-bg:                #0a0a0f;
    --nt-bg-elevated:       #12121a;
    --nt-bg-surface:        #1a1a2e;
    --nt-bg-overlay:        rgba(10, 10, 15, 0.85);
    --nt-bg-glass:          rgba(18, 18, 31, 0.6);
    --nt-bg-glass-heavy:    rgba(18, 18, 31, 0.85);
    --nt-bg-card:           #14141e;
    --nt-bg-input:          #0e0e16;
    --nt-bg-code:           #0c0c14;
    --nt-bg-tooltip:        #1e1e30;

    /* ── Primary: Cyan (Trust, Technology, Future) ────────────── */
    --nt-cyan:              #00d4ff;
    --nt-cyan-dim:          #0099cc;
    --nt-cyan-bright:       #33ddff;
    --nt-cyan-glow:         rgba(0, 212, 255, 0.15);
    --nt-cyan-strong:       rgba(0, 212, 255, 0.3);
    --nt-cyan-intense:      rgba(0, 212, 255, 0.6);

    /* ── Secondary: Violet (Creativity, Premium) ──────────────── */
    --nt-violet:            #7b61ff;
    --nt-violet-dim:        #5a3fd9;
    --nt-violet-bright:     #9580ff;
    --nt-violet-glow:       rgba(123, 97, 255, 0.15);
    --nt-violet-strong:     rgba(123, 97, 255, 0.3);

    /* ── Success: Green ───────────────────────────────────────── */
    --nt-green:             #00ff88;
    --nt-green-dim:         #00cc6a;
    --nt-green-glow:        rgba(0, 255, 136, 0.15);
    --nt-green-strong:      rgba(0, 255, 136, 0.3);

    /* ── Warning: Orange ──────────────────────────────────────── */
    --nt-orange:            #ff6b35;
    --nt-orange-dim:        #e55a2b;
    --nt-orange-glow:       rgba(255, 107, 53, 0.15);
    --nt-orange-strong:     rgba(255, 107, 53, 0.3);

    /* ── Danger: Red ──────────────────────────────────────────── */
    --nt-red:               #ff4757;
    --nt-red-dim:           #d63241;
    --nt-red-glow:          rgba(255, 71, 87, 0.15);
    --nt-red-strong:        rgba(255, 71, 87, 0.3);

    /* ── Neutral: Yellow ──────────────────────────────────────── */
    --nt-yellow:            #ffd32a;
    --nt-yellow-glow:       rgba(255, 211, 42, 0.15);

    /* ── Text Hierarchy ───────────────────────────────────────── */
    --nt-text:              #e8e8f0;
    --nt-text-dim:          #8888aa;
    --nt-text-muted:        #555577;
    --nt-text-faint:        #333348;

    /* ── Borders ──────────────────────────────────────────────── */
    --nt-border:            rgba(255, 255, 255, 0.06);
    --nt-border-subtle:     rgba(255, 255, 255, 0.03);
    --nt-border-hover:      rgba(0, 212, 255, 0.3);
    --nt-border-active:     rgba(0, 212, 255, 0.5);
    --nt-border-error:      rgba(255, 71, 87, 0.5);
    --nt-border-success:    rgba(0, 255, 136, 0.5);

    /* ── Gradients ────────────────────────────────────────────── */
    --nt-gradient-brand:    linear-gradient(135deg, #00d4ff 0%, #7b61ff 50%, #ff6b35 100%);
    --nt-gradient-cyan:     linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    --nt-gradient-violet:   linear-gradient(135deg, #7b61ff 0%, #5a3fd9 100%);
    --nt-gradient-green:    linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    --nt-gradient-danger:   linear-gradient(135deg, #ff4757 0%, #d63241 100%);
    --nt-gradient-glow:     linear-gradient(135deg, rgba(0,212,255,0.2) 0%, rgba(123,97,255,0.2) 50%, rgba(255,107,53,0.2) 100%);
    --nt-gradient-surface:  linear-gradient(180deg, var(--nt-bg-elevated) 0%, var(--nt-bg) 100%);
    --nt-gradient-radial:   radial-gradient(ellipse at center, var(--nt-bg-surface) 0%, var(--nt-bg) 70%);
    --nt-gradient-mesh:     linear-gradient(135deg, rgba(0,212,255,0.05) 0%, transparent 50%, rgba(123,97,255,0.05) 100%);
    --nt-gradient-text:     linear-gradient(90deg, #00d4ff, #7b61ff, #ff6b35, #00d4ff);

    /* ── Typography ───────────────────────────────────────────── */
    --nt-font-body:         'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --nt-font-mono:         'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace;
    --nt-font-display:      'Inter', system-ui, -apple-system, sans-serif;

    /* Fluid Type Scale */
    --nt-text-7xl:          clamp(3.5rem, 8vw, 5rem);
    --nt-text-6xl:          clamp(3rem, 7vw, 4.5rem);
    --nt-text-5xl:          clamp(2.5rem, 6vw, 3.75rem);
    --nt-text-4xl:          clamp(2rem, 5vw, 3rem);
    --nt-text-3xl:          clamp(1.75rem, 4vw, 2.5rem);
    --nt-text-2xl:          clamp(1.5rem, 3vw, 2rem);
    --nt-text-xl:           clamp(1.25rem, 2.5vw, 1.5rem);
    --nt-text-lg:           clamp(1.1rem, 2vw, 1.25rem);
    --nt-text-base:         clamp(1rem, 1.5vw, 1.125rem);
    --nt-text-sm:           clamp(0.85rem, 1.2vw, 0.95rem);
    --nt-text-xs:           clamp(0.75rem, 1vw, 0.85rem);
    --nt-text-2xs:          0.6875rem;
    --nt-text-mono:         clamp(0.8rem, 1.1vw, 0.9rem);

    /* Font Weights */
    --nt-weight-light:      300;
    --nt-weight-regular:    400;
    --nt-weight-medium:     500;
    --nt-weight-semibold:   600;
    --nt-weight-bold:       700;
    --nt-weight-extrabold:  800;
    --nt-weight-black:      900;

    /* Letter Spacing */
    --nt-tracking-tighter:  -0.04em;
    --nt-tracking-tight:    -0.02em;
    --nt-tracking-normal:   0;
    --nt-tracking-wide:     0.05em;
    --nt-tracking-wider:    0.1em;
    --nt-tracking-widest:   0.2em;

    /* Line Heights */
    --nt-leading-none:      1;
    --nt-leading-tight:     1.1;
    --nt-leading-snug:      1.25;
    --nt-leading-normal:    1.5;
    --nt-leading-relaxed:   1.75;
    --nt-leading-loose:     2;

    /* ── Spacing (4px base) ───────────────────────────────────── */
    --nt-space-px:          1px;
    --nt-space-0:           0;
    --nt-space-0-5:         0.125rem;
    --nt-space-1:           0.25rem;
    --nt-space-1-5:         0.375rem;
    --nt-space-2:           0.5rem;
    --nt-space-2-5:         0.625rem;
    --nt-space-3:           0.75rem;
    --nt-space-3-5:         0.875rem;
    --nt-space-4:           1rem;
    --nt-space-5:           1.25rem;
    --nt-space-6:           1.5rem;
    --nt-space-7:           1.75rem;
    --nt-space-8:           2rem;
    --nt-space-9:           2.25rem;
    --nt-space-10:          2.5rem;
    --nt-space-12:          3rem;
    --nt-space-14:          3.5rem;
    --nt-space-16:          4rem;
    --nt-space-20:          5rem;
    --nt-space-24:          6rem;
    --nt-space-28:          7rem;
    --nt-space-32:          8rem;
    --nt-space-36:          9rem;
    --nt-space-40:          10rem;

    /* Section Spacing */
    --nt-section-pad:       clamp(80px, 12vw, 160px);
    --nt-section-gap:       clamp(40px, 8vw, 80px);

    /* Container */
    --nt-container-max:     1200px;
    --nt-container-wide:    1440px;
    --nt-container-narrow:  800px;
    --nt-container-pad:     var(--nt-space-6);

    /* ── Border Radius ────────────────────────────────────────── */
    --nt-radius-none:       0;
    --nt-radius-sm:         6px;
    --nt-radius-md:         8px;
    --nt-radius-lg:         12px;
    --nt-radius-xl:         16px;
    --nt-radius-2xl:        24px;
    --nt-radius-3xl:        32px;
    --nt-radius-full:       9999px;

    /* ── Shadows ──────────────────────────────────────────────── */
    --nt-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.2);
    --nt-shadow-sm:         0 2px 4px rgba(0, 0, 0, 0.3);
    --nt-shadow-md:         0 4px 12px rgba(0, 0, 0, 0.4);
    --nt-shadow-lg:         0 8px 32px rgba(0, 0, 0, 0.5);
    --nt-shadow-xl:         0 16px 64px rgba(0, 0, 0, 0.6);
    --nt-shadow-2xl:        0 24px 80px rgba(0, 0, 0, 0.7);
    --nt-shadow-inner:      inset 0 2px 4px rgba(0, 0, 0, 0.3);
    --nt-shadow-glow-cyan:  0 0 30px var(--nt-cyan-glow), 0 0 60px var(--nt-cyan-glow);
    --nt-shadow-glow-cyan-strong: 0 0 40px var(--nt-cyan-strong), 0 0 80px var(--nt-cyan-glow);
    --nt-shadow-glow-violet: 0 0 30px var(--nt-violet-glow), 0 0 60px var(--nt-violet-glow);
    --nt-shadow-glow-green: 0 0 30px var(--nt-green-glow), 0 0 60px var(--nt-green-glow);
    --nt-shadow-glow-orange: 0 0 30px var(--nt-orange-glow);
    --nt-shadow-glow-red:   0 0 30px var(--nt-red-glow);

    /* ── Animation ────────────────────────────────────────────── */
    --nt-ease-default:      cubic-bezier(0.4, 0, 0.2, 1);
    --nt-ease-in:           cubic-bezier(0.4, 0, 1, 1);
    --nt-ease-out:          cubic-bezier(0, 0, 0.2, 1);
    --nt-ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
    --nt-ease-bounce:       cubic-bezier(0.34, 1.56, 0.64, 1);
    --nt-ease-spring:       cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --nt-ease-elastic:      cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --nt-ease-smooth:       cubic-bezier(0.25, 0.1, 0.25, 1);

    --nt-duration-instant:  50ms;
    --nt-duration-fast:     150ms;
    --nt-duration-normal:   300ms;
    --nt-duration-slow:     500ms;
    --nt-duration-slower:   700ms;
    --nt-duration-slowest:  1000ms;
    --nt-duration-decorative: 1500ms;

    /* ── Z-Index Scale ────────────────────────────────────────── */
    --nt-z-behind:          -1;
    --nt-z-base:            0;
    --nt-z-raised:          1;
    --nt-z-dropdown:        100;
    --nt-z-sticky:          200;
    --nt-z-overlay:         300;
    --nt-z-modal:           400;
    --nt-z-popover:         500;
    --nt-z-tooltip:         600;
    --nt-z-command:         700;
    --nt-z-toast:           800;
    --nt-z-cursor:          900;
    --nt-z-max:             9999;
}


/* ================================================================
   SECTION 3: BASE TYPOGRAPHY
   ================================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--nt-font-display);
    font-weight: var(--nt-weight-bold);
    letter-spacing: var(--nt-tracking-tight);
    line-height: var(--nt-leading-tight);
    color: var(--nt-text);
}

h1 { font-size: var(--nt-text-4xl); }
h2 { font-size: var(--nt-text-3xl); }
h3 { font-size: var(--nt-text-2xl); }
h4 { font-size: var(--nt-text-xl); }
h5 { font-size: var(--nt-text-lg); font-weight: var(--nt-weight-semibold); }
h6 { font-size: var(--nt-text-base); font-weight: var(--nt-weight-semibold); }

p {
    font-size: var(--nt-text-base);
    line-height: var(--nt-leading-normal);
    color: var(--nt-text-dim);
}

code, pre, kbd, samp {
    font-family: var(--nt-font-mono);
    font-size: var(--nt-text-mono);
}

/* Display Typography */
.nt-display {
    font-family: var(--nt-font-display);
    font-size: var(--nt-text-7xl);
    font-weight: var(--nt-weight-black);
    letter-spacing: var(--nt-tracking-tighter);
    line-height: var(--nt-leading-none);
    color: var(--nt-text);
}

.nt-display--sm {
    font-size: var(--nt-text-5xl);
}

.nt-display--lg {
    font-size: clamp(4rem, 10vw, 7rem);
}

/* Gradient Text */
.nt-gradient-text {
    background: var(--nt-gradient-brand);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nt-gradient-text--animated {
    background: var(--nt-gradient-text);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nt-gradientText 8s linear infinite;
}

/* Glow Text */
.nt-glow-text {
    text-shadow:
        0 0 10px var(--nt-cyan-glow),
        0 0 20px var(--nt-cyan-glow),
        0 0 40px var(--nt-cyan-glow);
}

.nt-glow-text--violet {
    text-shadow:
        0 0 10px var(--nt-violet-glow),
        0 0 20px var(--nt-violet-glow),
        0 0 40px var(--nt-violet-glow);
}

.nt-glow-text--green {
    text-shadow:
        0 0 10px var(--nt-green-glow),
        0 0 20px var(--nt-green-glow),
        0 0 40px var(--nt-green-glow);
}

/* Monospace Text */
.nt-mono {
    font-family: var(--nt-font-mono);
    font-size: var(--nt-text-mono);
    letter-spacing: var(--nt-tracking-normal);
}

/* Label (Small Uppercase) */
.nt-label {
    font-size: var(--nt-text-xs);
    font-weight: var(--nt-weight-semibold);
    letter-spacing: var(--nt-tracking-wider);
    text-transform: uppercase;
    color: var(--nt-text-muted);
    line-height: var(--nt-leading-normal);
}

.nt-label--cyan {
    color: var(--nt-cyan);
}

.nt-label--violet {
    color: var(--nt-violet);
}

/* Lead Text */
.nt-lead {
    font-size: var(--nt-text-xl);
    line-height: var(--nt-leading-relaxed);
    color: var(--nt-text-dim);
    font-weight: var(--nt-weight-regular);
}

.nt-lead--lg {
    font-size: var(--nt-text-2xl);
}

/* Prose (Long-form Content) */
.nt-prose {
    font-size: var(--nt-text-base);
    line-height: var(--nt-leading-relaxed);
    color: var(--nt-text-dim);
    max-width: 65ch;
}

.nt-prose h2 {
    margin-top: var(--nt-space-12);
    margin-bottom: var(--nt-space-4);
}

.nt-prose h3 {
    margin-top: var(--nt-space-8);
    margin-bottom: var(--nt-space-3);
}

.nt-prose p {
    margin-bottom: var(--nt-space-4);
}

.nt-prose p + p {
    margin-top: var(--nt-space-4);
}

.nt-prose a {
    color: var(--nt-cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--nt-duration-fast);
}

.nt-prose a:hover {
    color: var(--nt-cyan-bright);
}

.nt-prose ul,
.nt-prose ol {
    margin: var(--nt-space-4) 0;
    padding-left: var(--nt-space-6);
}

.nt-prose ul {
    list-style: disc;
}

.nt-prose ol {
    list-style: decimal;
}

.nt-prose li {
    margin-bottom: var(--nt-space-2);
    color: var(--nt-text-dim);
}

.nt-prose blockquote {
    border-left: 3px solid var(--nt-cyan);
    padding-left: var(--nt-space-4);
    margin: var(--nt-space-6) 0;
    color: var(--nt-text-dim);
    font-style: italic;
}

.nt-prose code {
    background: var(--nt-bg-surface);
    padding: 0.15em 0.4em;
    border-radius: var(--nt-radius-sm);
    font-size: 0.875em;
    color: var(--nt-cyan);
}

.nt-prose pre {
    background: var(--nt-bg-code);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-lg);
    padding: var(--nt-space-4) var(--nt-space-5);
    margin: var(--nt-space-6) 0;
    overflow-x: auto;
}

.nt-prose pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    color: var(--nt-text);
}

.nt-prose img {
    border-radius: var(--nt-radius-lg);
    margin: var(--nt-space-6) 0;
}

.nt-prose hr {
    margin: var(--nt-space-8) 0;
    border: none;
    height: 1px;
    background: var(--nt-border);
}

/* Text Color Utilities */
.nt-text-cyan { color: var(--nt-cyan); }
.nt-text-violet { color: var(--nt-violet); }
.nt-text-green { color: var(--nt-green); }
.nt-text-orange { color: var(--nt-orange); }
.nt-text-red { color: var(--nt-red); }
.nt-text-yellow { color: var(--nt-yellow); }
.nt-text-dim { color: var(--nt-text-dim); }
.nt-text-muted { color: var(--nt-text-muted); }
.nt-text-faint { color: var(--nt-text-faint); }


/* ================================================================
   SECTION 4: LAYOUT SYSTEM
   ================================================================ */

/* Container */
.nt-container {
    width: 100%;
    max-width: var(--nt-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--nt-container-pad);
    padding-right: var(--nt-container-pad);
}

.nt-container--wide {
    max-width: var(--nt-container-wide);
}

.nt-container--narrow {
    max-width: var(--nt-container-narrow);
}

.nt-container--full {
    max-width: none;
}

/* CSS Grid System */
.nt-grid {
    display: grid;
    gap: var(--nt-space-8);
}

.nt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nt-grid--4 { grid-template-columns: repeat(4, 1fr); }
.nt-grid--5 { grid-template-columns: repeat(5, 1fr); }
.nt-grid--6 { grid-template-columns: repeat(6, 1fr); }

.nt-grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.nt-grid--auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.nt-grid--auto-fit-sm {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.nt-grid--auto-fit-lg {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

@media (max-width: 1024px) {
    .nt-grid--3,
    .nt-grid--4,
    .nt-grid--5,
    .nt-grid--6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .nt-grid--2,
    .nt-grid--3,
    .nt-grid--4,
    .nt-grid--5,
    .nt-grid--6 {
        grid-template-columns: 1fr;
    }
}

/* Flexbox Utilities */
.nt-flex { display: flex; }
.nt-flex--inline { display: inline-flex; }
.nt-flex--col { flex-direction: column; }
.nt-flex--row { flex-direction: row; }
.nt-flex--wrap { flex-wrap: wrap; }
.nt-flex--nowrap { flex-wrap: nowrap; }
.nt-flex--center { align-items: center; justify-content: center; }
.nt-flex--between { justify-content: space-between; }
.nt-flex--around { justify-content: space-around; }
.nt-flex--evenly { justify-content: space-evenly; }
.nt-flex--start { justify-content: flex-start; }
.nt-flex--end { justify-content: flex-end; }
.nt-flex--align-start { align-items: flex-start; }
.nt-flex--align-end { align-items: flex-end; }
.nt-flex--align-center { align-items: center; }
.nt-flex--align-stretch { align-items: stretch; }
.nt-flex--align-baseline { align-items: baseline; }
.nt-flex--1 { flex: 1; }
.nt-flex--auto { flex: auto; }
.nt-flex--none { flex: none; }
.nt-flex--grow { flex-grow: 1; }
.nt-flex--shrink-0 { flex-shrink: 0; }

/* Stack (Vertical Flex) */
.nt-stack {
    display: flex;
    flex-direction: column;
    gap: var(--nt-space-4);
}

.nt-stack--sm { gap: var(--nt-space-2); }
.nt-stack--md { gap: var(--nt-space-4); }
.nt-stack--lg { gap: var(--nt-space-8); }
.nt-stack--xl { gap: var(--nt-space-12); }

/* Cluster (Horizontal Flex) */
.nt-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nt-space-4);
    align-items: center;
}

.nt-cluster--sm { gap: var(--nt-space-2); }
.nt-cluster--md { gap: var(--nt-space-4); }
.nt-cluster--lg { gap: var(--nt-space-8); }

/* Sidebar Layout */
.nt-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nt-space-8);
}

.nt-sidebar > :first-child {
    flex-basis: 300px;
    flex-grow: 1;
}

.nt-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 60%;
}

/* Center */
.nt-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nt-center--col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nt-center--text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Section Base */
.nt-section {
    position: relative;
    padding: var(--nt-section-pad) 0;
    overflow: hidden;
}


/* ================================================================
   SECTION 5: BUTTONS
   ================================================================ */

/* Base Button */
.nt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nt-space-2);
    padding: var(--nt-space-3) var(--nt-space-6);
    font-family: var(--nt-font-body);
    font-size: var(--nt-text-sm);
    font-weight: var(--nt-weight-semibold);
    letter-spacing: var(--nt-tracking-wide);
    text-transform: uppercase;
    line-height: var(--nt-leading-normal);
    border: 1px solid transparent;
    border-radius: var(--nt-radius-md);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
    transition:
        background var(--nt-duration-normal) var(--nt-ease-default),
        color var(--nt-duration-normal) var(--nt-ease-default),
        border-color var(--nt-duration-normal) var(--nt-ease-default),
        box-shadow var(--nt-duration-normal) var(--nt-ease-default),
        transform var(--nt-duration-normal) var(--nt-ease-default);
    isolation: isolate;
}

/* Ripple Effect Layer */
.nt-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
        rgba(255, 255, 255, 0.2) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity var(--nt-duration-fast);
    z-index: -1;
}

.nt-btn:active::after {
    opacity: 1;
}

/* Focus Visible */
.nt-btn:focus-visible {
    outline: 2px solid var(--nt-cyan);
    outline-offset: 2px;
}

/* Disabled State */
.nt-btn:disabled,
.nt-btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary Button */
.nt-btn--primary {
    background: var(--nt-gradient-brand);
    background-size: 200% auto;
    color: #fff;
    border-color: transparent;
    box-shadow: var(--nt-shadow-glow-cyan);
}

.nt-btn--primary:hover {
    background-position: right center;
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--nt-shadow-glow-cyan-strong);
}

.nt-btn--primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 0 15px var(--nt-cyan-glow);
}

/* Secondary Button */
.nt-btn--secondary {
    background: transparent;
    color: var(--nt-cyan);
    border-color: var(--nt-border-hover);
}

.nt-btn--secondary:hover {
    background: var(--nt-cyan-glow);
    border-color: var(--nt-cyan);
    transform: translateY(-1px);
    box-shadow: var(--nt-shadow-glow-cyan);
}

.nt-btn--secondary:active {
    transform: translateY(0);
    background: var(--nt-cyan-strong);
}

/* Ghost Button */
.nt-btn--ghost {
    background: transparent;
    color: var(--nt-text-dim);
    border-color: var(--nt-border);
}

.nt-btn--ghost:hover {
    color: var(--nt-text);
    border-color: var(--nt-border-hover);
    background: var(--nt-bg-elevated);
}

.nt-btn--ghost:active {
    background: var(--nt-bg-surface);
}

/* Danger Button */
.nt-btn--danger {
    background: var(--nt-gradient-danger);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--nt-shadow-glow-red);
}

.nt-btn--danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 40px var(--nt-red-strong);
}

.nt-btn--danger:active {
    transform: translateY(0) scale(0.98);
}

/* Success Button */
.nt-btn--success {
    background: var(--nt-gradient-green);
    color: #0a0a0f;
    border-color: transparent;
    font-weight: var(--nt-weight-bold);
}

.nt-btn--success:hover {
    transform: translateY(-2px);
    box-shadow: var(--nt-shadow-glow-green);
}

.nt-btn--success:active {
    transform: translateY(0) scale(0.98);
}

/* Violet Button */
.nt-btn--violet {
    background: var(--nt-gradient-violet);
    color: #fff;
    border-color: transparent;
}

.nt-btn--violet:hover {
    transform: translateY(-2px);
    box-shadow: var(--nt-shadow-glow-violet);
}

.nt-btn--violet:active {
    transform: translateY(0) scale(0.98);
}

/* Icon-Only Button */
.nt-btn--icon {
    padding: var(--nt-space-3);
    border-radius: var(--nt-radius-full);
    aspect-ratio: 1;
    min-width: 40px;
    min-height: 40px;
}

.nt-btn--icon svg {
    width: 18px;
    height: 18px;
}

/* Size Variants */
.nt-btn--lg {
    padding: var(--nt-space-4) var(--nt-space-8);
    font-size: var(--nt-text-base);
    border-radius: var(--nt-radius-lg);
    gap: var(--nt-space-3);
    min-height: 52px;
}

.nt-btn--sm {
    padding: var(--nt-space-2) var(--nt-space-4);
    font-size: var(--nt-text-xs);
    border-radius: var(--nt-radius-sm);
    gap: var(--nt-space-1);
    min-height: 32px;
}

.nt-btn--xs {
    padding: var(--nt-space-1) var(--nt-space-3);
    font-size: var(--nt-text-2xs);
    border-radius: var(--nt-radius-sm);
    min-height: 24px;
    letter-spacing: var(--nt-tracking-normal);
    text-transform: none;
}

/* Full Width */
.nt-btn--full {
    width: 100%;
}

/* Magnetic Button (JS sets --mx, --my) */
.nt-btn--magnetic {
    transition:
        transform var(--nt-duration-normal) var(--nt-ease-spring),
        background var(--nt-duration-normal),
        box-shadow var(--nt-duration-normal);
}

.nt-btn--magnetic:hover {
    transform: translate(
        calc(var(--mx, 0) * 1px),
        calc(var(--my, 0) * 1px)
    );
}

/* Loading State */
.nt-btn--loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

.nt-btn--loading::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: var(--nt-radius-full);
    animation: nt-rotate 0.6s linear infinite;
}

/* Button Group */
.nt-btn-group {
    display: inline-flex;
    gap: 0;
}

.nt-btn-group .nt-btn {
    border-radius: 0;
}

.nt-btn-group .nt-btn:first-child {
    border-radius: var(--nt-radius-md) 0 0 var(--nt-radius-md);
}

.nt-btn-group .nt-btn:last-child {
    border-radius: 0 var(--nt-radius-md) var(--nt-radius-md) 0;
}

.nt-btn-group .nt-btn + .nt-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}


/* ================================================================
   SECTION 6: CARDS
   ================================================================ */

/* Base Card */
.nt-card {
    background: var(--nt-bg-elevated);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-lg);
    padding: var(--nt-space-8);
    transition:
        border-color var(--nt-duration-normal) var(--nt-ease-default),
        box-shadow var(--nt-duration-normal) var(--nt-ease-default),
        transform var(--nt-duration-normal) var(--nt-ease-default);
    position: relative;
}

.nt-card:hover {
    border-color: var(--nt-border-hover);
    transform: translateY(-4px);
    box-shadow: var(--nt-shadow-lg), var(--nt-shadow-glow-cyan);
}

/* Glass Card */
.nt-card--glass {
    background: var(--nt-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-lg);
    padding: var(--nt-space-8);
    transition:
        border-color var(--nt-duration-normal),
        box-shadow var(--nt-duration-normal);
}

.nt-card--glass:hover {
    border-color: var(--nt-border-hover);
    box-shadow: var(--nt-shadow-lg);
}

/* Interactive Card (3D Tilt) */
.nt-card--interactive {
    background: var(--nt-bg-elevated);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-lg);
    padding: var(--nt-space-8);
    transition:
        border-color var(--nt-duration-normal),
        box-shadow var(--nt-duration-normal);
    transform-style: preserve-3d;
    perspective: 1000px;
    cursor: pointer;
}

.nt-card--interactive::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        600px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        var(--nt-cyan-glow),
        transparent 40%
    );
    opacity: 0;
    transition: opacity var(--nt-duration-normal);
    pointer-events: none;
    z-index: 0;
}

.nt-card--interactive:hover::before {
    opacity: 1;
}

.nt-card--interactive:hover {
    border-color: var(--nt-border-hover);
    box-shadow: var(--nt-shadow-lg);
}

.nt-card--interactive > * {
    position: relative;
    z-index: 1;
}

/* Feature Card */
.nt-card--feature {
    background: var(--nt-bg-elevated);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-lg);
    padding: var(--nt-space-8);
    transition: all var(--nt-duration-normal) var(--nt-ease-default);
    position: relative;
    overflow: hidden;
}

.nt-card--feature::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--nt-gradient-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--nt-duration-slow) var(--nt-ease-out);
}

.nt-card--feature:hover::after {
    transform: scaleX(1);
}

.nt-card--feature:hover {
    border-color: var(--nt-border-hover);
    transform: translateY(-4px);
    box-shadow: var(--nt-shadow-lg), var(--nt-shadow-glow-cyan);
}

.nt-card--feature__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nt-cyan-glow);
    border-radius: var(--nt-radius-md);
    margin-bottom: var(--nt-space-4);
    font-size: 1.5rem;
    color: var(--nt-cyan);
    transition: background var(--nt-duration-normal);
}

.nt-card--feature:hover .nt-card--feature__icon {
    background: var(--nt-cyan-strong);
}

.nt-card--feature__title {
    font-size: var(--nt-text-lg);
    font-weight: var(--nt-weight-semibold);
    color: var(--nt-text);
    margin-bottom: var(--nt-space-2);
}

.nt-card--feature__desc {
    font-size: var(--nt-text-sm);
    color: var(--nt-text-dim);
    line-height: var(--nt-leading-relaxed);
}

/* Pricing Card */
.nt-card--pricing {
    background: var(--nt-bg-elevated);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-xl);
    padding: var(--nt-space-8);
    transition: all var(--nt-duration-normal) var(--nt-ease-default);
    position: relative;
    overflow: hidden;
}

.nt-card--pricing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--nt-gradient-brand);
    opacity: 0;
    transition: opacity var(--nt-duration-normal);
}

.nt-card--pricing:hover {
    transform: translateY(-8px);
    box-shadow: var(--nt-shadow-xl), var(--nt-shadow-glow-cyan);
}

.nt-card--pricing:hover::before {
    opacity: 1;
}

/* Featured Pricing Card */
.nt-card--pricing--featured {
    border-color: var(--nt-cyan);
    box-shadow: var(--nt-shadow-glow-cyan);
    transform: scale(1.05);
}

.nt-card--pricing--featured::before {
    opacity: 1;
}

.nt-card--pricing--featured:hover {
    transform: scale(1.05) translateY(-8px);
    box-shadow: var(--nt-shadow-xl), var(--nt-shadow-glow-cyan-strong);
}

/* Testimonial Card */
.nt-card--testimonial {
    background: var(--nt-bg-elevated);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-lg);
    padding: var(--nt-space-8);
    position: relative;
}

.nt-card--testimonial::before {
    content: '\201C';
    position: absolute;
    top: var(--nt-space-4);
    left: var(--nt-space-6);
    font-size: 4rem;
    line-height: 1;
    color: var(--nt-cyan-glow);
    font-family: Georgia, serif;
}

.nt-card--testimonial__quote {
    font-size: var(--nt-text-base);
    line-height: var(--nt-leading-relaxed);
    color: var(--nt-text-dim);
    margin-bottom: var(--nt-space-6);
    padding-top: var(--nt-space-4);
}

.nt-card--testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--nt-space-3);
}

.nt-card--testimonial__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--nt-radius-full);
    object-fit: cover;
}

.nt-card--testimonial__name {
    font-size: var(--nt-text-sm);
    font-weight: var(--nt-weight-semibold);
    color: var(--nt-text);
}

.nt-card--testimonial__role {
    font-size: var(--nt-text-xs);
    color: var(--nt-text-muted);
}

/* Tool Card */
.nt-card--tool {
    background: var(--nt-bg-elevated);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-lg);
    padding: var(--nt-space-6);
    transition: all var(--nt-duration-normal);
    cursor: pointer;
}

.nt-card--tool:hover {
    border-color: var(--nt-cyan);
    transform: translateY(-2px);
    box-shadow: var(--nt-shadow-md), var(--nt-shadow-glow-cyan);
}

.nt-card--tool__name {
    font-size: var(--nt-text-base);
    font-weight: var(--nt-weight-semibold);
    color: var(--nt-text);
    margin-bottom: var(--nt-space-1);
}

.nt-card--tool__desc {
    font-size: var(--nt-text-sm);
    color: var(--nt-text-muted);
}

/* Stat Card */
.nt-card--stat {
    background: var(--nt-bg-elevated);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-lg);
    padding: var(--nt-space-6);
    text-align: center;
    transition: all var(--nt-duration-normal);
}

.nt-card--stat:hover {
    border-color: var(--nt-border-hover);
    box-shadow: var(--nt-shadow-md);
}

.nt-card--stat__icon {
    font-size: 2rem;
    margin-bottom: var(--nt-space-3);
}

.nt-card--stat__number {
    font-size: var(--nt-text-4xl);
    font-weight: var(--nt-weight-black);
    font-family: var(--nt-font-mono);
    color: var(--nt-text);
    line-height: var(--nt-leading-none);
}

.nt-card--stat__label {
    font-size: var(--nt-text-sm);
    color: var(--nt-text-muted);
    margin-top: var(--nt-space-2);
    text-transform: uppercase;
    letter-spacing: var(--nt-tracking-wider);
}

/* Card padding variants */
.nt-card--compact { padding: var(--nt-space-4); }
.nt-card--spacious { padding: var(--nt-space-12); }
.nt-card--flush { padding: 0; }


/* ================================================================
   SECTION 7: NAVIGATION
   ================================================================ */

/* Fixed Navigation Bar */
.nt-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--nt-z-sticky);
    padding: var(--nt-space-4) 0;
    transition:
        background var(--nt-duration-normal) var(--nt-ease-default),
        padding var(--nt-duration-normal) var(--nt-ease-default),
        box-shadow var(--nt-duration-normal) var(--nt-ease-default),
        transform var(--nt-duration-normal) var(--nt-ease-default);
}

.nt-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--nt-container-wide);
    margin: 0 auto;
    padding: 0 var(--nt-container-pad);
}

/* Logo */
.nt-nav__logo {
    display: flex;
    align-items: center;
    gap: var(--nt-space-2);
    font-family: var(--nt-font-mono);
    font-weight: var(--nt-weight-bold);
    font-size: var(--nt-text-xl);
    color: var(--nt-text);
    z-index: var(--nt-z-raised);
    text-decoration: none;
}

.nt-nav__logo-icon {
    width: 32px;
    height: 32px;
    background: var(--nt-gradient-brand);
    border-radius: var(--nt-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--nt-weight-black);
    font-size: 18px;
    color: #fff;
    transition: transform var(--nt-duration-normal) var(--nt-ease-spring);
}

.nt-nav__logo:hover .nt-nav__logo-icon {
    transform: rotate(12deg) scale(1.1);
}

/* Desktop Links */
.nt-nav__links {
    display: flex;
    align-items: center;
    gap: var(--nt-space-8);
}

.nt-nav__link {
    font-size: var(--nt-text-sm);
    color: var(--nt-text-dim);
    font-weight: var(--nt-weight-medium);
    transition: color var(--nt-duration-fast);
    position: relative;
    padding: var(--nt-space-1) 0;
}

.nt-nav__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--nt-cyan);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--nt-duration-normal) var(--nt-ease-out);
}

.nt-nav__link:hover {
    color: var(--nt-cyan);
}

.nt-nav__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nt-nav__link--active {
    color: var(--nt-cyan);
}

.nt-nav__link--active::after {
    transform: scaleX(1);
}

/* Nav CTA */
.nt-nav__cta {
    font-size: var(--nt-text-xs);
}

/* Scrolled State */
.nt-nav--scrolled {
    background: var(--nt-bg-overlay);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--nt-border);
    padding: var(--nt-space-3) 0;
    box-shadow: var(--nt-shadow-md);
}

/* Auto-hide on Scroll Down */
.nt-nav--hidden {
    transform: translateY(-100%);
}

/* Mobile Hamburger */
.nt-nav__mobile {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--nt-space-2);
    cursor: pointer;
    z-index: var(--nt-z-raised);
}

.nt-nav__mobile span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--nt-text);
    border-radius: 2px;
    transition: all var(--nt-duration-normal) var(--nt-ease-default);
    transform-origin: center;
}

.nt-nav__mobile--open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nt-nav__mobile--open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nt-nav__mobile--open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.nt-nav__mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--nt-bg-elevated);
    border-left: 1px solid var(--nt-border);
    padding: var(--nt-space-20) var(--nt-space-6) var(--nt-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--nt-space-2);
    transform: translateX(100%);
    transition: transform var(--nt-duration-slow) var(--nt-ease-out);
    z-index: var(--nt-z-overlay);
    overflow-y: auto;
}

.nt-nav__mobile-menu--open {
    transform: translateX(0);
}

.nt-nav__mobile-menu__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nt-duration-normal);
    z-index: var(--nt-z-overlay);
}

.nt-nav__mobile-menu__backdrop--visible {
    opacity: 1;
    pointer-events: auto;
}

.nt-nav__mobile-menu .nt-nav__link {
    font-size: var(--nt-text-lg);
    padding: var(--nt-space-3) 0;
    border-bottom: 1px solid var(--nt-border);
}

@media (max-width: 768px) {
    .nt-nav__links {
        display: none;
    }

    .nt-nav__mobile {
        display: flex;
    }
}


/* ================================================================
   SECTION 8: HERO SECTION
   ================================================================ */

.nt-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.nt-hero__canvas-container {
    position: absolute;
    inset: 0;
    z-index: var(--nt-z-base);
    pointer-events: none;
}

.nt-hero__canvas-container canvas {
    width: 100%;
    height: 100%;
}

/* Direct canvas children (when not wrapped in canvas-container) */
.nt-hero__aurora,
.nt-hero__neural {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--nt-z-base);
    pointer-events: none;
}

.nt-hero__noise {
    position: absolute;
    inset: 0;
    z-index: calc(var(--nt-z-base) + 1);
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

.nt-hero__content {
    position: relative;
    z-index: var(--nt-z-raised);
    text-align: center;
    max-width: 900px;
    padding: var(--nt-space-6);
}

.nt-hero__title {
    font-family: var(--nt-font-display);
    font-size: var(--nt-text-7xl);
    font-weight: var(--nt-weight-black);
    letter-spacing: var(--nt-tracking-tighter);
    line-height: var(--nt-leading-none);
    color: var(--nt-text);
    margin-bottom: var(--nt-space-6);
}

.nt-hero__tagline {
    font-size: var(--nt-text-xl);
    color: var(--nt-text-dim);
    line-height: var(--nt-leading-relaxed);
    max-width: 600px;
    margin: 0 auto var(--nt-space-8);
}

.nt-hero__cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nt-space-4);
    flex-wrap: wrap;
}

/* Scroll Indicator */
.nt-hero__scroll-indicator {
    position: absolute;
    bottom: var(--nt-space-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nt-space-2);
    color: var(--nt-text-muted);
    font-size: var(--nt-text-xs);
    letter-spacing: var(--nt-tracking-wider);
    text-transform: uppercase;
    animation: nt-float 3s ease-in-out infinite;
    cursor: pointer;
}

.nt-hero__scroll-indicator svg {
    width: 20px;
    height: 20px;
    animation: nt-bounceDown 2s ease-in-out infinite;
}

/* Hero Badge */
.nt-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nt-space-2);
    padding: var(--nt-space-2) var(--nt-space-4);
    background: var(--nt-bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-full);
    font-size: var(--nt-text-xs);
    color: var(--nt-text-dim);
    margin-bottom: var(--nt-space-6);
    opacity: 0;
    animation: nt-fadeInDown 0.8s var(--nt-ease-out) 0.2s forwards;
}

.nt-hero__badge__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--nt-radius-full);
    background: var(--nt-green);
    animation: nt-pulse 2s ease-in-out infinite;
}

@media (max-width: 768px) {
    .nt-hero__title {
        font-size: var(--nt-text-5xl);
    }

    .nt-hero__tagline {
        font-size: var(--nt-text-lg);
    }

    .nt-hero__cta-group {
        flex-direction: column;
        width: 100%;
    }

    .nt-hero__cta-group .nt-btn {
        width: 100%;
    }
}


/* ================================================================
   SECTION 9: SECTIONS (Acts)
   ================================================================ */

.nt-act {
    position: relative;
    padding: var(--nt-section-pad) 0;
    overflow: hidden;
}

.nt-act__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--nt-section-gap);
}

.nt-act__header__label {
    font-size: var(--nt-text-xs);
    font-weight: var(--nt-weight-semibold);
    letter-spacing: var(--nt-tracking-widest);
    text-transform: uppercase;
    color: var(--nt-cyan);
    margin-bottom: var(--nt-space-3);
}

.nt-act__header__title {
    font-size: var(--nt-text-4xl);
    font-weight: var(--nt-weight-black);
    color: var(--nt-text);
    margin-bottom: var(--nt-space-4);
    letter-spacing: var(--nt-tracking-tight);
    line-height: var(--nt-leading-tight);
}

.nt-act__header__subtitle {
    font-size: var(--nt-text-lg);
    color: var(--nt-text-dim);
    line-height: var(--nt-leading-relaxed);
}

/* Section Variants */
.nt-act--dark {
    background: var(--nt-bg);
}

.nt-act--darker {
    background: #060609;
}

.nt-act--elevated {
    background: var(--nt-bg-elevated);
}

.nt-act--gradient {
    background: var(--nt-gradient-mesh);
}

/* Section Divider */
.nt-act__divider {
    position: absolute;
    left: 0;
    right: 0;
    height: 120px;
    pointer-events: none;
}

.nt-act__divider--top {
    top: -1px;
}

.nt-act__divider--bottom {
    bottom: -1px;
}

.nt-act__divider svg {
    width: 100%;
    height: 100%;
    display: block;
}


/* ================================================================
   SECTION 10: TERMINAL
   ================================================================ */

.nt-terminal {
    background: var(--nt-bg-code);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-lg);
    overflow: hidden;
    font-family: var(--nt-font-mono);
    font-size: var(--nt-text-mono);
    box-shadow: var(--nt-shadow-lg);
}

.nt-terminal__header {
    display: flex;
    align-items: center;
    gap: var(--nt-space-2);
    padding: var(--nt-space-3) var(--nt-space-4);
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--nt-border);
}

.nt-terminal__dot {
    width: 12px;
    height: 12px;
    border-radius: var(--nt-radius-full);
}

.nt-terminal__dot--red { background: #ff5f57; }
.nt-terminal__dot--yellow { background: #febc2e; }
.nt-terminal__dot--green { background: #28c840; }

.nt-terminal__title {
    margin-left: var(--nt-space-4);
    color: var(--nt-text-muted);
    font-size: var(--nt-text-xs);
    flex: 1;
    text-align: center;
}

.nt-terminal__body {
    padding: var(--nt-space-4) var(--nt-space-6);
    line-height: var(--nt-leading-loose);
    min-height: 200px;
    color: var(--nt-text-dim);
    overflow-x: auto;
}

.nt-terminal__line {
    display: block;
    margin-bottom: var(--nt-space-1);
    white-space: pre-wrap;
    word-break: break-all;
}

.nt-terminal__prompt {
    color: var(--nt-cyan);
    user-select: none;
}

.nt-terminal__cursor {
    display: inline-block;
    width: 8px;
    height: 1.2em;
    background: var(--nt-cyan);
    vertical-align: text-bottom;
    animation: nt-blink 1s step-end infinite;
}

.nt-terminal__output {
    color: var(--nt-cyan);
}

.nt-terminal__success {
    color: var(--nt-green);
}

.nt-terminal__error {
    color: var(--nt-red);
}

.nt-terminal__warning {
    color: var(--nt-orange);
}

.nt-terminal__info {
    color: var(--nt-violet);
}

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

.nt-terminal__comment {
    color: var(--nt-text-faint);
    font-style: italic;
}

/* Typing Animation State */
.nt-terminal--typing .nt-terminal__line {
    overflow: hidden;
    white-space: nowrap;
    animation: nt-typewriter 1s steps(40) forwards;
}

@media (max-width: 640px) {
    .nt-terminal__body {
        padding: var(--nt-space-3) var(--nt-space-4);
        font-size: var(--nt-text-xs);
    }
}


/* ================================================================
   SECTION 11: LIVE BUILD DEMO
   ================================================================ */

.nt-live-demo {
    display: flex;
    gap: var(--nt-space-6);
    align-items: stretch;
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-xl);
    overflow: hidden;
    background: var(--nt-bg-elevated);
}

.nt-live-demo__terminal {
    flex: 1;
    min-width: 0;
}

.nt-live-demo__terminal .nt-terminal {
    border: none;
    border-radius: 0;
    height: 100%;
}

.nt-live-demo__preview {
    flex: 1;
    min-width: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nt-live-demo__preview iframe {
    width: 100%;
    height: 100%;
    border: none;
    min-height: 400px;
}

.nt-live-demo__progress {
    width: 3px;
    background: var(--nt-border);
    position: relative;
    flex-shrink: 0;
}

.nt-live-demo__progress__bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--nt-gradient-brand);
    border-radius: var(--nt-radius-full);
    transition: height 0.3s var(--nt-ease-out);
    box-shadow: 0 0 10px var(--nt-cyan-glow);
}

@media (max-width: 768px) {
    .nt-live-demo {
        flex-direction: column;
    }

    .nt-live-demo__progress {
        width: 100%;
        height: 3px;
    }

    .nt-live-demo__progress__bar {
        width: 0%;
        height: 100%;
        transition: width 0.3s var(--nt-ease-out);
    }
}


/* ================================================================
   SECTION 12: METRICS COUNTER
   ================================================================ */

.nt-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nt-space-6);
}

.nt-metric {
    text-align: center;
    padding: var(--nt-space-6) var(--nt-space-4);
    overflow: hidden;
}

.nt-metric__icon {
    font-size: 2.5rem;
    margin-bottom: var(--nt-space-3);
    display: block;
}

.nt-metric__number {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--nt-weight-black);
    font-family: var(--nt-font-mono);
    color: var(--nt-text);
    line-height: var(--nt-leading-none);
    letter-spacing: var(--nt-tracking-tight);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .nt-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .nt-metrics {
        grid-template-columns: 1fr 1fr;
        gap: var(--nt-space-4);
    }
}

.nt-metric__number--cyan { color: var(--nt-cyan); }
.nt-metric__number--green { color: var(--nt-green); }
.nt-metric__number--violet { color: var(--nt-violet); }

.nt-metric__label {
    font-size: var(--nt-text-sm);
    color: var(--nt-text-muted);
    margin-top: var(--nt-space-2);
    text-transform: uppercase;
    letter-spacing: var(--nt-tracking-wider);
}

.nt-metric__sublabel {
    font-size: var(--nt-text-xs);
    color: var(--nt-text-faint);
    margin-top: var(--nt-space-1);
}


/* ================================================================
   SECTION 12B: COMPARISON TABLE
   ================================================================ */

.nt-comparison {
    max-width: 900px;
    margin: var(--nt-space-16) auto;
}

.nt-comparison__title {
    text-align: center;
    font-size: var(--nt-text-3xl);
    font-weight: var(--nt-weight-bold);
    color: var(--nt-text);
    margin-bottom: var(--nt-space-8);
    background: var(--nt-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nt-comparison__table {
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-xl);
    overflow: hidden;
    background: var(--nt-bg-elevated);
    backdrop-filter: blur(12px);
}

.nt-comparison__header,
.nt-comparison__row {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    align-items: center;
}

.nt-comparison__header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--nt-border);
    font-weight: var(--nt-weight-semibold);
    font-size: var(--nt-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nt-text-dim);
}

.nt-comparison__header .nt-comparison__col {
    padding: var(--nt-space-4) var(--nt-space-4);
    text-align: center;
}

.nt-comparison__header .nt-comparison__col:first-child {
    text-align: left;
}

.nt-comparison__col--featured {
    color: var(--nt-cyan) !important;
    position: relative;
}

.nt-comparison__row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background var(--nt-duration-fast) ease;
}

.nt-comparison__row:last-child {
    border-bottom: none;
}

.nt-comparison__row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.nt-comparison__label {
    padding: var(--nt-space-4) var(--nt-space-4);
    font-weight: var(--nt-weight-medium);
    color: var(--nt-text);
    font-size: var(--nt-text-sm);
}

.nt-comparison__cell {
    padding: var(--nt-space-4) var(--nt-space-4);
    text-align: center;
    font-size: var(--nt-text-sm);
}

.nt-comparison__cell--featured {
    position: relative;
    font-weight: var(--nt-weight-semibold);
}

/* Featured column glow stripe */
.nt-comparison__header .nt-comparison__col--featured,
.nt-comparison__cell--featured {
    background: rgba(0, 212, 255, 0.04);
}

/* Mobile: stack comparison table */
@media (max-width: 640px) {
    .nt-comparison__header,
    .nt-comparison__row {
        grid-template-columns: 1.2fr repeat(3, 1fr);
        font-size: var(--nt-text-xs);
    }

    .nt-comparison__label,
    .nt-comparison__cell,
    .nt-comparison__header .nt-comparison__col {
        padding: var(--nt-space-3) var(--nt-space-2);
    }

    .nt-comparison__title {
        font-size: var(--nt-text-2xl);
    }
}


/* ================================================================
   SECTION 13: TOOL MAP
   ================================================================ */

.nt-tool-map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--nt-bg-elevated);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-xl);
    overflow: hidden;
}

.nt-tool-map canvas {
    width: 100%;
    height: 100%;
}

.nt-tool-map__legend {
    position: absolute;
    bottom: var(--nt-space-4);
    left: var(--nt-space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--nt-space-3);
    padding: var(--nt-space-3) var(--nt-space-4);
    background: var(--nt-bg-glass-heavy);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--nt-radius-md);
    border: 1px solid var(--nt-border);
}

.nt-tool-map__legend__item {
    display: flex;
    align-items: center;
    gap: var(--nt-space-1-5);
    font-size: var(--nt-text-xs);
    color: var(--nt-text-dim);
}

.nt-tool-map__legend__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--nt-radius-full);
}

.nt-tool-map__tooltip {
    position: absolute;
    padding: var(--nt-space-2) var(--nt-space-3);
    background: var(--nt-bg-tooltip);
    border: 1px solid var(--nt-border-hover);
    border-radius: var(--nt-radius-md);
    font-size: var(--nt-text-xs);
    color: var(--nt-text);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--nt-duration-fast);
    z-index: var(--nt-z-tooltip);
    white-space: nowrap;
}

.nt-tool-map__tooltip--visible {
    opacity: 1;
}

.nt-tool-map__controls {
    position: absolute;
    top: var(--nt-space-4);
    right: var(--nt-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--nt-space-1);
}

.nt-tool-map__controls button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nt-bg-glass-heavy);
    backdrop-filter: blur(12px);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-sm);
    color: var(--nt-text-dim);
    font-size: var(--nt-text-base);
    cursor: pointer;
    transition: all var(--nt-duration-fast);
}

.nt-tool-map__controls button:hover {
    color: var(--nt-text);
    border-color: var(--nt-border-hover);
}


/* ================================================================
   SECTION 14: PRICING SECTION
   ================================================================ */

/* .nt-pricing layout is handled by pricing-calculator.js inline styles.
   Only set max-width and centering here as fallback. */
.nt-pricing {
    max-width: 1100px;
    margin: 0 auto;
}

/* Toggle (Monthly/Yearly) */
.nt-pricing__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nt-space-3);
    margin-bottom: var(--nt-space-8);
}

.nt-pricing__toggle__label {
    font-size: var(--nt-text-sm);
    color: var(--nt-text-dim);
    cursor: pointer;
    transition: color var(--nt-duration-fast);
}

.nt-pricing__toggle__label--active {
    color: var(--nt-text);
    font-weight: var(--nt-weight-semibold);
}

.nt-pricing__toggle__switch {
    position: relative;
    width: 48px;
    height: 26px;
    background: var(--nt-bg-surface);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-full);
    cursor: pointer;
    transition: background var(--nt-duration-normal);
}

.nt-pricing__toggle__switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--nt-cyan);
    border-radius: var(--nt-radius-full);
    transition: transform var(--nt-duration-normal) var(--nt-ease-spring);
    box-shadow: 0 0 10px var(--nt-cyan-glow);
}

.nt-pricing__toggle__switch--yearly::after {
    transform: translateX(22px);
}

/* Pricing Sub-components */
.nt-pricing__name {
    font-size: var(--nt-text-xl);
    font-weight: var(--nt-weight-bold);
    color: var(--nt-text);
    margin-bottom: var(--nt-space-2);
}

.nt-pricing__price {
    font-size: var(--nt-text-5xl);
    font-weight: var(--nt-weight-black);
    color: var(--nt-text);
    line-height: var(--nt-leading-none);
    margin-bottom: var(--nt-space-2);
}

.nt-pricing__price__currency {
    font-size: var(--nt-text-2xl);
    font-weight: var(--nt-weight-bold);
    vertical-align: super;
    color: var(--nt-text-dim);
}

.nt-pricing__price__period {
    font-size: var(--nt-text-base);
    font-weight: var(--nt-weight-regular);
    color: var(--nt-text-muted);
}

.nt-pricing__desc {
    font-size: var(--nt-text-sm);
    color: var(--nt-text-muted);
    margin-bottom: var(--nt-space-8);
}

.nt-pricing__features {
    margin-bottom: var(--nt-space-8);
}

.nt-pricing__feature {
    display: flex;
    align-items: center;
    gap: var(--nt-space-3);
    padding: var(--nt-space-2) 0;
    font-size: var(--nt-text-sm);
    color: var(--nt-text-dim);
}

.nt-pricing__feature::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: var(--nt-radius-full);
    background: var(--nt-green-glow);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ff88' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.nt-pricing__feature--disabled {
    color: var(--nt-text-faint);
    text-decoration: line-through;
}

.nt-pricing__feature--disabled::before {
    background: var(--nt-bg-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555577' stroke-width='3'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

.nt-pricing__cta {
    width: 100%;
}

/* Money-back Guarantee (fallback — pricing-calculator.js injects its own styles) */
.nt-pricing__guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nt-space-2);
    margin-top: var(--nt-space-4);
    font-size: var(--nt-text-xs);
    color: var(--nt-text-muted);
}

.nt-pricing__guarantee svg {
    width: 14px;
    height: 14px;
    color: var(--nt-green);
}

/* Popular Badge */
.nt-pricing__badge {
    position: absolute;
    top: calc(-1 * var(--nt-space-3));
    left: 50%;
    transform: translateX(-50%);
    padding: var(--nt-space-1) var(--nt-space-4);
    background: var(--nt-gradient-brand);
    border-radius: var(--nt-radius-full);
    font-size: var(--nt-text-2xs);
    font-weight: var(--nt-weight-bold);
    letter-spacing: var(--nt-tracking-wide);
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .nt-pricing {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .nt-card--pricing--featured {
        transform: scale(1);
    }

    .nt-card--pricing--featured:hover {
        transform: translateY(-8px);
    }
}


/* ================================================================
   SECTION 15: FAQ ACCORDION
   ================================================================ */

.nt-faq {
    max-width: var(--nt-container-narrow);
    margin: 0 auto;
}

.nt-faq__item {
    border-bottom: 1px solid var(--nt-border);
}

.nt-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--nt-space-5) 0;
    font-size: var(--nt-text-base);
    font-weight: var(--nt-weight-medium);
    color: var(--nt-text);
    text-align: left;
    cursor: pointer;
    transition: color var(--nt-duration-fast);
    gap: var(--nt-space-4);
}

.nt-faq__question:hover {
    color: var(--nt-cyan);
}

.nt-faq__icon {
    font-size: 1.5rem;
    color: var(--nt-text-muted);
    transition: transform var(--nt-duration-normal) var(--nt-ease-default);
    flex-shrink: 0;
    line-height: 1;
}

.nt-faq__item--open .nt-faq__icon {
    transform: rotate(45deg);
    color: var(--nt-cyan);
}

.nt-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--nt-duration-slow) var(--nt-ease-default),
                opacity var(--nt-duration-normal) var(--nt-ease-default);
    opacity: 0;
}

.nt-faq__item--open .nt-faq__answer {
    max-height: 500px;
    opacity: 1;
}

.nt-faq__answer__inner {
    padding: 0 0 var(--nt-space-5) 0;
    font-size: var(--nt-text-base);
    color: var(--nt-text-dim);
    line-height: var(--nt-leading-relaxed);
}

.nt-faq__answer__inner a {
    color: var(--nt-cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nt-faq__answer__inner a:hover {
    color: var(--nt-cyan-bright);
}


/* ================================================================
   SECTION 16: COMMAND PALETTE
   ================================================================ */

.nt-palette {
    position: fixed;
    inset: 0;
    z-index: var(--nt-z-command);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--nt-duration-normal) var(--nt-ease-default),
        visibility var(--nt-duration-normal);
}

.nt-palette--open {
    opacity: 1;
    visibility: visible;
}

.nt-palette__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nt-palette__modal {
    position: relative;
    width: 90%;
    max-width: 600px;
    background: var(--nt-bg-elevated);
    border: 1px solid var(--nt-border-hover);
    border-radius: var(--nt-radius-xl);
    box-shadow: var(--nt-shadow-xl), var(--nt-shadow-glow-cyan);
    overflow: hidden;
    transform: scale(0.95) translateY(-10px);
    transition: transform var(--nt-duration-normal) var(--nt-ease-spring);
}

.nt-palette--open .nt-palette__modal {
    transform: scale(1) translateY(0);
}

.nt-palette__input {
    width: 100%;
    padding: var(--nt-space-5) var(--nt-space-6);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--nt-border);
    font-family: var(--nt-font-body);
    font-size: var(--nt-text-xl);
    color: var(--nt-text);
    outline: none;
}

.nt-palette__input::placeholder {
    color: var(--nt-text-muted);
}

.nt-palette__results {
    max-height: 400px;
    overflow-y: auto;
    padding: var(--nt-space-2);
}

.nt-palette__group {
    padding: var(--nt-space-2) var(--nt-space-4) var(--nt-space-1);
    font-size: var(--nt-text-2xs);
    font-weight: var(--nt-weight-semibold);
    letter-spacing: var(--nt-tracking-wider);
    text-transform: uppercase;
    color: var(--nt-text-muted);
}

.nt-palette__result {
    display: flex;
    align-items: center;
    gap: var(--nt-space-3);
    padding: var(--nt-space-3) var(--nt-space-4);
    border-radius: var(--nt-radius-md);
    cursor: pointer;
    transition: background var(--nt-duration-fast);
}

.nt-palette__result:hover,
.nt-palette__result--active {
    background: var(--nt-cyan-glow);
}

.nt-palette__result__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nt-bg-surface);
    border-radius: var(--nt-radius-md);
    font-size: 14px;
    flex-shrink: 0;
    color: var(--nt-text-dim);
}

.nt-palette__result__text {
    flex: 1;
    min-width: 0;
}

.nt-palette__result__title {
    font-size: var(--nt-text-sm);
    color: var(--nt-text);
    font-weight: var(--nt-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nt-palette__result__desc {
    font-size: var(--nt-text-xs);
    color: var(--nt-text-muted);
}

.nt-palette__shortcut {
    font-family: var(--nt-font-mono);
    font-size: var(--nt-text-2xs);
    color: var(--nt-text-muted);
    background: var(--nt-bg-surface);
    padding: 2px 6px;
    border-radius: var(--nt-radius-sm);
    border: 1px solid var(--nt-border);
    flex-shrink: 0;
}

.nt-palette__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--nt-space-2) var(--nt-space-4);
    border-top: 1px solid var(--nt-border);
    font-size: var(--nt-text-2xs);
    color: var(--nt-text-faint);
}

.nt-palette__empty {
    padding: var(--nt-space-8) var(--nt-space-4);
    text-align: center;
    color: var(--nt-text-muted);
    font-size: var(--nt-text-sm);
}


/* ================================================================
   SECTION 16b: TOOL CATEGORIES GRID
   ================================================================ */

.nt-tool-categories {
    margin-top: var(--nt-space-12);
}

.nt-tool-categories__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--nt-space-4);
}

.nt-tool-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nt-space-2);
    padding: var(--nt-space-5) var(--nt-space-4);
    text-align: center;
    text-decoration: none;
    color: var(--nt-text);
    border-radius: var(--nt-radius-xl);
    transition: transform var(--nt-duration-normal) ease,
                border-color var(--nt-duration-normal) ease;
}

.nt-tool-category:hover {
    transform: translateY(-4px);
    border-color: var(--nt-cyan);
}

.nt-tool-category__icon {
    font-size: 1.8rem;
    line-height: 1;
}

.nt-tool-category__name {
    font-weight: var(--nt-weight-semibold);
    font-size: var(--nt-text-sm);
    white-space: nowrap;
}

.nt-tool-category__count {
    font-size: var(--nt-text-xs);
}

.nt-tool-category--all {
    border-color: rgba(0, 212, 255, 0.3);
    background: rgba(0, 212, 255, 0.05);
}

.nt-tool-category--all:hover {
    background: rgba(0, 212, 255, 0.1);
}

@media (max-width: 768px) {
    .nt-tool-categories__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--nt-space-3);
    }
}

@media (max-width: 480px) {
    .nt-tool-categories__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .nt-tool-category {
        padding: var(--nt-space-3) var(--nt-space-2);
    }
    .nt-tool-category__icon {
        font-size: 1.4rem;
    }
}


/* ================================================================
   SECTION 17: NEWSLETTER SIGNUP
   ================================================================ */

.nt-newsletter {
    max-width: 500px;
    margin: 0 auto;
}

.nt-newsletter__form {
    display: flex;
    gap: var(--nt-space-2);
}

.nt-newsletter__input {
    flex: 1;
    padding: var(--nt-space-3) var(--nt-space-4);
    background: var(--nt-bg-input);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-md);
    color: var(--nt-text);
    font-family: var(--nt-font-body);
    font-size: var(--nt-text-base);
    transition: border-color var(--nt-duration-normal);
    outline: none;
}

.nt-newsletter__input:focus {
    border-color: var(--nt-cyan);
    box-shadow: 0 0 0 3px var(--nt-cyan-glow);
}

.nt-newsletter__input::placeholder {
    color: var(--nt-text-muted);
}

.nt-newsletter__btn {
    flex-shrink: 0;
}

.nt-newsletter__success {
    display: none;
    text-align: center;
    padding: var(--nt-space-4);
    color: var(--nt-green);
    font-size: var(--nt-text-sm);
    animation: nt-fadeIn 0.5s var(--nt-ease-out);
}

.nt-newsletter--success .nt-newsletter__form {
    display: none;
}

.nt-newsletter--success .nt-newsletter__success {
    display: block;
}

@media (max-width: 480px) {
    .nt-newsletter__form {
        flex-direction: column;
    }
}


/* ================================================================
   SECTION 18: FOOTER
   ================================================================ */

.nt-footer {
    background: var(--nt-bg);
    border-top: 1px solid var(--nt-border);
    padding: var(--nt-space-16) 0 var(--nt-space-8);
}

.nt-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--nt-space-12);
    margin-bottom: var(--nt-space-12);
}

.nt-footer__brand {
    max-width: 300px;
}

.nt-footer__brand__logo {
    display: flex;
    align-items: center;
    gap: var(--nt-space-2);
    font-family: var(--nt-font-mono);
    font-weight: var(--nt-weight-bold);
    font-size: var(--nt-text-xl);
    color: var(--nt-text);
    margin-bottom: var(--nt-space-4);
}

.nt-footer__brand__desc {
    font-size: var(--nt-text-sm);
    color: var(--nt-text-muted);
    line-height: var(--nt-leading-relaxed);
    margin-bottom: var(--nt-space-6);
}

.nt-footer__social {
    display: flex;
    gap: var(--nt-space-3);
}

.nt-footer__social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nt-bg-surface);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-md);
    color: var(--nt-text-muted);
    transition: all var(--nt-duration-fast);
}

.nt-footer__social a:hover {
    color: var(--nt-cyan);
    border-color: var(--nt-border-hover);
    transform: translateY(-2px);
}

.nt-footer__social a svg {
    width: 16px;
    height: 16px;
}

/* Footer Link Columns */
.nt-footer__links {
    display: flex;
    flex-direction: column;
}

.nt-footer__heading {
    font-size: var(--nt-text-sm);
    font-weight: var(--nt-weight-semibold);
    color: var(--nt-text);
    margin-bottom: var(--nt-space-4);
    text-transform: uppercase;
    letter-spacing: var(--nt-tracking-wider);
}

.nt-footer__link {
    display: block;
    font-size: var(--nt-text-sm);
    color: var(--nt-text-muted);
    padding: var(--nt-space-1) 0;
    transition: color var(--nt-duration-fast);
}

.nt-footer__link:hover {
    color: var(--nt-cyan);
}

/* Footer Bottom */
.nt-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--nt-space-8);
    border-top: 1px solid var(--nt-border);
    font-size: var(--nt-text-xs);
    color: var(--nt-text-muted);
}

.nt-footer__bottom__links {
    display: flex;
    gap: var(--nt-space-4);
}

.nt-footer__bottom__links a {
    color: var(--nt-text-muted);
    transition: color var(--nt-duration-fast);
}

.nt-footer__bottom__links a:hover {
    color: var(--nt-text-dim);
}

/* "Built by Miguel" Badge */
.nt-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nt-space-2);
    padding: var(--nt-space-1-5) var(--nt-space-3);
    background: var(--nt-bg-surface);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-full);
    font-size: var(--nt-text-2xs);
    color: var(--nt-text-muted);
    transition: all var(--nt-duration-normal);
}

.nt-footer__badge:hover {
    border-color: var(--nt-border-hover);
    color: var(--nt-cyan);
}

@media (max-width: 768px) {
    .nt-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--nt-space-8);
    }

    .nt-footer__brand {
        grid-column: 1 / -1;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .nt-footer__grid {
        grid-template-columns: 1fr;
    }

    .nt-footer__bottom {
        flex-direction: column;
        gap: var(--nt-space-4);
        text-align: center;
    }
}


/* ================================================================
   SECTION 19: STICKY CTA
   ================================================================ */

.nt-sticky-cta {
    position: fixed;
    bottom: var(--nt-space-6);
    right: var(--nt-space-6);
    z-index: var(--nt-z-sticky);
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition:
        opacity var(--nt-duration-normal) var(--nt-ease-out),
        transform var(--nt-duration-normal) var(--nt-ease-spring);
    pointer-events: none;
}

.nt-sticky-cta--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.nt-sticky-cta--hidden {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
}

.nt-sticky-cta__btn {
    box-shadow: var(--nt-shadow-xl), var(--nt-shadow-glow-cyan-strong);
    animation: nt-pulseCyan 3s ease infinite;
}

@media (max-width: 640px) {
    .nt-sticky-cta {
        bottom: var(--nt-space-4);
        right: var(--nt-space-4);
        left: var(--nt-space-4);
    }

    .nt-sticky-cta__btn {
        width: 100%;
    }
}


/* ================================================================
   SECTION 20: FORMS
   ================================================================ */

/* Text Input */
.nt-input {
    width: 100%;
    padding: var(--nt-space-3) var(--nt-space-4);
    background: var(--nt-bg-input);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-md);
    color: var(--nt-text);
    font-family: var(--nt-font-body);
    font-size: var(--nt-text-base);
    line-height: var(--nt-leading-normal);
    transition:
        border-color var(--nt-duration-normal) var(--nt-ease-default),
        box-shadow var(--nt-duration-normal) var(--nt-ease-default);
    outline: none;
}

.nt-input:focus {
    border-color: var(--nt-cyan);
    box-shadow: 0 0 0 3px var(--nt-cyan-glow);
}

.nt-input::placeholder {
    color: var(--nt-text-muted);
}

.nt-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Error & Success States */
.nt-input--error {
    border-color: var(--nt-border-error);
}

.nt-input--error:focus {
    border-color: var(--nt-red);
    box-shadow: 0 0 0 3px var(--nt-red-glow);
}

.nt-input--success {
    border-color: var(--nt-border-success);
}

.nt-input--success:focus {
    border-color: var(--nt-green);
    box-shadow: 0 0 0 3px var(--nt-green-glow);
}

/* Input Sizes */
.nt-input--lg {
    padding: var(--nt-space-4) var(--nt-space-5);
    font-size: var(--nt-text-lg);
}

.nt-input--sm {
    padding: var(--nt-space-2) var(--nt-space-3);
    font-size: var(--nt-text-sm);
}

/* Textarea */
.nt-textarea {
    width: 100%;
    padding: var(--nt-space-3) var(--nt-space-4);
    background: var(--nt-bg-input);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-md);
    color: var(--nt-text);
    font-family: var(--nt-font-body);
    font-size: var(--nt-text-base);
    line-height: var(--nt-leading-relaxed);
    resize: vertical;
    min-height: 120px;
    transition:
        border-color var(--nt-duration-normal),
        box-shadow var(--nt-duration-normal);
    outline: none;
}

.nt-textarea:focus {
    border-color: var(--nt-cyan);
    box-shadow: 0 0 0 3px var(--nt-cyan-glow);
}

.nt-textarea::placeholder {
    color: var(--nt-text-muted);
}

/* Select */
.nt-select {
    width: 100%;
    padding: var(--nt-space-3) var(--nt-space-4);
    padding-right: var(--nt-space-10);
    background: var(--nt-bg-input);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-md);
    color: var(--nt-text);
    font-family: var(--nt-font-body);
    font-size: var(--nt-text-base);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888aa' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition:
        border-color var(--nt-duration-normal),
        box-shadow var(--nt-duration-normal);
    outline: none;
}

.nt-select:focus {
    border-color: var(--nt-cyan);
    box-shadow: 0 0 0 3px var(--nt-cyan-glow);
}

/* Checkbox */
.nt-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--nt-space-2);
    cursor: pointer;
    font-size: var(--nt-text-sm);
    color: var(--nt-text-dim);
    user-select: none;
}

.nt-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--nt-border);
    border-radius: var(--nt-radius-sm);
    background: var(--nt-bg-input);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition:
        background var(--nt-duration-fast),
        border-color var(--nt-duration-fast);
}

.nt-checkbox input[type="checkbox"]:checked {
    background: var(--nt-cyan);
    border-color: var(--nt-cyan);
}

.nt-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid #0a0a0f;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.nt-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--nt-cyan);
    outline-offset: 2px;
}

/* Radio */
.nt-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--nt-space-2);
    cursor: pointer;
    font-size: var(--nt-text-sm);
    color: var(--nt-text-dim);
    user-select: none;
}

.nt-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--nt-border);
    border-radius: var(--nt-radius-full);
    background: var(--nt-bg-input);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition:
        background var(--nt-duration-fast),
        border-color var(--nt-duration-fast);
}

.nt-radio input[type="radio"]:checked {
    border-color: var(--nt-cyan);
}

.nt-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: var(--nt-radius-full);
    background: var(--nt-cyan);
}

.nt-radio input[type="radio"]:focus-visible {
    outline: 2px solid var(--nt-cyan);
    outline-offset: 2px;
}

/* Toggle Switch */
.nt-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--nt-space-2);
    cursor: pointer;
    user-select: none;
}

.nt-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nt-toggle__track {
    width: 44px;
    height: 24px;
    background: var(--nt-bg-surface);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-full);
    position: relative;
    transition:
        background var(--nt-duration-normal),
        border-color var(--nt-duration-normal);
    flex-shrink: 0;
}

.nt-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--nt-text-muted);
    border-radius: var(--nt-radius-full);
    transition: all var(--nt-duration-normal) var(--nt-ease-spring);
}

.nt-toggle input:checked + .nt-toggle__track {
    background: var(--nt-cyan-glow);
    border-color: var(--nt-cyan);
}

.nt-toggle input:checked + .nt-toggle__track::after {
    transform: translateX(20px);
    background: var(--nt-cyan);
    box-shadow: 0 0 10px var(--nt-cyan-glow);
}

.nt-toggle input:focus-visible + .nt-toggle__track {
    outline: 2px solid var(--nt-cyan);
    outline-offset: 2px;
}

.nt-toggle__label {
    font-size: var(--nt-text-sm);
    color: var(--nt-text-dim);
}

/* Input Group */
.nt-input-group {
    display: flex;
    gap: 0;
}

.nt-input-group .nt-input {
    border-radius: var(--nt-radius-md) 0 0 var(--nt-radius-md);
    border-right: none;
}

.nt-input-group .nt-btn {
    border-radius: 0 var(--nt-radius-md) var(--nt-radius-md) 0;
}

/* Floating Label */
.nt-float-label {
    position: relative;
}

.nt-float-label .nt-input {
    padding-top: var(--nt-space-5);
    padding-bottom: var(--nt-space-1-5);
}

.nt-float-label label {
    position: absolute;
    top: 50%;
    left: var(--nt-space-4);
    transform: translateY(-50%);
    font-size: var(--nt-text-base);
    color: var(--nt-text-muted);
    pointer-events: none;
    transition: all var(--nt-duration-normal) var(--nt-ease-out);
    transform-origin: left top;
}

.nt-float-label .nt-input:focus ~ label,
.nt-float-label .nt-input:not(:placeholder-shown) ~ label {
    top: var(--nt-space-1-5);
    transform: translateY(0) scale(0.75);
    color: var(--nt-cyan);
}

/* Form Error/Help Text */
.nt-form-error {
    font-size: var(--nt-text-xs);
    color: var(--nt-red);
    margin-top: var(--nt-space-1);
}

.nt-form-help {
    font-size: var(--nt-text-xs);
    color: var(--nt-text-muted);
    margin-top: var(--nt-space-1);
}

/* Form Group */
.nt-form-group {
    margin-bottom: var(--nt-space-5);
}

.nt-form-group label {
    display: block;
    font-size: var(--nt-text-sm);
    font-weight: var(--nt-weight-medium);
    color: var(--nt-text);
    margin-bottom: var(--nt-space-2);
}


/* ================================================================
   SECTION 21: BADGES & TAGS
   ================================================================ */

/* Badge */
.nt-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nt-space-1);
    padding: var(--nt-space-1) var(--nt-space-3);
    font-size: var(--nt-text-2xs);
    font-weight: var(--nt-weight-semibold);
    letter-spacing: var(--nt-tracking-wide);
    text-transform: uppercase;
    border-radius: var(--nt-radius-full);
    white-space: nowrap;
    line-height: var(--nt-leading-normal);
}

.nt-badge--cyan {
    background: var(--nt-cyan-glow);
    color: var(--nt-cyan);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.nt-badge--violet {
    background: var(--nt-violet-glow);
    color: var(--nt-violet);
    border: 1px solid rgba(123, 97, 255, 0.2);
}

.nt-badge--green {
    background: var(--nt-green-glow);
    color: var(--nt-green);
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.nt-badge--orange {
    background: var(--nt-orange-glow);
    color: var(--nt-orange);
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.nt-badge--red {
    background: var(--nt-red-glow);
    color: var(--nt-red);
    border: 1px solid rgba(255, 71, 87, 0.2);
}

.nt-badge--outline {
    background: transparent;
    border: 1px solid var(--nt-border);
    color: var(--nt-text-dim);
}

.nt-badge--solid-cyan {
    background: var(--nt-cyan);
    color: #0a0a0f;
    border: none;
}

.nt-badge--solid-green {
    background: var(--nt-green);
    color: #0a0a0f;
    border: none;
}

/* Badge Sizes */
.nt-badge--lg {
    padding: var(--nt-space-1-5) var(--nt-space-4);
    font-size: var(--nt-text-xs);
}

.nt-badge--sm {
    padding: 1px var(--nt-space-2);
    font-size: 0.625rem;
}

/* Badge with Dot */
.nt-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--nt-radius-full);
    background: currentColor;
}

/* Tags */
.nt-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--nt-space-1);
    padding: var(--nt-space-1) var(--nt-space-3);
    background: var(--nt-bg-surface);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-full);
    font-size: var(--nt-text-xs);
    color: var(--nt-text-dim);
    transition: all var(--nt-duration-fast);
    cursor: default;
}

.nt-tag:hover {
    border-color: var(--nt-border-hover);
    color: var(--nt-text);
}

.nt-tag--removable {
    cursor: pointer;
    padding-right: var(--nt-space-1);
}

.nt-tag__remove {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nt-radius-full);
    font-size: 12px;
    color: var(--nt-text-muted);
    transition: all var(--nt-duration-fast);
    cursor: pointer;
}

.nt-tag__remove:hover {
    background: var(--nt-red-glow);
    color: var(--nt-red);
}


/* ================================================================
   SECTION 22: TOOLTIPS
   ================================================================ */

.nt-tooltip {
    position: relative;
    display: inline-block;
}

.nt-tooltip__content {
    position: absolute;
    z-index: var(--nt-z-tooltip);
    padding: var(--nt-space-2) var(--nt-space-3);
    background: var(--nt-bg-tooltip);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-md);
    font-size: var(--nt-text-xs);
    color: var(--nt-text);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition:
        opacity var(--nt-duration-normal) var(--nt-ease-out),
        transform var(--nt-duration-normal) var(--nt-ease-out);
    box-shadow: var(--nt-shadow-md);
}

/* Top (Default) */
.nt-tooltip--top .nt-tooltip__content,
.nt-tooltip .nt-tooltip__content {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

.nt-tooltip:hover .nt-tooltip__content,
.nt-tooltip--top:hover .nt-tooltip__content {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Bottom */
.nt-tooltip--bottom .nt-tooltip__content {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}

.nt-tooltip--bottom:hover .nt-tooltip__content {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Left */
.nt-tooltip--left .nt-tooltip__content {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

.nt-tooltip--left:hover .nt-tooltip__content {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Right */
.nt-tooltip--right .nt-tooltip__content {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}

.nt-tooltip--right:hover .nt-tooltip__content {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* data-tooltip attribute approach */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: var(--nt-space-2) var(--nt-space-3);
    background: var(--nt-bg-tooltip);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-md);
    font-size: var(--nt-text-xs);
    color: var(--nt-text);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all var(--nt-duration-normal) var(--nt-ease-out);
    z-index: var(--nt-z-tooltip);
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ================================================================
   SECTION 23: TOAST NOTIFICATIONS
   ================================================================ */

.nt-toast__container {
    position: fixed;
    top: var(--nt-space-6);
    right: var(--nt-space-6);
    z-index: var(--nt-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--nt-space-3);
    max-width: 400px;
    width: 100%;
    pointer-events: none;
}

.nt-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--nt-space-3);
    padding: var(--nt-space-4) var(--nt-space-5);
    background: var(--nt-bg-elevated);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-lg);
    box-shadow: var(--nt-shadow-xl);
    pointer-events: auto;
    animation: nt-slideInRight 0.4s var(--nt-ease-spring);
    position: relative;
    overflow: hidden;
}

.nt-toast--exiting {
    animation: nt-slideOutRight 0.3s var(--nt-ease-in) forwards;
}

.nt-toast__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.nt-toast__body {
    flex: 1;
    min-width: 0;
}

.nt-toast__title {
    font-size: var(--nt-text-sm);
    font-weight: var(--nt-weight-semibold);
    color: var(--nt-text);
    margin-bottom: var(--nt-space-0-5);
}

.nt-toast__message {
    font-size: var(--nt-text-xs);
    color: var(--nt-text-dim);
    line-height: var(--nt-leading-normal);
}

.nt-toast__close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nt-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--nt-radius-sm);
    transition: all var(--nt-duration-fast);
}

.nt-toast__close:hover {
    color: var(--nt-text);
    background: var(--nt-bg-surface);
}

/* Progress bar at bottom */
.nt-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 var(--nt-radius-lg) var(--nt-radius-lg);
    animation: nt-progressShrink 5s linear forwards;
}

/* Toast Variants */
.nt-toast--success {
    border-left: 3px solid var(--nt-green);
}

.nt-toast--success .nt-toast__icon { color: var(--nt-green); }
.nt-toast--success .nt-toast__progress { background: var(--nt-green); }

.nt-toast--error {
    border-left: 3px solid var(--nt-red);
}

.nt-toast--error .nt-toast__icon { color: var(--nt-red); }
.nt-toast--error .nt-toast__progress { background: var(--nt-red); }

.nt-toast--warning {
    border-left: 3px solid var(--nt-orange);
}

.nt-toast--warning .nt-toast__icon { color: var(--nt-orange); }
.nt-toast--warning .nt-toast__progress { background: var(--nt-orange); }

.nt-toast--info {
    border-left: 3px solid var(--nt-cyan);
}

.nt-toast--info .nt-toast__icon { color: var(--nt-cyan); }
.nt-toast--info .nt-toast__progress { background: var(--nt-cyan); }

@media (max-width: 480px) {
    .nt-toast__container {
        top: var(--nt-space-4);
        right: var(--nt-space-4);
        left: var(--nt-space-4);
        max-width: none;
    }
}


/* ================================================================
   SECTION 24: PROGRESS COMPONENTS
   ================================================================ */

/* Horizontal Progress Bar */
.nt-progress {
    width: 100%;
    height: 8px;
    background: var(--nt-bg-surface);
    border-radius: var(--nt-radius-full);
    overflow: hidden;
}

.nt-progress__bar {
    height: 100%;
    background: var(--nt-gradient-brand);
    border-radius: var(--nt-radius-full);
    transition: width 0.6s var(--nt-ease-out);
    position: relative;
}

.nt-progress__bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: nt-shimmer 2s linear infinite;
}

.nt-progress--sm { height: 4px; }
.nt-progress--lg { height: 12px; }

.nt-progress--cyan .nt-progress__bar { background: var(--nt-gradient-cyan); }
.nt-progress--green .nt-progress__bar { background: var(--nt-gradient-green); }
.nt-progress--violet .nt-progress__bar { background: var(--nt-gradient-violet); }

/* Circular Progress Ring (SVG) */
.nt-progress-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nt-progress-ring svg {
    transform: rotate(-90deg);
}

.nt-progress-ring__bg {
    fill: none;
    stroke: var(--nt-bg-surface);
    stroke-width: 8;
}

.nt-progress-ring__fill {
    fill: none;
    stroke: var(--nt-cyan);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.5s var(--nt-ease-out);
}

.nt-progress-ring__value {
    position: absolute;
    font-family: var(--nt-font-mono);
    font-weight: var(--nt-weight-black);
    color: var(--nt-text);
}

/* Lighthouse Score Ring */
.nt-lighthouse-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.nt-lighthouse-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.nt-lighthouse-ring__bg {
    fill: none;
    stroke: var(--nt-bg-surface);
    stroke-width: 8;
}

.nt-lighthouse-ring__fill {
    fill: none;
    stroke: var(--nt-green);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 339.292;
    transition: stroke-dashoffset 2s var(--nt-ease-out);
}

.nt-lighthouse-ring__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--nt-text-3xl);
    font-weight: var(--nt-weight-black);
    color: var(--nt-green);
}


/* ================================================================
   SECTION 25: LOADING STATES
   ================================================================ */

/* Skeleton */
.nt-skeleton {
    background: linear-gradient(
        90deg,
        var(--nt-bg-elevated) 25%,
        var(--nt-bg-surface) 50%,
        var(--nt-bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: nt-shimmer 1.5s ease infinite;
    border-radius: var(--nt-radius-md);
}

.nt-skeleton--text {
    height: 1em;
    width: 100%;
    margin-bottom: var(--nt-space-2);
}

.nt-skeleton--text:last-child {
    width: 60%;
}

.nt-skeleton--circle {
    border-radius: var(--nt-radius-full);
}

.nt-skeleton--rect {
    border-radius: var(--nt-radius-lg);
}

.nt-skeleton--heading {
    height: 2em;
    width: 40%;
    margin-bottom: var(--nt-space-4);
}

.nt-skeleton--card {
    height: 200px;
    border-radius: var(--nt-radius-lg);
}

/* Spinner */
.nt-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--nt-border);
    border-top-color: var(--nt-cyan);
    border-radius: var(--nt-radius-full);
    animation: nt-rotate 0.7s linear infinite;
}

.nt-spinner--sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.nt-spinner--lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

.nt-spinner--white {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
}

/* Shimmer Effect */
.nt-shimmer {
    position: relative;
    overflow: hidden;
}

.nt-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    animation: nt-shimmer 2s linear infinite;
}

/* Page Loader */
.nt-loader {
    position: fixed;
    inset: 0;
    z-index: var(--nt-z-max);
    background: var(--nt-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--nt-space-4);
    transition: opacity var(--nt-duration-slow);
}

.nt-loader--hidden {
    opacity: 0;
    pointer-events: none;
}

.nt-loader__bar {
    width: 200px;
    height: 3px;
    background: var(--nt-bg-surface);
    border-radius: var(--nt-radius-full);
    overflow: hidden;
}

.nt-loader__bar__fill {
    height: 100%;
    background: var(--nt-gradient-brand);
    border-radius: var(--nt-radius-full);
    animation: nt-progressFill 2s var(--nt-ease-out) infinite;
}


/* ================================================================
   SECTION 26: MODALS
   ================================================================ */

.nt-modal {
    position: fixed;
    inset: 0;
    z-index: var(--nt-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--nt-space-6);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--nt-duration-normal),
        visibility var(--nt-duration-normal);
}

.nt-modal--open {
    opacity: 1;
    visibility: visible;
}

.nt-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nt-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    background: var(--nt-bg-elevated);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-xl);
    box-shadow: var(--nt-shadow-2xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: transform var(--nt-duration-normal) var(--nt-ease-spring);
}

.nt-modal--open .nt-modal__dialog {
    transform: scale(1) translateY(0);
}

.nt-modal__dialog--lg {
    max-width: 800px;
}

.nt-modal__dialog--sm {
    max-width: 400px;
}

.nt-modal__dialog--full {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
}

.nt-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--nt-space-5) var(--nt-space-6);
    border-bottom: 1px solid var(--nt-border);
    flex-shrink: 0;
}

.nt-modal__header__title {
    font-size: var(--nt-text-lg);
    font-weight: var(--nt-weight-semibold);
    color: var(--nt-text);
}

.nt-modal__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nt-radius-md);
    color: var(--nt-text-muted);
    cursor: pointer;
    transition: all var(--nt-duration-fast);
}

.nt-modal__close:hover {
    background: var(--nt-bg-surface);
    color: var(--nt-text);
}

.nt-modal__body {
    padding: var(--nt-space-6);
    overflow-y: auto;
    flex: 1;
}

.nt-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--nt-space-3);
    padding: var(--nt-space-4) var(--nt-space-6);
    border-top: 1px solid var(--nt-border);
    flex-shrink: 0;
}


/* ================================================================
   SECTION 27: TABS
   ================================================================ */

.nt-tabs {
    width: 100%;
}

.nt-tabs__list {
    display: flex;
    border-bottom: 1px solid var(--nt-border);
    gap: 0;
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nt-tabs__list::-webkit-scrollbar {
    display: none;
}

.nt-tabs__tab {
    padding: var(--nt-space-3) var(--nt-space-5);
    font-size: var(--nt-text-sm);
    font-weight: var(--nt-weight-medium);
    color: var(--nt-text-muted);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color var(--nt-duration-fast);
    border: none;
    background: none;
}

.nt-tabs__tab:hover {
    color: var(--nt-text-dim);
}

.nt-tabs__tab--active {
    color: var(--nt-cyan);
}

/* Sliding Underline Indicator */
.nt-tabs__tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--nt-cyan);
    transform: scaleX(0);
    transition: transform var(--nt-duration-normal) var(--nt-ease-out);
}

.nt-tabs__tab--active::after {
    transform: scaleX(1);
}

.nt-tabs__indicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: var(--nt-cyan);
    transition:
        left var(--nt-duration-normal) var(--nt-ease-spring),
        width var(--nt-duration-normal) var(--nt-ease-spring);
    box-shadow: 0 0 10px var(--nt-cyan-glow);
}

.nt-tabs__panel {
    display: none;
    padding: var(--nt-space-6) 0;
    animation: nt-fadeIn 0.3s var(--nt-ease-out);
}

.nt-tabs__panel--active {
    display: block;
}

/* Pill Style Tabs */
.nt-tabs--pills .nt-tabs__list {
    border-bottom: none;
    gap: var(--nt-space-1);
    background: var(--nt-bg-surface);
    border-radius: var(--nt-radius-lg);
    padding: var(--nt-space-1);
}

.nt-tabs--pills .nt-tabs__tab {
    border-radius: var(--nt-radius-md);
    padding: var(--nt-space-2) var(--nt-space-4);
}

.nt-tabs--pills .nt-tabs__tab::after {
    display: none;
}

.nt-tabs--pills .nt-tabs__tab--active {
    background: var(--nt-bg-elevated);
    color: var(--nt-text);
    box-shadow: var(--nt-shadow-sm);
}


/* ================================================================
   SECTION 28: CODE BLOCKS
   ================================================================ */

/* Inline Code */
.nt-code {
    font-family: var(--nt-font-mono);
    font-size: 0.875em;
    background: var(--nt-bg-surface);
    padding: 0.15em 0.4em;
    border-radius: var(--nt-radius-sm);
    color: var(--nt-cyan);
    border: 1px solid var(--nt-border);
}

/* Code Block */
.nt-code-block {
    position: relative;
    background: var(--nt-bg-code);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-lg);
    overflow: hidden;
    font-family: var(--nt-font-mono);
    font-size: var(--nt-text-mono);
}

.nt-code-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--nt-space-2) var(--nt-space-4);
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--nt-border);
}

.nt-code-block__filename {
    font-size: var(--nt-text-xs);
    color: var(--nt-text-muted);
}

.nt-code-block__copy {
    display: flex;
    align-items: center;
    gap: var(--nt-space-1);
    padding: var(--nt-space-1) var(--nt-space-2);
    font-size: var(--nt-text-2xs);
    color: var(--nt-text-muted);
    border: 1px solid var(--nt-border);
    border-radius: var(--nt-radius-sm);
    cursor: pointer;
    transition: all var(--nt-duration-fast);
    background: transparent;
}

.nt-code-block__copy:hover {
    color: var(--nt-text);
    border-color: var(--nt-border-hover);
}

.nt-code-block__copy--copied {
    color: var(--nt-green);
    border-color: var(--nt-green);
}

.nt-code-block__body {
    display: flex;
    overflow-x: auto;
}

.nt-code-block__line-numbers {
    padding: var(--nt-space-4) var(--nt-space-3);
    text-align: right;
    color: var(--nt-text-faint);
    user-select: none;
    border-right: 1px solid var(--nt-border);
    flex-shrink: 0;
    line-height: var(--nt-leading-loose);
}

.nt-code-block__code {
    padding: var(--nt-space-4);
    flex: 1;
    line-height: var(--nt-leading-loose);
    color: var(--nt-text-dim);
    overflow-x: auto;
    white-space: pre;
}

/* Syntax Highlighting */
.nt-code-block .token-keyword { color: var(--nt-violet); }
.nt-code-block .token-string { color: var(--nt-green); }
.nt-code-block .token-number { color: var(--nt-orange); }
.nt-code-block .token-comment { color: var(--nt-text-faint); font-style: italic; }
.nt-code-block .token-function { color: var(--nt-cyan); }
.nt-code-block .token-operator { color: var(--nt-text-dim); }
.nt-code-block .token-variable { color: var(--nt-red); }
.nt-code-block .token-tag { color: var(--nt-cyan); }
.nt-code-block .token-attribute { color: var(--nt-violet); }
.nt-code-block .token-value { color: var(--nt-green); }


/* ================================================================
   SECTION 29: DIVIDERS & SEPARATORS
   ================================================================ */

.nt-divider {
    height: 1px;
    background: var(--nt-border);
    margin: var(--nt-section-gap) 0;
    border: none;
}

.nt-divider--sm { margin: var(--nt-space-4) 0; }
.nt-divider--md { margin: var(--nt-space-8) 0; }
.nt-divider--lg { margin: var(--nt-space-16) 0; }

.nt-divider--gradient {
    height: 1px;
    background: var(--nt-gradient-brand);
    opacity: 0.3;
    margin: var(--nt-section-gap) 0;
    border: none;
}

.nt-divider--glow {
    height: 1px;
    background: var(--nt-cyan);
    opacity: 0.3;
    margin: var(--nt-section-gap) 0;
    border: none;
    box-shadow: 0 0 20px var(--nt-cyan-glow);
}

.nt-divider--wave {
    width: 100%;
    height: 80px;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.nt-divider--wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

.nt-divider--diagonal {
    width: 100%;
    height: 100px;
    clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
    background: var(--nt-bg-elevated);
}

.nt-divider--dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nt-space-3);
    margin: var(--nt-section-gap) 0;
}

.nt-divider--dots::before,
.nt-divider--dots::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--nt-border);
}

.nt-divider--dots span {
    display: flex;
    gap: var(--nt-space-2);
}

.nt-divider--dots span::before,
.nt-divider--dots span::after,
.nt-divider--dots span {
    color: var(--nt-text-faint);
}


/* ================================================================
   SECTION 30: IMAGE & MEDIA
   ================================================================ */

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

.nt-img--rounded {
    border-radius: var(--nt-radius-lg);
}

.nt-img--circle {
    border-radius: var(--nt-radius-full);
}

.nt-img--border {
    border: 1px solid var(--nt-border);
}

.nt-img--shadow {
    box-shadow: var(--nt-shadow-lg);
}

/* Avatar */
.nt-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nt-radius-full);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--nt-bg-surface);
    color: var(--nt-text-dim);
    font-weight: var(--nt-weight-semibold);
}

.nt-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nt-avatar--sm { width: 32px; height: 32px; font-size: var(--nt-text-xs); }
.nt-avatar--md { width: 40px; height: 40px; font-size: var(--nt-text-sm); }
.nt-avatar--lg { width: 56px; height: 56px; font-size: var(--nt-text-base); }
.nt-avatar--xl { width: 80px; height: 80px; font-size: var(--nt-text-xl); }

.nt-avatar--bordered {
    border: 2px solid var(--nt-border);
}

/* Avatar Group */
.nt-avatar-group {
    display: flex;
}

.nt-avatar-group .nt-avatar {
    margin-left: -8px;
    border: 2px solid var(--nt-bg);
}

.nt-avatar-group .nt-avatar:first-child {
    margin-left: 0;
}

/* Video Container */
.nt-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--nt-radius-lg);
    overflow: hidden;
    background: var(--nt-bg-code);
}

.nt-video iframe,
.nt-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Image Gallery */
.nt-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--nt-space-3);
}

.nt-gallery__item {
    border-radius: var(--nt-radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--nt-duration-normal) var(--nt-ease-default);
}

.nt-gallery__item:hover {
    transform: scale(1.02);
}

.nt-gallery__item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}


/* ================================================================
   SECTION 31: KEYFRAME ANIMATIONS
   ================================================================ */

/* ── Fade Animations ─────────────────────────────────────── */

@keyframes nt-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nt-fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes nt-fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nt-fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nt-fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes nt-fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ── Scale Animations ────────────────────────────────────── */

@keyframes nt-scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes nt-scaleOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
}

/* ── Slide Animations ────────────────────────────────────── */

@keyframes nt-slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes nt-slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes nt-slideInUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes nt-slideInDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes nt-slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes nt-slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}

/* ── Pulse Animations ────────────────────────────────────── */

@keyframes nt-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes nt-pulseCyan {
    0%, 100% { box-shadow: 0 0 20px var(--nt-cyan-glow); }
    50% { box-shadow: 0 0 40px var(--nt-cyan-strong); }
}

@keyframes nt-pulseViolet {
    0%, 100% { box-shadow: 0 0 20px var(--nt-violet-glow); }
    50% { box-shadow: 0 0 40px var(--nt-violet-strong); }
}

@keyframes nt-pulseScale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ── Float Animation ─────────────────────────────────────── */

@keyframes nt-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ── Rotate Animations ───────────────────────────────────── */

@keyframes nt-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes nt-rotateIn {
    from { opacity: 0; transform: rotate(-90deg) scale(0.8); }
    to { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* ── Bounce Animations ───────────────────────────────────── */

@keyframes nt-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-8px); }
}

@keyframes nt-bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes nt-bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* ── Shake Animation ─────────────────────────────────────── */

@keyframes nt-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* ── Gradient Animations ─────────────────────────────────── */

@keyframes nt-gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes nt-gradientText {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* ── Glow Animations ─────────────────────────────────────── */

@keyframes nt-glow {
    0%, 100% { box-shadow: 0 0 5px var(--nt-cyan-glow); }
    50% { box-shadow: 0 0 20px var(--nt-cyan-strong), 0 0 40px var(--nt-cyan-glow); }
}

@keyframes nt-glowPulse {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 10px var(--nt-cyan-glow)); }
    50% { filter: brightness(1.2) drop-shadow(0 0 25px var(--nt-cyan-strong)); }
}

/* ── Typewriter & Cursor ─────────────────────────────────── */

@keyframes nt-typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes nt-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ── Shimmer & Loading ───────────────────────────────────── */

@keyframes nt-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes nt-progressFill {
    0% { width: 0%; }
    50% { width: 80%; }
    100% { width: 100%; }
}

@keyframes nt-progressShrink {
    from { width: 100%; }
    to { width: 0%; }
}

/* ── Ripple ──────────────────────────────────────────────── */

@keyframes nt-ripple {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(4); opacity: 0; }
}

/* ── Border Morphing ─────────────────────────────────────── */

@keyframes nt-morphBorder {
    0% { border-radius: 12px 48px 12px 48px; }
    25% { border-radius: 48px 12px 48px 12px; }
    50% { border-radius: 12px 48px 12px 48px; }
    75% { border-radius: 48px 12px 48px 12px; }
    100% { border-radius: 12px 48px 12px 48px; }
}

/* ── Aurora / Wave ───────────────────────────────────────── */

@keyframes nt-aurora {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 0%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 100%; }
    100% { background-position: 0% 50%; }
}

@keyframes nt-wave {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-5px) translateY(3px); }
    50% { transform: translateX(0) translateY(-3px); }
    75% { transform: translateX(5px) translateY(3px); }
    100% { transform: translateX(0) translateY(0); }
}

/* ── Orbit ───────────────────────────────────────────────── */

@keyframes nt-orbitSlow {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

@keyframes nt-orbitFast {
    from { transform: rotate(0deg) translateX(40px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}

/* ── Breathe ─────────────────────────────────────────────── */

@keyframes nt-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* ── Glitch ──────────────────────────────────────────────── */

@keyframes nt-glitch {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

@keyframes nt-glitchText {
    0%, 100% {
        text-shadow: 2px 0 var(--nt-cyan), -2px 0 var(--nt-red);
        transform: translate(0);
    }
    25% {
        text-shadow: -2px 0 var(--nt-cyan), 2px 0 var(--nt-red);
        transform: translate(-1px, 1px);
    }
    50% {
        text-shadow: 2px 0 var(--nt-red), -2px 0 var(--nt-cyan);
        transform: translate(1px, -1px);
    }
    75% {
        text-shadow: -1px 0 var(--nt-cyan), 1px 0 var(--nt-red);
        transform: translate(-1px, -1px);
    }
}

/* ── Neon Flicker ────────────────────────────────────────── */

@keyframes nt-neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 7px var(--nt-cyan-glow),
            0 0 10px var(--nt-cyan-glow),
            0 0 21px var(--nt-cyan-glow),
            0 0 42px var(--nt-cyan),
            0 0 82px var(--nt-cyan);
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* ── Matrix Rain ─────────────────────────────────────────── */

@keyframes nt-matrixRain {
    0% { transform: translateY(-100%); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* ── Particle Drift ──────────────────────────────────────── */

@keyframes nt-particleDrift {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(100px, -200px) rotate(360deg); opacity: 0; }
}

/* ── Magnetic Pull ───────────────────────────────────────── */

@keyframes nt-magneticPull {
    0% { transform: translate(0, 0); }
    25% { transform: translate(2px, -2px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, -1px); }
    100% { transform: translate(0, 0); }
}

/* ── Confetti ────────────────────────────────────────────── */

@keyframes nt-confettiFall {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── Dash Offset (for SVG) ───────────────────────────────── */

@keyframes nt-dashOffset {
    to { stroke-dashoffset: 0; }
}

/* ── Count Up ────────────────────────────────────────────── */

@keyframes nt-countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   SECTION 32: SCROLL-TRIGGERED REVEAL ANIMATIONS
   ================================================================ */

.nt-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity var(--nt-duration-slow) var(--nt-ease-out),
        transform var(--nt-duration-slow) var(--nt-ease-out);
}

.nt-reveal--visible {
    opacity: 1;
    transform: translateY(0) !important;
}

.nt-reveal--up {
    opacity: 0;
    transform: translateY(40px);
}

.nt-reveal--down {
    opacity: 0;
    transform: translateY(-40px);
}

.nt-reveal--left {
    opacity: 0;
    transform: translateX(-40px);
}

.nt-reveal--right {
    opacity: 0;
    transform: translateX(40px);
}

.nt-reveal--scale {
    opacity: 0;
    transform: scale(0.9);
}

.nt-reveal--scale.nt-reveal--visible {
    transform: scale(1) !important;
}

.nt-reveal--rotate {
    opacity: 0;
    transform: rotate(-5deg) translateY(20px);
}

.nt-reveal--rotate.nt-reveal--visible {
    transform: rotate(0deg) translateY(0) !important;
}

/* Staggered Children */
.nt-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--nt-duration-slow) var(--nt-ease-out),
        transform var(--nt-duration-slow) var(--nt-ease-out);
}

.nt-stagger--visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.nt-stagger--visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.nt-stagger--visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.nt-stagger--visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.nt-stagger--visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.nt-stagger--visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.nt-stagger--visible > *:nth-child(7) { transition-delay: 480ms; opacity: 1; transform: translateY(0); }
.nt-stagger--visible > *:nth-child(8) { transition-delay: 560ms; opacity: 1; transform: translateY(0); }
.nt-stagger--visible > *:nth-child(9) { transition-delay: 640ms; opacity: 1; transform: translateY(0); }
.nt-stagger--visible > *:nth-child(10) { transition-delay: 720ms; opacity: 1; transform: translateY(0); }
.nt-stagger--visible > *:nth-child(11) { transition-delay: 800ms; opacity: 1; transform: translateY(0); }
.nt-stagger--visible > *:nth-child(12) { transition-delay: 880ms; opacity: 1; transform: translateY(0); }

/* Parallax */
.nt-parallax {
    will-change: transform;
    transition: transform 0.1s linear;
}


/* ================================================================
   SECTION 33: SPECIAL EFFECTS
   ================================================================ */

/* Glass Morphism */
.nt-glass {
    background: var(--nt-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--nt-border);
}

.nt-glass--heavy {
    background: var(--nt-bg-glass-heavy);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

/* Noise Texture Overlay */
.nt-noise::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* Film Grain */
.nt-grain::after {
    content: '';
    position: fixed;
    inset: -200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.04'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 512px 512px;
    pointer-events: none;
    z-index: var(--nt-z-max);
    opacity: 0.3;
    animation: nt-grainShift 0.5s steps(1) infinite;
}

@keyframes nt-grainShift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-5%, -5%); }
    50% { transform: translate(5%, 5%); }
    75% { transform: translate(-5%, 5%); }
    100% { transform: translate(5%, -5%); }
}

/* 3D Tilt (JS controlled via --rx, --ry) */
.nt-tilt {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform var(--nt-duration-normal) var(--nt-ease-out);
    transform-style: preserve-3d;
}

/* Cursor-Following Glow */
.nt-cursor-glow {
    position: relative;
}

.nt-cursor-glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(
        400px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        var(--nt-cyan-glow),
        transparent 40%
    );
    opacity: 0;
    transition: opacity var(--nt-duration-normal);
    pointer-events: none;
    z-index: -1;
}

.nt-cursor-glow:hover::before {
    opacity: 1;
}

/* Spotlight Effect */
.nt-spotlight {
    position: relative;
    overflow: hidden;
}

.nt-spotlight::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: var(--nt-radius-full);
    background: radial-gradient(circle, var(--nt-cyan-strong), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    left: var(--spot-x, 50%);
    top: var(--spot-y, 50%);
    transition: opacity var(--nt-duration-normal);
}

.nt-spotlight:hover::after {
    opacity: 0.5;
}

/* Cursor Trail Particle (managed by JS) */
.nt-cursor-particle {
    position: fixed;
    pointer-events: none;
    z-index: var(--nt-z-cursor);
    width: 4px;
    height: 4px;
    border-radius: var(--nt-radius-full);
    background: var(--nt-cyan);
    box-shadow: 0 0 6px var(--nt-cyan-strong);
    opacity: 0;
    transition: opacity 0.5s;
}

/* Gradient Mesh Background */
.nt-mesh-bg {
    background:
        radial-gradient(at 20% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
        radial-gradient(at 80% 70%, rgba(123, 97, 255, 0.08) 0%, transparent 50%),
        radial-gradient(at 50% 50%, rgba(255, 107, 53, 0.04) 0%, transparent 50%),
        var(--nt-bg);
}

/* Vignette */
.nt-vignette::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, var(--nt-bg) 100%);
    pointer-events: none;
}

/* Grid Overlay Pattern */
.nt-grid-pattern {
    position: relative;
}

.nt-grid-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

/* Dot Matrix Pattern */
.nt-dot-pattern {
    position: relative;
}

.nt-dot-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}


/* ================================================================
   SECTION 34: UTILITY CLASSES
   ================================================================ */

/* Display */
.nt-block { display: block; }
.nt-inline-block { display: inline-block; }
.nt-inline { display: inline; }
.nt-hidden { display: none; }
.nt-visible { visibility: visible; }
.nt-invisible { visibility: hidden; }

/* Text Alignment */
.nt-text-left { text-align: left; }
.nt-text-center { text-align: center; }
.nt-text-right { text-align: right; }

/* Background Colors */
.nt-bg-surface { background: var(--nt-bg-surface); }
.nt-bg-elevated { background: var(--nt-bg-elevated); }
.nt-bg-overlay { background: var(--nt-bg-overlay); }
.nt-bg-transparent { background: transparent; }

/* Spacing: Margin Top */
.nt-mt-0 { margin-top: 0; }
.nt-mt-1 { margin-top: var(--nt-space-1); }
.nt-mt-2 { margin-top: var(--nt-space-2); }
.nt-mt-3 { margin-top: var(--nt-space-3); }
.nt-mt-4 { margin-top: var(--nt-space-4); }
.nt-mt-5 { margin-top: var(--nt-space-5); }
.nt-mt-6 { margin-top: var(--nt-space-6); }
.nt-mt-8 { margin-top: var(--nt-space-8); }
.nt-mt-10 { margin-top: var(--nt-space-10); }
.nt-mt-12 { margin-top: var(--nt-space-12); }
.nt-mt-16 { margin-top: var(--nt-space-16); }
.nt-mt-20 { margin-top: var(--nt-space-20); }

/* Spacing: Margin Bottom */
.nt-mb-0 { margin-bottom: 0; }
.nt-mb-1 { margin-bottom: var(--nt-space-1); }
.nt-mb-2 { margin-bottom: var(--nt-space-2); }
.nt-mb-3 { margin-bottom: var(--nt-space-3); }
.nt-mb-4 { margin-bottom: var(--nt-space-4); }
.nt-mb-5 { margin-bottom: var(--nt-space-5); }
.nt-mb-6 { margin-bottom: var(--nt-space-6); }
.nt-mb-8 { margin-bottom: var(--nt-space-8); }
.nt-mb-10 { margin-bottom: var(--nt-space-10); }
.nt-mb-12 { margin-bottom: var(--nt-space-12); }
.nt-mb-16 { margin-bottom: var(--nt-space-16); }
.nt-mb-20 { margin-bottom: var(--nt-space-20); }

/* Spacing: Margin Left/Right */
.nt-ml-auto { margin-left: auto; }
.nt-mr-auto { margin-right: auto; }
.nt-mx-auto { margin-left: auto; margin-right: auto; }

/* Spacing: Padding */
.nt-p-0 { padding: 0; }
.nt-p-1 { padding: var(--nt-space-1); }
.nt-p-2 { padding: var(--nt-space-2); }
.nt-p-3 { padding: var(--nt-space-3); }
.nt-p-4 { padding: var(--nt-space-4); }
.nt-p-5 { padding: var(--nt-space-5); }
.nt-p-6 { padding: var(--nt-space-6); }
.nt-p-8 { padding: var(--nt-space-8); }
.nt-p-10 { padding: var(--nt-space-10); }
.nt-p-12 { padding: var(--nt-space-12); }
.nt-p-16 { padding: var(--nt-space-16); }

.nt-px-4 { padding-left: var(--nt-space-4); padding-right: var(--nt-space-4); }
.nt-px-6 { padding-left: var(--nt-space-6); padding-right: var(--nt-space-6); }
.nt-px-8 { padding-left: var(--nt-space-8); padding-right: var(--nt-space-8); }

.nt-py-4 { padding-top: var(--nt-space-4); padding-bottom: var(--nt-space-4); }
.nt-py-6 { padding-top: var(--nt-space-6); padding-bottom: var(--nt-space-6); }
.nt-py-8 { padding-top: var(--nt-space-8); padding-bottom: var(--nt-space-8); }
.nt-py-12 { padding-top: var(--nt-space-12); padding-bottom: var(--nt-space-12); }

/* Gap */
.nt-gap-1 { gap: var(--nt-space-1); }
.nt-gap-2 { gap: var(--nt-space-2); }
.nt-gap-3 { gap: var(--nt-space-3); }
.nt-gap-4 { gap: var(--nt-space-4); }
.nt-gap-5 { gap: var(--nt-space-5); }
.nt-gap-6 { gap: var(--nt-space-6); }
.nt-gap-8 { gap: var(--nt-space-8); }
.nt-gap-10 { gap: var(--nt-space-10); }
.nt-gap-12 { gap: var(--nt-space-12); }

/* Width */
.nt-w-full { width: 100%; }
.nt-w-half { width: 50%; }
.nt-w-auto { width: auto; }
.nt-max-w-sm { max-width: 24rem; }
.nt-max-w-md { max-width: 28rem; }
.nt-max-w-lg { max-width: 32rem; }
.nt-max-w-xl { max-width: 36rem; }
.nt-max-w-2xl { max-width: 42rem; }
.nt-max-w-3xl { max-width: 48rem; }
.nt-max-w-4xl { max-width: 56rem; }
.nt-max-w-full { max-width: 100%; }
.nt-max-w-none { max-width: none; }

/* Height */
.nt-h-full { height: 100%; }
.nt-h-screen { height: 100vh; }
.nt-h-auto { height: auto; }
.nt-min-h-screen { min-height: 100vh; }

/* Overflow */
.nt-overflow-hidden { overflow: hidden; }
.nt-overflow-auto { overflow: auto; }
.nt-overflow-x-auto { overflow-x: auto; }
.nt-overflow-y-auto { overflow-y: auto; }
.nt-overflow-visible { overflow: visible; }

/* Position */
.nt-relative { position: relative; }
.nt-absolute { position: absolute; }
.nt-fixed { position: fixed; }
.nt-sticky { position: sticky; top: 0; }

/* Inset */
.nt-inset-0 { inset: 0; }

/* Pointer & Events */
.nt-pointer { cursor: pointer; }
.nt-no-events { pointer-events: none; }
.nt-events-auto { pointer-events: auto; }

/* Text Selection */
.nt-no-select {
    user-select: none;
    -webkit-user-select: none;
}

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

/* Border Utilities */
.nt-border { border: 1px solid var(--nt-border); }
.nt-border-t { border-top: 1px solid var(--nt-border); }
.nt-border-b { border-bottom: 1px solid var(--nt-border); }
.nt-border-none { border: none; }

/* Border Radius */
.nt-rounded-sm { border-radius: var(--nt-radius-sm); }
.nt-rounded-md { border-radius: var(--nt-radius-md); }
.nt-rounded-lg { border-radius: var(--nt-radius-lg); }
.nt-rounded-xl { border-radius: var(--nt-radius-xl); }
.nt-rounded-2xl { border-radius: var(--nt-radius-2xl); }
.nt-rounded-full { border-radius: var(--nt-radius-full); }
.nt-rounded-none { border-radius: 0; }

/* Shadow */
.nt-shadow-sm { box-shadow: var(--nt-shadow-sm); }
.nt-shadow-md { box-shadow: var(--nt-shadow-md); }
.nt-shadow-lg { box-shadow: var(--nt-shadow-lg); }
.nt-shadow-xl { box-shadow: var(--nt-shadow-xl); }
.nt-shadow-none { box-shadow: none; }

/* Opacity */
.nt-opacity-0 { opacity: 0; }
.nt-opacity-25 { opacity: 0.25; }
.nt-opacity-50 { opacity: 0.5; }
.nt-opacity-75 { opacity: 0.75; }
.nt-opacity-100 { opacity: 1; }

/* Font Weight */
.nt-font-light { font-weight: var(--nt-weight-light); }
.nt-font-regular { font-weight: var(--nt-weight-regular); }
.nt-font-medium { font-weight: var(--nt-weight-medium); }
.nt-font-semibold { font-weight: var(--nt-weight-semibold); }
.nt-font-bold { font-weight: var(--nt-weight-bold); }
.nt-font-black { font-weight: var(--nt-weight-black); }

/* Font Size */
.nt-text-size-xs { font-size: var(--nt-text-xs); }
.nt-text-size-sm { font-size: var(--nt-text-sm); }
.nt-text-size-base { font-size: var(--nt-text-base); }
.nt-text-size-lg { font-size: var(--nt-text-lg); }
.nt-text-size-xl { font-size: var(--nt-text-xl); }
.nt-text-size-2xl { font-size: var(--nt-text-2xl); }
.nt-text-size-3xl { font-size: var(--nt-text-3xl); }

/* Line Height */
.nt-leading-tight { line-height: var(--nt-leading-tight); }
.nt-leading-normal { line-height: var(--nt-leading-normal); }
.nt-leading-relaxed { line-height: var(--nt-leading-relaxed); }

/* Letter Spacing */
.nt-tracking-tight { letter-spacing: var(--nt-tracking-tight); }
.nt-tracking-normal { letter-spacing: var(--nt-tracking-normal); }
.nt-tracking-wide { letter-spacing: var(--nt-tracking-wide); }
.nt-tracking-wider { letter-spacing: var(--nt-tracking-wider); }

/* Text Transform */
.nt-uppercase { text-transform: uppercase; }
.nt-lowercase { text-transform: lowercase; }
.nt-capitalize { text-transform: capitalize; }
.nt-normal-case { text-transform: none; }

/* Truncation */
.nt-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nt-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nt-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Z-Index */
.nt-z-0 { z-index: 0; }
.nt-z-10 { z-index: 10; }
.nt-z-20 { z-index: 20; }
.nt-z-30 { z-index: 30; }
.nt-z-40 { z-index: 40; }
.nt-z-50 { z-index: 50; }

/* Transition */
.nt-transition {
    transition: all var(--nt-duration-normal) var(--nt-ease-default);
}

.nt-transition-fast {
    transition: all var(--nt-duration-fast) var(--nt-ease-default);
}

.nt-transition-slow {
    transition: all var(--nt-duration-slow) var(--nt-ease-default);
}

.nt-transition-none {
    transition: none;
}

/* Animation helpers */
.nt-animate-pulse { animation: nt-pulse 2s ease-in-out infinite; }
.nt-animate-float { animation: nt-float 3s ease-in-out infinite; }
.nt-animate-glow { animation: nt-glow 2s ease-in-out infinite; }
.nt-animate-breathe { animation: nt-breathe 4s ease-in-out infinite; }
.nt-animate-bounce { animation: nt-bounce 1s ease infinite; }
.nt-animate-spin { animation: nt-rotate 1s linear infinite; }


/* ================================================================
   SECTION 35: ACCESSIBILITY
   ================================================================ */

/* Focus Visible */
:focus-visible {
    outline: 2px solid var(--nt-cyan);
    outline-offset: 2px;
}

/* Skip Link */
.nt-skip-link {
    position: absolute;
    top: -100%;
    left: var(--nt-space-4);
    padding: var(--nt-space-3) var(--nt-space-6);
    background: var(--nt-cyan);
    color: #0a0a0f;
    font-weight: var(--nt-weight-bold);
    border-radius: 0 0 var(--nt-radius-md) var(--nt-radius-md);
    z-index: var(--nt-z-max);
    transition: top var(--nt-duration-fast);
}

.nt-skip-link:focus {
    top: 0;
}

/* Reduced Motion */
@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;
    }

    .nt-reveal,
    .nt-reveal--up,
    .nt-reveal--down,
    .nt-reveal--left,
    .nt-reveal--right,
    .nt-reveal--scale,
    .nt-reveal--rotate {
        opacity: 1 !important;
        transform: none !important;
    }

    .nt-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* High Contrast */
@media (prefers-contrast: high) {
    :root {
        --nt-border: rgba(255, 255, 255, 0.2);
        --nt-text-dim: #b0b0c8;
        --nt-text-muted: #8080a0;
    }

    .nt-btn {
        border-width: 2px;
    }

    .nt-card,
    .nt-card--glass,
    .nt-card--feature,
    .nt-card--pricing {
        border-width: 2px;
    }
}

/* Selection Color */
::selection {
    background: var(--nt-cyan-strong);
    color: var(--nt-text);
}

::-moz-selection {
    background: var(--nt-cyan-strong);
    color: var(--nt-text);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--nt-bg-surface);
    border-radius: var(--nt-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--nt-text-muted);
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--nt-bg-surface) var(--nt-bg);
}

/* Backdrop Blur Utility */
.nt-backdrop-blur {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.nt-backdrop-blur--sm {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nt-backdrop-blur--lg {
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}


/* ================================================================
   SECTION 36: PRINT STYLES
   ================================================================ */

@media print {
    .nt-nav,
    .nt-footer,
    .nt-sticky-cta,
    .nt-palette,
    .nt-cursor-particle,
    .nt-toast__container,
    .nt-modal,
    canvas,
    .particle-canvas,
    .nt-hero__canvas-container,
    .nt-hero__scroll-indicator {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #000;
        page-break-after: avoid;
    }

    p {
        color: #333;
    }

    .nt-section,
    .nt-act {
        padding: 2rem 0;
        page-break-inside: avoid;
    }

    .nt-card,
    .nt-card--glass,
    .nt-card--feature,
    .nt-card--pricing {
        background: #fff;
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
    }

    .nt-gradient-text,
    .nt-gradient-text--animated {
        -webkit-text-fill-color: #000;
        background: none;
        color: #000;
    }

    .nt-btn {
        border: 1px solid #000;
        background: none;
        color: #000;
        box-shadow: none;
    }

    .nt-badge {
        border: 1px solid #ccc;
        background: #eee;
        color: #333;
    }
}


/* ================================================================
   SECTION 37: RESPONSIVE BREAKPOINT OVERRIDES
   ================================================================ */

/* Small (640px) */
@media (min-width: 640px) {
    .sm\:nt-flex { display: flex; }
    .sm\:nt-hidden { display: none; }
    .sm\:nt-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .sm\:nt-text-left { text-align: left; }
    .sm\:nt-text-center { text-align: center; }
}

/* Medium (768px) */
@media (min-width: 768px) {
    .md\:nt-flex { display: flex; }
    .md\:nt-hidden { display: none; }
    .md\:nt-block { display: block; }
    .md\:nt-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .md\:nt-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .md\:nt-text-left { text-align: left; }
    .md\:nt-flex--row { flex-direction: row; }
}

/* Large (1024px) */
@media (min-width: 1024px) {
    .lg\:nt-flex { display: flex; }
    .lg\:nt-hidden { display: none; }
    .lg\:nt-block { display: block; }
    .lg\:nt-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:nt-grid--4 { grid-template-columns: repeat(4, 1fr); }
    .lg\:nt-text-left { text-align: left; }
}

/* Extra Large (1280px) */
@media (min-width: 1280px) {
    .xl\:nt-grid--4 { grid-template-columns: repeat(4, 1fr); }
    .xl\:nt-grid--5 { grid-template-columns: repeat(5, 1fr); }
    .xl\:nt-hidden { display: none; }
}

/* Mobile Touch Targets */
@media (max-width: 768px) {
    .nt-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .nt-input,
    .nt-textarea,
    .nt-select {
        min-height: 44px;
        font-size: 16px; /* Prevent iOS zoom */
    }

    .nt-tabs__tab {
        min-height: 44px;
        padding: var(--nt-space-3) var(--nt-space-4);
    }

    .nt-faq__question {
        min-height: 44px;
    }

    .nt-nav__link {
        padding: var(--nt-space-3) 0;
    }

    .nt-container {
        padding-left: var(--nt-space-4);
        padding-right: var(--nt-space-4);
    }
}


/* ================================================================
   END OF NEXTOOL DESIGN SYSTEM v2.0
   5000+ lines. Every component. Every state. Every animation.
   Built by Miguel. Perfected for NexTool.
   ================================================================ */