/* ============================================================
   NovaCargo — Premium Design System v2.0
   Gradient-Rich · Glass Morphism · Playful Animations
   ============================================================ */

/* ---- 1. CSS Variables ------------------------------------ */
:root {
    /* Core Brand */
    --nc-navy:         #0A2342;
    --nc-navy-dark:    #061629;
    --nc-navy-mid:     #0E2D55;
    --nc-blue:         #1A6FC4;
    --nc-blue-lt:      #2E86DE;
    --nc-cyan:         #4FACFE;
    --nc-gold:         #F5A623;
    --nc-gold-dk:      #D4891A;
    --nc-orange:       #FF6B35;
    --nc-purple:       #7C3AED;
    --nc-teal:         #0D9488;

    /* UI Colors */
    --nc-white:        #FFFFFF;
    --nc-light:        #F0F5FF;
    --nc-light-2:      #E8F0FE;
    --nc-gray:         #8492A6;
    --nc-dark:         #1E2A3A;
    --nc-muted:        #64748B;
    --nc-border:       #E2EAFF;
    --nc-border-lt:    #EEF2FF;

    /* Status */
    --nc-success:      #10B981;
    --nc-warning:      #F59E0B;
    --nc-danger:       #EF4444;
    --nc-info:         #3B82F6;

    /* Gradients */
    --grad-primary:    linear-gradient(135deg, #0A2342 0%, #0E3566 45%, #1A6FC4 100%);
    --grad-hero:       linear-gradient(135deg, #051423 0%, #0A2342 30%, #0E3A6E 65%, #1557A0 100%);
    --grad-accent:     linear-gradient(135deg, #F5A623 0%, #FF6B35 100%);
    --grad-cool:       linear-gradient(135deg, #1A6FC4 0%, #4FACFE 100%);
    --grad-warm:       linear-gradient(135deg, #F5A623 0%, #F472B6 100%);
    --grad-success:    linear-gradient(135deg, #10B981 0%, #059669 100%);
    --grad-purple:     linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
    --grad-teal:       linear-gradient(135deg, #0D9488 0%, #0891B2 100%);
    --grad-sidebar:    linear-gradient(180deg, #051825 0%, #0A2342 30%, #0B2E52 100%);
    --grad-dark-blue:  linear-gradient(135deg, #0A2342 0%, #0D3566 100%);
    --grad-mesh:       var(--grad-hero);

    /* Glow */
    --glow-blue:       0 0 40px rgba(26,111,196,.35);
    --glow-gold:       0 0 40px rgba(245,166,35,.45);
    --glow-white:      0 0 40px rgba(255,255,255,.12);

    /* Glass */
    --glass-bg:        rgba(255,255,255,.08);
    --glass-bg-md:     rgba(255,255,255,.12);
    --glass-border:    rgba(255,255,255,.15);
    --glass-bg-light:  rgba(255,255,255,.75);
    --glass-blur:      blur(20px) saturate(180%);

    /* Shadows */
    --nc-shadow:       0 4px 24px rgba(10,35,66,.08);
    --nc-shadow-md:    0 8px 40px rgba(10,35,66,.14);
    --nc-shadow-lg:    0 16px 64px rgba(10,35,66,.20);
    --nc-shadow-xl:    0 32px 96px rgba(10,35,66,.28);
    --nc-shadow-blue:  0 8px 32px rgba(26,111,196,.30);
    --nc-shadow-gold:  0 8px 32px rgba(245,166,35,.35);

    /* Geometry */
    --nc-radius:       16px;
    --nc-radius-sm:    10px;
    --nc-radius-lg:    24px;
    --nc-radius-xl:    36px;

    /* Transitions */
    --t-fast:    .15s ease;
    --t-normal:  .3s cubic-bezier(.4,0,.2,1);
    --t-slow:    .5s cubic-bezier(.4,0,.2,1);
    --t-bounce:  .45s cubic-bezier(.34,1.56,.64,1);
}

/* ---- 2. Reset & Base ------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    color: var(--nc-dark);
    background: #fff;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Poppins','Inter',sans-serif;
    font-weight: 700;
    color: var(--nc-navy);
    line-height: 1.25;
}

a { color: var(--nc-blue); text-decoration: none; transition: color var(--t-normal); }
a:hover { color: var(--nc-navy); }
img { max-width: 100%; height: auto; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--nc-light); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--nc-blue), var(--nc-navy)); border-radius: 4px; }

/* ---- 3. Keyframe Animations ------------------------------ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
    0%,100% { transform: translateY(0px) rotate(0deg); }
    33%      { transform: translateY(-14px) rotate(1deg); }
    66%      { transform: translateY(-8px) rotate(-1deg); }
}
@keyframes floatSlow {
    0%,100% { transform: translateY(0px); }
    50%     { transform: translateY(-22px); }
}
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes gradientMove {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}
@keyframes shimmer {
    0%   { background-position: -300% center; }
    100% { background-position: 300% center; }
}
@keyframes shimmer-bar {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(26,111,196,.5); }
    70%  { box-shadow: 0 0 0 12px rgba(26,111,196,0); }
    100% { box-shadow: 0 0 0 0 rgba(26,111,196,0); }
}
@keyframes pulse-gold {
    0%   { box-shadow: 0 0 0 0 rgba(245,166,35,.6); }
    70%  { box-shadow: 0 0 0 14px rgba(245,166,35,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}
@keyframes blob {
    0%   { transform: translate(0,0) scale(1); }
    30%  { transform: translate(30px,-30px) scale(1.08); }
    60%  { transform: translate(-20px,20px) scale(0.94); }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes drawLine {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
}
@keyframes ripple {
    to { transform: scale(4.5); opacity: 0; }
}
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dotPulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.4); }
}
@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(.3) rotate(-5deg); }
    50%  { opacity: 1; transform: scale(1.05) rotate(2deg); }
    70%  { transform: scale(.95); }
    100% { transform: scale(1); }
}
@keyframes ping {
    75%,100% { transform: scale(2); opacity: 0; }
}
@keyframes iconHover {
    0%,100% { transform: rotate(0deg) scale(1); }
    25%     { transform: rotate(-8deg) scale(1.1); }
    75%     { transform: rotate(8deg) scale(1.1); }
}

/* ---- 4. Utility Classes ---------------------------------- */
.text-gold        { color: var(--nc-gold) !important; }
.text-navy        { color: var(--nc-navy) !important; }
.text-nc-blue     { color: var(--nc-blue) !important; }
.text-gradient    { background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.text-gradient-gold { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bg-navy          { background: var(--nc-navy) !important; }
.bg-nc-light      { background: var(--nc-light) !important; }
.section-pad      { padding: 100px 0; }
.section-pad-sm   { padding: 64px 0; }

/* Animation utilities */
.animate-fadeInUp    { animation: fadeInUp .65s cubic-bezier(.4,0,.2,1) both; }
.animate-fadeInLeft  { animation: fadeInLeft .65s cubic-bezier(.4,0,.2,1) both; }
.animate-fadeInRight { animation: fadeInRight .65s cubic-bezier(.4,0,.2,1) both; }
.animate-scaleIn     { animation: scaleIn .55s var(--t-bounce) both; }
.animate-float       { animation: float 4.5s ease-in-out infinite; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .22s; }
.delay-3 { animation-delay: .38s; }
.delay-4 { animation-delay: .55s; }
.delay-5 { animation-delay: .72s; }
.delay-6 { animation-delay: .9s; }

.reveal-on-scroll          { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal-on-scroll.animated { opacity: 1; transform: none; }

/* ---- 5. Loading Bar -------------------------------------- */
#nc-loading-bar {
    position: fixed; top: 0; left: 0;
    width: 0; height: 3px;
    background: linear-gradient(90deg, var(--nc-gold), var(--nc-blue), var(--nc-gold));
    background-size: 200%;
    z-index: 9999;
    animation: shimmer-bar 2s linear infinite;
    transition: width .4s ease;
}

/* ---- 6. Buttons ------------------------------------------ */
.btn-nc-primary {
    background: var(--grad-accent);
    color: var(--nc-navy);
    font-weight: 700;
    font-size: .9rem;
    border: none;
    padding: .65rem 1.75rem;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    transition: transform var(--t-bounce), box-shadow var(--t-normal);
    letter-spacing: .3px;
}
.btn-nc-primary::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
    transform: translateX(-100%);
    transition: transform .55s ease;
}
.btn-nc-primary:hover {
    color: var(--nc-navy);
    transform: translateY(-2px);
    box-shadow: var(--nc-shadow-gold);
}
.btn-nc-primary:hover::before { transform: translateX(100%); }
.btn-nc-primary:active { transform: translateY(0); }

.btn-nc-outline {
    background: transparent;
    color: var(--nc-navy);
    border: 2px solid rgba(10,35,66,.3);
    font-weight: 600;
    font-size: .9rem;
    padding: .6rem 1.65rem;
    border-radius: 50px;
    transition: all var(--t-normal);
    letter-spacing: .3px;
}
.btn-nc-outline:hover {
    background: var(--nc-navy);
    border-color: var(--nc-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--nc-shadow-md);
}

.btn-nc-white {
    background: rgba(255,255,255,.12);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    border: 2px solid rgba(255,255,255,.28);
    padding: .6rem 1.65rem;
    border-radius: 50px;
    transition: all var(--t-normal);
    backdrop-filter: blur(10px);
    letter-spacing: .3px;
}
.btn-nc-white:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.5);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--glow-white);
}
.btn-nc-success {
    background: var(--grad-success);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    padding: .38rem 1rem;
    font-size: .82rem;
    transition: transform .2s, box-shadow .2s;
}
.btn-nc-success:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16,185,129,.4); }
.btn-nc-danger {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    padding: .38rem 1rem;
    font-size: .82rem;
    transition: transform .2s, box-shadow .2s;
}
.btn-nc-danger:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(239,68,68,.4); }
.btn-nc-info {
    background: var(--grad-cool);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    padding: .38rem 1rem;
    font-size: .82rem;
    transition: transform .2s, box-shadow .2s;
}
.btn-nc-info:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(26,111,196,.4); }

/* ---- 7. Navbar ------------------------------------------- */
.nc-navbar {
    background: rgba(9,28,54,.94);
    padding: .85rem 0;
    box-shadow: 0 2px 24px rgba(0,0,0,.25);
    z-index: 1040;
    transition: background var(--t-normal), padding var(--t-normal), box-shadow var(--t-normal);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.nc-navbar.scrolled {
    background: rgba(6,22,41,.97);
    padding: .62rem 0;
    box-shadow: 0 4px 40px rgba(0,0,0,.4);
}
.nc-brand {
    display: flex; align-items: center; gap: .6rem;
    text-decoration: none;
    transition: transform var(--t-bounce);
}
.nc-brand:hover { transform: scale(1.03); }

.nc-logo-icon {
    width: 40px; height: 40px;
    background: var(--grad-accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    color: var(--nc-navy);
    flex-shrink: 0;
    box-shadow: var(--nc-shadow-gold);
    transition: transform var(--t-bounce);
}
.nc-brand:hover .nc-logo-icon { transform: rotate(-12deg) scale(1.1); }

.nc-brand-text {
    font-family: 'Poppins',sans-serif;
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: -.5px;
    background: linear-gradient(90deg,#fff,#c0d8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nc-navbar .nav-link {
    color: rgba(255,255,255,.75) !important;
    font-weight: 500;
    font-size: .88rem;
    padding: .5rem .88rem !important;
    border-radius: 8px;
    transition: color var(--t-normal), background var(--t-normal);
    position: relative;
}
.nc-navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px; left: 50%; right: 50%;
    height: 2px;
    background: var(--grad-accent);
    border-radius: 2px;
    transition: left var(--t-normal), right var(--t-normal);
}
.nc-navbar .nav-link:hover { color: #fff !important; }
.nc-navbar .nav-link:hover::after,
.nc-navbar .nav-link.active::after { left: .88rem; right: .88rem; }
.nc-navbar .nav-link.active { color: #fff !important; }

.nc-topbar-phone { color: var(--nc-gold); font-weight: 600; font-size: .875rem; }
.nc-navbar .navbar-toggler { border: 1.5px solid rgba(255,255,255,.22); border-radius: 8px; padding: .42rem .65rem; }
.nc-navbar .navbar-toggler:hover { background: rgba(255,255,255,.08); }
.nc-navbar .navbar-toggler-icon { filter: invert(1); }

.nc-dropdown {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(8,24,48,.97);
    backdrop-filter: blur(24px);
    box-shadow: 0 24px 72px rgba(0,0,0,.5);
    border-radius: var(--nc-radius);
    padding: .65rem;
    min-width: 230px;
    animation: fadeInDown .22s ease both;
}
.nc-dropdown .dropdown-item {
    border-radius: var(--nc-radius-sm);
    padding: .62rem 1rem;
    font-size: .87rem;
    font-weight: 500;
    color: rgba(255,255,255,.75);
    transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
}
.nc-dropdown .dropdown-item:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    padding-left: 1.25rem;
}
.nc-dropdown .dropdown-divider { border-color: rgba(255,255,255,.1); }

/* ---- 8. Hero --------------------------------------------- */
.nc-hero {
    background: var(--grad-hero);
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 130px 0 90px;
}
/* Grid overlay */
.nc-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

/* Animated blobs */
.nc-hero-blob {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: .4; pointer-events: none;
}
.nc-hero-blob-1 {
    width: 580px; height: 580px;
    background: radial-gradient(circle, rgba(26,111,196,.7) 0%, transparent 70%);
    top: -140px; right: -90px;
    animation: blob 14s ease-in-out infinite;
}
.nc-hero-blob-2 {
    width: 440px; height: 440px;
    background: radial-gradient(circle, rgba(79,172,254,.5) 0%, transparent 70%);
    bottom: -80px; left: -110px;
    animation: blob 18s ease-in-out infinite reverse;
}
.nc-hero-blob-3 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(245,166,35,.3) 0%, transparent 70%);
    top: 38%; right: 22%;
    animation: blob 22s ease-in-out infinite; animation-delay: -7s;
}

.nc-hero-title {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    color: #fff;
    font-weight: 800;
    line-height: 1.12;
    margin-bottom: 1.4rem;
    letter-spacing: -.5px;
}
.nc-hero-title .accent {
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.nc-hero-subtitle {
    color: rgba(255,255,255,.72);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    max-width: 520px;
    line-height: 1.85;
}

/* Hero tracking widget */
.nc-hero-track {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: var(--nc-radius);
    padding: 1.5rem 1.75rem;
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
}
.nc-hero-track::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--nc-gold), var(--nc-cyan), transparent);
}
.nc-hero-track label {
    color: rgba(255,255,255,.72);
    font-size: .8rem; font-weight: 600;
    letter-spacing: .6px; text-transform: uppercase;
}
.nc-hero-track .form-control {
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.18);
    color: #fff; border-radius: 10px 0 0 10px; padding: .7rem 1.1rem;
}
.nc-hero-track .form-control::placeholder { color: rgba(255,255,255,.42); }
.nc-hero-track .form-control:focus {
    background: rgba(255,255,255,.15);
    border-color: var(--nc-gold);
    box-shadow: 0 0 0 3px rgba(245,166,35,.18);
    color: #fff;
}

/* ---- 9. Hero Illustration -------------------------------- */
.nc-hero-illustration { position: relative; height: 480px; }
.nc-hero-globe {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.nc-hero-globe > i {
    font-size: 13rem !important;
    color: rgba(255,255,255,.035) !important;
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%,-50%) !important;
    animation: spin-slow 60s linear infinite;
}
.nc-hero-cards { position: relative; width: 100%; height: 100%; }
.nc-hcard {
    position: absolute;
    background: var(--glass-bg-md);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--nc-radius);
    padding: .9rem 1.25rem;
    color: #fff;
    font-size: .84rem; font-weight: 600;
    display: flex; flex-direction: column; gap: .2rem;
    min-width: 135px;
    box-shadow: var(--nc-shadow-blue);
    transition: transform var(--t-bounce), box-shadow var(--t-normal);
}
.nc-hcard::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px; border-radius: var(--nc-radius) var(--nc-radius) 0 0;
}
.nc-hcard i { font-size: 1.4rem; margin-bottom: .1rem; }
.nc-hcard small { font-size: .72rem; color: rgba(255,255,255,.58); font-weight: 400; }
.nc-hcard:hover { transform: scale(1.06); box-shadow: var(--glow-blue); }

.nc-hcard-1 { top: 5%; left: 5%; animation: floatSlow 4.5s ease-in-out infinite; }
.nc-hcard-1 i { color: var(--nc-cyan); }
.nc-hcard-1::before { background: var(--grad-cool); }
.nc-hcard-2 { top: 5%; right: 4%; animation: floatSlow 5s ease-in-out infinite .8s; }
.nc-hcard-2 i { color: #4ADEEF; }
.nc-hcard-2::before { background: var(--grad-teal); }
.nc-hcard-3 { bottom: 28%; left: 0%; animation: floatSlow 5.5s ease-in-out infinite 1.2s; }
.nc-hcard-3 i { color: var(--nc-gold); }
.nc-hcard-3::before { background: var(--grad-accent); }
.nc-hcard-4 { bottom: 12%; right: 2%; animation: floatSlow 4s ease-in-out infinite .4s; }
.nc-hcard-4 i { color: #F472B6; }
.nc-hcard-4::before { background: linear-gradient(135deg,#F59E0B,#EC4899); }

/* ---- 10. Stats Bar --------------------------------------- */
.nc-stats-bar {
    background: linear-gradient(135deg,#051825 0%,#0A2342 40%,#1A4F8C 70%,#1A6FC4 100%);
    background-size: 200% 200%;
    animation: gradientMove 10s ease infinite;
    padding: 30px 0;
    position: relative; overflow: hidden;
}
.nc-stats-bar::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 25% 50%, rgba(79,172,254,.18) 0%, transparent 60%),
        radial-gradient(circle at 75% 50%, rgba(245,166,35,.1) 0%, transparent 60%);
}
.nc-stat-item { text-align: center; position: relative; padding: 6px 0; }
.nc-stat-item + .nc-stat-item::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    height: 42px; width: 1px;
    background: rgba(255,255,255,.14);
}
.nc-stat-number {
    font-size: 2.3rem; font-weight: 800; color: #fff; line-height: 1;
    font-family: 'Poppins',sans-serif; letter-spacing: -1px;
    animation: countUp .8s ease both;
}
.nc-stat-label {
    font-size: .75rem; font-weight: 600;
    color: rgba(255,255,255,.62); text-transform: uppercase;
    letter-spacing: 1px; margin-top: .3rem;
}

/* ---- 11. Section Labels & Titles ------------------------- */
.nc-section-label {
    display: inline-flex; align-items: center; gap: .45rem;
    background: linear-gradient(135deg, rgba(26,111,196,.1), rgba(79,172,254,.06));
    border: 1px solid rgba(26,111,196,.18);
    color: var(--nc-blue);
    font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.8px;
    padding: .3rem 1rem; border-radius: 50px; margin-bottom: 1rem;
}
.nc-section-title {
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    color: var(--nc-navy); margin-bottom: .8rem;
    font-weight: 800; letter-spacing: -.5px;
}
.nc-section-sub {
    color: var(--nc-muted); max-width: 600px;
    margin: 0 auto; font-size: 1.05rem; line-height: 1.8;
}

/* ---- 12. Service Cards ----------------------------------- */
.nc-service-card {
    background: #fff;
    border: 1.5px solid var(--nc-border-lt);
    border-radius: var(--nc-radius-lg);
    padding: 2.25rem 2rem;
    transition: transform var(--t-bounce), box-shadow var(--t-slow), border-color var(--t-normal);
    height: 100%; cursor: pointer; position: relative; overflow: hidden;
}
.nc-service-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(26,111,196,.035), rgba(79,172,254,.018));
    opacity: 0; transition: opacity var(--t-normal);
    border-radius: var(--nc-radius-lg);
}
.nc-service-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 0; height: 3px;
    background: var(--grad-accent);
    border-radius: 0 0 var(--nc-radius-lg) var(--nc-radius-lg);
    transition: width var(--t-slow);
}
.nc-service-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 24px 64px rgba(26,111,196,.16);
    border-color: rgba(26,111,196,.28);
}
.nc-service-card:hover::before { opacity: 1; }
.nc-service-card:hover::after  { width: 100%; }

.nc-service-icon {
    width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem; margin-bottom: 1.35rem;
    transition: transform var(--t-bounce);
}
.nc-service-card:hover .nc-service-icon { transform: scale(1.15) rotate(-7deg); }

.nc-service-icon.si-air      { background: var(--grad-cool); color: #fff; box-shadow: 0 8px 24px rgba(26,111,196,.3); }
.nc-service-icon.si-sea      { background: var(--grad-teal); color: #fff; box-shadow: 0 8px 24px rgba(13,148,136,.3); }
.nc-service-icon.si-land     { background: linear-gradient(135deg,#F59E0B,#EF4444); color: #fff; box-shadow: 0 8px 24px rgba(245,158,11,.3); }
.nc-service-icon.si-express  { background: var(--grad-purple); color: #fff; box-shadow: 0 8px 24px rgba(124,58,237,.3); }
.nc-service-icon.si-domestic { background: var(--grad-success); color: #fff; box-shadow: 0 8px 24px rgba(16,185,129,.3); }
.nc-service-icon.si-intl     { background: linear-gradient(135deg,#EC4899,#DB2777); color: #fff; box-shadow: 0 8px 24px rgba(236,72,153,.3); }
.nc-service-icon.si-warehouse{ background: linear-gradient(135deg,#6366F1,#818CF8); color: #fff; box-shadow: 0 8px 24px rgba(99,102,241,.3); }
.nc-service-icon.si-default  { background: var(--grad-primary); color: #fff; box-shadow: var(--nc-shadow-blue); }

.nc-service-card h5 { font-size: 1.08rem; margin-bottom: .55rem; color: var(--nc-navy); font-weight: 700; }
.nc-service-card p  { color: var(--nc-muted); font-size: .9rem; line-height: 1.72; margin-bottom: 1.1rem; }
.nc-service-link {
    color: var(--nc-blue); font-weight: 700; font-size: .85rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: gap var(--t-bounce), border-color var(--t-normal);
}
.nc-service-card:hover .nc-service-link { gap: .75rem; border-bottom-color: var(--nc-blue); }

/* ---- 13. How It Works ------------------------------------ */
.nc-step {
    text-align: center; padding: 1.75rem 1.25rem;
    position: relative;
}
.nc-step-num {
    width: 64px; height: 64px;
    background: var(--grad-primary); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; font-weight: 800;
    margin: 0 auto 1.5rem;
    position: relative; z-index: 1;
    box-shadow: var(--nc-shadow-blue);
    transition: transform var(--t-bounce);
}
.nc-step-num::before {
    content: '';
    position: absolute; inset: -5px; border-radius: 50%;
    border: 2px dashed rgba(26,111,196,.3);
    animation: spin-slow 14s linear infinite;
}
.nc-step:hover .nc-step-num { transform: scale(1.12); }
.nc-step-connector {
    position: absolute; top: 4.25rem; right: -25%;
    width: 50%; height: 2px; overflow: hidden;
}
.nc-step-connector::before {
    content: ''; display: block; height: 100%;
    background: linear-gradient(90deg, var(--nc-navy), var(--nc-gold));
    animation: drawLine 1.6s ease both; animation-delay: .9s;
}
.nc-step h6  { color: var(--nc-navy); font-weight: 700; font-size: .95rem; margin-bottom: .4rem; }
.nc-step p   { color: var(--nc-muted); font-size: .875rem; line-height: 1.72; }

/* ---- 14. Feature List ------------------------------------ */
.nc-feature-item {
    display: flex; gap: 1.1rem;
    margin-bottom: 1.75rem; align-items: flex-start;
}
.nc-feature-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, rgba(26,111,196,.1), rgba(79,172,254,.05));
    border: 1px solid rgba(26,111,196,.14);
    color: var(--nc-blue); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0;
    transition: transform var(--t-bounce), background var(--t-normal), color var(--t-normal);
}
.nc-feature-item:hover .nc-feature-icon {
    background: var(--grad-cool); color: #fff;
    transform: scale(1.1) rotate(-6deg); border-color: transparent;
}
.nc-feature-item h6 { color: var(--nc-navy); font-size: .97rem; margin-bottom: .25rem; font-weight: 700; }
.nc-feature-item p  { color: var(--nc-muted); font-size: .875rem; line-height: 1.72; margin: 0; }

/* ---- 15. Testimonials ------------------------------------ */
.nc-testimonial {
    background: linear-gradient(135deg,#fff 0%,#F8FBFF 100%);
    border: 1.5px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    padding: 2.25rem; height: 100%;
    position: relative; overflow: hidden;
    transition: transform var(--t-bounce), box-shadow var(--t-normal), border-color var(--t-normal);
}
.nc-testimonial:hover {
    transform: translateY(-6px);
    box-shadow: var(--nc-shadow-md);
    border-color: rgba(26,111,196,.22);
}
.nc-testimonial::before {
    content: '\201C';
    font-size: 7rem; font-family: Georgia,serif;
    color: var(--nc-gold); line-height: 1;
    position: absolute; top: -.8rem; left: 1.2rem;
    opacity: .12; pointer-events: none;
}
.nc-testimonial::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: var(--grad-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-slow);
    border-radius: 0 0 var(--nc-radius-lg) var(--nc-radius-lg);
}
.nc-testimonial:hover::after { transform: scaleX(1); }
.nc-testimonial-text { color: var(--nc-muted); font-style: italic; margin-bottom: 1.5rem; line-height: 1.82; font-size: .95rem; }
.nc-testimonial-author { display: flex; align-items: center; gap: .8rem; }
.nc-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .9rem; flex-shrink: 0;
    text-transform: uppercase; border: 2.5px solid rgba(255,255,255,.5);
}
.nc-avatar.av-1 { background: var(--grad-cool); color: #fff; }
.nc-avatar.av-2 { background: var(--grad-success); color: #fff; }
.nc-avatar.av-3 { background: var(--grad-purple); color: #fff; }
.nc-avatar.av-4 { background: linear-gradient(135deg,#F59E0B,#EF4444); color: #fff; }
.nc-avatar.av-5 { background: linear-gradient(135deg,#EC4899,#DB2777); color: #fff; }
.nc-avatar:not([class*='av-']) { background: var(--grad-primary); color: #fff; }
.nc-testimonial-author h6 { margin: 0; font-size: .9rem; color: var(--nc-navy); font-weight: 700; }
.nc-testimonial-author small { color: var(--nc-muted); font-size: .78rem; }
.nc-stars { color: var(--nc-gold); font-size: .8rem; letter-spacing: 1px; margin-bottom: .85rem; display: block; }

/* ---- 16. CTA Section ------------------------------------- */
.nc-cta-section {
    background: var(--grad-hero);
    background-size: 200% 200%;
    animation: gradientMove 12s ease infinite;
    padding: 100px 0;
    position: relative; overflow: hidden;
}
.nc-cta-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(79,172,254,.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(245,166,35,.1) 0%, transparent 50%);
    pointer-events: none;
}
.nc-cta-section::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 55px 55px;
}

/* ---- 17. Page Hero (inner pages) ------------------------ */
.nc-page-hero {
    background: var(--grad-hero);
    background-size: 200% 200%;
    animation: gradientMove 14s ease infinite;
    padding: 90px 0 70px;
    text-align: center; color: #fff;
    position: relative; overflow: hidden;
}
.nc-page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 50px 50px;
}
.nc-page-hero h1 { color: #fff; font-size: clamp(1.9rem,3.5vw,2.9rem); text-shadow: 0 2px 24px rgba(0,0,0,.2); }
.nc-page-hero p  { color: rgba(255,255,255,.7); font-size: 1.05rem; }
.nc-breadcrumb  { justify-content: center; }
.nc-breadcrumb .breadcrumb-item,
.nc-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,.58); font-size: .875rem; }
.nc-breadcrumb .breadcrumb-item.active { color: var(--nc-gold); font-weight: 600; }
.nc-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color: rgba(255,255,255,.32); }

/* ---- 18. Cards ------------------------------------------- */
.nc-card {
    background: #fff;
    border: 1.5px solid var(--nc-border);
    border-radius: var(--nc-radius);
    box-shadow: var(--nc-shadow);
    padding: 1.85rem;
    position: relative; overflow: hidden;
    transition: box-shadow var(--t-normal), border-color var(--t-normal);
}
.nc-card:hover { box-shadow: var(--nc-shadow-md); border-color: rgba(26,111,196,.18); }
.nc-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem; padding-bottom: 1rem;
    border-bottom: 1.5px solid var(--nc-border);
}
.nc-card-header h5 { margin: 0; font-size: 1rem; color: var(--nc-navy); font-weight: 700; }

/* ---- 19. Forms ------------------------------------------- */
.nc-form-label { font-size: .84rem; font-weight: 600; color: var(--nc-dark); margin-bottom: .45rem; }
.form-control, .form-select {
    border: 1.5px solid var(--nc-border);
    border-radius: var(--nc-radius-sm);
    padding: .68rem 1rem;
    font-size: .9rem;
    background: #FAFBFF;
    transition: border-color var(--t-normal), box-shadow var(--t-normal), background var(--t-normal);
}
.form-control:focus, .form-select:focus {
    background: #fff;
    border-color: var(--nc-blue);
    box-shadow: 0 0 0 4px rgba(26,111,196,.1);
}
.form-control::placeholder { color: #B0BEC5; }

/* ---- 20. Auth Pages -------------------------------------- */
.nc-auth-wrap {
    min-height: 100vh;
    background: var(--grad-hero);
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media (max-width:767px) {
    .nc-auth-wrap { grid-template-columns: 1fr; }
    .nc-auth-left { display: none !important; }
}
.nc-auth-left {
    padding: 3rem 3.5rem 3rem 3rem;
    display: flex; flex-direction: column; justify-content: center;
    position: relative;
}
.nc-auth-left-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 3rem; }
.nc-auth-left-brand .nc-logo-icon { width: 48px; height: 48px; font-size: 1.35rem; }
.nc-auth-left-brand span { font-size: 1.7rem; font-weight: 800; font-family: 'Poppins',sans-serif; color: #fff; }
.nc-auth-left h2 { font-size: clamp(1.8rem,3vw,2.6rem); color: #fff; margin-bottom: 1rem; line-height: 1.2; font-weight: 800; }
.nc-auth-left p  { color: rgba(255,255,255,.7); font-size: 1rem; line-height: 1.82; margin-bottom: 2.5rem; }
.nc-auth-stat { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.nc-auth-stat-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 1rem 1.4rem; border-radius: var(--nc-radius);
    text-align: center; backdrop-filter: blur(12px); min-width: 88px;
}
.nc-auth-stat-item strong { display: block; font-size: 1.5rem; color: var(--nc-gold); font-family: 'Poppins',sans-serif; font-weight: 800; }
.nc-auth-stat-item small  { font-size: .7rem; color: rgba(255,255,255,.6); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }

.nc-auth-right {
    background: linear-gradient(135deg,#F0F5FF 0%,#E8F0FE 100%);
    padding: 3rem 3.5rem 3rem 3rem;
    display: flex; flex-direction: column; justify-content: center;
}
.nc-auth-right-inner { max-width: 420px; margin: 0 auto; width: 100%; }

/* Legacy card style */
.nc-auth-card {
    background: #fff; border-radius: var(--nc-radius-lg);
    box-shadow: var(--nc-shadow-xl);
    padding: 2.75rem 3rem; width: 100%; max-width: 480px;
}
.nc-auth-logo { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 2rem; }
.nc-auth-logo .nc-logo-icon { width: 48px; height: 48px; font-size: 1.35rem; }
.nc-auth-logo span { font-family: 'Poppins',sans-serif; font-weight: 800; font-size: 1.65rem; color: var(--nc-navy); }
.nc-auth-title { text-align: center; margin-bottom: 2rem; }
.nc-auth-title h4 { color: var(--nc-navy); margin-bottom: .3rem; font-size: 1.35rem; }
.nc-auth-title p  { color: var(--nc-muted); font-size: .9rem; }

/* ---- 21. Sidebar ----------------------------------------- */
.nc-sidebar {
    width: 268px;
    background: var(--grad-sidebar);
    height: 100vh;
    position: fixed; left: 0; top: 0;
    z-index: 1030;
    transition: transform var(--t-slow);
    overflow: hidden;
    box-shadow: 4px 0 32px rgba(0,0,0,.28);
    display: flex; flex-direction: column;
}

.nc-sidebar-brand,
.nc-sidebar-header {
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    display: flex; align-items: center; gap: .65rem; flex-shrink: 0;
}
.nc-sidebar-brand .nc-brand-text { font-size: 1.25rem; }
.nc-sidebar-menu { padding: .85rem 0; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.nc-sidebar-menu::-webkit-scrollbar { width: 4px; }
.nc-sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.nc-sidebar-section {
    padding: .85rem 1.5rem .3rem;
    font-size: .67rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2.2px;
    color: rgba(255,255,255,.28);
}

.nc-sidebar a.nc-sidebar-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem 1.5rem;
    color: rgba(255,255,255,.62); font-size: .875rem; font-weight: 500;
    transition: color var(--t-normal), background var(--t-normal), padding-left var(--t-normal);
    position: relative;
}
.nc-sidebar a.nc-sidebar-link:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
    padding-left: 1.85rem;
}
.nc-sidebar a.nc-sidebar-link.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(245,166,35,.18), rgba(245,166,35,.03));
    font-weight: 600;
}
.nc-sidebar a.nc-sidebar-link.active::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--grad-accent);
    border-radius: 0 4px 4px 0;
}
.nc-sidebar a.nc-sidebar-link i {
    font-size: 1rem; width: 22px; text-align: center;
    flex-shrink: 0; transition: transform var(--t-bounce);
}
.nc-sidebar a.nc-sidebar-link:hover i { transform: scale(1.2); }
.nc-sidebar a.nc-sidebar-link.active i { color: var(--nc-gold); }

.nc-sidebar-footer {
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 1.25rem 1.5rem; flex-shrink: 0;
}
.nc-sidebar-user { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.nc-sidebar-user .nc-avatar { width: 38px; height: 38px; font-size: .82rem; }
.nc-sidebar-user-info strong { color: #fff; font-size: .875rem; display: block; }
.nc-sidebar-user-info small  { color: rgba(255,255,255,.42); font-size: .73rem; }

/* ul/li nav (staff / driver / partner) */
.nc-sidebar-nav { list-style: none; padding: .85rem 0; margin: 0; }
.nc-sidebar-nav li a {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem 1.5rem;
    color: rgba(255,255,255,.62); font-size: .875rem; font-weight: 500;
    text-decoration: none;
    transition: color var(--t-normal), background var(--t-normal), padding-left var(--t-normal);
    position: relative;
}
.nc-sidebar-nav li a:hover { color: #fff; background: rgba(255,255,255,.07); padding-left: 1.85rem; }
.nc-sidebar-nav li a.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(245,166,35,.18), rgba(245,166,35,.03));
    font-weight: 600;
}
.nc-sidebar-nav li a.active::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--grad-accent);
    border-radius: 0 4px 4px 0;
}
.nc-sidebar-nav li a i { font-size: 1rem; width: 22px; text-align: center; flex-shrink: 0; transition: transform var(--t-bounce); }
.nc-sidebar-nav li a:hover i, .nc-sidebar-nav li a.active i { color: var(--nc-gold); transform: scale(1.15); }
.nc-sidebar-footer a {
    display: flex; align-items: center; gap: .65rem;
    padding: .45rem 0; color: rgba(255,255,255,.52);
    font-size: .855rem; text-decoration: none;
    transition: color var(--t-normal), padding-left var(--t-normal);
}
.nc-sidebar-footer a:hover { color: var(--nc-gold); padding-left: 4px; }
.nc-sidebar-footer a i { width: 20px; text-align: center; }

/* ---- 22. Dashboard Layout -------------------------------- */
.nc-main-content {
    margin-left: 268px; min-height: 100vh;
    background: linear-gradient(160deg,#EEF2FF 0%,#F0F5FF 50%,#EBF2FF 100%);
    transition: margin-left var(--t-slow);
}
.nc-topnav {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(226,234,255,.75);
    padding: .88rem 1.85rem;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 16px rgba(10,35,66,.05);
}
.nc-page-title { font-size: 1.05rem; font-weight: 700; color: var(--nc-navy); }

/* portal aliases */
.nc-portal-body { font-family: 'Inter',sans-serif; }
.nc-portal-main { margin-left: 268px; min-height: 100vh; background: linear-gradient(160deg,#EEF2FF 0%,#F0F5FF 100%); transition: margin-left var(--t-slow); }
.nc-portal-topbar {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(226,234,255,.75);
    padding: .88rem 1.75rem;
    display: flex; align-items: center; justify-content: flex-end;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 16px rgba(10,35,66,.05);
}
.nc-portal-page-header { padding: 1.85rem 0 .65rem; }
.nc-portal-page-header h4 { font-size: 1.15rem; font-weight: 700; color: var(--nc-navy); margin: 0; }
.nc-portal-content { padding-top: .75rem; }

/* ---- 23. Metric Cards ------------------------------------ */
.nc-metric {
    background: #fff;
    border-radius: var(--nc-radius);
    padding: 1.65rem;
    border: 1.5px solid var(--nc-border);
    box-shadow: var(--nc-shadow);
    display: flex; align-items: center; gap: 1.35rem;
    transition: transform var(--t-bounce), box-shadow var(--t-normal), border-color var(--t-normal);
    position: relative; overflow: hidden;
}
.nc-metric::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad-cool); /* default */
}
.nc-metric.metric-navy::before   { background: var(--grad-primary); }
.nc-metric.metric-blue::before   { background: var(--grad-cool); }
.nc-metric.metric-gold::before   { background: var(--grad-accent); }
.nc-metric.metric-green::before  { background: var(--grad-success); }
.nc-metric.metric-red::before    { background: linear-gradient(135deg,#EF4444,#DC2626); }
.nc-metric.metric-purple::before { background: var(--grad-purple); }
.nc-metric.metric-teal::before   { background: var(--grad-teal); }

.nc-metric:hover { transform: translateY(-4px); box-shadow: var(--nc-shadow-md); border-color: rgba(26,111,196,.18); }
.nc-metric-icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.45rem; flex-shrink: 0;
    transition: transform var(--t-bounce);
}
.nc-metric:hover .nc-metric-icon { transform: scale(1.12) rotate(-7deg); }
.nc-metric-icon.navy   { background: linear-gradient(135deg,rgba(10,35,66,.1),rgba(10,35,66,.05)); color: var(--nc-navy); }
.nc-metric-icon.blue   { background: linear-gradient(135deg,#EFF6FF,#DBEAFE); color: var(--nc-blue); }
.nc-metric-icon.gold   { background: linear-gradient(135deg,#FFFBEB,#FEF3C7); color: var(--nc-gold-dk); }
.nc-metric-icon.green  { background: linear-gradient(135deg,#ECFDF5,#D1FAE5); color: var(--nc-success); }
.nc-metric-icon.red    { background: linear-gradient(135deg,#FEF2F2,#FEE2E2); color: var(--nc-danger); }
.nc-metric-icon.purple { background: linear-gradient(135deg,#F5F3FF,#EDE9FE); color: var(--nc-purple); }
.nc-metric-icon.teal   { background: linear-gradient(135deg,#F0FDFA,#CCFBF1); color: var(--nc-teal); }
.nc-metric-icon.navy-grad   { background: var(--grad-primary); color: #fff; box-shadow: var(--nc-shadow-blue); }
.nc-metric-icon.blue-grad   { background: var(--grad-cool); color: #fff; box-shadow: 0 6px 20px rgba(26,111,196,.3); }
.nc-metric-icon.gold-grad   { background: var(--grad-accent); color: #fff; box-shadow: var(--nc-shadow-gold); }
.nc-metric-icon.green-grad  { background: var(--grad-success); color: #fff; box-shadow: 0 6px 20px rgba(16,185,129,.3); }
.nc-metric-icon.purple-grad { background: var(--grad-purple); color: #fff; box-shadow: 0 6px 20px rgba(124,58,237,.3); }
.nc-metric-icon.teal-grad   { background: var(--grad-teal); color: #fff; box-shadow: 0 6px 20px rgba(13,148,136,.3); }
.nc-metric-value { font-size: 1.75rem; font-weight: 800; color: var(--nc-navy); line-height: 1; font-family: 'Poppins',sans-serif; letter-spacing: -.5px; }
.nc-metric-label { font-size: .78rem; color: var(--nc-muted); margin-top: .3rem; font-weight: 500; }
.nc-metric-change { font-size: .8rem; font-weight: 700; margin-top: .4rem; display: flex; align-items: center; gap: .25rem; }
.nc-metric-change.up   { color: var(--nc-success); }
.nc-metric-change.down { color: var(--nc-danger); }

/* metric sub-aliases */
.metric-icon  { width: 54px; height: 54px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--t-bounce); }
.metric-body  { flex: 1; min-width: 0; }
.metric-body .metric-value { font-size: 1.65rem; font-weight: 800; color: var(--nc-navy); line-height: 1; font-family: 'Poppins',sans-serif; }
.metric-body .metric-label { font-size: .76rem; color: var(--nc-muted); margin-top: .3rem; }

/* ---- 24. Data Tables ------------------------------------- */
.nc-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.nc-table thead th {
    background: linear-gradient(135deg,#F0F5FF,#E8F0FE);
    color: var(--nc-navy); font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    padding: .9rem 1.1rem;
    border-bottom: 1.5px solid var(--nc-border); white-space: nowrap;
}
.nc-table tbody td {
    padding: .9rem 1.1rem; font-size: .875rem; color: var(--nc-dark);
    border-bottom: 1px solid var(--nc-border-lt);
    vertical-align: middle; transition: background var(--t-fast);
}
.nc-table tbody tr:last-child td { border-bottom: none; }
.nc-table tbody tr:hover td { background: linear-gradient(135deg,rgba(240,245,255,.8),rgba(235,242,255,.5)); }
.nc-table-wrap {
    background: #fff; border-radius: var(--nc-radius);
    border: 1.5px solid var(--nc-border);
    overflow: hidden; box-shadow: var(--nc-shadow);
    transition: box-shadow var(--t-normal);
}
.nc-table-wrap:hover { box-shadow: var(--nc-shadow-md); }
.nc-table-header {
    padding: 1.1rem 1.4rem;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1.5px solid var(--nc-border);
    background: linear-gradient(135deg,#FAFCFF,#F5F9FF);
}
.nc-table-header h6 { margin: 0; color: var(--nc-navy); font-size: .97rem; font-weight: 700; }

/* ---- 25. Tracking Timeline ------------------------------- */
.nc-tracking-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.nc-tracking-timeline::before {
    content: '';
    position: absolute; left: 19px; top: 0; bottom: 0;
    width: 2px; background: linear-gradient(180deg, var(--nc-blue), var(--nc-border));
    border-radius: 2px;
}
.nc-tracking-timeline li {
    display: flex; gap: 1.35rem; margin-bottom: 1.75rem;
    position: relative; transition: transform var(--t-normal);
}
.nc-tracking-timeline li:hover { transform: translateX(4px); }
.nc-timeline-dot {
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 2px solid var(--nc-border);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; color: var(--nc-muted); flex-shrink: 0; z-index: 1;
    transition: all var(--t-bounce);
}
.nc-tracking-timeline li.active .nc-timeline-dot {
    background: var(--grad-cool); border-color: var(--nc-blue); color: #fff;
    box-shadow: 0 0 0 5px rgba(26,111,196,.15);
    animation: pulse-ring 2s ease-in-out infinite;
}
.nc-tracking-timeline li.completed .nc-timeline-dot {
    background: var(--grad-success); border-color: var(--nc-success); color: #fff;
}
.nc-timeline-content h6 { margin: 0 0 .2rem; color: var(--nc-navy); font-size: .92rem; font-weight: 700; }
.nc-timeline-content small { color: var(--nc-muted); font-size: .8rem; }
.nc-timeline-content p { color: var(--nc-muted); font-size: .85rem; margin: .25rem 0 0; }

/* portal track-timeline */
.track-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.track-timeline::before {
    content: '';
    position: absolute; left: 7px; top: 0; bottom: 0;
    width: 2px; background: linear-gradient(180deg, var(--nc-blue), var(--nc-border));
}
.track-timeline li {
    display: flex; gap: 1.25rem; padding-left: 28px;
    margin-bottom: 1.6rem; position: relative;
    transition: transform var(--t-normal);
}
.track-timeline li:hover { transform: translateX(4px); }
.track-timeline li::before {
    content: '';
    position: absolute; left: 0; top: 7px;
    width: 16px; height: 16px;
    border-radius: 50%; background: var(--nc-border);
    border: 2.5px solid #fff; z-index: 1;
    box-shadow: 0 2px 8px rgba(10,35,66,.1);
    transition: background var(--t-normal), transform var(--t-bounce);
}
.track-timeline li.latest::before { background: var(--grad-cool); animation: dotPulse 2s ease-in-out infinite; }
.track-time { font-size: .76rem; min-width: 130px; color: var(--nc-muted); padding-top: .15rem; }
.track-content { flex: 1; }
.track-content strong { font-size: .9rem; color: var(--nc-navy); font-weight: 700; }
.track-content small  { color: var(--nc-muted); font-size: .78rem; }

/* ---- 26. Progress Steps ---------------------------------- */
.track-progress { overflow-x: auto; padding-bottom: .5rem; }
.track-steps {
    display: flex; align-items: flex-start; gap: 0;
    min-width: 600px; position: relative;
}
.track-steps::before {
    content: '';
    position: absolute; top: 18px; left: 35px; right: 35px;
    height: 3px; background: var(--nc-border); border-radius: 3px; z-index: 0;
}
.track-steps::after {
    content: '';
    position: absolute; top: 18px; left: 35px;
    height: 3px; background: var(--grad-cool); border-radius: 3px; z-index: 0;
    width: var(--progress-width,0%);
    transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.track-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; position: relative; z-index: 1; }
.track-dot {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; border: 2.5px solid var(--nc-border);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; color: var(--nc-muted);
    transition: all var(--t-bounce); box-shadow: 0 2px 8px rgba(10,35,66,.08);
}
.track-step.done .track-dot   { background: var(--grad-primary); border-color: var(--nc-navy); color: #fff; box-shadow: var(--nc-shadow-blue); }
.track-step.active .track-dot { background: var(--grad-cool); border-color: var(--nc-blue); color: #fff; box-shadow: 0 0 0 6px rgba(26,111,196,.14); animation: pulse-ring 2s ease-in-out infinite; }
.track-label { font-size: .7rem; font-weight: 600; text-align: center; color: var(--nc-muted); line-height: 1.3; max-width: 72px; transition: color var(--t-normal); }
.track-step.done .track-label  { color: var(--nc-navy); }
.track-step.active .track-label { color: var(--nc-blue); }

/* ---- 27. Status Badges ----------------------------------- */
.nc-badge-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .27rem .8rem; border-radius: 50px;
    font-size: .75rem; font-weight: 700; letter-spacing: .3px; text-transform: capitalize;
}
.badge-pending    { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.badge-confirmed  { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
.badge-in_transit, .badge-picked_up { background: #F0F9FF; color: #0C4A6E; border: 1px solid #BAE6FD; }
.badge-delivered  { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.badge-cancelled  { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.badge-on_hold    { background: #FFF7ED; color: #9A3412; border: 1px solid #FDBA74; }
.badge-paid       { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.badge-unpaid     { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.badge-overdue    { background: #FEF2F2; color: #991B1B; border: 1px solid #FCA5A5; }
.badge-active     { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.badge-inactive   { background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1; }
.badge-suspended  { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.badge-accepted   { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.badge-rejected   { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.badge-reviewing  { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
.badge-new        { background: #EFF6FF; color: #1D4ED8; border: 1px solid #93C5FD; }
.backdrop { background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1; }

/* Bootstrap badge gradients */
.badge.bg-warning  { background: linear-gradient(135deg,#F59E0B,#FB923C) !important; color: #fff; border: none; }
.badge.bg-success  { background: var(--grad-success) !important; color: #fff; border: none; }
.badge.bg-danger   { background: linear-gradient(135deg,#EF4444,#DC2626) !important; color: #fff; border: none; }
.badge.bg-primary  { background: var(--grad-cool) !important; color: #fff; border: none; }
.badge.bg-secondary{ background: linear-gradient(135deg,#64748B,#475569) !important; color: #fff; border: none; }
.badge.bg-info     { background: var(--grad-teal) !important; color: #fff; border: none; }
.badge.bg-dark     { background: var(--grad-primary) !important; color: #fff; border: none; }

/* ---- 28. Footer ------------------------------------------ */
.nc-footer {
    background: var(--grad-sidebar);
    color: rgba(255,255,255,.68);
    position: relative; overflow: hidden;
}
.nc-footer::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 28% 65%, rgba(26,111,196,.14) 0%, transparent 50%),
        radial-gradient(circle at 72% 18%, rgba(245,166,35,.07) 0%, transparent 40%);
    pointer-events: none;
}
.nc-footer-top { padding: 72px 0 48px; position: relative; }
.nc-footer a { color: rgba(255,255,255,.62); transition: color var(--t-normal); }
.nc-footer a:hover { color: var(--nc-gold); }
.nc-footer-brand { text-decoration: none; }
.nc-footer-brand .nc-brand-text { font-size: 1.35rem; }
.nc-footer-about { font-size: .875rem; line-height: 1.8; color: rgba(255,255,255,.58); }
.nc-social-links a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,255,255,.07); color: rgba(255,255,255,.62);
    font-size: 1rem; margin-right: .4rem;
    border: 1px solid rgba(255,255,255,.1);
    transition: background var(--t-normal), color var(--t-normal), transform var(--t-bounce), box-shadow var(--t-normal);
}
.nc-social-links a:hover { background: var(--grad-accent); color: var(--nc-navy); border-color: transparent; box-shadow: var(--nc-shadow-gold); transform: translateY(-3px); }
.nc-footer-heading {
    color: #fff; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px;
    margin-bottom: 1.35rem; padding-bottom: .65rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.nc-footer-links { list-style: none; padding: 0; margin: 0; }
.nc-footer-links li { margin-bottom: .65rem; }
.nc-footer-links a { font-size: .875rem; color: rgba(255,255,255,.58); transition: color var(--t-normal), padding-left var(--t-normal); }
.nc-footer-links a:hover { color: var(--nc-gold); padding-left: 4px; }
.nc-footer-contact { list-style: none; padding: 0; margin: 0; }
.nc-footer-contact li {
    display: flex; gap: .65rem; align-items: flex-start;
    margin-bottom: .85rem; font-size: .875rem; color: rgba(255,255,255,.58);
}
.nc-footer-contact li i { color: var(--nc-gold); margin-top: .15rem; flex-shrink: 0; }
.nc-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 1.5rem 0; font-size: .8rem; color: rgba(255,255,255,.38);
    position: relative;
}
.nc-footer-legal { display: flex; gap: 1.5rem; }
.nc-footer-legal a { color: rgba(255,255,255,.38); font-size: .8rem; }
.nc-footer-legal a:hover { color: var(--nc-gold); }

/* ---- 29. Alerts ------------------------------------------ */
.alert { border-radius: var(--nc-radius-sm); border: none; font-size: .9rem; font-weight: 500; padding: .88rem 1.2rem; }
.alert-success { background: #ECFDF5; color: #065F46; border-left: 4px solid var(--nc-success); }
.alert-danger  { background: #FEF2F2; color: #991B1B; border-left: 4px solid var(--nc-danger); }
.alert-warning { background: #FFFBEB; color: #78350F; border-left: 4px solid #F59E0B; }
.alert-info    { background: #EFF6FF; color: #1E40AF; border-left: 4px solid #3B82F6; }

/* ---- 30. Pagination -------------------------------------- */
.pagination .page-link {
    border-radius: var(--nc-radius-sm);
    border: 1.5px solid var(--nc-border);
    color: var(--nc-navy); font-weight: 500; font-size: .875rem;
    padding: .45rem .85rem; margin: 0 2px;
    transition: all var(--t-normal);
}
.pagination .page-link:hover { border-color: var(--nc-blue); color: var(--nc-blue); background: var(--nc-light-2); transform: translateY(-1px); }
.pagination .page-item.active .page-link { background: var(--grad-cool); border-color: var(--nc-blue); color: #fff; box-shadow: var(--nc-shadow-blue); }
.pagination .page-item.disabled .page-link { opacity: .38; }

/* ---- 31. Modal overrides --------------------------------- */
.modal-content { border: none; border-radius: var(--nc-radius-lg); box-shadow: var(--nc-shadow-xl); overflow: hidden; }
.modal-header { background: var(--grad-primary); border-bottom: none; padding: 1.35rem 1.75rem; }
.modal-header .modal-title { color: #fff; font-weight: 700; font-size: 1rem; }
.modal-header .btn-close { filter: invert(1); opacity: .65; }

/* ---- 32. Misc ------------------------------------------- */
.nc-divider { border: none; border-top: 1px solid var(--nc-border); }
.nc-divider-gradient { border: none; height: 2px; background: linear-gradient(90deg,transparent,var(--nc-blue),var(--nc-gold),transparent); margin: 2rem 0; }
.nc-bg-gradient { background: linear-gradient(135deg,#EEF2FF 0%,#F0F5FF 100%); }
.nc-skeleton { background: linear-gradient(90deg,#f0f2f8 25%,#e4e8f4 50%,#f0f2f8 75%); background-size: 200% 100%; animation: shimmer 1.8s linear infinite; border-radius: var(--nc-radius-sm); }
.nc-glass-card { background: var(--glass-bg-light); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.9); border-radius: var(--nc-radius); box-shadow: var(--nc-shadow); }

/* ---- 33. Contact / About extras -------------------------- */
.nc-contact-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-bottom: 1rem;
    transition: transform var(--t-bounce);
}
.nc-contact-icon:hover { transform: scale(1.12) rotate(-8deg); }
.nc-contact-icon.ci-phone   { background: var(--grad-cool); color: #fff; box-shadow: var(--nc-shadow-blue); }
.nc-contact-icon.ci-email   { background: var(--grad-success); color: #fff; }
.nc-contact-icon.ci-address { background: var(--grad-purple); color: #fff; }
.nc-contact-icon.ci-hours   { background: var(--grad-accent); color: #fff; }

.nc-milestone {
    background: #fff; border: 1.5px solid var(--nc-border);
    border-radius: var(--nc-radius); padding: 1.5rem; text-align: center;
    transition: transform var(--t-bounce), box-shadow var(--t-normal);
    position: relative; overflow: hidden;
}
.nc-milestone::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-accent); }
.nc-milestone:hover { transform: translateY(-5px); box-shadow: var(--nc-shadow-md); }
.nc-milestone h5 { font-size: 1.75rem; font-weight: 800; color: var(--nc-navy); font-family: 'Poppins',sans-serif; }
.nc-milestone p  { color: var(--nc-muted); font-size: .875rem; margin: 0; }

/* ---- 34. Responsive layout ------------------------------- */
@media (max-width: 991.98px) {
    .nc-sidebar { transform: translateX(-100%); }
    .nc-sidebar.open { transform: translateX(0); }
    .nc-main-content { margin-left: 0; }
    .nc-portal-main  { margin-left: 0; }
    .nc-step-connector { display: none; }
}

/* ---- 35. Print styles ------------------------------------ */
@media print {
    .nc-sidebar, .nc-portal-topbar, .nc-portal-page-header, .btn, nav, .nc-topnav { display: none !important; }
    .nc-main-content, .nc-portal-main { margin: 0 !important; }
    #invoice-print-area { box-shadow: none !important; border: none !important; }
    body { background: #fff !important; }
}

/* ---- 36. Dashboard Welcome Banner ------------------------ */
.nc-welcome-banner {
    background: var(--grad-primary);
    background-size: 200% 200%;
    animation: gradientMove 12s ease infinite;
    border-radius: var(--nc-radius);
    padding: 1.65rem 2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.nc-welcome-banner::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 80% 50%, rgba(245,166,35,.12) 0%, transparent 50%),
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    pointer-events: none;
}
.nc-welcome-banner h5 { color: #fff; font-size: 1.15rem; margin-bottom: .25rem; font-weight: 700; }
.nc-welcome-banner p  { color: rgba(255,255,255,.72); margin: 0; font-size: .9rem; }
.nc-welcome-banner .nc-wb-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}

/* ---- 37. Quick-action card ------------------------------- */
.nc-quick-action {
    background: #fff; border: 1.5px solid var(--nc-border);
    border-radius: var(--nc-radius); padding: 1.5rem 1.35rem;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column; align-items: center; gap: .65rem;
    text-align: center; transition: transform var(--t-bounce), box-shadow var(--t-normal), border-color var(--t-normal);
    position: relative; overflow: hidden;
}
.nc-quick-action::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 0; height: 3px;
    background: var(--grad-accent);
    transition: width var(--t-slow);
    border-radius: 0 0 var(--nc-radius) var(--nc-radius);
}
.nc-quick-action:hover { transform: translateY(-6px); box-shadow: var(--nc-shadow-md); border-color: rgba(26,111,196,.25); }
.nc-quick-action:hover::after { width: 100%; }
.nc-quick-action .nc-qa-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    transition: transform var(--t-bounce);
}
.nc-quick-action:hover .nc-qa-icon { transform: scale(1.15) rotate(-8deg); }
.nc-quick-action h6 { font-size: .88rem; color: var(--nc-navy); margin: 0; font-weight: 700; }
.nc-quick-action small { color: var(--nc-muted); font-size: .76rem; }

/* ---- 38. Form input focus glow ring ---------------------- */
.nc-input-focused .form-control,
.nc-input-focused .form-select {
    box-shadow: 0 0 0 4px rgba(26,111,196,.12) !important;
}

/* ---- 39. Page fade in animation for portals -------------- */
.nc-main-content > *,
.nc-portal-main > .p-4,
.nc-portal-main > .px-4 {
    animation: fadeInUp .45s cubic-bezier(.4,0,.2,1) both;
}

/* ---- 40. Shimmer on skeleton loaders --------------------- */
.nc-loading {
    pointer-events: none;
}
.nc-loading *:not(input):not(select):not(button) {
    background: linear-gradient(90deg,#f0f2f8 25%,#e4e8f4 50%,#f0f2f8 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.8s linear infinite !important;
    color: transparent !important;
    border-color: transparent !important;
    border-radius: 4px !important;
}

/* ---- 41. Smooth .active underline on public nav ---------- */
.nc-navbar .nav-link.active::after { left: .88rem; right: .88rem; }

/* ---- 42. Empty state ------------------------------------ */
.nc-empty-state {
    text-align: center; padding: 3.5rem 2rem;
}
.nc-empty-state i  { font-size: 3rem; color: var(--nc-border); margin-bottom: 1rem; display: block; }
.nc-empty-state h5 { color: var(--nc-muted); font-size: 1rem; font-weight: 600; }
.nc-empty-state p  { color: var(--nc-muted); font-size: .875rem; }

/* ---- 43. metric-icon gradient variants (portal aliases) -- */
.metric-icon.navy-grad   { background: var(--grad-primary); color: #fff; box-shadow: var(--nc-shadow-blue); }
.metric-icon.blue-grad   { background: var(--grad-cool);    color: #fff; box-shadow: 0 6px 20px rgba(26,111,196,.3); }
.metric-icon.gold-grad   { background: var(--grad-accent);  color: #fff; box-shadow: 0 6px 20px rgba(245,166,35,.3); }
.metric-icon.green-grad  { background: var(--grad-success); color: #fff; box-shadow: 0 6px 20px rgba(16,185,129,.3); }
.metric-icon.red-grad    { background: linear-gradient(135deg,#EF4444,#DC2626); color: #fff; box-shadow: 0 6px 20px rgba(239,68,68,.3); }
.metric-icon.purple-grad { background: var(--grad-purple);  color: #fff; box-shadow: 0 6px 20px rgba(124,58,237,.3); }
.metric-icon.teal-grad   { background: var(--grad-teal);    color: #fff; box-shadow: 0 6px 20px rgba(13,148,136,.3); }

/* ---- 44. Quote page service radio cards ---- */
.nc-svc-radio { background: #fff; }
.nc-svc-radio:hover { border-color: var(--nc-blue) !important; background: var(--nc-light); transform: translateY(-2px); box-shadow: var(--nc-shadow); }
.btn-check:checked + .nc-svc-radio { border-color: var(--nc-blue) !important; background: linear-gradient(135deg, rgba(26,111,196,.06), rgba(79,172,254,.08)); box-shadow: 0 0 0 3px rgba(26,111,196,.15); }
.btn-check:checked + .nc-svc-radio .small { color: var(--nc-navy); }

/* ---- 45. Progress / tracking page enhancements ---- */
.nc-track-step { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.25rem; border-radius: 14px; transition: background .2s; }
.nc-track-step:hover { background: var(--nc-light); }
.nc-track-step-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.nc-track-step-icon.done  { background: var(--grad-success); color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.35); }
.nc-track-step-icon.active { background: var(--grad-cool); color: #fff; animation: pulse 1.8s infinite; box-shadow: 0 4px 14px rgba(26,111,196,.35); }
.nc-track-step-icon.pending { background: var(--nc-light); color: var(--nc-muted); border: 2px dashed var(--nc-border); }
.nc-track-line { width: 2px; height: 30px; margin: 0 auto; background: linear-gradient(to bottom, var(--nc-border), transparent); }

/* ---- 46. Table enhancements ---- */
.nc-table tbody tr { transition: background .18s, box-shadow .18s; }
.nc-table tbody tr:hover { background: rgba(26,111,196,.04); box-shadow: inset 3px 0 0 var(--nc-blue); }