/* ==============================================================================
   NORDDRUCKWERK HAMBURG - INDUSTRIAL-MODERN STYLESHEET
   Brand Identity: Hanseatic Technical Prepress & Automated Web-to-Print
   Dark Theme First Palette (#090d16 / #0f172a / #151d30 / #1e293b)
   Accents: Maritime Cyan (#0284c7 / #38bdf8) & Print/Varnish Orange (#f97316 / #ea580c)
   WCAG AA Compliant High-Contrast Typography & Visuals
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root, html[data-bs-theme="dark"], body {
    /* --- 1. Backgrounds & Surfaces --- */
    --ndw-bg-base: #090d16;             /* Deepest Slate Charcoal */
    --ndw-bg-surface: #0f172a;          /* Deep Navy Slate */
    --ndw-bg-card: #151d30;             /* Subdued dark panel */
    --ndw-bg-card-hover: #1e293b;       /* Elevated dark card */
    --ndw-bg-panel: #1e293b;            /* Core dark panel */
    --ndw-bg-elevated: #24324a;         /* High elevation */
    --ndw-bg-glass: rgba(21, 29, 48, 0.88);

    /* --- 2. Borders & Dividers --- */
    --ndw-border: #334155;              /* Crisp 1px border */
    --ndw-border-light: rgba(51, 65, 85, 0.7);
    --ndw-border-hover: #475569;
    --ndw-border-active: #38bdf8;
    --ndw-border-orange: #f97316;

    /* --- 3. Brand Accents --- */
    --ndw-cyan: #38bdf8;                /* Crisp Maritime Cyan bright */
    --ndw-cyan-core: #0284c7;           /* Maritime Cyan core */
    --ndw-cyan-glow: rgba(56, 189, 248, 0.28);
    --ndw-cyan-subtle: rgba(56, 189, 248, 0.14);

    --ndw-orange: #f97316;              /* Energetic Print/Varnish Orange */
    --ndw-orange-hover: #ea580c;
    --ndw-orange-glow: rgba(249, 115, 22, 0.4);
    --ndw-orange-subtle: rgba(249, 115, 22, 0.14);

    /* --- CMYK Technical Accent Colors --- */
    --cmyk-c: #00aeef;
    --cmyk-m: #ec008c;
    --cmyk-y: #fff100;
    --cmyk-k: #111827;

    /* --- 4. Typography & High-Contrast Text (WCAG AA & AAA Compliant) --- */
    --ndw-text-white: #ffffff;
    --ndw-text-primary: #f8fafc;        /* High-contrast crisp text */
    --ndw-text-secondary: #cbd5e1;      /* Secondary reading text (ratio > 8:1) */
    --ndw-text-muted: #94a3b8;          /* Slate 400 (ratio > 5.5:1 on #090d16) */
    --ndw-text-dim: #64748b;

    /* Bootstrap 5.3 Overrides to guarantee dark theme contrast */
    --bs-body-color: #f1f5f9;
    --bs-body-color-rgb: 241, 245, 249;
    --bs-body-bg: #090d16;
    --bs-body-bg-rgb: 9, 13, 22;
    --bs-secondary-color: #cbd5e1;
    --bs-tertiary-color: #94a3b8;
    --bs-border-color: #334155;

    /* Status Colors */
    --ndw-success: #10b981;
    --ndw-success-glow: rgba(16, 185, 129, 0.25);
    --ndw-warning: #f59e0b;
    --ndw-danger: #ef4444;
    --ndw-info: #0ea5e9;

    /* Shadows & Glows */
    --ndw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --ndw-shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
    --ndw-shadow-lg: 0 16px 36px -6px rgba(0, 0, 0, 0.75);
    --ndw-shadow-glow-cyan: 0 0 24px -2px rgba(56, 189, 248, 0.35);
    --ndw-shadow-glow-orange: 0 0 24px -2px rgba(249, 115, 22, 0.4);

    /* Radii */
    --ndw-radius-sm: 6px;
    --ndw-radius-md: 10px;
    --ndw-radius-lg: 16px;
    --ndw-radius-xl: 22px;

    /* Transitions */
    --ndw-transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    --ndw-transition-smooth: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ==============================================================================
   BASE STYLES & RESET
   ============================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    color-scheme: dark;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ndw-text-secondary);
    background-color: var(--ndw-bg-base);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    overflow-x: hidden;
}

main {
    flex: 1 0 auto;
}

/* Strict Contrast Utilities to avoid any muddy gray text */
.text-muted {
    color: #94a3b8 !important; /* High contrast on #090d16 and #151d30 */
}

.text-secondary {
    color: #cbd5e1 !important; /* Ultra-clear text */
}

.text-cyan {
    color: #38bdf8 !important;
}

.text-orange {
    color: #f97316 !important;
}

.text-navy {
    color: #ffffff !important;
}

.bg-white {
    background-color: var(--ndw-bg-card) !important;
}

.bg-light {
    background-color: #090d16 !important;
}

/* Technical Blueprint Pattern Overlay */
.blueprint-grid-bg {
    background-image: 
        linear-gradient(to right, rgba(56, 189, 248, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--ndw-text-primary);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;
}

a {
    color: var(--ndw-cyan);
    text-decoration: none;
    transition: var(--ndw-transition);
}

a:hover {
    color: #7dd3fc;
    text-decoration: none;
}

.font-mono, .technical-label {
    font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==============================================================================
   CMYK PRECISION BAR
   ============================================================================== */
.cmyk-precision-bar {
    display: flex;
    height: 3px;
    width: 100%;
}
.cmyk-precision-bar span {
    flex: 1;
    height: 100%;
}
.cmyk-precision-bar .c-cyan { background-color: var(--cmyk-c); }
.cmyk-precision-bar .c-magenta { background-color: var(--cmyk-m); }
.cmyk-precision-bar .c-yellow { background-color: var(--cmyk-y); }
.cmyk-precision-bar .c-key { background-color: var(--ndw-cyan); }

/* Technical Crop Marks / Crosshairs */
.has-crop-marks {
    position: relative;
}
.has-crop-marks::before, .has-crop-marks::after {
    content: "+";
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: var(--ndw-cyan);
    opacity: 0.6;
    pointer-events: none;
}
.has-crop-marks::before {
    top: 6px;
    left: 8px;
}
.has-crop-marks::after {
    bottom: 6px;
    right: 8px;
}

/* ==============================================================================
   STICKY HEADER & NAVIGATION
   ============================================================================== */
.ndw-topbar {
    background: #060910;
    color: var(--ndw-text-muted);
    font-size: 0.8rem;
    padding: 7px 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.45);
    letter-spacing: 0.01em;
}

.ndw-topbar a {
    color: var(--ndw-text-secondary);
    text-decoration: none;
    transition: var(--ndw-transition);
}

.ndw-topbar a:hover {
    color: var(--ndw-cyan);
}

.topbar-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.74rem;
    font-weight: 600;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* Global Sticky Header */
.ndw-navbar {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--ndw-border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65);
    padding: 10px 0;
    transition: var(--ndw-transition);
    z-index: 1030;
}

.ndw-navbar.scrolled {
    background: rgba(9, 13, 22, 0.98);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
    border-bottom-color: rgba(56, 189, 248, 0.4);
}

.ndw-brand-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.logo-brand-img {
    height: 46px;
    width: auto;
    max-width: 210px;
    object-fit: contain;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.ndw-brand-wrapper:hover .logo-brand-img {
    transform: translateY(-1px);
    filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.2));
}

.ndw-brand-text {
    display: flex;
    flex-direction: column;
}

/* Nav Links */
.ndw-navbar .nav-link {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: var(--ndw-radius-sm);
    transition: var(--ndw-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ndw-navbar .nav-link:hover,
.ndw-navbar .nav-link:focus,
.ndw-navbar .nav-link.active {
    color: var(--ndw-text-white);
    background: rgba(56, 189, 248, 0.12);
}

.ndw-navbar .nav-link i {
    color: var(--ndw-cyan);
    font-size: 0.95rem;
}

/* Dropdown Menu */
.ndw-dropdown-menu {
    background: var(--ndw-bg-card);
    border: 1px solid var(--ndw-border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
    border-radius: var(--ndw-radius-md);
    padding: 10px;
    margin-top: 8px;
    backdrop-filter: blur(20px);
}

.ndw-dropdown-item {
    color: var(--ndw-text-secondary);
    padding: 10px 14px;
    border-radius: var(--ndw-radius-sm);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    transition: var(--ndw-transition);
}

.ndw-dropdown-item:hover {
    background: rgba(56, 189, 248, 0.12);
    color: var(--ndw-text-white);
    transform: translateX(4px);
}

.ndw-dropdown-item i {
    font-size: 1.1rem;
    color: var(--ndw-cyan);
    width: 20px;
    text-align: center;
}

.ndw-dropdown-item .item-desc {
    font-size: 0.75rem;
    color: var(--ndw-text-muted);
    display: block;
    margin-top: 1px;
}

/* ==============================================================================
   BUTTONS & CTAs
   ============================================================================== */
.btn-brand-orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff !important;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--ndw-radius-sm);
    padding: 10px 20px;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
    transition: var(--ndw-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-brand-orange:hover, .btn-brand-orange:focus {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.55);
}

.btn-ghost-cyan {
    background: rgba(15, 23, 42, 0.7);
    color: #ffffff !important;
    border: 1.5px solid var(--ndw-cyan);
    border-radius: var(--ndw-radius-sm);
    padding: 10px 20px;
    font-weight: 700;
    backdrop-filter: blur(8px);
    transition: var(--ndw-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2);
}

.btn-ghost-cyan:hover, .btn-ghost-cyan:focus {
    background: rgba(56, 189, 248, 0.22);
    color: #ffffff !important;
    border-color: #7dd3fc;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(56, 189, 248, 0.4);
}

.btn-dark-glass {
    background: rgba(30, 41, 59, 0.75);
    color: var(--ndw-text-primary) !important;
    border: 1px solid var(--ndw-border);
    border-radius: var(--ndw-radius-sm);
    padding: 8px 16px;
    font-weight: 600;
    transition: var(--ndw-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-dark-glass:hover {
    background: rgba(30, 41, 59, 1);
    border-color: var(--ndw-cyan);
    color: #ffffff !important;
}

/* ==============================================================================
   DARK GLASSMORPHISM CARDS & PANELS
   ============================================================================== */
.dark-panel {
    background: var(--ndw-bg-card);
    border: 1px solid var(--ndw-border);
    border-radius: var(--ndw-radius-lg);
    box-shadow: var(--ndw-shadow-md);
    position: relative;
    overflow: hidden;
    transition: var(--ndw-transition);
}

.dark-panel-hover:hover {
    background: var(--ndw-bg-card-hover);
    border-color: #475569;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
    transform: translateY(-3px);
}

/* ==============================================================================
   1. HERO SECTION
   ============================================================================== */
.hero-industrial {
    position: relative;
    background: radial-gradient(circle at 12% 25%, rgba(56, 189, 248, 0.1) 0%, transparent 45%),
                radial-gradient(circle at 88% 65%, rgba(249, 115, 22, 0.08) 0%, transparent 45%),
                var(--ndw-bg-base);
    padding: 85px 0 75px 0;
    overflow: hidden;
    border-bottom: 1px solid var(--ndw-border);
}

.hero-industrial::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(to right, rgba(51, 65, 85, 0.2) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(51, 65, 85, 0.2) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
    opacity: 0.7;
}

.hero-tag-spec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--ndw-border);
    border-left: 3px solid var(--ndw-cyan);
    padding: 7px 15px;
    border-radius: var(--ndw-radius-sm);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ndw-cyan);
    margin-bottom: 22px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.hero-headline {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--ndw-text-white);
    margin-bottom: 22px;
    text-wrap: balance;
    max-width: 680px;
}

.hero-headline .highlight-cyan {
    color: var(--ndw-cyan);
    text-shadow: 0 0 24px rgba(56, 189, 248, 0.4);
}

.hero-headline .highlight-orange {
    color: var(--ndw-orange);
    text-shadow: 0 0 24px rgba(249, 115, 22, 0.4);
}

.hero-subheadline {
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--ndw-text-secondary);
    max-width: 620px;
    margin-bottom: 34px;
}

.hero-feature-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 14px;
    margin-top: 12px;
    border-top: 1px solid rgba(51, 65, 85, 0.5);
}

.hero-feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--ndw-text-primary);
    font-weight: 500;
}

.hero-feature-pill i {
    color: var(--ndw-cyan);
    font-size: 1.05rem;
}

/* ==============================================================================
   HERO 3D-LIKE INTERACTIVE PRODUCT SHOWCASE
   ============================================================================== */
.hero-interactive-showcase {
    background: linear-gradient(145deg, #151d30 0%, #0f172a 100%);
    border: 1px solid var(--ndw-border);
    border-radius: var(--ndw-radius-xl);
    padding: 24px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
    perspective: 1100px;
}

.hero-showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.6);
    margin-bottom: 18px;
}

.product-switcher-tabs {
    display: flex;
    background: #090d16;
    padding: 4px;
    border-radius: var(--ndw-radius-sm);
    border: 1px solid var(--ndw-border);
    gap: 4px;
}

.product-tab-btn {
    background: transparent;
    border: none;
    color: var(--ndw-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--ndw-transition);
}

.product-tab-btn.active, .product-tab-btn:hover {
    background: #1e293b;
    color: var(--ndw-text-white);
}

.product-tab-btn.active {
    color: var(--ndw-cyan);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.stage-3d-wrapper {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 24px 0;
}

.card-3d-display {
    width: 320px;
    height: 195px;
    background: linear-gradient(135deg, #1e293b 0%, #0d1525 100%);
    border-radius: 14px;
    border: 1.5px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.2);
    position: relative;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    transform-style: preserve-3d;
    cursor: grab;
    overflow: hidden;
}

.specular-layer {
    position: absolute;
    top: -60%;
    left: -60%;
    right: -60%;
    bottom: -60%;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(56, 189, 248, 0.3) 48%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(249, 115, 22, 0.3) 52%,
        transparent 65%
    );
    transform: rotate(25deg);
    pointer-events: none;
    transition: transform 0.1s ease-out;
}

.edge-paint-cyan {
    border-bottom: 6px solid #38bdf8 !important;
    border-right: 6px solid #0284c7 !important;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.8), 0 10px 30px rgba(56, 189, 248, 0.25) !important;
}

.edge-paint-orange {
    border-bottom: 6px solid #f97316 !important;
    border-right: 6px solid #c2410c !important;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.8), 0 10px 30px rgba(249, 115, 22, 0.25) !important;
}

.edge-paint-gold {
    border-bottom: 6px solid #eab308 !important;
    border-right: 6px solid #ca8a04 !important;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.8), 0 10px 30px rgba(234, 179, 8, 0.25) !important;
}

.showcase-spec-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 18px;
    background: #090d16;
    padding: 14px 16px;
    border-radius: var(--ndw-radius-sm);
    border: 1px solid rgba(51, 65, 85, 0.5);
}

.spec-matrix-item .label {
    color: var(--ndw-cyan);
    font-size: 0.72rem;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    display: block;
}
.spec-matrix-item .val {
    color: #f8fafc;
    font-weight: 600;
    font-size: 0.84rem;
}

/* ==============================================================================
   2. TRUST BAR
   ============================================================================== */
.trust-card-pill {
    background: var(--ndw-bg-card);
    border: 1px solid var(--ndw-border);
    border-radius: var(--ndw-radius-md);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    transition: var(--ndw-transition);
}

.trust-card-pill:hover {
    border-color: var(--ndw-cyan);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    transform: translateY(-2px);
}

.trust-icon-container {
    width: 48px;
    height: 48px;
    border-radius: var(--ndw-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* ==============================================================================
   3. INTERACTIVE LIVE-CALCULATOR COMPONENT
   ============================================================================== */
.live-calculator-section {
    padding: 95px 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 65%),
                var(--ndw-bg-surface);
    border-top: 1px solid var(--ndw-border);
    border-bottom: 1px solid var(--ndw-border);
    position: relative;
}

.calc-widget-container {
    background: var(--ndw-bg-card);
    border: 1px solid var(--ndw-border);
    border-radius: var(--ndw-radius-xl);
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

.calc-option-group-title {
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ndw-cyan);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
}

.calc-product-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.calc-prod-btn {
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid var(--ndw-border);
    color: #e2e8f0;
    padding: 10px 18px;
    border-radius: var(--ndw-radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ndw-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.calc-prod-btn:hover {
    background: var(--ndw-bg-elevated);
    color: #ffffff;
    border-color: #64748b;
}

.calc-prod-btn.active {
    background: rgba(56, 189, 248, 0.18);
    border-color: var(--ndw-cyan);
    color: #ffffff;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.35);
}

.calc-select-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1.5px solid var(--ndw-border);
    border-radius: var(--ndw-radius-sm);
    padding: 14px 16px;
    cursor: pointer;
    transition: var(--ndw-transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.calc-select-card:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: #64748b;
}

.calc-select-card.active {
    background: rgba(56, 189, 248, 0.15);
    border-color: var(--ndw-cyan);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.3);
}

.calc-select-card input[type="radio"] {
    position: absolute;
    opacity: 0;
}

/* Quantity Slider & Chips */
.qty-chips-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.qty-chip {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid var(--ndw-border);
    color: #e2e8f0;
    padding: 7px 14px;
    border-radius: var(--ndw-radius-sm);
    font-size: 0.84rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ndw-transition);
}

.qty-chip:hover {
    border-color: var(--ndw-cyan);
    color: #ffffff;
}

.qty-chip.active {
    background: var(--ndw-cyan);
    color: #090d16;
    font-weight: 800;
    border-color: var(--ndw-cyan);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.45);
}

/* Range Slider */
.ndw-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 9999px;
    background: #1e293b;
    outline: none;
    border: 1px solid var(--ndw-border);
}

.ndw-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ndw-orange);
    border: 2.5px solid #ffffff;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.7);
    transition: transform 0.15s ease;
}

.ndw-range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Calculator Summary Board */
.calc-summary-board {
    background: #090d16;
    border-left: 1px solid var(--ndw-border);
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.price-display-box {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--ndw-border);
    border-radius: var(--ndw-radius-md);
    padding: 22px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.price-display-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ndw-cyan), var(--ndw-orange));
}

.price-large-net {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--ndw-text-white);
    letter-spacing: -0.02em;
    line-height: 1;
}

.piece-price-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.84rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.shipping-date-indicator {
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid var(--ndw-border);
    border-left: 3px solid var(--ndw-cyan);
    border-radius: var(--ndw-radius-sm);
    padding: 14px 16px;
    margin-bottom: 22px;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.shipping-date-indicator i {
    font-size: 1.4rem;
    color: var(--ndw-cyan);
}

/* ==============================================================================
   4. PRODUCT CATALOG GRID
   ============================================================================== */
.sortiment-section {
    padding: 90px 0;
    background: var(--ndw-bg-base);
    position: relative;
}

.catalog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 38px;
    border-bottom: 1px solid var(--ndw-border);
    padding-bottom: 18px;
}

.catalog-filter-btn {
    background: transparent;
    border: 1.5px solid var(--ndw-border);
    color: #cbd5e1;
    padding: 9px 20px;
    border-radius: var(--ndw-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ndw-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.catalog-filter-btn:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: #64748b;
    color: var(--ndw-text-white);
}

.catalog-filter-btn.active {
    background: rgba(56, 189, 248, 0.18);
    border-color: var(--ndw-cyan);
    color: #ffffff;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.3);
}

/* Dark Glassmorphic Product Card */
.ndw-catalog-card {
    background: var(--ndw-bg-card);
    border: 1px solid var(--ndw-border);
    border-radius: var(--ndw-radius-lg);
    box-shadow: var(--ndw-shadow-md);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--ndw-transition);
    position: relative;
}

.ndw-catalog-card:hover {
    background: var(--ndw-bg-card-hover);
    border-color: var(--ndw-cyan);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75), 0 0 24px rgba(56, 189, 248, 0.18);
    transform: translateY(-4px);
}

.catalog-card-image-wrap {
    height: 200px;
    background: linear-gradient(135deg, #090d16 0%, #151d30 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid var(--ndw-border);
    overflow: hidden;
    padding: 16px;
}

.catalog-card-image-wrap svg, .catalog-card-image-wrap img {
    max-height: 160px;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.ndw-catalog-card:hover .catalog-card-image-wrap svg,
.ndw-catalog-card:hover .catalog-card-image-wrap img {
    transform: scale(1.08);
}

.card-badge-top-left {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.card-badge-top-right {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.ndw-badge {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'JetBrains Mono', monospace;
}

.ndw-badge-express {
    background: rgba(249, 115, 22, 0.22);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.45);
}

.ndw-badge-eco {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.ndw-badge-finish {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
}

.ndw-badge-bestseller {
    background: rgba(234, 179, 8, 0.2);
    color: #facc15;
    border: 1px solid rgba(234, 179, 8, 0.4);
}

.catalog-card-content {
    padding: 22px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.catalog-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ndw-text-white);
    margin-bottom: 8px;
    line-height: 1.3;
}

.catalog-card-desc {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-bottom: 16px;
    line-height: 1.5;
    min-height: 44px;
}

.catalog-card-footer {
    padding: 16px 22px;
    background: #090d16;
    border-top: 1px solid var(--ndw-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==============================================================================
   5. CUSTOMER REVIEWS
   ============================================================================== */
.reviews-section {
    padding: 95px 0;
    background: var(--ndw-bg-base);
    border-top: 1px solid var(--ndw-border);
}

.testimonial-card-dark {
    background: var(--ndw-bg-card);
    border: 1px solid var(--ndw-border);
    border-radius: var(--ndw-radius-lg);
    padding: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--ndw-transition);
}

.testimonial-card-dark:hover {
    border-color: #64748b;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.7);
    transform: translateY(-2px);
}

.star-rating-gold {
    color: #f59e0b;
    font-size: 1rem;
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
}

.verified-buyer-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

/* ==============================================================================
   8. FOOTER
   ============================================================================== */
.ndw-footer {
    background: #060910;
    color: #cbd5e1;
    border-top: 1px solid var(--ndw-border);
    padding: 85px 0 32px 0;
    position: relative;
}

.footer-column-title {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ndw-text-white);
    margin-bottom: 22px;
    font-family: 'JetBrains Mono', monospace;
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 11px;
}

.footer-links-list a {
    color: #cbd5e1;
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--ndw-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-links-list a:hover {
    color: var(--ndw-cyan);
    transform: translateX(3px);
}

.badge-partner-pill {
    background: #0f172a;
    border: 1px solid var(--ndw-border);
    color: #f1f5f9;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--ndw-transition);
}

.badge-partner-pill:hover {
    border-color: var(--ndw-cyan);
    color: #ffffff;
}

.ndw-footer-bottom {
    border-top: 1px solid rgba(51, 65, 85, 0.5);
    margin-top: 55px;
    padding-top: 26px;
    font-size: 0.84rem;
    color: var(--ndw-text-muted);
}

/* ==============================================================================
   MODALS & SUBPAGE COMPONENTS
   ============================================================================== */
.modal-content.dark-modal {
    background: var(--ndw-bg-card);
    border: 1px solid var(--ndw-border);
    border-radius: var(--ndw-radius-xl);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9);
    color: var(--ndw-text-secondary);
}

.modal-header.dark-modal-header {
    background: #090d16;
    border-bottom: 1px solid var(--ndw-border);
    padding: 20px 24px;
}

.btn-close-white-custom {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

.btn-close-white-custom:hover {
    opacity: 1;
}

.form-control, .form-select {
    background-color: #090d16 !important;
    border: 1px solid var(--ndw-border) !important;
    color: #f8fafc !important;
    border-radius: var(--ndw-radius-sm);
}

.form-control:focus, .form-select:focus {
    background-color: #090d16 !important;
    border-color: var(--ndw-cyan) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

.form-label, .form-label.dark-label {
    color: #f1f5f9 !important;
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.card {
    background-color: var(--ndw-bg-card) !important;
    border: 1px solid var(--ndw-border) !important;
    color: var(--ndw-text-secondary);
}

.card-header {
    background-color: #090d16 !important;
    border-bottom: 1px solid var(--ndw-border) !important;
    color: var(--ndw-text-white);
}

.card-body {
    background-color: var(--ndw-bg-card) !important;
    color: var(--ndw-text-secondary);
}

.table {
    --bs-table-color: #f1f5f9 !important;
    --bs-table-bg: transparent !important;
    --bs-table-border-color: var(--ndw-border) !important;
    color: #f1f5f9 !important;
}

.table th {
    color: #ffffff !important;
    font-weight: 600;
    border-bottom: 2px solid var(--ndw-border) !important;
}

.table td {
    color: #cbd5e1 !important;
    border-bottom: 1px solid var(--ndw-border) !important;
}

/* ==============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================== */
@media (max-width: 991.98px) {
    .hero-headline {
        font-size: 2.45rem;
    }
    .hero-interactive-showcase {
        margin-top: 36px;
    }
    .calc-summary-board {
        border-left: none;
        border-top: 1px solid var(--ndw-border);
        margin-top: 24px;
    }
}

@media (max-width: 575.98px) {
    .hero-headline {
        font-size: 2rem;
    }
    .price-large-net {
        font-size: 2.1rem;
    }
}