/* ══════════════════════════════════════════════════════════════
   CC-I Design System: Consolidated Application Styles
   Merged from: base.css + components.css + dashboard.css + configurator.css
   ══════════════════════════════════════════════════════════════ */

/* ══ 1. Reset & Base Typography ══════════════════════════════ */

/* ══ Base: Reset, Typography, Text Utilities, Animations ══ */

*,::after,::before {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:5rem;
    -webkit-text-size-adjust:100%
}
body {
    font-family:var(--mtv-font);
    font-weight:400;
    line-height:1.7;
    color:var(--mtv-text-body);
    background:var(--mtv-bg-white);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    max-width:100vw;
    letter-spacing:-0.01em
}
::selection {
    background:var(--mtv-primary);
    color:#fff
}
h1,h2,h3,h4,h5,h6 {
    font-weight:700;
    letter-spacing:-0.025em;
    line-height:1.2;
    color:var(--mtv-text-dark)
}
.text-gradient {
    background:linear-gradient(135deg,var(--mtv-primary),var(--mtv-secondary));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text
}
.text-gradient-gold {
    background:linear-gradient(135deg,var(--mtv-accent),#f97316);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text
}

.mtv-divider {
    height:1px;
    background:linear-gradient(90deg,transparent,var(--mtv-border-light),transparent);
    margin:2rem 0
}
.mtv-badge {
    display:inline-flex;
    align-items:center;
    padding:.25rem .75rem;
    font-size:.75rem;
    font-weight:600;
    border-radius:var(--mtv-radius-full)
}
.mtv-badge-success {
    background:rgba(16,185,129,.1);
    color:var(--mtv-success)
}
.mtv-badge-warning {
    background:rgba(245,158,11,.1);
    color:var(--mtv-warning)
}
.mtv-badge-danger {
    background:rgba(239,68,68,.1);
    color:var(--mtv-danger)
}
.mtv-badge-primary {
    background:rgba(35,61,255,.1);
    color:var(--mtv-primary)
}

.text-muted { color: var(--mtv-text-muted) !important; }
.mtv-text-muted {
    color:var(--mtv-text-muted)
}

/* ── Form global (Design Tokens) ── */
.form-label { color: var(--mtv-text-dark); font-weight: 500; }
.invalid-feedback { color: var(--mtv-danger); }
.mtv-form-group { margin-bottom: var(--space-4, 1rem); }
.mtv-text-muted-light {
    opacity:.7
}
.mtv-text-primary-light {
    color:var(--mtv-primary-light)
}

.mtv-badge-accent {
    background:rgba(245,158,11,.1);
    color:var(--mtv-accent)
}

.text-mtv-white {
    color:var(--mtv-text-white)
}
.text-mtv-muted {
    color:var(--mtv-text-muted)
}
.text-mtv-primary-light {
    color:var(--mtv-primary-light)
}
.text-mtv-secondary {
    color:var(--mtv-secondary)
}
.text-mtv-accent {
    color:var(--mtv-accent)
}
.text-mtv-success {
    color:var(--mtv-success)
}

.mtv-animate-in {
    opacity:0;
    transform:translateY(16px);
    transition:opacity .7s cubic-bezier(.16, 1, .3, 1),transform .7s cubic-bezier(.16, 1, .3, 1)
}
.mtv-animate-in.mtv-visible {
    opacity:1;
    transform:translateY(0)
}
.mtv-animate-in[data-delay="1"] {
    transition-delay:0.1s
}
.mtv-animate-in[data-delay="2"] {
    transition-delay:0.2s
}
.mtv-animate-in[data-delay="3"] {
    transition-delay:0.3s
}
.mtv-animate-in[data-delay="4"] {
    transition-delay:0.4s
}
.mtv-animate-in[data-delay="5"] {
    transition-delay:0.5s
}
.mtv-animate-in[data-delay="6"] {
    transition-delay:0.6s
}
.mtv-animate-left {
    opacity:0;
    transform:translateX(-24px);
    transition:opacity .6s cubic-bezier(.16, 1, .3, 1),transform .6s cubic-bezier(.16, 1, .3, 1)
}
.mtv-animate-left.mtv-visible {
    opacity:1;
    transform:translateX(0)
}
.mtv-animate-right {
    opacity:0;
    transform:translateX(24px);
    transition:opacity .6s cubic-bezier(.16, 1, .3, 1),transform .6s cubic-bezier(.16, 1, .3, 1)
}
.mtv-animate-right.mtv-visible {
    opacity:1;
    transform:translateX(0)
}
.mtv-animate-scale {
    opacity:0;
    transform:scale(.9);
    transition:opacity .5s cubic-bezier(.16, 1, .3, 1),transform .5s cubic-bezier(.16, 1, .3, 1)
}
.mtv-animate-scale.mtv-visible {
    opacity:1;
    transform:scale(1)
}
.mtv-step-panel {
    display:none;
    opacity:0;
    transform:translateY(12px);
    transition:opacity .35s ease,transform .35s ease
}
.mtv-step-panel.active {
    display:block;
    opacity:1;
    transform:translateY(0)
}
.mtv-skeleton {
    background:linear-gradient(90deg,#e2e8f0 25%,#eef2ff 50%,#e2e8f0 75%);
    background-size:200% 100%;
    animation:mtv-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius:var(--mtv-radius-sm)
}
.mtv-skeleton--text {
    height:1rem;
    width:60%;
    margin-bottom:.5rem
}
.mtv-skeleton--title {
    height:1.5rem;
    width:40%;
    margin-bottom:.75rem
}

.mtv-skeleton--card {
    height:120px;
    border-radius:var(--mtv-radius)
}

@keyframes mtv-skeleton-pulse {
0% {
    background-position:200% 0
}
100% {
    background-position:-200% 0
}
}
.mtv-skeleton--dark {
    background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);
    background-size:200% 100%;
    animation:mtv-skeleton-pulse 1.5s ease-in-out infinite
}
.btn-loading {
    pointer-events:none;
    opacity:.7;
    position:relative
}
.btn-loading .btn-text {
    visibility:hidden
}
.btn-loading::after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:1.25rem;
    height:1.25rem;
    margin:-.625rem 0 0 -.625rem;
    border:2px solid rgba(255,255,255,.3);
    border-top-color:#fff;
    border-radius:50%;
    animation:mtv-btn-spin .6s linear infinite
}
@keyframes mtv-btn-spin {
to {
    transform:rotate(360deg)
}
}

[data-tooltip] {
    position:relative;
    cursor:help
}
[data-tooltip]::after,[data-tooltip]::before {
    position:absolute;
    z-index:1000;
    pointer-events:none;
    opacity:0;
    transition:opacity .2s ease,transform .2s ease
}
[data-tooltip]::before {
    content:attr(data-tooltip);
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%) translateY(4px);
    padding:.5rem .75rem;
    background:var(--mtv-bg-dark);
    color:var(--mtv-text-white);
    font-size:.75rem;
    font-weight:500;
    line-height:1.4;
    border-radius:var(--mtv-radius-sm);
    white-space:nowrap;
    max-width:280px;
    white-space:normal;
    text-align:center;
    box-shadow:0 4px 12px rgba(0,0,0,.25)
}
[data-tooltip]::after {
    content:'';
    bottom:calc(100% + 2px);
    left:50%;
    transform:translateX(-50%) translateY(4px);
    border:5px solid transparent;
    border-top-color:var(--mtv-bg-dark)
}
[data-tooltip]:hover::after,[data-tooltip]:hover::before {
    opacity:1;
    transform:translateX(-50%) translateY(0)
}
[data-tooltip-pos=bottom]::before {
    bottom:auto;
    top:calc(100% + 8px);
    transform:translateX(-50%) translateY(-4px)
}
[data-tooltip-pos=bottom]::after {
    bottom:auto;
    top:calc(100% + 2px);
    border-top-color:transparent;
    border-bottom-color:var(--mtv-bg-dark);
    transform:translateX(-50%) translateY(-4px)
}
[data-tooltip-pos=bottom]:hover::after,[data-tooltip-pos=bottom]:hover::before {
    transform:translateX(-50%) translateY(0)
}


.mtv-text-primary {
    color:var(--mtv-primary,#233DFF)
}
.mtv-text-xs {
    font-size:.5rem
}
.mtv-text-sm-alt {
    font-size:.7rem
}
.mtv-text-md {
    font-size:.8rem
}
.mtv-text-lg-alt {
    font-size:1.1rem
}
.mtv-thumbnail {
    height:160px;
    object-fit:cover
}
.mtv-thumbnail-placeholder {
    height:160px;
    background:var(--bs-gray-100,#f8f9fa);
    display:flex;
    align-items:center;
    justify-content:center
}
.mtv-image-preview {
    max-height:400px;
    object-fit:contain;
    background:var(--bs-gray-100,#f8f9fa)
}
.mtv-spinner-lg {
    width:3rem;
    height:3rem
}
.mtv-progress-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    transition:background .3s
}
.mtv-progress-dot--active {
    background:var(--mtv-primary,#233DFF)
}
.mtv-progress-dot--inactive {
    background:#e5e7eb
}
.mtv-max-480 {
    max-width:480px;
    margin-left:auto;
    margin-right:auto
}
.mtv-max-540 {
    max-width:540px;
    margin-left:auto;
    margin-right:auto
}
.mtv-max-720 {
    max-width:720px
}


/* x-cloak (for Alpine.js components) */

[x-cloak]{display:none!important}

@media (prefers-reduced-motion:reduce) {
.mtv-animate-in,.mtv-animate-left,.mtv-animate-right,.mtv-animate-scale {
    opacity:1;
    transform:none;
    transition:none
}
.mtv-skeleton,.mtv-skeleton--dark {
    animation:none
}
.btn-loading::after {
    animation:none
}
}

/* ══ 2. Components: Navbar, Hero, Cards, Sections, Footer ═══ */

/* ══ Components: Navbar, Hero, Cards, Sections, Footer, Auth, Icons ══ */

.mtv-navbar {
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(0,0,0,.06);
    padding:1rem 0;
    transition:var(--mtv-transition)
}
.mtv-navbar.scrolled {
    background:rgba(255,255,255,.95);
    box-shadow:var(--mtv-shadow-md)
}
.mtv-navbar .navbar-brand {
    font-weight:700;
    font-size:1.5rem;
    color:var(--mtv-text-dark);
    letter-spacing:-.02em
}
.mtv-navbar .navbar-brand span {
    color:var(--mtv-primary)
}
.mtv-navbar .nav-link {
    color:var(--mtv-gray-700, #374151);
    font-weight:500;
    font-size:.9rem;
    padding:.5rem .875rem;
    transition:var(--mtv-transition-fast);
    border-radius:var(--mtv-radius-sm);
    position:relative
}
.mtv-navbar .nav-link.active,.mtv-navbar .nav-link:hover {
    color:var(--mtv-primary);
    background:rgba(35,61,255,.07)
}
.mtv-navbar .nav-link.active::after {
    display:none
}
/* ── Card base ── */
.mtv-card {
    background: var(--mtv-bg-white);
    border: 1px solid var(--mtv-border-light);
    border-radius: var(--mtv-radius-lg);
    padding: var(--space-6, 2rem);
    transition: var(--mtv-transition);
    box-shadow: var(--mtv-shadow-card);
}
.mtv-card:hover {
    box-shadow: var(--mtv-shadow-card-hover);
    transform: translateY(-3px);
    border-color: var(--mtv-color-primary-200, #BFDBFE);
}

.mtv-card--glass {
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-color:rgba(255,255,255,0.5)
}

/* ── Glass effect ── */
.mtv-glass {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--mtv-shadow-card);
}

/* ── Icon circle base (rounded square) ── */
.mtv-icon-circle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}
.mtv-icon-circle--lg {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    font-size: 1.5rem;
    border-radius: 14px;
}
.mtv-icon-circle--sm {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 0.8rem;
    border-radius: 8px;
}

/* ── Section header classes ── */
.mtv-section-label {
    display: inline-block;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .5rem 1.25rem;
    border-radius: var(--mtv-radius-full);
    background: var(--mtv-bg-primary-hover);
    color: var(--mtv-primary);
    margin-bottom: 1rem;
    font-weight: 600;
}
.mtv-section-title {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
    margin-bottom: 1rem;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}
.mtv-section-subtitle {
    font-size: 1.05rem;
    color: var(--mtv-text-muted);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
}

.btn-mtv-primary {
    background:linear-gradient(135deg,var(--mtv-primary),var(--mtv-primary-light));
    color:#fff;
    border:none;
    padding:.875rem 2.25rem;
    font-weight:600;
    font-size:.925rem;
    border-radius:var(--mtv-radius);
    min-height:44px;
    transition:var(--mtv-transition);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.btn-mtv-primary:hover {
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 6px 20px var(--mtv-primary-glow);
    background:linear-gradient(135deg,var(--mtv-primary-dark),var(--mtv-primary));
}
.btn-mtv-primary:active { transform:translateY(0); }
.btn-mtv-primary:focus-visible {
    outline:2px solid var(--mtv-primary);
    outline-offset:2px;
}
.btn-mtv-secondary {
    background:transparent;
    color:var(--mtv-text-dark);
    border:1px solid var(--mtv-border-light);
    padding:.875rem 2.25rem;
    font-weight:600;
    font-size:.925rem;
    border-radius:var(--mtv-radius);
    min-height:44px;
    transition:var(--mtv-transition);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.btn-mtv-secondary:hover {
    color:var(--mtv-primary);
    background:var(--mtv-primary-subtle);
    border-color:var(--mtv-primary);
}
.btn-mtv-secondary:focus-visible {
    outline:2px solid var(--mtv-primary);
    outline-offset:2px;
}
.btn-mtv-accent {
    background:linear-gradient(135deg,var(--mtv-accent),#f97316);
    color:#fff;
    border:none;
    padding:.875rem 2.25rem;
    font-weight:600;
    border-radius:var(--mtv-radius);
    min-height:44px;
    transition:var(--mtv-transition);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.btn-mtv-accent:hover {
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 8px 30px rgba(245,158,11,.2);
}
.btn-mtv-accent:focus-visible {
    outline:2px solid var(--mtv-accent);
    outline-offset:2px;
}
.mtv-hero {
    position:relative;
    min-height:92vh;
    display:flex;
    align-items:center;
    background:var(--mtv-gradient-hero);
    overflow:hidden;
    padding:7rem 0 5rem
}
.mtv-hero::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:radial-gradient(ellipse at 25% 40%,rgba(35,61,255,.04) 0,transparent 55%),radial-gradient(ellipse at 75% 70%,rgba(139,92,246,.03) 0,transparent 55%);
    pointer-events:none
}
.mtv-hero-content {
    position:relative;
    z-index:2
}
.mtv-hero h1 {
    font-size:clamp(2rem, 5vw, 3.5rem);
    font-weight:700;
    color:var(--mtv-text-dark);
    letter-spacing:-.025em;
    line-height:1.15
}
.mtv-hero p.lead {
    font-size:clamp(1.05rem, 1.8vw, 1.2rem);
    color:var(--mtv-gray-500, #6B7280);
    max-width:520px;
    line-height:1.8
}
.mtv-hero-label {
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mtv-gray-400);
    font-weight: 500;
}
.mtv-hero-title-custom {
    font-size: clamp(1.75rem, 4.5vw, 3.25rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.025em;
}
.mtv-hero-lead-custom {
    max-width: 520px;
    color: var(--mtv-gray-500);
    line-height: 1.8;
    font-size: clamp(1rem, 1.5vw, 1.1rem);
}
.mtv-hero-trust {
    font-size: .82rem;
    color: var(--mtv-gray-400);
}
.mtv-hero-trust i.fa-solid { color: var(--mtv-primary-light); }
.mtv-hero-card-title { font-size: .95rem; color: var(--mtv-text-dark); font-weight: 600; }
.mtv-hero-card-desc { font-size: .82rem; color: var(--mtv-gray-500); }
/* Home: Pain/Solution cards */
.mtv-home-pain-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(239,68,68,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--mtv-danger); font-size: .85rem; }
.mtv-home-solution-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(34,197,94,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--mtv-success); font-size: .85rem; }
.mtv-home-pain-text { font-size: .9rem; color: var(--mtv-text-body); margin: 0; line-height: 1.5; font-weight: 500; }
.mtv-home-solution-text { font-size: .85rem; color: var(--mtv-text-muted); margin: 0; line-height: 1.5; }
/* Home: Steps */
.mtv-home-step-num { margin-bottom: .75rem; font-size: 2.5rem; font-weight: 700; color: var(--mtv-primary); opacity: .15; line-height: 1; }
.mtv-home-step-title { font-size: 1.1rem; font-weight: 600; }
.mtv-home-step-text { color: var(--mtv-text-muted); font-size: .9rem; line-height: 1.7; margin: 0; }
/* Home: Industries */
.mtv-home-industry-title { font-size: .95rem; font-weight: 600; }
.mtv-home-industry-pain { font-size: .82rem; color: var(--mtv-danger); margin-bottom: .5rem; font-weight: 500; }
.mtv-home-industry-pain i { font-size: .7rem; }
.mtv-home-industry-solution { color: var(--mtv-text-muted); font-size: .82rem; line-height: 1.6; margin-bottom: .75rem; }
.mtv-home-industry-result { font-size: .78rem; color: var(--mtv-success); margin: 0; font-weight: 500; }
.mtv-home-industry-result i { font-size: .65rem; }
.mtv-home-industry-cta { font-size: .78rem; color: var(--mtv-primary); font-weight: 600; }
.mtv-home-industry-cta i { font-size: .6rem; }
/* Home: Stats (dark section) */
.mtv-home-stat-number { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: #fff; line-height: 1; }
.mtv-home-stat-suffix { color: var(--mtv-primary-light); }
.mtv-home-stat-label { font-size: .8rem; color: rgba(255,255,255,.4); margin-top: .75rem; line-height: 1.5; }
/* Home: Rent card */
.mtv-home-rent-card { padding: 2.5rem; }
.mtv-home-rent-title { font-size: 1.25rem; color: var(--mtv-text-dark); font-weight: 600; }
.mtv-home-rent-price { font-size: .82rem; color: var(--mtv-primary); font-weight: 600; margin-bottom: 1rem; }
.mtv-home-rent-desc { font-size: .9rem; color: var(--mtv-text-muted); line-height: 1.7; margin-bottom: 1.5rem; }
.mtv-home-rent-list { font-size: .85rem; }
.mtv-home-rent-list .fa-check { color: var(--mtv-success); margin-top: 3px; font-size: .7rem; }
.mtv-home-rent-list span { color: var(--mtv-text-body); }
/* Home: Inclusive */
.mtv-home-inclusive-title { font-size: .95rem; font-weight: 600; }
.mtv-home-inclusive-text { color: var(--mtv-text-muted); font-size: .85rem; line-height: 1.6; margin: 0; }
/* Home: FAQ */
.mtv-home-faq-q { font-size: .95rem; color: var(--mtv-text-dark); font-weight: 600; }
.mtv-home-faq-chevron { font-size: .65rem; color: var(--mtv-text-muted); transition: transform .2s; }
.mtv-home-faq-chevron--open { transform: rotate(180deg); }
.mtv-home-faq-a { font-size: .88rem; color: var(--mtv-text-muted); line-height: 1.7; margin: .75rem 0 0; }
/* Stat card variants (dashboard) */
.mtv-stat-card-icon--success { background: rgba(34,197,94,.08); color: var(--mtv-success); width: 28px; height: 28px; font-size: .75rem; }
.mtv-stat-card-icon--warning { background: rgba(245,158,11,.08); color: var(--mtv-warning); width: 28px; height: 28px; font-size: .75rem; }
.mtv-stat-card-icon--danger { background: rgba(239,68,68,.08); color: var(--mtv-danger); width: 28px; height: 28px; font-size: .75rem; }
.mtv-stat-card-value--sm { font-size: 1.25rem; }
/* Tables/code in detail views */
.mtv-table-sm { font-size: .85rem; }
.mtv-code-sm { font-size: .85rem; }
/* Testimonial quote icon */
.mtv-testimonial-quote { color: var(--mtv-primary-light); opacity: .3; font-size: .9rem; }

/* cc-page-help */
.mtv-help-title { font-size: .85rem; }
.mtv-help-list { line-height: 1.7; }
.mtv-help-icon { font-size: .7rem; }
.mtv-help-close { font-size: .6rem; }

/* cc-highlight-list (product modal + display card) */
.mtv-highlight-list { list-style: none; padding: 0; margin: 0; }
.mtv-highlight-list li { display: flex; align-items: center; gap: .4rem; padding: .15rem 0; font-size: .88rem; }
.mtv-highlight-list li i { flex-shrink: 0; }

/* Product modal description pre-line */
.mtv-pre-line { white-space: pre-line; }

/* Display card: featured badge + placeholder icon */
.mtv-badge-featured { font-size: .65rem; }
.mtv-badge-featured i { font-size: .55rem; }
.mtv-hw-card-placeholder-icon { font-size: 3rem; color: var(--mtv-text-muted); opacity: .4; }

/* Configurator review */
.cfg-review-wrapper { max-width: 700px; margin: 0 auto; }
.cfg-section-title { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; }
.cfg-device-delivery-addr { font-size: .75rem; }
.cfg-contract-chevron { font-size: .65rem; transition: transform .2s; }
.cfg-contract-chevron--open { transform: rotate(180deg); }

/* Admin cockpit / stat-card variants */
.mtv-stat-card-icon--primary { background: rgba(35,61,255,.08); color: var(--mtv-primary); }
.mtv-stat-card-denominator { font-size: .7em; }
.mtv-badge-action { font-size: .6rem; }
.mtv-alert-sm { font-size: .85rem; }

/* Customer portal hero card states */
.mtv-customer-hero { border-left: 4px solid; }
.mtv-customer-hero--online { background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(34,197,94,.02)); border-left-color: var(--mtv-success); }
.mtv-customer-hero--offline { background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(239,68,68,.02)); border-left-color: var(--mtv-danger); }
.mtv-customer-hero--partial { background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.02)); border-left-color: var(--mtv-warning); }
.mtv-customer-hero--default { background: linear-gradient(135deg, rgba(35,61,255,.04), rgba(35,61,255,.01)); border-left-color: var(--mtv-primary); }
.mtv-customer-hero-stat { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.mtv-customer-hero-stat--online { color: var(--mtv-success); }
.mtv-customer-hero-stat--offline { color: var(--mtv-danger); }
.mtv-customer-hero-stat--partial { color: var(--mtv-warning); }
.mtv-customer-hero-stat--default { color: var(--mtv-primary); }
.mtv-customer-hero-label { font-size: .95rem; font-weight: 500; }

/* Offline screen hint */
.mtv-offline-hint { font-size: .72rem; }
/* Configurator: coupon input */
.cfg-coupon-input { text-transform: uppercase; }
/* Portal: stat-card icon secondary */
.mtv-stat-card-icon--secondary { background: rgba(14,165,233,.08); color: var(--mtv-secondary); }
/* Installer/portal list items */
.mtv-portal-item-link { color: var(--mtv-text-dark); font-weight: 500; font-size: .875rem; text-decoration: none; display: block; }
.mtv-portal-item-link:hover { color: var(--mtv-primary); }
.mtv-portal-meta { font-size: .72rem; color: var(--mtv-text-muted); }
.mtv-portal-date { font-size: .7rem; color: var(--mtv-text-muted); }
.mtv-portal-badge { font-size: .6rem; }
.mtv-portal-maps { font-size: .68rem; }
.mtv-portal-heading { font-size: 1.15rem; }
/* Notifications: unread dot */
.mtv-notification-dot { font-size: .5rem; }
/* Analytics KPI icon */
.mtv-analytics-kpi-icon { font-size: 1.5rem; }
/* Analytics chart bar */
.mtv-chart-bar-wrap { display: flex; align-items: flex-end; gap: 1px; height: 160px; }
.mtv-chart-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; }
.mtv-progress-xs { height: 6px; }

/* ── Pipeline (screens) ── */
.mtv-pipeline-title { font-size: 1.1rem; }
.mtv-pipeline-subtitle { font-size: .75rem; }
.mtv-stat-card--compact { padding: .65rem; }
.mtv-stat-card-value--xs { font-size: 1.15rem; }
.mtv-stat-card-label--xs { font-size: .65rem; }
.mtv-pipeline-col-body { max-height: 65vh; overflow-y: auto; }
.mtv-pipeline-card { position: relative; }
.mtv-pipeline-tv-number { font-size: .85rem; }
.mtv-pipeline-screen-name { font-size: .78rem; color: var(--mtv-text-dark); }
.mtv-pipeline-ticket-badge { font-size: .55rem; }
.mtv-pipeline-meta-xs { font-size: .68rem; }
.mtv-pipeline-meta-sm { font-size: .72rem; }
.mtv-pipeline-meta-xxs { font-size: .65rem; }
.mtv-pipeline-model { font-size: .7rem; }
.mtv-pipeline-heartbeat { font-size: .65rem; }
.mtv-pipeline-empty { font-size: .75rem; }
.mtv-pipeline-action-btn { font-size: .68rem; }
.mtv-pipeline-modal-title { font-size: .85rem; }
/* cc-pricing-card */
.mtv-pricing-check { color: var(--mtv-success); font-size: .85rem; }
/* cc-cfg-extras / cc-cfg-quiz */
.cfg-extras-section-title { font-size: .95rem; font-weight: 700; text-align: center; }
.cfg-quiz-location-header { margin-top: 2rem; }
.cfg-quiz-skip-btn { border: none; background: none; color: var(--mtv-text-muted); font-size: .85rem; cursor: pointer; }
.cfg-sidebar__item--success { color: var(--mtv-success); }
/* cc-navbar */
.mtv-navbar-hamburger-icon { color: var(--mtv-gray-700); font-size: 1.2rem; }
.mtv-navbar-lang-btn { cursor: pointer; }
.mtv-navbar-lang-icon { font-size: .85rem; }
.mtv-navbar-lang-label { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.mtv-navbar-lang-menu { min-width: 160px; }
.mtv-navbar-lang-code { font-size: .7rem; width: 20px; font-weight: 600; }
.mtv-navbar-cta-arrow { font-size: .75rem; }
.mtv-offcanvas-lang-code { font-size: .75rem; font-weight: 600; width: 20px; display: inline-block; }
/* cc-cookie-banner */
.mtv-cookie-desc { font-size: .75rem; margin-left: 1.5rem; color: var(--mtv-text-muted); }
.mtv-cookie-btn { min-width: 120px; }
.mtv-cookie-settings-link { font-size: .8rem; }
/* blog-post */
.mtv-blog-lead { color: var(--mtv-text-muted); font-size: 1.15rem; line-height: 1.8; }
.mtv-blog-divider { border-color: var(--mtv-border-light); }
.mtv-blog-border-light { border-color: var(--mtv-border-light) !important; }
.mtv-blog-tag-icon { font-size: .6rem; }
.mtv-blog-share-title { font-size: .85rem; color: var(--mtv-text-muted); }
/* contract-sign page */
.mtv-contract-sign-section { margin-top: 80px; }
.mtv-contract-sign-container { max-width: 900px; }
/* misc code / table sizes */
.mtv-code-xs { font-size: .8rem; }
/* purchase-order table col widths */
.mtv-col-product { min-width: 250px; }
.mtv-col-qty { width: 100px; }
.mtv-col-price { width: 140px; }
.mtv-col-total { width: 120px; }
.mtv-col-action { width: 50px; }
/* screen-groups / users table */
.mtv-col-actions { width: 80px; }
/* screens/show + customer-show */
.mtv-online-dot-icon { font-size: .5rem; }
.mtv-screenshot-preview { max-height: 400px; }
.mtv-storage-text { font-size: .85rem; }
.mtv-progress-sm { height: 10px; }
.mtv-chat-avatar { width: 28px; height: 28px; font-size: .65rem; display: flex; align-items: center; justify-content: center; }
.mtv-chat-avatar-sm { width: 28px; height: 28px; font-size: .6rem; display: flex; align-items: center; justify-content: center; }
.mtv-chat-time { font-size: .7rem; color: var(--mtv-text-muted); }
.mtv-chat-time-xs { font-size: .6rem; opacity: .6; }
.mtv-text-xs { font-size: .78rem; }
.mtv-table-xs { font-size: .75rem; }
.mtv-time-input { max-width: 100px; font-size: .78rem; }
.mtv-tip-icon { font-size: .6rem; }
.mtv-ticket-subject { font-size: .8rem; color: var(--mtv-text-dark); }
/* image upload (hardware-models) */
.mtv-img-thumb { width: 120px; height: 120px; background: #fff; }
.mtv-img-thumb img { object-fit: contain; padding: 4px; }
.mtv-img-thumb-btn { width: 24px !important; height: 24px !important; line-height: 1 !important; padding: 0 !important; }
.mtv-img-thumb-icon { font-size: 10px; }
.mtv-dropzone { cursor: pointer; transition: all .2s; }
/* misc columns / layout */
.mtv-col-icon { width: 40px; text-align: center; }
.mtv-icon-lg { font-size: 1.25rem; }
.mtv-nav-gap { gap: 4px; }
.mtv-lang-flag { font-size: 1.1rem; }
.mtv-col-num { width: 24px; color: var(--mtv-text-muted); }
/* detail views */
.mtv-detail-icon { font-size: .7rem; }
.mtv-detail-icon--sm { font-size: .75rem; }
.mtv-location-map { height: 200px; border-radius: 0 0 .5rem .5rem; }
/* coupon code display */
.mtv-coupon-code-display { letter-spacing: 2px; }
/* misc */
.mtv-notice { font-size: .9rem; }
.mtv-badge-xs { font-size: .65rem; }
.mtv-faq-btn { cursor: pointer; }
.mtv-contract-signed-container { max-width: 700px; }
/* user form selects */
.mtv-select-auto { width: auto; }
/* screenshot image max height */
.mtv-location-photo { max-height: 200px; max-width: 100%; }
.mtv-media-thumb { max-height: 40px; object-fit: cover; }
/* Playlists */
.mtv-playlist-thumb { width: 48px; height: 48px; object-fit: cover; }
.mtv-playlist-icon-box { width: 48px; height: 48px; }
.mtv-playlist-media-preview { height: 60px; }

/* ── Final Batch: Remaining Token-Klassen ── */
/* Progress heights */
.mtv-progress-mini { height: 4px; }
.mtv-progress-md { height: 8px; }
.mtv-progress-xxs { height: 3px; }
/* KPI/Analytics icons */
.mtv-kpi-icon-lg { font-size: 1.3rem; }
.mtv-timeline-step-icon { font-size: 1.1rem; }
/* Chart bars */
.mtv-traffic-chart-wrap { display: flex; align-items: flex-end; gap: 1px; height: 200px; }
.mtv-newsletter-chart-wrap { display: flex; align-items: flex-end; gap: 1px; height: 160px; }
.mtv-chart-bar-label { font-size: .6rem; color: var(--mtv-text-muted); }
/* Blog-Admin */
.mtv-blog-admin-thumb { width: 40px; height: 40px; object-fit: cover; flex-shrink: 0; border-radius: var(--mtv-radius-sm); }
.mtv-blog-slug { font-size: .75rem; color: var(--mtv-text-muted); }
.mtv-blog-tag-badge { font-size: .65rem; }
.mtv-blog-star { font-size: .7rem; }
/* Hardware models show */
.mtv-hw-code { font-size: .85rem; display: block; margin-bottom: .5rem; }
.mtv-hw-img-box { width: 160px; height: 160px; background: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid var(--mtv-border-light); border-radius: var(--mtv-radius); }
.mtv-hw-img-box img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--mtv-radius-sm); }
/* Audit log */
.mtv-audit-pre { max-height: 500px; overflow-y: auto; }
/* Customer portal device card */
.mtv-device-card { border-radius: var(--mtv-radius); }
.mtv-device-tv-number { font-size: 1.1rem; color: var(--mtv-primary); font-weight: 700; }
.mtv-device-name { font-weight: 500; color: var(--mtv-text-dark); }
.mtv-device-meta { font-size: .72rem; color: var(--mtv-text-muted); }
.mtv-device-storage { font-size: .65rem; }
.mtv-device-screenshot { max-height: 60px; width: 100%; object-fit: cover; opacity: .8; }
.mtv-device-playlist { font-size: .72rem; color: var(--mtv-text-muted); }
.mtv-stat-card--padded { padding: 1rem; }
/* Customer portal misc */
.mtv-sub-contract { font-size: .72rem; color: var(--mtv-text-muted); }
.mtv-sub-invoice-date { font-size: .75rem; color: var(--mtv-text-muted); }
.mtv-sub-pdf-icon { font-size: .7rem; }
.mtv-ticket-detail-meta { font-size: .72rem; color: var(--mtv-text-muted); }
.mtv-ticket-attach { max-width: 80px; max-height: 80px; object-fit: cover; border-radius: var(--mtv-radius-sm); }
/* Customer-show schedule */
.mtv-schedule-th { font-size: .75rem; }
.mtv-schedule-td { font-size: .78rem; }
.mtv-schedule-input { max-width: 100px; font-size: .78rem; }
.mtv-tips-icon { font-size: .6rem; }
.mtv-tips-text { font-size: .78rem; }
.mtv-tips-link { font-size: .78rem; }
.mtv-screenshot-preview--sm { max-height: 300px; width: 100%; object-fit: contain; }
/* Invoice / PO cols */
.mtv-col-5pct { width: 5%; }
.mtv-col-10pct { width: 10%; }
.mtv-col-12pct { width: 12%; }
.mtv-col-15pct { width: 15%; }
.mtv-col-30pct { width: 30%; }
.mtv-col-35pct { width: 35%; }
.mtv-col-8pct { width: 8%; }
.mtv-col-100px { width: 100px; }

/* Misc */
.mtv-newsletter-journey-section { min-height: 60vh; padding-top: 120px !important; }
.mtv-public-section-mt { margin-top: 80px; }
.mtv-monospace-textarea { font-family: monospace; font-size: .85rem; }
.mtv-po-address { white-space: pre-line; }
.mtv-po-item-notes { font-size: .75rem; color: var(--mtv-text-muted); }
.mtv-crm-stat-sm { font-size: 1.25rem; }
.mtv-konfigurator-color-icon { } /* icon color is data-driven, kept as inline */

/* Confetti canvas overlay */
.mtv-confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }
.mtv-grid-pattern {
    display:none
}
.mtv-card-dark {
    background:var(--mtv-bg-card);
    border:1px solid var(--mtv-border);
    border-radius:var(--mtv-radius-lg);
    padding:2rem;
    transition:var(--mtv-transition)
}
.mtv-card-dark:hover {
    background:var(--mtv-bg-card-hover);
    border-color:rgba(35,61,255,.3);
    box-shadow:var(--mtv-shadow-glow)
}
.mtv-icon-circle-primary {
    background: var(--mtv-bg-primary-hover);
    color: var(--mtv-primary);
}
.mtv-icon-circle-secondary {
    background:rgba(139,92,246,.08);
    color:var(--mtv-secondary)
}
.mtv-icon-circle-accent {
    background:rgba(245,158,11,.08);
    color:var(--mtv-accent)
}
.mtv-icon-circle-success {
    background:rgba(16,185,129,.08);
    color:var(--mtv-success)
}
.mtv-section {
    padding: var(--mtv-section-padding, clamp(3rem, 5vw, 5rem)) 0;
}
.mtv-section-dark {
    background:linear-gradient(180deg,#0C0F1A,#141B2D);
    color:var(--mtv-text-white)
}
.mtv-section-dark h1,.mtv-section-dark h2,.mtv-section-dark h3,.mtv-section-dark h4,.mtv-section-dark h5,.mtv-section-dark h6 {
    color:#fff !important
}
.mtv-section-dark p {
    color:var(--mtv-text-muted)
}
.mtv-section-gray {
    background:linear-gradient(180deg,#F8FAFF 0%,#FFFFFF 100%)
}
.mtv-pricing-card {
    background:var(--mtv-bg-white);
    border:1px solid var(--mtv-border-light);
    border-radius:var(--mtv-radius-xl);
    padding:2.5rem;
    text-align:center;
    transition:var(--mtv-transition);
    position:relative
}
.mtv-pricing-card:hover {
    transform:translateY(-4px);
    box-shadow:var(--mtv-shadow-xl)
}
.mtv-pricing-card.featured {
    border-color:var(--mtv-primary);
    box-shadow:0 0 0 1px var(--mtv-primary),var(--mtv-shadow-glow);
    transform:scale(1.02)
}
.mtv-pricing-card .price {
    font-size:3rem;
    font-weight:800;
    color:var(--mtv-text-dark);
    letter-spacing:-.03em
}
.mtv-pricing-card .price small {
    font-size:1rem;
    font-weight:400;
    color:var(--mtv-text-muted)
}
.mtv-pricing-badge {
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:linear-gradient(135deg,var(--mtv-primary),var(--mtv-secondary));
    color:#fff;
    font-size:.75rem;
    font-weight:700;
    padding:.35rem 1.25rem;
    border-radius:var(--mtv-radius-full);
    letter-spacing:.05em;
    text-transform:uppercase;
    white-space:nowrap
}
.mtv-stat {
    text-align:center
}
.mtv-stat-number {
    font-size:3rem;
    font-weight:800;
    letter-spacing:-.03em
}
.mtv-stat-label {
    font-size:.9rem;
    color:var(--mtv-text-muted);
    font-weight:500
}
.mtv-testimonial {
    position:relative;
    background:var(--mtv-bg-white);
    border:1px solid var(--mtv-border-light);
    border-left:3px solid var(--mtv-primary);
    border-radius:var(--mtv-radius-lg);
    padding:1.25rem
}
.mtv-testimonial-text {
    font-size:.92rem;
    font-style:italic;
    line-height:1.6;
    color:var(--mtv-text-body)
}
.mtv-testimonial-author {
    font-weight:600;
    color:var(--mtv-text-dark)
}
.mtv-testimonial-role {
    font-size:.85rem;
    color:var(--mtv-text-muted)
}
.mtv-footer {
    background:#0C0F1A;
    color:rgba(255,255,255,.4);
    padding:5rem 0 2rem;
    position:relative
}
.mtv-footer::before {
    display:none
}
.mtv-footer h6 {
    color:rgba(255,255,255,.7);
    font-weight:600;
    font-size:.82rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:1.5rem
}
.mtv-footer h6::after {
    display:none
}
.mtv-footer a {
    color:rgba(255,255,255,.4);
    text-decoration:none;
    transition:var(--mtv-transition-fast);
    font-size:.9rem
}
.mtv-footer a:hover {
    color:rgba(255,255,255,.85)
}
.mtv-footer li {
    margin-bottom:.5rem
}
.mtv-footer-bottom {
    border-top:1px solid rgba(255,255,255,.06);
    padding-top:2rem;
    margin-top:4rem;
    font-size:.8rem;
    color:rgba(255,255,255,.25)
}
.mtv-footer-link {
    color:rgba(255,255,255,.4);
    text-decoration:none;
    font-size:.85rem;
    transition:var(--mtv-transition-fast)
}
.mtv-footer-link:hover {
    color:rgba(255,255,255,.85)
}
.mtv-footer-tagline {
    color: rgba(255,255,255,.45);
    font-size: .9rem;
    line-height: 1.7;
    max-width: 300px;
}
.mtv-footer-features {
    color: rgba(255,255,255,.4);
    font-size: .82rem;
}
.mtv-footer-features i.fa-solid { color: var(--mtv-primary-light); }
.mtv-footer-trust-bar {
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: var(--space-4);
    margin-top: var(--space-6);
}
.mtv-footer-trust-bar span {
    color: rgba(255,255,255,.35);
    font-size: .78rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.mtv-footer-trust-bar span i { color: var(--mtv-primary-light); }
.mtv-cookie-banner {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:9999;
    background:var(--mtv-bg-card);
    border-top:1px solid var(--mtv-border);
    padding:1.25rem;
    transform:translateY(100%);
    transition:transform .4s cubic-bezier(.4, 0, .2, 1)
}
.mtv-cookie-banner.show {
    transform:translateY(0)
}
.mtv-cookie-banner p {
    color:var(--mtv-text-muted);
    font-size:.85rem;
    margin-bottom:0
}
.mtv-cookie-banner a {
    color:var(--mtv-primary-light)
}

.mtv-status-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block
}
.mtv-status-dot.online {
    background:var(--mtv-success)
}
.mtv-status-dot.offline {
    background:var(--mtv-danger)
}
.mtv-status-dot.warning {
    background:var(--mtv-warning)
}

.mtv-card--no-hover:hover {
    transform:none;
    box-shadow:none
}
.mtv-card--no-transform:hover {
    transform:none
}
.mtv-section--compact {
    padding:4.5rem 0
}
.mtv-section--none {
    padding:0
}
.mtv-hero--70 {
    min-height:70vh
}
.mtv-hero--60 {
    min-height:60vh
}
.mtv-hero--50 {
    min-height:50vh
}
.mtv-step-number {
    position:absolute;
    top:-4px;
    right:-4px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--mtv-primary);
    color:#fff;
    font-size:.7rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center
}
.mtv-stat-source {
    font-size:.7rem;
    color:var(--mtv-text-muted);
    font-style:italic;
    margin-top:.25rem
}
.mtv-navbar-logo {
    height:32px;
    width:auto
}
.mtv-navbar-toggler-icon {
    color:#fff
}
.mtv-footer-newsletter {
    border-top:1px solid var(--mtv-border);
    border-bottom:1px solid var(--mtv-border);
    padding:1.5rem 0;
    margin:2rem 0
}
.mtv-footer-input {
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.15);
    color:#fff
}
.mtv-footer-input::placeholder {
    color:var(--mtv-text-muted)
}
.mtv-footer-input:focus {
    background:rgba(255,255,255,.12);
    color:#fff
}
.mtv-footer-hint {
    font-size:.7rem;
    margin-top:.5rem;
    margin-bottom:0;
    opacity:.5
}
.mtv-footer-hint a {
    color:inherit;
    text-decoration:underline
}

.mtv-highlight-box {
    padding:1rem;
    border-radius:var(--mtv-radius)
}
.mtv-highlight-box--primary {
    background:rgba(35,61,255,.08);
    border:1px solid rgba(35,61,255,.2)
}
.mtv-highlight-box--gold {
    background:rgba(245,158,11,.08);
    border:1px solid rgba(245,158,11,.2)
}
.mtv-highlight-box--success {
    background:rgba(16,185,129,.08);
    border:1px solid rgba(16,185,129,.2)
}
.mtv-revenue-row {
    background:rgba(255,255,255,.04);
    padding:.75rem 1rem;
    border-radius:var(--mtv-radius-sm)
}
.mtv-revenue-row--highlight {
    background:rgba(35,61,255,.1);
    border:1px solid rgba(35,61,255,.2)
}
.mtv-stat-tile {
    text-align:center;
    padding:1.5rem;
    border-radius:var(--mtv-radius)
}
.mtv-stat-tile--success {
    background:rgba(16,185,129,.1)
}
.mtv-stat-tile--primary {
    background:rgba(35,61,255,.1)
}
.mtv-stat-tile--accent {
    background:rgba(245,158,11,.1)
}
.mtv-stat-tile--success-highlight {
    background:rgba(16,185,129,.15);
    border:1px solid rgba(16,185,129,.3)
}
.mtv-stat-tile-number {
    font-size:2rem;
    font-weight:800;
    margin-bottom:.25rem;
    line-height:1
}
.mtv-stat-tile-label {
    font-size:.8rem;
    font-weight:600;
    color:var(--mtv-text-muted)
}
.mtv-hero-pill {
    display:inline-flex;
    align-items:baseline;
    gap:.5rem;
    padding:.5rem 1.5rem;
    border-radius:var(--mtv-radius-full)
}
.mtv-hero-pill--success {
    background:rgba(16,185,129,.15);
    border:1px solid rgba(16,185,129,.3)
}
.mtv-hero-pill--primary {
    background:rgba(35,61,255,.15);
    border:1px solid rgba(35,61,255,.3)
}
.mtv-hero-pill-value {
    font-size:1.75rem;
    font-weight:800;
    color:var(--mtv-text-white);
    letter-spacing:-.02em
}
.mtv-hero-pill-label {
    font-size:.85rem;
    color:var(--mtv-text-muted)
}
.mtv-calc-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.75rem 1rem;
    border-radius:var(--mtv-radius-sm)
}
.mtv-calc-row--subtle {
    background:rgba(255,255,255,.04)
}
.mtv-calc-row--success {
    background:rgba(16,185,129,.08)
}
.mtv-calc-row--highlight {
    background:rgba(16,185,129,.15);
    border:1px solid rgba(16,185,129,.3)
}
.mtv-calc-label {
    color:var(--mtv-text-muted)
}
.mtv-calc-value {
    font-weight:700;
    color:var(--mtv-text-white)
}
.mtv-calc-value--success {
    font-weight:700;
    color:var(--mtv-success)
}
.mtv-progress-track {
    height:12px;
    border-radius:var(--mtv-radius-full);
    background:rgba(255,255,255,.08);
    overflow:hidden
}
.mtv-progress-fill--primary {
    height:100%;
    width:40%;
    border-radius:var(--mtv-radius-full);
    background:linear-gradient(90deg,var(--mtv-primary),var(--mtv-secondary))
}
.mtv-progress-fill--accent {
    height:100%;
    width:60%;
    border-radius:var(--mtv-radius-full);
    background:linear-gradient(90deg,var(--mtv-accent),#f97316)
}
.mtv-task-item {
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.75rem;
    border-radius:var(--mtv-radius-sm)
}
.mtv-task-item--light {
    background:var(--mtv-bg-light)
}
.mtv-task-item--success {
    background:rgba(16,185,129,.04)
}
.mtv-task-icon {
    width:36px;
    height:36px;
    border-radius:var(--mtv-radius-full);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:.85rem
}
.mtv-task-icon--secondary {
    background:rgba(14,165,233,.1);
    color:var(--mtv-secondary)
}
.mtv-task-icon--success {
    background:rgba(16,185,129,.1);
    color:var(--mtv-success)
}

.mtv-card--accent-border {
    border-color:var(--mtv-primary);
    box-shadow:0 0 0 1px rgba(35,61,255,.2)
}
.mtv-hero-glass {
    padding:1.5rem;
    border-radius:var(--mtv-radius-lg);
    background:rgba(255,255,255,.04);
    border:1px solid var(--mtv-border);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px)
}
.mtv-pt-nav {
    padding-top:100px
}
.mtv-max-600 {
    max-width:600px
}
.mtv-max-700 {
    max-width:700px
}
.mtv-max-850 {
    max-width:850px
}


.mtv-hero-title {
    font-size:clamp(2.5rem, 6vw, 4.5rem);
    font-weight:800;
    letter-spacing:-.03em;
    line-height:1.1;
    color:var(--mtv-text-white)
}
.mtv-card--featured {
    border-color:var(--mtv-primary);
    box-shadow:0 0 0 1px rgba(35,61,255,.2),var(--mtv-shadow-glow);
    position:relative
}
.mtv-card--featured::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg,var(--mtv-primary),var(--mtv-secondary));
    border-radius:var(--mtv-radius-lg) var(--mtv-radius-lg) 0 0
}
.mtv-hero-search-visual {
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.75rem 1.25rem;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--mtv-radius-full);
    color:var(--mtv-text-muted);
    font-size:.9rem;
    max-width:400px
}
.mtv-hero-search-visual i {
    color:var(--mtv-primary-light)
}

.mtv-text-muted-lg {
    color:var(--mtv-text-muted);
    font-size:1.15rem;
    line-height:1.7
}
.mtv-product-visual {
    background:linear-gradient(135deg,#f8fafc,#eef2ff);
    border-radius:var(--mtv-radius) var(--mtv-radius) 0 0;
    padding:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px
}
.mtv-product-visual i {
    font-size:3rem;
    color:var(--mtv-primary);
    opacity:.3
}
.mtv-product-visual img {
    max-height:140px;
    width:auto;
    object-fit:contain
}
.mtv-product-showcase {
    background:linear-gradient(180deg,var(--mtv-bg-dark) 0,rgba(11,15,26,.95) 100%);
    border-radius:var(--mtv-radius-xl);
    padding:3rem;
    text-align:center;
    position:relative;
    overflow:hidden
}
.mtv-product-showcase::before {
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:radial-gradient(ellipse at 50% 50%,var(--mtv-primary-glow) 0,transparent 60%);
    opacity:.3;
    pointer-events:none
}
.mtv-card-dark,.mtv-card-dark h1,.mtv-card-dark h2,.mtv-card-dark h3,.mtv-card-dark h4,.mtv-card-dark h5,.mtv-card-dark h6 {
    color:var(--mtv-text-white)
}
.mtv-card-dark .small,.mtv-card-dark .text-muted,.mtv-card-dark p,.mtv-card-dark span:not(.badge) {
    color:var(--mtv-text-muted)!important
}
.mtv-card-dark a:not(.btn) {
    color:var(--mtv-primary-light)
}
.mtv-card-dark strong {
    color:var(--mtv-text-white)
}
.mtv-section-dark .text-muted {
    color:var(--mtv-text-muted)!important
}
.mtv-section-dark .small,.mtv-section-dark small {
    color:var(--mtv-text-muted)
}
.mtv-section-dark strong {
    color:var(--mtv-text-white)
}
.mtv-section-dark .lead {
    color:var(--mtv-text-muted)
}
.btn-mtv-secondary-light {
    background:0 0;
    color:var(--mtv-text-dark);
    border:1px solid var(--mtv-border-light);
    padding:.75rem 2rem;
    font-weight:600;
    font-size:.95rem;
    border-radius:var(--mtv-radius);
    transition:var(--mtv-transition)
}
.btn-mtv-secondary-light:hover {
    color:var(--mtv-primary);
    background:rgba(35,61,255,.04);
    border-color:var(--mtv-primary);
    transform:translateY(-2px)
}
.mtv-prose {
    max-width:65ch;
    line-height:1.8
}
.mtv-prose p {
    margin-bottom:1.25rem
}
.mtv-prose h2 {
    margin-top:2.5rem;
    margin-bottom:1rem
}
.mtv-prose h3 {
    margin-top:2rem;
    margin-bottom:.75rem
}
.mtv-prose ol,.mtv-prose ul {
    margin-bottom:1.25rem;
    padding-left:1.5rem
}
.mtv-prose li {
    margin-bottom:.5rem
}
.mtv-max-960 {
    max-width:960px
}

.mtv-section-dark .mtv-trust-item,.mtv-section-dark .mtv-trust-strip {
    color:var(--mtv-text-white)
}
.mtv-section-dark .mtv-trust-item .text-muted,.mtv-section-dark .mtv-trust-item small {
    color:var(--mtv-text-muted)!important
}
.mtv-trust-strip {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:2rem
}
.mtv-trust-item {
    display:flex;
    align-items:center;
    gap:.5rem;
    font-size:.9rem;
    font-weight:500
}
.mtv-icon-gradient {
    width:48px;
    height:48px;
    border-radius:var(--mtv-radius);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    color:#fff;
    flex-shrink:0
}
.mtv-icon-gradient--primary {
    background:linear-gradient(135deg,var(--mtv-primary),var(--mtv-primary-dark))
}
.mtv-icon-gradient--secondary {
    background:linear-gradient(135deg,var(--mtv-secondary),#0284c7)
}
.mtv-icon-gradient--accent {
    background:linear-gradient(135deg,var(--mtv-accent),#f97316)
}
.mtv-icon-gradient--success {
    background:linear-gradient(135deg,var(--mtv-success),#059669)
}
.mtv-icon-gradient--danger {
    background:linear-gradient(135deg,var(--mtv-danger),#dc2626)
}
.mtv-icon-gradient--lg {
    width:64px;
    height:64px;
    font-size:1.5rem;
    border-radius:var(--mtv-radius-lg)
}
.mtv-icon-subtle {
    width:28px;
    height:28px;
    border-radius:var(--mtv-radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.8rem;
    flex-shrink:0
}
.mtv-icon-subtle--primary {
    background:rgba(35,61,255,.08);
    color:var(--mtv-primary)
}
.mtv-icon-subtle--secondary {
    background:rgba(14,165,233,.08);
    color:var(--mtv-secondary)
}
.mtv-icon-subtle--accent {
    background:rgba(245,158,11,.08);
    color:var(--mtv-accent)
}
.mtv-icon-subtle--success {
    background:rgba(16,185,129,.08);
    color:var(--mtv-success)
}
.mtv-icon-subtle--danger {
    background:rgba(239,68,68,.08);
    color:var(--mtv-danger)
}
.mtv-icon-subtle--lg {
    width:36px;
    height:36px;
    font-size:.9rem
}
.mtv-icon-bordered {
    width:48px;
    height:48px;
    border-radius:var(--mtv-radius-full);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    flex-shrink:0;
    background:0 0;
    border:2px solid
}
.mtv-icon-bordered--primary {
    border-color:rgba(35,61,255,.3);
    color:var(--mtv-primary)
}
.mtv-icon-bordered--secondary {
    border-color:rgba(14,165,233,.3);
    color:var(--mtv-secondary)
}
.mtv-icon-bordered--accent {
    border-color:rgba(245,158,11,.3);
    color:var(--mtv-accent)
}
.mtv-icon-bordered--success {
    border-color:rgba(16,185,129,.3);
    color:var(--mtv-success)
}

.auth-wrapper {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--mtv-bg-dark) 0,#1a1040 50%,var(--mtv-bg-dark) 100%);
    padding:2rem 1rem;
    position:relative;
    overflow:hidden
}
.auth-wrapper::before {
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:radial-gradient(ellipse at 30% 50%,rgba(35,61,255,.15) 0,transparent 50%),radial-gradient(ellipse at 70% 50%,rgba(14,165,233,.1) 0,transparent 50%);
    animation:aurora 15s ease-in-out infinite
}
@keyframes aurora {
0%,100% {
    transform:translate(0,0) rotate(0)
}
33% {
    transform:translate(2%,-1%) rotate(1deg)
}
66% {
    transform:translate(-1%,1%) rotate(-1deg)
}
}
.auth-card {
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 40px rgba(35,61,255,.1);
    border-radius:1.25rem;
    padding:2.5rem;
    width:100%;
    max-width:440px;
    position:relative;
    z-index:1
}
.auth-logo {
    text-align:center;
    margin-bottom:2rem
}
.auth-logo a {
    font-size:1.75rem;
    font-weight:700;
    color:#fff;
    text-decoration:none
}
.auth-logo .logo-accent {
    color:var(--mtv-primary)
}
.auth-card h2 {
    color:#fff;
    font-weight:600;
    font-size:1.5rem;
    margin-bottom:.5rem
}
.auth-card .auth-subtitle {
    color:rgba(255,255,255,.5);
    margin-bottom:1.75rem
}
.auth-card label {
    color:rgba(255,255,255,.7);
    font-weight:500;
    font-size:.875rem
}
.auth-card .form-control {
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    color:#fff;
    border-radius:.625rem;
    padding:.75rem 1rem
}
.auth-card .form-control:focus {
    background:rgba(255,255,255,.08);
    border-color:var(--mtv-primary);
    box-shadow:0 0 0 3px rgba(35,61,255,.15);
    color:#fff
}
.auth-card .form-control::placeholder {
    color:rgba(255,255,255,.3)
}
.auth-card .form-select {
    background-color:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    color:#fff;
    border-radius:.625rem;
    padding:.75rem 1rem
}
.auth-card .form-select:focus {
    background-color:rgba(255,255,255,.08);
    border-color:var(--mtv-primary);
    box-shadow:0 0 0 3px rgba(35,61,255,.15);
    color:#fff
}
.auth-card .form-select option {
    background:#1a1040;
    color:#fff
}
.auth-card .btn-mtv-primary,.auth-card .btn-primary {
    background:linear-gradient(135deg,var(--mtv-primary),var(--mtv-primary-dark));
    border:none;
    width:100%;
    padding:.75rem;
    font-weight:600;
    border-radius:.625rem;
    transition:var(--mtv-transition);
    position:relative;
    overflow:hidden
}
.auth-card .btn-mtv-primary:hover,.auth-card .btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 25px var(--mtv-primary-glow)
}
.auth-card .btn-mtv-primary span,.auth-card .btn-primary span {
    position:relative;
    z-index:1
}
.auth-card .auth-link {
    color:var(--mtv-primary);
    text-decoration:none
}
.auth-card .auth-link:hover {
    color:var(--mtv-secondary)
}
.auth-card .auth-footer {
    text-align:center;
    margin-top:1.5rem;
    color:rgba(255,255,255,.5);
    font-size:.875rem
}
.auth-card .form-check-input:checked {
    background-color:var(--mtv-primary);
    border-color:var(--mtv-primary)
}
.auth-card .form-check-label {
    color:rgba(255,255,255,.6);
    font-size:.875rem
}
.auth-card .invalid-feedback {
    font-size:.8125rem
}
.auth-card .input-group-text {
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.4)
}
.mtv-2fa-input {
    font-size:1.5rem;
    letter-spacing:.5rem;
    text-align:center
}
.mtv-password-toggle {
    position:absolute;
    right:.75rem;
    top:50%;
    transform:translateY(-50%);
    background:0 0;
    border:none;
    color:rgba(255,255,255,.4);
    cursor:pointer;
    padding:.25rem;
    font-size:.9rem;
    z-index:2
}
.mtv-password-toggle:hover {
    color:rgba(255,255,255,.7)
}

.card-body a.d-flex>i[class*=fa-],.mtv-content-card-body a.d-flex>i[class*=fa-],.mtv-content-card-body button.d-flex>i[class*=fa-] {
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    flex-shrink:0;
    font-size:.85rem
}
.card-body a.d-flex>i.text-primary,.mtv-content-card-body a.d-flex>i.text-primary {
    background:rgba(35,61,255,.08)
}
.card-body a.d-flex>i.text-success,.mtv-content-card-body a.d-flex>i.text-success {
    background:rgba(16,185,129,.08)
}
.card-body a.d-flex>i.text-warning,.mtv-content-card-body a.d-flex>i.text-warning {
    background:rgba(245,158,11,.08)
}
.card-body a.d-flex>i.text-danger,.mtv-content-card-body a.d-flex>i.text-danger {
    background:rgba(239,68,68,.08)
}
.card-body a.d-flex>i.text-info,.mtv-content-card-body a.d-flex>i.text-info {
    background:rgba(14,165,233,.08)
}
.card-body a.d-flex>i.text-secondary,.mtv-content-card-body a.d-flex>i.text-secondary {
    background:rgba(100,116,139,.08)
}
.card-body a.d-flex>i.mtv-text-primary,.mtv-content-card-body a.d-flex>i.mtv-text-primary {
    background:rgba(35,61,255,.08)
}

.mtv-icon-circle--md {
    width:48px;
    height:48px
}
.mtv-icon-circle--gradient {
    background:linear-gradient(135deg,var(--mtv-primary,#233DFF),#0ea5e9)
}
.mtv-stat-icon-primary {
    background:rgba(35,61,255,.08);
    color:var(--mtv-primary)
}
.mtv-stat-icon-success {
    background:rgba(16,185,129,.08);
    color:var(--mtv-success)
}
.mtv-stat-icon-secondary {
    background:rgba(14,165,233,.08);
    color:var(--mtv-secondary)
}
.mtv-stat-icon-warning {
    background:rgba(245,158,11,.08);
    color:var(--mtv-warning)
}

@media (max-width:767.98px) {
.mtv-trust-strip {
    flex-direction:column;
    align-items:center;
    gap:1rem
}
.mtv-hero-search-visual {
    max-width:100%
}
.mtv-display-mockup--lg {
    max-width:100%
}
.btn-mtv-accent,.btn-mtv-primary,.btn-mtv-secondary,.btn-mtv-secondary-light {
    min-height:44px
}
.mtv-icon-bordered,.mtv-icon-gradient {
    min-width:44px;
    min-height:44px
}
.mtv-card {
    padding:1.75rem
}
.mtv-section-title {
    font-size:1.75rem;
    line-height:1.25
}
.mtv-section-subtitle {
    font-size:.95rem
}
.mtv-hero h1 {
    font-size:1.75rem;
    line-height:1.15
}
.mtv-hero .lead {
    font-size:1rem
}
.mtv-stat-number {
    font-size:2rem
}
.mtv-testimonial {
    padding:1.25rem
}
}

@media (max-width:991.98px) {
.mtv-hero h1 {
    font-size:2.25rem
}
.mtv-section {
    padding:5rem 0
}
}
@media (max-width:575.98px) {
.mtv-hero h1 {
    font-size:1.65rem
}
.mtv-section {
    padding:4rem 0
}
.mtv-section-title {
    font-size:1.5rem
}
.mtv-pricing-card {
    padding:1.5rem
}
.btn-mtv-accent,.btn-mtv-primary,.btn-mtv-secondary,.btn-mtv-cta {
    padding:.65rem 1.5rem;
    font-size:.875rem
}
}

/* Desktop: Dropdown on Hover */
@media (min-width:992px){.mtv-navbar .dropdown:hover>.dropdown-menu{display:block;margin-top:0}.mtv-navbar .dropdown>.dropdown-toggle:active{pointer-events:none}}

/* Dropdown Panel (dark glass, purple accent) */
.mtv-navbar .dropdown-menu{background:rgba(255,255,255,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--mtv-gray-200, #E5E7EB);border-radius:12px;padding:.75rem;box-shadow:var(--mtv-shadow-lg);min-width:280px}

/* Dropdown Items with Icon-Circle */
.mtv-navbar .dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;color:var(--mtv-gray-700, #374151);border-radius:8px}.mtv-navbar .dropdown-item:hover,.mtv-navbar .dropdown-item:focus{background:rgba(35,61,255,.06);color:var(--mtv-primary)}.mtv-navbar .dropdown-item.active{background:rgba(35,61,255,.08);color:var(--mtv-primary)}.mtv-nav-icon{width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;background:rgba(35,61,255,.07);border-radius:8px;font-size:.85rem;color:var(--mtv-primary);flex-shrink:0}.mtv-navbar .dropdown-item:hover .mtv-nav-icon{background:rgba(35,61,255,.12)}.mtv-nav-item-title{font-weight:600;font-size:.875rem;color:var(--mtv-text-dark)}.mtv-nav-item-desc{font-size:.75rem;color:var(--mtv-gray-400, #9CA3AF);margin-top:1px}

/* Offcanvas Mobile */
.mtv-offcanvas{background:#fff;border-left:1px solid var(--mtv-gray-200, #E5E7EB);width:min(340px,88vw)}.mtv-offcanvas .offcanvas-header{padding:1.25rem 1.5rem}.mtv-offcanvas .btn-close{filter:none;min-width:44px;min-height:44px}.mtv-offcanvas .offcanvas-body{padding:.75rem 1rem 2rem;display:flex;flex-direction:column}

/* Offcanvas Groups */
.mtv-offcanvas-group{padding:.75rem 0;border-bottom:1px solid var(--mtv-gray-200, #E5E7EB)}.mtv-offcanvas-group:last-of-type{border-bottom:none}.mtv-offcanvas-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mtv-gray-400, #9CA3AF);padding:0 .5rem;margin:0 0 .15rem 0}

/* Collapse Toggle */
.mtv-offcanvas-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.55rem .5rem;background:0 0;border:none;color:var(--mtv-text-dark);font-size:.9rem;font-weight:600;cursor:pointer;border-radius:6px}.mtv-offcanvas-toggle:hover{background:rgba(35,61,255,.06)}.mtv-offcanvas-chevron{font-size:.75rem;transition:transform .25s ease;color:var(--mtv-gray-400, #9CA3AF)}.mtv-offcanvas-toggle[aria-expanded=true] .mtv-offcanvas-chevron{transform:rotate(180deg)}

/* Offcanvas Nav Links */

.mtv-offcanvas-link{min-height:44px;display:flex;align-items:center;gap:.75rem;padding:.5rem;color:var(--mtv-gray-600, #4B5563);font-weight:500;font-size:.95rem;text-decoration:none;border-radius:var(--mtv-radius-sm);transition:var(--mtv-transition-fast)}.mtv-offcanvas-link:hover{color:var(--mtv-primary);background:rgba(35,61,255,.06)}.mtv-offcanvas-link.active{color:var(--mtv-primary);background:rgba(35,61,255,.08);font-weight:600}.mtv-offcanvas-link i{font-size:.9rem;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtv-gray-500, #6B7280);background:rgba(35,61,255,.07);border-radius:8px}.mtv-offcanvas-link.active i,.mtv-offcanvas-link:hover i{color:var(--mtv-primary)}.mtv-offcanvas-sub .mtv-offcanvas-link{padding-left:1.25rem;font-size:.85rem;min-height:40px}.mtv-offcanvas-sub .mtv-offcanvas-link i{font-size:.8rem;width:1.75rem;height:1.75rem}.mtv-offcanvas-actions{padding:1rem 0 .5rem;border-top:1px solid var(--mtv-gray-200, #E5E7EB);margin-top:auto}.mtv-sidebar-link--locked{opacity:.5}.mtv-sidebar-link--locked:hover{opacity:.7}

/* BCS-inspired Section System */
.mtv-section--dark{background:var(--mtv-bg-dark);color:var(--mtv-text-white);border-top-color:var(--mtv-border)}.mtv-section--alt{background:var(--mtv-bg-light)}

/* Section Title (Badge + H2 + Desc, centered) */
.mtv-section-title-block{text-align:center;margin-bottom:2.5rem;max-width:720px;margin-left:auto;margin-right:auto}.mtv-section-title-block .badge{display:inline-block;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;padding:.4rem .9rem;border-radius:999px;background:rgba(35,61,255,.1);color:var(--mtv-primary-light);margin-bottom:.75rem}.mtv-section-title-block h2{font-weight:700;margin-bottom:.75rem}.mtv-section-title-block p{font-size:.95rem;color:var(--mtv-text-muted);max-width:600px;margin:0 auto}

/* Feature Box (BCS why-us-box adapted) */
.mtv-feature-box{background:var(--mtv-bg-white);padding:1.75rem;border-radius:var(--mtv-radius-lg);height:100%;border:1px solid var(--mtv-border-light);box-shadow:var(--mtv-shadow-sm);transition:var(--mtv-transition);position:relative;overflow:hidden}
.mtv-feature-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--mtv-primary),var(--mtv-secondary));transform:scaleX(0);transition:transform 0.3s ease}
.mtv-feature-box:hover::before{transform:scaleX(1)}.mtv-feature-box:hover{border-color:var(--mtv-primary);box-shadow:0 0 0 1px rgba(35,61,255,.2);transform:translateY(-2px)}.mtv-feature-box__icon{width:3rem;height:3rem;background:linear-gradient(135deg,var(--mtv-primary),var(--mtv-primary-dark));color:#fff;border-radius:var(--mtv-radius);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.2rem}.mtv-feature-box:hover .mtv-feature-box__icon{transform:scale(1.08)}.mtv-section--dark .mtv-feature-box{background:var(--mtv-bg-card);border-color:var(--mtv-border)}.mtv-section--dark .mtv-feature-box:hover{border-color:var(--mtv-primary-light)}

/* Hero Quicklinks */
.mtv-hero-quicklinks{display:flex;overflow-x:auto;gap:.75rem;border-top:1px solid var(--mtv-gray-200, #E5E7EB);padding-top:1.5rem;margin-top:2rem}.mtv-hero-quicklinks a{color:var(--mtv-gray-600, #4B5563);background:rgba(35,61,255,.04);border:1px solid var(--mtv-gray-200, #E5E7EB);padding:.5rem .75rem;border-radius:var(--mtv-radius);text-decoration:none;flex-shrink:0;font-size:.85rem;transition:var(--mtv-transition-fast);white-space:nowrap}.mtv-hero-quicklinks a:hover{color:var(--mtv-primary);background:rgba(35,61,255,.08);border-color:rgba(35,61,255,.2)}

/* CTA Section (Gradient) */
.mtv-cta-section{background:linear-gradient(135deg,var(--mtv-primary-dark) 0%,var(--mtv-primary) 50%,var(--mtv-primary-light) 100%);background-size:300% 300%;animation:ctaGradient 8s ease infinite;color:#fff;padding:4rem 0;text-align:center;position:relative;overflow:hidden}
@keyframes ctaGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.mtv-cta-section h2{color:#fff;font-weight:700;margin-bottom:.5rem}.mtv-cta-section p{color:rgba(255,255,255,.85);max-width:600px;margin:0 auto 1.5rem}.mtv-cta-section .btn-mtv-accent{background:#fff;color:var(--mtv-primary-dark);border-color:#fff}.mtv-cta-section .btn-mtv-accent:hover{background:rgba(255,255,255,.9);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}.mtv-cta-section .btn-outline-light:hover{background:rgba(255,255,255,.15)}

/* CTA Section — Dark variant (Design Tokens) */
.mtv-cta-section--dark { background: var(--mtv-gradient-dark); padding: var(--space-8) 0; animation: none; }
.mtv-cta-section-inner { max-width: 640px; margin: 0 auto; }
.mtv-cta-section-title { font-size: clamp(1.25rem, 3vw, 2.25rem); font-weight: 700; color: var(--mtv-text-white); line-height: 1.2; margin-bottom: var(--space-4); }
.mtv-cta-section-subtitle { font-size: 1.05rem; color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: var(--space-6); }

/* Dashboard quick action links — touch-friendly */
.mtv-quick-action-link { min-height: 44px; transition: var(--mtv-transition-fast); border-radius: var(--mtv-radius); }
.mtv-quick-action-link:hover { background: var(--mtv-bg-subtle); }
.mtv-quick-action-link:focus-visible { outline: 2px solid var(--mtv-primary); outline-offset: 2px; }

/* ── Screen detail (customer-show, show) ── */
.mtv-screen-title { font-size: 1.3rem; }
.mtv-screen-title--sm { font-size: 1.1rem; }
.mtv-screen-meta { font-size: 0.82rem; color: var(--mtv-text-muted); }
.mtv-screen-meta-sm { font-size: 0.72rem; color: var(--mtv-text-muted); }
.mtv-screen-field-label { font-size: 0.68rem; color: var(--mtv-text-muted); display: block; }
.mtv-screen-field-value { font-size: 0.875rem; font-weight: 600; color: var(--mtv-text-dark); }
.mtv-badge-sm { font-size: 0.8rem; padding: 0.5em 1em; }

/* Page Banner (Detail Pages) */
.mtv-page-banner{background:var(--mtv-gray-50, #F9FAFB);color:var(--mtv-text-dark);padding:6rem 0 3rem;text-align:center}.mtv-page-banner h1{font-weight:700;margin-bottom:.5rem;color:var(--mtv-text-dark)}.mtv-page-banner .lead{color:var(--mtv-text-muted);max-width:640px;margin:0 auto}

/* ── Border Gradient Utility ── */
.mtv-border-gradient {
    position:relative
}
.mtv-border-gradient::after {
    content:'';
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:60px;
    height:3px;
    background:linear-gradient(90deg,var(--mtv-primary),var(--mtv-secondary));
    border-radius:2px
}

/* ══ Product Catalog Cards (compact) ══ */
.mtv-product-card {
    border:1px solid var(--mtv-border-light);
    border-radius:var(--mtv-radius);
    background:var(--mtv-bg-white);
    overflow:hidden;
    cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
    height:100%
}
.mtv-product-card:hover {
    transform:translateY(-3px);
    box-shadow:var(--mtv-shadow-lg);
    border-color:var(--mtv-primary)
}
.mtv-product-card__visual {
    background:linear-gradient(135deg,#f8fafc,#eef2ff);
    padding:1rem;
    text-align:center;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:120px
}
.mtv-product-card__visual img {
    max-height:100px;
    width:auto;
    object-fit:contain
}
.mtv-product-card__badge-featured {
    position:absolute;
    top:.5rem;
    right:.5rem;
    background:var(--mtv-accent);
    color:#fff;
    font-size:.6rem;
    font-weight:700;
    padding:.15rem .5rem;
    border-radius:var(--mtv-radius-full);
    text-transform:uppercase;
    letter-spacing:.03em
}
.mtv-product-card__mockup {
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--mtv-primary);
    opacity:.25
}
.mtv-product-card__mockup i { font-size:2.5rem }
.mtv-product-card__mockup--portrait { aspect-ratio:9/16;height:80px }
.mtv-product-card__mockup--landscape { aspect-ratio:16/9;height:60px }
.mtv-product-card__body {
    padding:.75rem 1rem 1rem;
    display:flex;
    flex-direction:column;
    flex-grow:1
}
.mtv-product-card__cat {
    font-size:.65rem;
    font-weight:600;
    color:var(--mtv-primary);
    text-transform:uppercase;
    letter-spacing:.03em
}
.mtv-product-card__cat i { font-size:.55rem;margin-right:.2rem }
.mtv-product-card__size {
    font-size:.65rem;
    font-weight:700;
    color:var(--mtv-text-dark);
    background:var(--mtv-bg-subtle,#f1f5f9);
    padding:.1rem .4rem;
    border-radius:var(--mtv-radius-sm)
}
.mtv-product-card__title {
    font-size:.85rem;
    font-weight:700;
    margin-bottom:.35rem;
    line-height:1.3;
    color:var(--mtv-text-dark)
}
.mtv-product-card__specs {
    display:flex;
    flex-wrap:wrap;
    gap:.25rem;
    margin-bottom:.5rem
}
.mtv-product-card__specs span {
    font-size:.65rem;
    color:var(--mtv-text-muted);
    display:inline-flex;
    align-items:center;
    gap:.2rem
}
.mtv-product-card__specs i { font-size:.55rem }
.mtv-product-card__price {
    margin-bottom:.5rem
}
.mtv-product-card__price-main {
    font-size:.85rem;
    font-weight:700;
    color:var(--mtv-text-dark)
}
.mtv-product-card__price-alt {
    font-size:.65rem;
    color:var(--mtv-text-muted);
    display:block
}
.mtv-product-card__cta {
    font-size:.75rem;
    font-weight:600;
    color:var(--mtv-primary);
    display:flex;
    align-items:center;
    gap:.3rem;
    margin-top:auto
}
.mtv-product-card__cta i { font-size:.6rem;transition:transform .2s }
.mtv-product-card:hover .mtv-product-card__cta i { transform:translateX(3px) }

/* Dark mode */
[data-theme="dark"] .mtv-product-card {
    background:var(--mtv-bg-card);
    border-color:var(--mtv-border-light)
}
[data-theme="dark"] .mtv-product-card__visual { background:linear-gradient(135deg,#1e293b,#0f172a) }
[data-theme="dark"] .mtv-product-card__title { color:var(--mtv-text-dark) }
[data-theme="dark"] .mtv-product-card__price-main { color:var(--mtv-text-dark) }
[data-theme="dark"] .mtv-product-card__size { background:rgba(255,255,255,.08);color:var(--mtv-text-body) }

/* ══ Product Detail Modal ══ */
.mtv-detail-modal {
    border:none;
    border-radius:var(--mtv-radius-lg);
    overflow:hidden
}
.mtv-detail-modal__header {
    background:var(--mtv-bg-subtle,#f8fafc);
    border-bottom:1px solid var(--mtv-border-light);
    padding:.75rem 1.25rem
}
.mtv-detail-modal__visual {
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:1.5rem;
    min-height:280px
}
.mtv-detail-modal__img {
    max-height:220px;
    max-width:100%;
    object-fit:contain
}
.mtv-detail-modal__thumbs {
    display:flex;
    gap:.35rem;
    justify-content:center;
    margin-top:.75rem;
    flex-wrap:wrap
}
.mtv-detail-modal__thumb {
    width:40px;height:40px;
    border:2px solid var(--mtv-border-light);
    border-radius:var(--mtv-radius-sm);
    padding:2px;
    cursor:pointer;
    background:#fff;
    transition:border-color .2s
}
.mtv-detail-modal__thumb.active { border-color:var(--mtv-primary) }
.mtv-detail-modal__thumb img { width:100%;height:100%;object-fit:contain }
.mtv-detail-modal__placeholder {
    font-size:4rem;
    color:var(--mtv-text-muted);
    opacity:.2
}
.mtv-detail-modal__info {
    padding:1.25rem 1.5rem;
    display:flex;
    flex-direction:column;
    max-height:70vh;
    overflow-y:auto
}
.mtv-detail-modal__title {
    font-size:1.2rem;
    font-weight:800;
    margin-bottom:.25rem;
    line-height:1.3
}
.mtv-spec-badge {
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    padding:.2rem .5rem;
    font-size:.7rem;
    font-weight:600;
    background:rgba(35,61,255,.08);
    color:var(--mtv-primary);
    border-radius:var(--mtv-radius-full)
}
.mtv-spec-badge i { font-size:.6rem }
.mtv-spec-badge--success { background:rgba(16,185,129,.08);color:var(--mtv-success) }
.mtv-detail-modal__specs {
    margin-bottom:1rem;
    border:1px solid var(--mtv-border-light);
    border-radius:var(--mtv-radius-sm);
    padding:.75rem;
    max-height:200px;
    overflow-y:auto
}
.mtv-detail-modal__specs .table { font-size:.78rem }
.mtv-detail-modal__specs .table td { padding:.25rem .5rem;border-color:var(--mtv-border-light) }
.mtv-detail-modal__pricing { margin-top:auto }
.mtv-detail-modal__price-card {
    border:1px solid var(--mtv-border-light);
    border-radius:var(--mtv-radius-sm);
    padding:.75rem;
    text-align:center
}
.mtv-detail-modal__price-card--featured {
    border-color:var(--mtv-primary);
    background:rgba(35,61,255,.04)
}
.mtv-detail-modal__price-label {
    font-size:.65rem;
    font-weight:700;
    text-transform:uppercase;
    color:var(--mtv-text-muted);
    letter-spacing:.04em;
    margin-bottom:.15rem
}
.mtv-detail-modal__price-value {
    font-size:1.1rem;
    font-weight:800;
    color:var(--mtv-text-dark)
}
.mtv-detail-modal__price-value small { font-size:.7rem;font-weight:500;color:var(--mtv-text-muted) }
.mtv-detail-modal__price-note {
    font-size:.6rem;
    color:var(--mtv-text-muted)
}
.mtv-detail-modal__footer {
    border-top:1px solid var(--mtv-border-light);
    display:flex;
    gap:.5rem;
    padding:.75rem 1.25rem;
    flex-wrap:wrap;
    justify-content:center
}
.mtv-detail-modal__footer .btn { font-size:.8rem;padding:.4rem 1rem }

/* Dark mode modal */
[data-theme="dark"] .mtv-detail-modal { background:var(--mtv-bg-card) }
[data-theme="dark"] .mtv-detail-modal__header { background:rgba(255,255,255,.03) }
[data-theme="dark"] .mtv-detail-modal__visual { background:linear-gradient(135deg,#1e293b,#0f172a) }
[data-theme="dark"] .mtv-detail-modal__specs { border-color:var(--mtv-border-light) }
[data-theme="dark"] .mtv-detail-modal__price-card { border-color:var(--mtv-border-light) }
[data-theme="dark"] .mtv-detail-modal__price-card--featured { background:rgba(35,61,255,.1) }

/* Modal mobile */
@media (max-width:767.98px) {
    .mtv-detail-modal .modal-dialog { margin:.5rem }
    .mtv-detail-modal__visual { min-height:180px;padding:1rem }
    .mtv-detail-modal__img { max-height:140px }
    .mtv-detail-modal__info { padding:1rem;max-height:none }
    .mtv-detail-modal__title { font-size:1rem }
    .mtv-detail-modal__specs { max-height:150px }
}

/* Product card mobile */
@media (max-width:575.98px) {
    .mtv-product-card__visual { min-height:90px;padding:.75rem }
    .mtv-product-card__visual img { max-height:70px }
    .mtv-product-card__body { padding:.5rem .75rem .75rem }
    .mtv-product-card__title { font-size:.78rem }
}

/* ══ Mobile Touch Targets (44px minimum per WCAG) ══ */
@media (hover: none) {
    .btn,.form-control,.form-select,.list-group-item a,.mtv-bottom-nav-item{min-height:44px;min-width:44px}
    .form-check-input{min-width:20px;min-height:20px}
    .mtv-bottom-nav-item{touch-action:manipulation}
    .mtv-upload-zone{min-height:120px}
    .mtv-playlist-item{min-height:56px}
    .mtv-media-picker-item{min-height:80px}
}


/* ══ Premium Enhancements (Phase 2) ══════════════════════════════════ */

/* Focus accessibility — consistent across all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mtv-primary);
    outline-offset: 2px;
    border-radius: var(--mtv-radius-sm);
}

/* Premium button micro-interaction */
.btn-mtv-primary,
.btn-mtv-secondary,
.btn-mtv-cta {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-mtv-primary:hover,
.btn-mtv-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(35, 61, 255, 0.25);
}
.btn-mtv-primary:active,
.btn-mtv-cta:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Premium prose container (legal pages, blog posts) */
.mtv-prose {
    max-width: var(--mtv-prose-max, 720px);
    margin-inline: auto;
    line-height: 1.7;
    color: var(--mtv-text-body);
}
.mtv-prose h2 { font-size: var(--mtv-text-h2); margin-top: 2.5rem; margin-bottom: 1rem; }
.mtv-prose h3 { font-size: var(--mtv-text-h3); margin-top: 2rem; margin-bottom: 0.75rem; }
.mtv-prose p { margin-bottom: 1.25rem; }
.mtv-prose ul, .mtv-prose ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.mtv-prose li { margin-bottom: 0.5rem; }
.mtv-prose a { color: var(--mtv-primary); text-decoration: underline; text-underline-offset: 2px; }
.mtv-prose a:hover { color: var(--mtv-primary-dark); }
.mtv-prose blockquote {
    border-left: 3px solid var(--mtv-primary);
    padding-left: 1.25rem;
    margin: 1.5rem 0;
    color: var(--mtv-text-muted);
    font-style: italic;
}

/* Blog card premium */
.mtv-blog-card-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    border-radius: var(--mtv-radius) var(--mtv-radius) 0 0;
}

/* Form focus glow */
.form-control:focus,
.form-select:focus {
    border-color: var(--mtv-primary);
    box-shadow: var(--mtv-focus-ring);
}

/* Footer premium spacing */
.mtv-footer {
    padding: var(--mtv-space-16) 0 var(--mtv-space-8);
}
.mtv-footer a {
    transition: color 0.2s ease;
}
.mtv-footer a:hover {
    color: var(--mtv-primary-light);
}

/* Section divider (subtle gradient line) */
.mtv-section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mtv-border-light), transparent);
    margin: 0;
    border: none;
}

/* Improved responsive breakpoints */
@media (max-width: 991.98px) {
    .mtv-hero {
        min-height: 70vh;
        padding: 5rem 0 3rem;
    }
    .mtv-hero p.lead {
        max-width: 100%;
    }
}
@media (max-width: 767.98px) {
    .mtv-hero {
        min-height: auto;
        padding: 4rem 0 2.5rem;
        text-align: center;
    }
    .mtv-hero p.lead {
        margin-inline: auto;
    }
    .mtv-card {
        padding: var(--mtv-space-4);
    }
    .mtv-section-title {
        font-size: var(--mtv-text-h2);
    }
}

/* ══ End of public CSS ═══════════════════════════════════════════════ */