/*-----------------------------------------------------------------------------------

    Template Name: Vexlora – AI & SaaS Startup HTML Template
    Author: Themiverse
    Support: techsupport@themiverse.com
    Description: Vexlora – AI & SaaS Startup HTML Template
    Version: 1.0

-----------------------------------------------------------------------------------*/

/************ TABLE OF CONTENTS ***************

    -----------------
    01. THEME CSS
    -----------------
        1.1 Reset Style
        1.2 Base Style
        1.3 Typography
        1.4 Layout & Spacing

    -----------------
    02. TOKENS CSS
    -----------------
        2.1 CSS Variables / Design Tokens

    -----------------
    03. HEADER CSS
    -----------------
        3.1 Logo
        3.2 Navigation
        3.3 Nav Dropdown

    -----------------
    04. COMPONENTS CSS
    -----------------
        4.1 Buttons
        4.2 Badges
        4.3 Section Header
        4.4 Cards
        4.5 Utilities
        4.6 Breadcrumb
        4.7 Tags
        4.8 Animations
        4.9 Back to Top
        4.10 Premium Animations
        4.11 Utility Classes
        4.12 Page Loader
        4.13 Video Modal
        4.14 Contact Form Validation
        4.15 Portfolio Overlay
        4.16 Lightbox

    -----------------
    05. HERO CSS
    -----------------
        5.1 Hero Section
        5.2 Dashboard Mockup

    -----------------
    06. SECTIONS CSS
    -----------------
        6.1 Features Grid
        6.2 Logos / Marquee
        6.3 How It Works
        6.4 Integrations
        6.5 Stats / Counter
        6.6 Testimonials
        6.7 Team
        6.8 Blog Cards
        6.9 Values
        6.10 Services
        6.11 Portfolio
        6.12 Contact
        6.13 Pricing
        6.14 Compare Table
        6.15 About
        6.16 FAQs
        6.17 Blog Page
        6.18 Page Hero
        6.19 CTA Section

    -----------------
    07. FOOTER CSS
    -----------------
        7.1 Footer Style

    -----------------
    08. RESPONSIVE CSS
    -----------------
        8.1 Responsive Nav Squeeze
        8.2 Responsive Mobile Nav
        8.3 Responsive Tablet
        8.4 Responsive Small Screens

    -----------------
    09. PAGES CSS
    -----------------
        9.1 FAQs Page
        9.2 Legal Pages
        9.3 Auth Pages
        9.4 Blog Detail
        9.5 Portfolio Detail
        9.6 404 Page
        9.7 AI Chatbot Page
        9.8 AI Voice Page
        9.9 AI Keywords Page
        9.10 About Page Extended
        9.11 Team Page
        9.12 Team Detail Page
        9.13 AI Pages Responsive

**********************************************/

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

/*---------------------------------
    1.1 Reset Style
---------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: 1.0625rem;
}

/*---------------------------------
    2.1 CSS Variables / Design Tokens
---------------------------------*/
:root {
    /* Backgrounds */
    --tmv-bg-primary: #07080f;
    --tmv-bg-secondary: #0c0e1a;
    --tmv-bg-card: #10121f;
    --tmv-bg-card2: #141728;
    /* Brand colors */
    --tmv-accent: #00e8c8;
    --tmv-accent-dim: rgba(0, 232, 200, 0.12);
    --tmv-accent-glow: rgba(0, 232, 200, 0.25);
    --tmv-purple: #7c6bff;
    --tmv-purple-dim: rgba(124, 107, 255, 0.12);
    /* Text */
    --tmv-text-primary: #eef0ff;
    --tmv-text-secondary: #8990b5;
    --tmv-text-muted: #7880a4;
    /* UI colors */
    --tmv-accent-hover: #00c9ad;
    --tmv-purple-bright: #5b4fe8;
    --tmv-black: #000000;
    --tmv-white: #ffffff;
    --tmv-color-orange: #ef9e27;
    --tmv-color-red: #e24b4a;
    --tmv-color-green: #1d9e75;
    --tmv-color-star: #f59e0b;
    /* Borders */
    --tmv-border: rgba(255, 255, 255, 0.07);
    --tmv-border-hover: rgba(0, 232, 200, 0.3);
    /* Radius */
    --tmv-radius-sm: 8px;
    --tmv-radius-md: 14px;
    --tmv-radius-lg: 22px;
    --tmv-radius-xl: 32px;
    /* Fonts */
    --tmv-font-display: "Syne", sans-serif;
    --tmv-font-body: "DM Sans", sans-serif;
    /* Effects */
    --tmv-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --tmv-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
    --tmv-accent-shadow-dim: rgba(0, 232, 200, 0.08);
    --tmv-accent-shadow-glow: rgba(0, 232, 200, 0.06);
    --tmv-purple-shadow-dim: rgba(124, 107, 255, 0.1);
    --tmv-trophy-shadow: 0 8px 24px rgba(255, 193, 7, 0.3);
    --tmv-nav-h: 78px;
}

/*---------------------------------
    1.2 Base Style
---------------------------------*/
body {
    font-family: var(--tmv-font-body);
    background: var(--tmv-bg-primary);
    color: var(--tmv-text-primary);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--tmv-accent);
    color: var(--tmv-black);
}

::-webkit-scrollbar {
    width: 5px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--tmv-text-muted);
    border-radius: 3px;
}

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

button {
    font-family: var(--tmv-font-body);
}

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

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

ul {
    list-style: none;
}

p {
    color: var(--tmv-text-secondary);
    line-height: 1.75;
    font-size: 1.0625rem;
}

/*---------------------------------
    1.3 Typography
---------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--tmv-font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--tmv-text-primary);
}

h1 {
    font-size: clamp(2.25rem, 5.5vw, 4.75rem);
}

h2 {
    font-size: clamp(1.875rem, 4vw, 3.25rem);
}

h3 {
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
}

h4 {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 600;
}

h5 {
    font-size: 1rem;
    font-weight: 700;
}

h6 {
    font-size: 0.9375rem;
    font-weight: 700;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75;
}

.text-sm {
    font-size: 1rem;
}

.text-xs {
    font-size: 0.9375rem;
}

/*---------------------------------
    1.4 Layout & Spacing
---------------------------------*/
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

section,
.faqs-page-tab-section,
.portfolio-section,
.voice-stats-section,
.team-stats-section,
.team-section {
    padding: 96px 0;
}

@media (max-width: 768px) {
    section,
    .faqs-page-tab-section,
    .portfolio-section,
    .voice-stats-section,
    .team-stats-section,
    .team-section {
        padding: 64px 0;
    }
}

@media (max-width: 480px) {
    section,
    .faqs-page-tab-section,
    .portfolio-section,
    .voice-stats-section,
    .team-stats-section,
    .team-section {
        padding: 48px 0;
    }
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/*---------------------------------
    3.1 Logo
---------------------------------*/
.vexlora-logo {
    display: block;
    flex-shrink: 0;
    height: 100%;
    max-height: 40px;
    width: auto;
    border-radius: 100%;
}

.nav-logo {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    line-height: 1;
    gap: 12px;
    color: var(--tmv-accent) !important;
    font-size: 1.4rem;
    font-weight: 500;
}

/*---------------------------------
    3.2 Navigation
---------------------------------*/
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--tmv-nav-h);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.nav.scrolled {
    background: rgba(7, 8, 15, 0.93);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--tmv-border);
}

header:not(.open) .nav.scrolled {
    height: 68px;
}

.nav-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

.nav-links {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 2px;
}

.nav-links a {
    padding: 8px 15px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--tmv-text-secondary);
    border-radius: var(--tmv-radius-sm);
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--tmv-text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.nav-links a.active {
    position: relative;
}

.nav-links a.active::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--tmv-accent);
    border-radius: 50%;
}

.nav-links .nav-dropdown a.active::after {
    content: none;
}

.nav-cta {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav-toggle {
    display: none;
}

.mobile-menu {
    display: none;
}

/*---------------------------------
    3.3 Nav Dropdown
---------------------------------*/
.nav-has-dropdown {
    position: relative;
    list-style: none;
}

.nav-dropdown-toggle {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.nav-dropdown-arrow {
    width: 13px;
    height: 13px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
}

.nav-has-dropdown:hover .nav-dropdown-arrow,
.nav-has-dropdown.open .nav-dropdown-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-8px);
    transform: translateX(-50%) translateY(-8px);
    min-width: 210px;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-md);
    padding: 6px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition:
        opacity 0.22s ease,
        -webkit-transform 0.22s ease,
        visibility 0.22s;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s;
    z-index: 500;
    list-style: none;
}

.nav-dropdown::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--tmv-border);
}

.nav-dropdown::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--tmv-bg-card);
}

.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown li {
    list-style: none;
}

.nav-dropdown li a {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--tmv-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tmv-text-secondary);
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    white-space: nowrap;
}

.nav-dropdown li a:hover {
    color: var(--tmv-accent);
    background: var(--tmv-accent-dim);
}

.nav-dropdown li a i {
    width: 15px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.nav-dropdown li a:hover i {
    color: var(--tmv-accent);
}

.nav-dropdown-divider {
    height: 1px;
    background: var(--tmv-border);
    margin: 5px 6px;
}

/* Mobile pages dropdown */
.mobile-pages-drop {
    width: 100%;
}

.mobile-dropdown-toggle {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--tmv-text-secondary);
    background: none;
    border: none;
    border-radius: var(--tmv-radius-sm);
    cursor: pointer;
    font-family: var(--tmv-font-body);
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.mobile-dropdown-toggle:hover,
.mobile-dropdown-toggle.open {
    color: var(--tmv-accent);
    background: var(--tmv-bg-card);
}
.mobile-menu a:not(.btn):hover,
.mobile-menu a:not(.btn).active {
    color: var(--tmv-text-primary);
    background: rgba(255, 255, 255, 0.06);
}
.dd-arrow {
    width: 14px;
    height: 14px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
}

.mobile-dropdown-toggle.open .dd-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.mobile-dropdown-menu {
    display: none;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 4px 16px;
}

.mobile-dropdown-menu.open {
    display: -webkit-flex;
    display: flex;
}

.mobile-dropdown-menu a {
    padding: 10px 16px;
    font-size: 0.9375rem;
    color: var(--tmv-text-muted);
    border-radius: var(--tmv-radius-sm);
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    display: block;
}

.mobile-dropdown-menu a:hover {
    color: var(--tmv-accent);
    background: var(--tmv-bg-card);
}

/*---------------------------------
    4.1 Buttons
---------------------------------*/
.btn {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--tmv-radius-sm);
    font-family: var(--tmv-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    border: none;
    white-space: nowrap;
    position: relative;
    line-height: 1;
}

.btn-primary {
    background: var(--tmv-accent);
    color: var(--tmv-black);
}

.btn-primary:hover {
    box-shadow: 0 0 28px var(--tmv-accent-glow);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--tmv-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-outline:hover {
    border-color: var(--tmv-accent);
    color: var(--tmv-accent);
}

.btn-ghost {
    background: transparent;
    color: var(--tmv-text-secondary);
}

.btn-ghost:hover {
    color: var(--tmv-text-primary);
}

.btn-lg {
    padding: 16px 36px;
    font-size: 1rem;
    border-radius: var(--tmv-radius-md);
}

.btn-sm {
    padding: 9px 20px;
    font-size: 0.875rem;
}

/*---------------------------------
    4.2 Badges
---------------------------------*/
.badge {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.badge-accent {
    background: var(--tmv-accent-dim);
    color: var(--tmv-accent);
    border: 1px solid rgba(0, 232, 200, 0.22);
}

.badge-purple {
    background: var(--tmv-purple-dim);
    color: var(--tmv-purple);
    border: 1px solid rgba(124, 107, 255, 0.22);
}

.badge-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/*---------------------------------
    5.1 Hero Section
---------------------------------*/
.hero {
    min-height: 100vh;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--tmv-nav-h) + 40px);
    padding-bottom: 80px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hero-glow-1 {
    position: absolute;
    top: -200px;
    right: -100px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 232, 200, 0.07) 0%,
        transparent 70%
    );
}

.hero-glow-2 {
    position: absolute;
    bottom: -200px;
    left: -100px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(124, 107, 255, 0.07) 0%,
        transparent 70%
    );
}

.hero-glow-3 {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 232, 200, 0.04) 0%,
        transparent 70%
    );
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--tmv-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--tmv-border) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(
        ellipse 80% 60% at 50% 40%,
        black 30%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 80% 60% at 50% 40%,
        black 30%,
        transparent 100%
    );
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero-orb--1 {
    width: 6px;
    height: 6px;
    background: var(--tmv-accent);
    top: 20%;
    left: 15%;
    box-shadow: 0 0 12px var(--tmv-accent);
    opacity: 0.6;
    -webkit-animation: orbPulse 3s ease-in-out infinite;
    animation: orbPulse 3s ease-in-out infinite;
}

.hero-orb--2 {
    width: 4px;
    height: 4px;
    background: var(--tmv-purple);
    top: 65%;
    left: 8%;
    box-shadow: 0 0 10px var(--tmv-purple);
    opacity: 0.5;
    -webkit-animation: orbPulse 4s ease-in-out infinite 1s;
    animation: orbPulse 4s ease-in-out infinite 1s;
}

.hero-orb--3 {
    width: 5px;
    height: 5px;
    background: var(--tmv-accent);
    top: 35%;
    left: 5%;
    box-shadow: 0 0 10px var(--tmv-accent);
    opacity: 0.4;
    -webkit-animation: orbPulse 5s ease-in-out infinite 2s;
    animation: orbPulse 5s ease-in-out infinite 2s;
}

.right.hero-orb--1 {
    right: 15%;
    left: auto;
}

.right.hero-orb--2 {
    right: 8%;
    left: auto;
}

.right.hero-orb--3 {
    right: 5%;
    left: auto;
}

@-webkit-keyframes orbPulse {
    0%,
    100% {
        opacity: 0.3;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        -webkit-transform: scale(1.6);
        transform: scale(1.6);
    }
}

@keyframes orbPulse {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.6);
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 56px;
}

.hero-badge {
    margin-bottom: 24px;
}

.hero h1 {
    margin-bottom: 22px;
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    line-height: 1.06;
}

.hero h1 em {
    font-style: normal;
    color: var(--tmv-accent);
}

.hero-desc {
    font-size: 1.125rem;
    line-height: 1.75;
    max-width: 580px;
    margin: 0 auto 40px;
    color: var(--tmv-text-secondary);
}

.hero-actions {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 16px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.hero-play {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
    color: var(--tmv-text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.hero-play:hover {
    color: var(--tmv-text-primary);
}

.play-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.hero-play:hover .play-icon {
    border-color: var(--tmv-accent);
}

.play-icon svg {
    width: 13px;
    height: 13px;
    fill: var(--tmv-accent);
    margin-left: 2px;
}

/* Avatar social proof */
.hero-proof {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 12px;
}

.hero-avatars {
    display: -webkit-flex;
    display: flex;
}

.hero-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--tmv-bg);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--tmv-white);
    margin-right: -8px;
    flex-shrink: 0;
}

.hero-av--more {
    background: var(--tmv-bg-card);
    border-color: var(--tmv-border);
    color: var(--tmv-text-muted);
    font-size: 0.625rem;
}

.hero-proof-text {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
}

.hero-proof-text strong {
    color: var(--tmv-text-primary);
    font-weight: 600;
}

/* Hero accent word (static) */
.hero-accent-word {
    font-style: normal;
    color: var(--tmv-accent);
    position: relative;
    display: inline-block;
}

.hero-accent-word::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background: var(--tmv-accent);
    border-radius: 2px;
    opacity: 0.45;
}

/* Hero visual wrap - centered dashboard below content */
.hero-visual-wrap {
    position: relative;
    z-index: 1;
    margin-top: 56px;
    padding-top: 48px;
    padding-bottom: 80px;
}

.hero-visual-wrap .dashboard-mock {
    position: relative;
    z-index: 1;
    -webkit-transform: perspective(1400px) rotateX(6deg);
    transform: perspective(1400px) rotateX(6deg);
    -webkit-transform-origin: top center;
    transform-origin: top center;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.5),
        0 0 0 1px var(--tmv-accent-shadow-dim),
        0 0 60px var(--tmv-accent-shadow-glow);
}

/* Floating cards on dashboard corners */
.hfw-card {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    padding: 12px 14px;
    z-index: 3;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    white-space: nowrap;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    background: rgba(13, 15, 28, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hfw-tl {
    top: 0px;
    left: -16px;
}

.hfw-tr {
    top: -3px;
    right: -16px;
}

.hfw-bl {
    bottom: 110px;
    left: -40px;
}

.hfw-br {
    bottom: 190px;
    right: -35px;
}
@keyframes fc2 {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

.hfw-code {
    background: #0d1117;
    border-color: rgba(0, 232, 200, 0.2);
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.hcc-header {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hcc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hcc-dot--green {
    background: var(--tmv-accent);
    box-shadow: 0 0 6px var(--tmv-accent);
}

.hcc-label {
    font-size: 0.68rem;
    color: var(--tmv-text-muted);
    font-family: var(--tmv-font-mono, monospace);
}

.hcc-pre {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.7;
    font-family: "Fira Code", Consolas, monospace;
    color: #a8b3cf;
    white-space: pre;
}

.c-k {
    color: #ff79c6;
}

.c-fn {
    color: var(--tmv-accent);
}

.c-s {
    color: #f1fa8c;
}

.c-b {
    color: #bd93f9;
}

.hfc-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 232, 200, 0.12);
    border: 1px solid rgba(0, 232, 200, 0.25);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: var(--tmv-accent);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.hfc-icon--purple {
    background: var(--tmv-purple-dim);
    border-color: rgba(124, 107, 255, 0.25);
    color: var(--tmv-purple);
}

.hfc-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
    line-height: 1.3;
}

.hfc-sub {
    font-size: 0.71rem;
    color: var(--tmv-text-muted);
    margin-top: 2px;
}

/*---------------------------------
    5.2 Dashboard Mockup
---------------------------------*/
.dashboard-mock {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    overflow: hidden;
    box-shadow:
        var(--tmv-shadow),
        0 0 50px rgba(0, 232, 200, 0.05);
}

/* ── Browser chrome bar ── */
.mock-bar {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px 14px;
    background: var(--tmv-bg-card2);
    border-bottom: 1px solid var(--tmv-border);
}

.mock-dots {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.mock-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.mock-dot:nth-child(1) {
    background: #ff5f57;
}

.mock-dot:nth-child(2) {
    background: #febc2e;
}

.mock-dot:nth-child(3) {
    background: #28c840;
}

.mock-nav-arrows {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 2px;
    margin-left: 10px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.mock-nav-btn {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: var(--tmv-text-muted);
}

.mock-nav-btn svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mock-urlbar {
    -webkit-flex: 1;
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    padding: 5px 10px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
    margin: 0 10px;
    max-width: 280px;
}

.mock-lock {
    width: 10px;
    height: 10px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    stroke: rgba(0, 232, 200, 0.7);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mock-url {
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
}

.mock-url-host {
    color: rgba(255, 255, 255, 0.6);
}

.mock-url-path {
    color: var(--tmv-text-muted);
}

.mock-bar-actions {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.mock-title {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    margin-left: auto;
}

/* ── Dashboard body: sidebar + main ── */
.mock-body {
    display: -webkit-flex;
    display: flex;
    min-height: 300px;
}

.mock-sidebar {
    width: 140px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    border-right: 1px solid var(--tmv-border);
    padding: 14px 10px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 4px;
    background: #090b17;
}

.mock-sidebar-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--tmv-text-secondary);
    white-space: nowrap;
}

.mock-sidebar-item svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.mock-sidebar-active {
    color: var(--tmv-accent) !important;
    background: rgba(0, 232, 200, 0.08);
    border: 1px solid rgba(0, 232, 200, 0.15);
}

.mock-sidebar-active svg {
    stroke: var(--tmv-accent);
}

.mock-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #28c840;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-left: auto;
    -webkit-animation: liveBlink 1.6s ease-in-out infinite;
    animation: liveBlink 1.6s ease-in-out infinite;
}

.mock-main {
    -webkit-flex: 1;
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    background: var(--tmv-bg-primary);
}

.mock-main-header {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
}

.mock-overview-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
}

.mock-period {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
}

.mock-export-btn {
    margin-left: auto;
    font-size: 0.5625rem;
    border-radius: 5px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tmv-border);
    color: var(--tmv-text-secondary);
}

.mock-chart {
    -webkit-flex: 1;
    flex: 1;
    position: relative;
    min-height: 140px;
}

.mock-chart svg {
    width: 100%;
    height: 100%;
}

.chart-area {
    fill: url(#chartGrad);
}

.chart-line {
    fill: none;
    stroke: var(--tmv-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mock-metrics {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(4, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.mock-metric {
    background: var(--tmv-bg-secondary);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-sm);
    padding: 10px 11px;
}

.mock-metric .mk-val {
    font-family: var(--tmv-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--tmv-text-primary);
    line-height: 1;
}

.mock-metric .mk-lbl {
    font-size: 0.75rem;
    color: var(--tmv-text-secondary);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mock-metric .mk-chg {
    font-size: 0.75rem;
    margin-top: 3px;
    font-weight: 600;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 3px;
}

.mk-up {
    color: #22c55e;
}

.mk-down {
    color: #e24b4a;
}

/* Dashboard chart animations */
.chart-line {
    fill: none;
    stroke: var(--tmv-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    -webkit-animation: chartDraw 2s ease forwards;
    animation: chartDraw 2s ease forwards;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.chart-area {
    fill: url(#chartGrad);
    opacity: 0;
    -webkit-animation: fadeIn 1.2s ease forwards;
    animation: fadeIn 1.2s ease forwards;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

@-webkit-keyframes chartDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes chartDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Pulsing dot on chart highpoint */
.chart-dot-core {
    opacity: 0;
    -webkit-animation: fadeIn 0.4s ease forwards;
    animation: fadeIn 0.4s ease forwards;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}

.chart-dot-ring {
    opacity: 0;
    -webkit-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: dotRingPulse 2s ease-in-out infinite;
    animation: dotRingPulse 2s ease-in-out infinite;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}

@-webkit-keyframes dotRingPulse {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.7;
    }

    50% {
        -webkit-transform: scale(1.8);
        transform: scale(1.8);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0;
    }
}

@keyframes dotRingPulse {
    0% {
        transform: scale(0.8);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.8);
        opacity: 0;
    }

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

/* Metric cards stagger in */
.mock-metric:nth-child(1) {
    opacity: 0;
    -webkit-animation: fadeUp 0.55s ease forwards;
    animation: fadeUp 0.55s ease forwards;
    -webkit-animation-delay: 2.1s;
    animation-delay: 2.1s;
}

.mock-metric:nth-child(2) {
    opacity: 0;
    -webkit-animation: fadeUp 0.55s ease forwards;
    animation: fadeUp 0.55s ease forwards;
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}

.mock-metric:nth-child(3) {
    opacity: 0;
    -webkit-animation: fadeUp 0.55s ease forwards;
    animation: fadeUp 0.55s ease forwards;
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}

.mock-metric:nth-child(4) {
    opacity: 0;
    -webkit-animation: fadeUp 0.55s ease forwards;
    animation: fadeUp 0.55s ease forwards;
    -webkit-animation-delay: 2.55s;
    animation-delay: 2.55s;
}

/* Live blink indicator */
.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tmv-accent);
    box-shadow: 0 0 6px var(--tmv-accent);
    vertical-align: middle;
    margin-left: 5px;
    -webkit-animation: liveBlink 1.6s ease-in-out infinite;
    animation: liveBlink 1.6s ease-in-out infinite;
}

@-webkit-keyframes liveBlink {
    0%,
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        opacity: 0.2;
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
}

@keyframes liveBlink {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.2;
        transform: scale(0.7);
    }
}

/*---------------------------------
    4.3 Section Header
---------------------------------*/
.section-header {
    text-align: center;
    margin-bottom: 56px;
}

.section-header .badge {
    margin-bottom: 16px;
}

.section-header h2 {
    margin-bottom: 16px;
}

.section-header p {
    max-width: 540px;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--tmv-text-secondary);
}

/*---------------------------------
    4.4 Cards
---------------------------------*/
.card {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    padding: 32px;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(
        circle at 50% 0%,
        var(--tmv-accent-dim),
        transparent 70%
    );
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.card:hover {
    border-color: var(--tmv-border-hover);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    box-shadow: var(--tmv-shadow);
}

.card:hover::before {
    opacity: 1;
}

.card-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--tmv-radius-sm);
    flex-shrink: 0;
    background: var(--tmv-accent-dim);
    border: 1px solid rgba(0, 232, 200, 0.15);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--tmv-accent);
    fill: none;
    stroke-width: 1.8;
}

.card h3,
.card h4 {
    margin-bottom: 10px;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 600;
}

.card p {
    font-size: 0.9375rem;
    line-height: 1.7;
}

/*---------------------------------
    6.1 Features Grid
---------------------------------*/
.features-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 920px) {
    .features-grid {
        -webkit-grid-template-columns: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .features-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

/*---------------------------------
    6.2 Logos / Marquee
---------------------------------*/
.logos-section {
    padding: 56px 0;
    border-top: 1px solid var(--tmv-border);
    border-bottom: 1px solid var(--tmv-border);
}

@media (max-width: 768px) {
    .logos-section {
        padding: 40px 0;
    }
}
@media (max-width: 480px) {
    .logos-section {
        padding: 32px 0;
    }
}

.logos-label {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.marquee-outer {
    overflow: hidden;
}

.marquee-track {
    display: -webkit-flex;
    display: flex;
    gap: 56px;
    width: -webkit-max-content;
    width: max-content;
    -webkit-animation: marquee 22s linear infinite;
    animation: marquee 22s linear infinite;
}

.marquee-track:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.logo-item {
    font-family: var(--tmv-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--tmv-text-muted);
    opacity: 0.45;
    white-space: nowrap;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.logo-item:hover {
    opacity: 1;
    color: var(--tmv-text-primary);
}

/*---------------------------------
    6.3 How It Works
---------------------------------*/
.process-section {
    background: var(--tmv-bg-secondary);
}

.steps-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(4, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}

.steps-grid::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--tmv-border),
        transparent
    );
    z-index: 0;
}

@media (max-width: 880px) {
    .steps-grid {
        -webkit-grid-template-columns: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid::before {
        display: none;
    }
}

@media (max-width: 460px) {
    .steps-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-num {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-family: var(--tmv-font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--tmv-accent);
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.step:hover .step-num {
    background: var(--tmv-accent-dim);
    border-color: var(--tmv-accent);
}

.step h3,
.step h4 {
    margin-bottom: 10px;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 600;
}

.step p {
    font-size: 0.875rem;
    color: var(--tmv-text-secondary);
    line-height: 1.7;
}

/*---------------------------------
    6.4 Integrations
---------------------------------*/
.integrations {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    -webkit-justify-content: center;
    justify-content: center;
}

.int-chip {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 7px;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-sm);
    padding: 8px 14px;
    font-size: 0.875rem;
    color: var(--tmv-text-secondary);
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    white-space: nowrap;
}

.int-chip:hover {
    border-color: var(--tmv-border-hover);
    color: var(--tmv-text-primary);
}

.int-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tmv-accent);
    flex-shrink: 0;
}

/*---------------------------------
    6.5 Stats / Counter
---------------------------------*/
.stats-section {
    padding: 0 0 96px;
}

.stats-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(4, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    overflow: hidden;
}

@media (max-width: 700px) {
    .stats-grid {
        -webkit-grid-template-columns: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 543px) {
    .stats-grid {
        -webkit-grid-template-columns: repeat(1, 1fr);
        grid-template-columns: repeat(1, 1fr);
    }
}

.stat-item {
    background: var(--tmv-bg-card);
    padding: 40px 28px;
    text-align: center;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.stat-item:hover {
    background: var(--tmv-bg-card2);
}

.stat-num {
    font-family: var(--tmv-font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--tmv-text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

.stat-num em {
    font-style: normal;
    color: var(--tmv-accent);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
    margin-top: 8px;
}

/*---------------------------------
    6.6 Testimonials
---------------------------------*/
.testimonials-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .testimonials-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
        max-width: 540px;
        margin: 0 auto;
    }
}

.testi-card {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    padding: 28px;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.testi-card:hover {
    border-color: var(--tmv-border-hover);
}

.testi-quote {
    font-size: 2rem;
    color: var(--tmv-accent);
    line-height: 1;
    margin-bottom: 10px;
}

.testi-text {
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
    margin-bottom: 20px;
    font-style: italic;
    line-height: 1.7;
}

.testi-author {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
}

.testi-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--tmv-accent);
    border: 1px solid var(--tmv-border);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-family: var(--tmv-font-display);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--tmv-black);
}

.testi-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
}

.testi-role {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
}

.stars {
    display: -webkit-flex;
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
}

.stars i {
    font-size: 0.875rem;
    color: var(--tmv-color-star);
}

/*---------------------------------
    6.7 Team
---------------------------------*/
.team-grid {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 920px) {
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .team-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 12px;
    }
}

.team-card {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    padding: 28px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    transition: var(--tmv-transition);
}

.team-card:hover {
    border-color: var(--tmv-border-hover);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}

.team-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-family: var(--tmv-font-display);
    font-weight: 800;
    font-size: 1.25rem;
    border: 2px solid var(--tmv-border);
}

.team-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.team-role {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    margin-bottom: 14px;
}

.team-socials {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 8px;
}

.team-social {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--tmv-bg-secondary);
    border: 1px solid var(--tmv-border);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.team-social:hover {
    border-color: var(--tmv-accent);
    color: var(--tmv-accent);
}

/*---------------------------------
    6.8 Blog Cards
---------------------------------*/
.blog-grid {
    display: -webkit-grid;
    display: grid;
    gap: 22px;
}

.grid-cols-3 {
    -webkit-grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-2 {
    -webkit-grid-template-columns: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
    .blog-grid {
        -webkit-grid-template-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .blog-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.blog-card {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    overflow: hidden;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.blog-card:hover {
    border-color: var(--tmv-border-hover);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}

.blog-img {
    height: 190px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.blog-img svg,
.blog-img img,
.blog-hero-img svg,
.blog-hero-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.blog-img img,
.blog-hero-img img {
    object-fit: cover;
    object-position: center;
}

.blog-body {
    padding: 24px;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.blog-meta {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.blog-cat {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tmv-accent);
    background: var(--tmv-accent-dim);
    padding: 3px 10px;
    border-radius: 100px;
    white-space: nowrap;
}

.blog-date {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
}

.blog-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.45;
    color: var(--tmv-text-primary);
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.blog-card:hover .blog-title {
    color: var(--tmv-accent);
}

.blog-excerpt {
    font-size: 0.875rem;
    color: var(--tmv-text-secondary);
    margin-bottom: 16px;
    -webkit-flex: 1;
    flex: 1;
    line-height: 1.7;
}

.blog-read {
    font-size: 0.875rem;
    color: var(--tmv-accent);
    font-weight: 600;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 4px;
}

/*---------------------------------
    6.9 Values
---------------------------------*/
.values-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 640px) {
    .values-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.value-card {
    display: -webkit-flex;
    display: flex;
    gap: 18px;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-md);
    padding: 24px;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.value-card:hover {
    border-color: var(--tmv-border-hover);
}

.value-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--tmv-purple-dim);
    border: 1px solid rgba(124, 107, 255, 0.2);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.value-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--tmv-purple);
    fill: none;
    stroke-width: 1.8;
}

.value-card h3,
.value-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 7px;
}

.value-card p {
    font-size: 0.875rem;
    line-height: 1.7;
}

/*---------------------------------
    6.10 Services
---------------------------------*/
.services-big-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 760px) {
    .services-big-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.service-big-card {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    padding: 40px;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    position: relative;
    overflow: hidden;
}

.service-big-card:hover {
    border-color: var(--tmv-border-hover);
}

.service-num {
    position: absolute;
    top: 22px;
    right: 26px;
    font-family: var(--tmv-font-display);
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--tmv-border);
    line-height: 1;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.service-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--tmv-radius-md);
    background: var(--tmv-accent-dim);
    border: 1px solid rgba(0, 232, 200, 0.15);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 20px;
}

.service-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--tmv-accent);
    fill: none;
    stroke-width: 1.6;
}

.service-big-card h2,
.service-big-card h3 {
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight: 700;
    margin-bottom: 12px;
}

.service-big-card p {
    font-size: 0.9375rem;
    margin-bottom: 20px;
    line-height: 1.7;
}

.service-tags {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
}

.service-tag {
    padding: 5px 13px;
    font-size: 0.8125rem;
    background: var(--tmv-bg-secondary);
    border: 1px solid var(--tmv-border);
    border-radius: 100px;
    color: var(--tmv-text-muted);
    white-space: nowrap;
}

/*---------------------------------
    4.5 Utilities
---------------------------------*/
.mt-20 {
    margin-top: 20px !important;
}

.mt-40 {
    margin-top: 40px !important;
}
.mt-56 {
    margin-top: 56px !important;
}
.mb-8 {
    margin-bottom: 8px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.mb-14 {
    margin-bottom: 14px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-24 {
    margin-bottom: 24px !important;
}

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

.text-xs-88 {
    font-size: 0.875rem !important;
}

.text-xs-83 {
    font-size: 0.8125rem !important;
}

.text-xs-80 {
    font-size: 0.8125rem !important;
}

.text-xs-82 {
    font-size: 0.8125rem !important;
}

.text-xs-75 {
    font-size: 0.75rem !important;
}

.text-sm-bold {
    font-weight: 700;
}

.w-full {
    width: 100% !important;
}

.w-40 {
    width: 40% !important;
}

.text-center {
    text-align: center !important;
}

.direction-rtl {
    direction: rtl !important;
}

.direction-ltr {
    direction: ltr !important;
}

.bg-secondary-section {
    background: var(--tmv-bg-secondary) !important;
    padding: 100px 0 !important;
}

.section-bg-secondary {
    background: var(--tmv-bg-secondary) !important;
}

.py-100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.pb-100 {
    padding-bottom: 100px !important;
}

.section-padding-80 {
    padding: 80px 0 !important;
}
@media (max-width: 768px) {
    .section-padding-80 {
        padding: 56px 0 !important;
    }
}
@media (max-width: 480px) {
    .section-padding-80 {
        padding: 40px 0 !important;
    }
}

.offset-top-80 {
    margin-top: 80px !important;
}

.offset-bottom-30 {
    margin-bottom: 30px !important;
}

.avatar-gradient-1 {
    background: linear-gradient(
        135deg,
        rgba(0, 232, 200, 0.15),
        rgba(0, 232, 200, 0.3)
    );
}

.avatar-gradient-2 {
    background: var(--tmv-purple);
}

.avatar-gradient-3 {
    background: var(--tmv-color-orange);
}

.avatar-gradient-4 {
    background: var(--tmv-color-red);
}

.avatar-small {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.75rem !important;
}

.blog-category-purple {
    color: var(--tmv-purple) !important;
    background: var(--tmv-purple-dim) !important;
}

.blog-category-orange {
    color: var(--tmv-color-orange) !important;
    background: rgba(239, 158, 39, 0.1) !important;
}

.blog-category-red {
    color: var(--tmv-color-red) !important;
    background: rgba(226, 75, 74, 0.1) !important;
}

.blog-category-green {
    color: var(--tmv-color-green) !important;
    background: rgba(29, 158, 117, 0.1) !important;
}

.blog-read-purple {
    color: var(--tmv-purple) !important;
}

.blog-read-orange {
    color: var(--tmv-color-orange) !important;
}

.blog-read-red {
    color: var(--tmv-color-red) !important;
}

.blog-read-green {
    color: var(--tmv-color-green) !important;
}

.blog-img-grad1 {
    background: linear-gradient(135deg, #0d0628 0%, #0a1535 100%);
}

.blog-img-grad2 {
    background: linear-gradient(135deg, #1a0e00 0%, #1c1400 100%);
}

.blog-img-grad3 {
    background: linear-gradient(135deg, #1a0508 0%, #0a0f22 100%);
}

.blog-img-grad4 {
    background: linear-gradient(135deg, #001a12 0%, #001828 100%);
}

.blog-img-grad5 {
    background: linear-gradient(135deg, #001c1a 0%, #0a0628 100%);
}

.blog-img-grad6 {
    background: linear-gradient(135deg, #0e0628 0%, #0a1840 100%);
}

.portfolio-img-grad1 {
    background: linear-gradient(
        135deg,
        rgba(0, 232, 200, 0.12),
        rgba(0, 232, 200, 0.04)
    );
}

.portfolio-img-grad2 {
    background: linear-gradient(
        135deg,
        rgba(124, 107, 255, 0.12),
        rgba(124, 107, 255, 0.04)
    );
}

.portfolio-img-grad3 {
    background: linear-gradient(
        135deg,
        rgba(239, 158, 39, 0.1),
        rgba(239, 158, 39, 0.04)
    );
}

.portfolio-img-grad4 {
    background: linear-gradient(
        135deg,
        rgba(226, 75, 74, 0.1),
        rgba(226, 75, 74, 0.04)
    );
}

.portfolio-img-grad5 {
    background: linear-gradient(
        135deg,
        rgba(0, 232, 200, 0.08),
        rgba(124, 107, 255, 0.08)
    );
}

.portfolio-img-grad6 {
    background: linear-gradient(
        135deg,
        rgba(29, 158, 117, 0.1),
        rgba(29, 158, 117, 0.04)
    );
}

.flex-items-center-gap-12 {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    gap: 12px !important;
}

.highlight-purple {
    font-style: normal;
    color: var(--tmv-purple) !important;
}

.highlight-accent {
    font-style: normal;
    color: var(--tmv-accent) !important;
}

.int-dot-muted {
    background: var(--tmv-text-muted) !important;
}

.tags-flex {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.section-header-em-accent em {
    font-style: normal;
    color: var(--tmv-accent);
}

.section-header-em-purple em {
    font-style: normal;
    color: var(--tmv-purple);
}

/*---------------------------------
    6.11 Portfolio
---------------------------------*/
.portfolio-filter {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 8px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.filter-btn {
    padding: 9px 20px;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    color: var(--tmv-text-secondary);
    cursor: pointer;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--tmv-accent-dim);
    border-color: var(--tmv-accent);
    color: var(--tmv-accent);
}

.portfolio-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .portfolio-grid {
        -webkit-grid-template-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 540px) {
    .portfolio-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.portfolio-item {
    border-radius: var(--tmv-radius-lg);
    overflow: hidden;
    border: 1px solid var(--tmv-border);
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    position: relative;
}

.portfolio-item:hover {
    border-color: var(--tmv-border-hover);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}

.portfolio-img {
    height: 210px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.portfolio-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    opacity: 0;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-info {
    background: var(--tmv-bg-card);
    padding: 18px 20px;
}

.portfolio-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--tmv-text-primary);
}

.portfolio-cat {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
}

/*---------------------------------
    6.12 Contact
---------------------------------*/
.contact-options {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 56px;
}

@media (max-width: 660px) {
    .contact-options {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.opt-card {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    padding: 28px;
    text-align: center;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.opt-card:hover {
    border-color: var(--tmv-border-hover);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}

.opt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.opt-icon svg {
    filter: drop-shadow(0 0 12px rgba(0, 232, 200, 0.4));
    transition: filter 0.3s ease;
}

.opt-card:hover .opt-icon svg {
    filter: drop-shadow(0 0 20px rgba(0, 232, 200, 0.65));
}

.opt-card h2 {
    font-size: 1rem;
    margin-bottom: 7px;
}

.opt-card p {
    font-size: 0.875rem;
    line-height: 1.65;
}

.contact-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr 1.5fr;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
}

@media (max-width: 880px) {
    .contact-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.contact-item {
    display: -webkit-flex;
    display: flex;
    gap: 16px;
    margin-bottom: 26px;
}

.contact-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--tmv-radius-sm);
    flex-shrink: 0;
    background: var(--tmv-accent-dim);
    border: 1px solid rgba(0, 232, 200, 0.15);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.contact-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--tmv-accent);
    fill: none;
    stroke-width: 1.8;
}

.contact-item h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
    margin-bottom: 4px;
}

.contact-item p {
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
}

.form-card {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    padding: 40px;
}

@media (max-width: 480px) {
    .form-card {
        padding: 24px 16px;
    }
}

.form-row {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 560px) {
    .form-row {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tmv-text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.form-control {
    width: 100%;
    background: var(--tmv-bg-secondary);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-sm);
    padding: 12px 16px;
    color: var(--tmv-text-primary);
    font-family: var(--tmv-font-body);
    font-size: 0.9375rem;
    outline: none;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    -webkit-appearance: none;
    appearance: none;
}

.form-control:focus {
    border-color: var(--tmv-accent);
    box-shadow: 0 0 0 3px var(--tmv-accent-dim);
}

.form-control::placeholder {
    color: var(--tmv-text-muted);
    font-size: 0.9375rem;
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

select.form-control {
    cursor: pointer;
}

.contact-hero-badge {
    margin-bottom: 16px;
    display: -webkit-inline-flex;
    display: inline-flex;
}

.contact-section-title {
    margin-bottom: 32px;
}

.form-intro {
    font-size: 0.875rem;
    margin-bottom: 28px;
    color: var(--tmv-text-secondary);
}

.btn-full {
    width: 100%;
}

.logos-simple {
    background: var(--tmv-bg-secondary);
    padding: 60px 0;
}

@media (max-width: 768px) {
    .logos-simple {
        padding: 44px 0;
    }
}
@media (max-width: 480px) {
    .logos-simple {
        padding: 32px 0;
    }
}

.map-placeholder {
    height: 210px;
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    margin-top: 24px;
    overflow: hidden;
}

/*---------------------------------
    6.13 Pricing
---------------------------------*/
.toggle-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 48px;
}

.toggle-label {
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.toggle-label.active {
    color: var(--tmv-text-primary);
    font-weight: 600;
}

.toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
}

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

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--tmv-bg-card2);
    border: 1px solid var(--tmv-border);
    border-radius: 100px;
    cursor: pointer;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.toggle-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: var(--tmv-accent);
    border-radius: 50%;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.toggle-switch input:checked + .toggle-slider::before {
    -webkit-transform: translateX(22px);
    transform: translateX(22px);
}

.save-badge {
    background: var(--tmv-accent-dim);
    color: var(--tmv-accent);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    border: 1px solid rgba(0, 232, 200, 0.2);
}

.pricing-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    -webkit-align-items: start;
    align-items: start;
}

@media (max-width: 900px) {
    .pricing-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
    }
}

.pricing-card {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    padding: 36px;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    position: relative;
    overflow: hidden;
}

.pricing-card.featured {
    border-color: var(--tmv-accent);
    background: linear-gradient(
        135deg,
        rgba(0, 232, 200, 0.04),
        var(--tmv-bg-card)
    );
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
}

.pricing-badge {
    position: absolute;
    top: 25px;
    right: -45px;
    background: var(--tmv-accent);
    color: var(--tmv-black);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 4px 44px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    letter-spacing: 0.06em;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .pricing-card.featured {
        -webkit-transform: none;
        transform: none;
    }
}

.plan-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tmv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.plan-price {
    font-family: var(--tmv-font-display);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--tmv-text-primary);
    line-height: 1;
    margin-bottom: 8px;
}

.plan-price sup {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    vertical-align: super;
    font-weight: 600;
}

.plan-price sub {
    font-size: 1rem;
    color: var(--tmv-text-muted);
    font-weight: 400;
}

.plan-desc {
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--tmv-border);
    line-height: 1.7;
}

.plan-features {
    list-style: none;
    margin-bottom: 28px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 13px;
}

.plan-features li {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
    line-height: 1.5;
}

.plan-features li::before {
    content: "";
    width: 17px;
    height: 17px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
    background: var(--tmv-accent-dim)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolyline points='2,5 4.5,7.5 8,3' fill='none' stroke='%2300e8c8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat center;
    border: 1px solid rgba(0, 232, 200, 0.25);
}

/*---------------------------------
    6.14 Compare Table
---------------------------------*/
.compare-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 52px;
}

.compare-table th,
.compare-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--tmv-border);
    font-size: 0.9375rem;
}

.compare-table th {
    font-family: var(--tmv-font-display);
    font-weight: 700;
    color: var(--tmv-text-primary);
    background: var(--tmv-bg-card);
    font-size: 1rem;
}

.compare-table td {
    color: var(--tmv-text-secondary);
}

.compare-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.compare-table td:first-child {
    color: var(--tmv-text-primary);
    font-weight: 500;
}

.highlight-col {
    background: rgba(0, 232, 200, 0.03) !important;
}

.check {
    color: var(--tmv-accent);
    font-weight: 700;
}

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

@media (max-width: 640px) {
    .compare-table th,
    .compare-table td {
        padding: 10px;
        font-size: 0.8125rem;
    }
}

/*---------------------------------
    6.15 About
---------------------------------*/
.about-split {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 100px;
}
.about-split:last-child {
    margin-bottom: 0;
}
@media (max-width: 800px) {
    .about-split {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 40px;
        direction: ltr !important;
    }
}

.about-img-box {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-xl);
    padding: 40px;
    min-height: 380px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.about-img-box::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--tmv-accent-dim), transparent 70%);
}

.big-icon {
    font-size: 7rem;
    position: relative;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mission-box {
    background: linear-gradient(
        135deg,
        rgba(0, 232, 200, 0.05),
        rgba(124, 107, 255, 0.05)
    );
    border: 1px solid rgba(0, 232, 200, 0.12);
    border-radius: var(--tmv-radius-xl);
    padding: 60px;
    text-align: center;
    margin-bottom: 100px;
}

.mission-box blockquote {
    font-family: var(--tmv-font-display);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--tmv-text-primary);
    line-height: 1.3;
}

.mission-box blockquote em {
    font-style: normal;
    color: var(--tmv-accent);
}

/*---------------------------------
    6.16 FAQs
---------------------------------*/
.faq-list {
    max-width: 740px;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-md);
    overflow: hidden;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.faq-item.open {
    border-color: var(--tmv-border-hover);
}

.faq-q {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--tmv-text-primary);
    line-height: 1.4;
}

.faq-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--tmv-bg-secondary);
    border: 1px solid var(--tmv-border);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    font-size: 1rem;
    color: var(--tmv-text-secondary);
}

.faq-item.open .faq-icon {
    background: var(--tmv-accent-dim);
    border-color: var(--tmv-accent);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    color: var(--tmv-accent);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    -webkit-transition:
        max-height 0.35s ease,
        padding 0.35s;
    transition:
        max-height 0.35s ease,
        padding 0.35s;
    padding: 0 24px;
}

.faq-item.open .faq-a {
    max-height: 220px;
    padding-bottom: 20px;
}

.faq-a p {
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
    line-height: 1.75;
}

/*---------------------------------
    6.17 Blog Page
---------------------------------*/
.blog-hero-card {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-xl);
    overflow: hidden;
    margin-bottom: 40px;
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1.2fr 1fr;
    grid-template-columns: 1.2fr 1fr;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.blog-hero-card:hover {
    border-color: var(--tmv-border-hover);
}

@media (max-width: 800px) {
    .blog-hero-card {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.blog-hero-img {
    min-height: 360px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: linear-gradient(135deg, #001c18 0%, #180835 100%);
    position: relative;
    overflow: hidden;
}

.blog-hero-body {
    padding: 48px 40px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
}

.blog-hero-body h2 {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    margin-bottom: 16px;
    line-height: 1.3;
}

.blog-hero-body:hover h2 {
    color: var(--tmv-accent);
}

.blog-cats {
    display: -webkit-flex;
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.blog-layout {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr 300px;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    -webkit-align-items: start;
    align-items: start;
}

@media (max-width: 1000px) {
    .blog-layout {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        display: none;
    }
}

.search-bar {
    display: -webkit-flex;
    display: flex;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto 48px;
}

.search-input {
    -webkit-flex: 1;
    flex: 1;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-sm);
    padding: 12px 18px;
    color: var(--tmv-text-primary);
    font-family: var(--tmv-font-body);
    font-size: 0.9375rem;
    outline: none;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.search-input:focus {
    border-color: var(--tmv-accent);
}

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

.sidebar-widget {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.sidebar-widget h3,
.sidebar-widget h5 {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tmv-text-primary);
    margin-bottom: 16px;
}

.cat-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 8px;
}

.cat-item {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    font-size: 0.875rem;
    color: var(--tmv-text-secondary);
    padding: 6px 0;
    border-bottom: 1px solid var(--tmv-border);
    cursor: pointer;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.cat-item:last-child {
    border-bottom: none;
}

.cat-item:hover {
    color: var(--tmv-accent);
}

.cat-count {
    background: var(--tmv-bg-secondary);
    border-radius: 100px;
    padding: 2px 8px;
    font-size: 0.75rem;
}

/*---------------------------------
    4.6 Breadcrumb
---------------------------------*/
.breadcrumb {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 20px;
}

.breadcrumb a,
.breadcrumb span,
.breadcrumb .current {
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
}

.breadcrumb a {
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.breadcrumb a:hover {
    color: var(--tmv-accent);
}

.breadcrumb .current {
    color: var(--tmv-accent);
}

/*---------------------------------
    6.18 Page Hero
---------------------------------*/
.page-hero {
    padding: clamp(110px, 14vw, 168px) 0 clamp(52px, 8vw, 88px);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--tmv-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--tmv-border) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(
        ellipse 60% 50% at 50% 50%,
        black 30%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 60% 50% at 50% 50%,
        black 30%,
        transparent 100%
    );
}

.page-hero h1 {
    margin-bottom: 18px;
    position: relative;
}

.page-hero p {
    font-size: 1.125rem;
    line-height: 1.75;
    max-width: 540px;
    margin: 0 auto;
    position: relative;
    color: var(--tmv-text-secondary);
}

/*---------------------------------
    6.19 CTA Section
---------------------------------*/
.pt-0 {
    padding-top: 0;
}
.pb-0 {
    padding-bottom: 0;
}
.cta-box {
    background: linear-gradient(
        135deg,
        rgba(0, 232, 200, 0.05) 0%,
        rgba(124, 107, 255, 0.05) 100%
    );
    border: 1px solid rgba(0, 232, 200, 0.14);
    border-radius: var(--tmv-radius-xl);
    padding: clamp(48px, 7vw, 88px) clamp(24px, 6vw, 64px);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-box::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 232, 200, 0.06),
        transparent 70%
    );
    pointer-events: none;
}

.cta-box h2 {
    margin-bottom: 16px;
    position: relative;
}

.cta-box p {
    max-width: 500px;
    margin: 0 auto 36px;
    font-size: 1.0625rem;
    line-height: 1.75;
    position: relative;
    color: var(--tmv-text-secondary);
}

.cta-actions {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 16px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
}

/*---------------------------------
    7.1 Footer Style
---------------------------------*/
.footer {
    padding: 80px 0 0;
    border-top: 1px solid var(--tmv-border);
}

.footer-top {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 52px;
    margin-bottom: 56px;
}

@media (max-width: 900px) {
    .footer-top {
        -webkit-grid-template-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

@media (max-width: 480px) {
    .footer-top {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.footer-brand p {
    font-size: 0.9375rem;
    margin-top: 16px;
    max-width: 270px;
    color: var(--tmv-text-muted);
    line-height: 1.7;
}

.footer-newsletter {
    margin-top: 24px;
}

.newsletter-form {
    display: -webkit-flex;
    display: flex;
    gap: 8px;
}

.newsletter-input {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-sm);
    padding: 10px 14px;
    color: var(--tmv-text-primary);
    font-family: var(--tmv-font-body);
    font-size: 0.9375rem;
    outline: none;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.newsletter-input:focus {
    border-color: var(--tmv-accent);
}

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

.footer-col h2 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 11px;
}

.footer-links a {
    font-size: 0.9375rem;
    color: var(--tmv-text-muted);
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.footer-links a:hover {
    color: var(--tmv-accent);
    padding-left: 4px;
}

.footer-bottom {
    border-top: 1px solid var(--tmv-border);
    padding: 24px 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-bottom p {
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
}

.footer-socials {
    display: -webkit-flex;
    display: flex;
    gap: 8px;
}

.footer-social {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.footer-social:hover {
    border-color: var(--tmv-accent);
    color: var(--tmv-accent);
}

/*---------------------------------
    4.7 Tags
---------------------------------*/
.tags {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    padding: 4px 12px;
    font-size: 0.875rem;
    background: var(--tmv-bg-secondary);
    border: 1px solid var(--tmv-border);
    border-radius: 100px;
    color: var(--tmv-text-muted);
}

/*---------------------------------
    4.8 Animations
---------------------------------*/
@-webkit-keyframes fadeUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(28px);
        transform: translateY(28px);
    }

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

@keyframes fadeUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(28px);
        transform: translateY(28px);
    }

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

@-webkit-keyframes fadeDown {
    from {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

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

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@-webkit-keyframes slideInLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(-32px);
        transform: translateX(-32px);
    }

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }

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

@-webkit-keyframes slideInRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(32px);
        transform: translateX(32px);
    }

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(32px);
    }

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

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Hero entry animations — staggered per element */
.hero-content .hero-badge {
    -webkit-animation: fadeDown 0.7s ease both;
    animation: fadeDown 0.7s ease both;
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
}

.hero-content h1 {
    -webkit-animation: fadeUp 0.75s ease both;
    animation: fadeUp 0.75s ease both;
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

.hero-content .hero-desc {
    -webkit-animation: fadeUp 0.75s ease both;
    animation: fadeUp 0.75s ease both;
    -webkit-animation-delay: 0.28s;
    animation-delay: 0.28s;
}

.hero-content .hero-actions {
    -webkit-animation: fadeUp 0.75s ease both;
    animation: fadeUp 0.75s ease both;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.hero-content .hero-proof {
    -webkit-animation: fadeUp 0.75s ease both;
    animation: fadeUp 0.75s ease both;
    -webkit-animation-delay: 0.52s;
    animation-delay: 0.52s;
}

.hero-visual-wrap {
    -webkit-animation: fadeUp 0.9s ease both;
    animation: fadeUp 0.9s ease both;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.hfw-tl {
    -webkit-animation: slideInLeft 0.7s ease both;
    animation: slideInLeft 0.7s ease both;
    -webkit-animation-delay: 0.85s;
    animation-delay: 0.85s;
}

.hfw-bl {
    animation: fc2 6.5s ease-in-out infinite 0.4s;
}

.hfw-tr {
    -webkit-animation: slideInRight 0.7s ease both;
    animation: slideInRight 0.7s ease both;
    -webkit-animation-delay: 0.85s;
    animation-delay: 0.85s;
}

.hfw-br {
    -webkit-animation: slideInRight 0.7s ease both;
    animation: slideInRight 0.7s ease both;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

@-webkit-keyframes marquee {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

@keyframes marquee {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

.animate-up {
    -webkit-animation: fadeUp 0.7s ease both;
    animation: fadeUp 0.7s ease both;
}

.animate-fade {
    -webkit-animation: fadeIn 0.7s ease both;
    animation: fadeIn 0.7s ease both;
}

[data-aos] {
    opacity: 0;
    -webkit-transform: translateY(22px);
    transform: translateY(22px);
    -webkit-transition:
        opacity 0.65s ease,
        -webkit-transform 0.65s ease;
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}

[data-aos].aos-animate {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

/*---------------------------------
    4.9 Back to Top
---------------------------------*/
.back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tmv-accent);
    color: var(--tmv-black);
    border: none;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
    -webkit-transition:
        opacity 0.3s ease,
        -webkit-transform 0.3s ease,
        visibility 0.3s ease,
        box-shadow 0.3s ease;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease,
        box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 232, 200, 0.35);
}

.back-to-top svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.back-to-top:hover {
    box-shadow: 0 6px 28px rgba(0, 232, 200, 0.55);
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}

/*---------------------------------
    4.10 Premium Animations
---------------------------------*/

/* Scroll progress bar */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--tmv-accent), var(--tmv-purple));
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0, 232, 200, 0.55);
    transition: width 0.08s linear;
    pointer-events: none;
}

/* Hero accent word — gradient shimmer + smooth word-swap transition */
.hero-accent-word {
    font-style: normal;
    background: linear-gradient(
        90deg,
        var(--tmv-accent) 0%,
        var(--tmv-purple) 45%,
        var(--tmv-accent) 90%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    position: relative;
    display: inline-block;
    -webkit-animation: gradientShimmer 3.5s linear infinite;
    animation: gradientShimmer 3.5s linear infinite;
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

.hero-accent-word::after {
    display: none;
}

@-webkit-keyframes gradientShimmer {
    0% {
        background-position: 0% center;
    }

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

@keyframes gradientShimmer {
    0% {
        background-position: 0% center;
    }

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

/* Button primary light sweep on hover */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -90%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent
    );
    -webkit-transform: skewX(-18deg);
    transform: skewX(-18deg);
    pointer-events: none;
}

.btn-primary:hover::after {
    -webkit-animation: btnShimmer 0.5s ease forwards;
    animation: btnShimmer 0.5s ease forwards;
}

@-webkit-keyframes btnShimmer {
    from {
        left: -90%;
    }

    to {
        left: 130%;
    }
}

@keyframes btnShimmer {
    from {
        left: -90%;
    }

    to {
        left: 130%;
    }
}

/* Hero glow smooth parallax readiness */
.hero-glow-1,
.hero-glow-2,
.hero-glow-3 {
    -webkit-transition: -webkit-transform 0.55s
        cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Extended AOS variants */
[data-aos="fade-left"] {
    opacity: 0;
    -webkit-transform: translateX(32px);
    transform: translateX(32px);
    -webkit-transition:
        opacity 0.65s ease,
        -webkit-transform 0.65s ease;
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}

[data-aos="fade-left"].aos-animate {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

[data-aos="fade-right"] {
    opacity: 0;
    -webkit-transform: translateX(-32px);
    transform: translateX(-32px);
    -webkit-transition:
        opacity 0.65s ease,
        -webkit-transform 0.65s ease;
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}

[data-aos="fade-right"].aos-animate {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

[data-aos="zoom-in"] {
    opacity: 0;
    -webkit-transform: scale(0.88);
    transform: scale(0.88);
    -webkit-transition:
        opacity 0.65s ease,
        -webkit-transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-aos="zoom-in"].aos-animate {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

[data-aos="zoom-out"] {
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition:
        opacity 0.65s ease,
        -webkit-transform 0.65s ease;
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}

[data-aos="zoom-out"].aos-animate {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

[data-aos="flip-up"] {
    opacity: 0;
    -webkit-transform: perspective(600px) rotateX(25deg) translateY(20px);
    transform: perspective(600px) rotateX(25deg) translateY(20px);
    -webkit-transition:
        opacity 0.7s ease,
        -webkit-transform 0.7s ease;
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

[data-aos="flip-up"].aos-animate {
    opacity: 1;
    -webkit-transform: perspective(600px) rotateX(0) translateY(0);
    transform: perspective(600px) rotateX(0) translateY(0);
}

/* Staggered children grid reveal — add data-stagger to any grid wrapper */
[data-stagger] > * {
    opacity: 0;
    -webkit-transform: translateY(22px);
    transform: translateY(22px);
    -webkit-transition:
        opacity 0.55s ease,
        -webkit-transform 0.55s ease;
    transition:
        opacity 0.55s ease,
        transform 0.55s ease;
}

[data-stagger].aos-animate > *:nth-child(1) {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

[data-stagger].aos-animate > *:nth-child(2) {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

[data-stagger].aos-animate > *:nth-child(3) {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

[data-stagger].aos-animate > *:nth-child(4) {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

[data-stagger].aos-animate > *:nth-child(5) {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

[data-stagger].aos-animate > *:nth-child(6) {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

/*---------------------------------
    8.1 Responsive Nav Squeeze
---------------------------------*/
@media (max-width: 1199px) {
    .nav-links a {
        padding: 8px 10px;
        font-size: 0.875rem;
    }

    .nav-inner {
        gap: 12px;
    }

    .nav-cta {
        gap: 8px;
    }

    .btn-sm {
        padding: 9px 16px;
        font-size: 0.8125rem;
    }
}

/*---------------------------------
    8.2 Responsive Mobile Nav
---------------------------------*/
@media (max-width: 1024px) {
    .nav-links,
    .nav-cta {
        display: none;
    }

    .nav-toggle {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 6px;
        z-index: 1001;
        background: none;
        border: none;
    }

    .nav-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--tmv-text-secondary);
        border-radius: 2px;
        -webkit-transition: var(--tmv-transition);
        transition: var(--tmv-transition);
    }

    .mobile-menu {
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(7, 8, 15, 0.97);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        z-index: 999;
        padding: 28px 20px;
        -webkit-flex-direction: column;
        flex-direction: column;
        gap: 4px;
        border-top: 1px solid var(--tmv-border);
        overflow-y: scroll;
    }

    .mobile-menu.open {
        display: -webkit-flex;
        display: flex;
    }

    .mobile-menu a:not(.btn) {
        padding: 14px 16px;
        font-size: 1.0625rem;
        font-weight: 600;
        color: var(--tmv-text-secondary);
        border-radius: var(--tmv-radius-sm);
        -webkit-transition: var(--tmv-transition);
        transition: var(--tmv-transition);
        display: block;
    }

    .mobile-menu a:not(.btn):hover {
        color: var(--tmv-accent);
        background: var(--tmv-bg-card);
    }

    .mobile-menu .btn {
        margin-top: 16px;
    }

    .hero-visual-wrap {
        display: none;
    }
}

/*---------------------------------
    8.3 Responsive Tablet
---------------------------------*/
@media (max-width: 768px) {
    .hero {
        padding-top: 108px;
        padding-bottom: 64px;
    }

    .hero-visual-wrap {
        display: none;
    }
}

/*---------------------------------
    8.4 Responsive Small Screens
---------------------------------*/
@media (max-width: 400px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.625rem;
    }

    .btn-lg {
        padding: 14px 24px;
        font-size: 0.9375rem;
    }

    .cta-box {
        padding: 36px 18px;
    }

    .pricing-card {
        padding: 28px 20px;
    }
}

/*---------------------------------
    9.1 FAQs Page
---------------------------------*/
.faq-cats {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 44px;
}

.faq-cat-btn {
    padding: 9px 22px;
    border-radius: 100px;
    border: 1px solid var(--tmv-border);
    background: transparent;
    color: var(--tmv-text-secondary);
    font-family: var(--tmv-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.faq-cat-btn:hover,
.faq-cat-btn.active {
    background: var(--tmv-accent-dim);
    border-color: var(--tmv-accent);
    color: var(--tmv-accent);
}

.faq-group {
    display: none;
}

.faq-group.active {
    display: block;
}

.faq-cta-actions {
    display: -webkit-flex;
    display: flex;
    gap: 12px;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

/*---------------------------------
    9.2 Legal Pages
---------------------------------*/
.legal-wrap {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 210px 1fr;
    grid-template-columns: 210px 1fr;
    gap: 52px;
    -webkit-align-items: start;
    align-items: start;
}

@media (max-width: 900px) {
    .legal-wrap {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.legal-toc {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--tmv-nav-h) + 20px);
}

@media (max-width: 900px) {
    .legal-toc {
        position: static;
        background: var(--tmv-bg-card);
        border: 1px solid var(--tmv-border);
        border-radius: var(--tmv-radius-md);
        padding: 20px;
    }
}

.legal-toc-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tmv-text-muted);
    margin-bottom: 14px;
}

.legal-toc-links {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 2px;
}

.legal-toc-links a {
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
    padding: 7px 10px;
    border-radius: 6px;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    border-left: 2px solid transparent;
    display: block;
}

.legal-toc-links a:hover,
.legal-toc-links a.toc-active {
    color: var(--tmv-accent);
    background: var(--tmv-accent-dim);
    border-left-color: var(--tmv-accent);
}

.legal-meta {
    display: -webkit-flex;
    display: flex;
    gap: 24px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--tmv-border);
}

.legal-meta span {
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
}

.legal-meta strong {
    color: var(--tmv-text-primary);
}

.legal-block {
    margin-bottom: 48px;
    scroll-margin-top: calc(var(--tmv-nav-h) + 24px);
}

.legal-block h2 {
    font-size: 1.1875rem;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--tmv-border);
    color: var(--tmv-text-primary);
}

.legal-block p {
    margin-bottom: 14px;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--tmv-text-secondary);
}

.legal-block ul,
.legal-block ol {
    padding-left: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 14px;
}

.legal-block ul li {
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
    line-height: 1.7;
    list-style: disc;
}

.legal-block ol li {
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
    line-height: 1.7;
    list-style: decimal;
}

.legal-block h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 24px 0 10px;
    color: var(--tmv-text-primary);
}

.legal-block a {
    color: var(--tmv-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-highlight {
    background: var(--tmv-accent-dim);
    border-left: 3px solid var(--tmv-accent);
    border-radius: 0 var(--tmv-radius-sm) var(--tmv-radius-sm) 0;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.legal-highlight p {
    color: var(--tmv-text-primary);
    margin: 0;
    font-size: 0.9375rem;
}

/*---------------------------------
    9.3 Auth Pages
---------------------------------*/
.auth-page {
    min-height: 100vh;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.auth-nav {
    height: var(--tmv-nav-h);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 40px;
    position: relative;
    z-index: 10;
    border-bottom: 1px solid var(--tmv-border);
}

@media (max-width: 480px) {
    .auth-nav {
        padding: 0 20px;
    }
}

.auth-wrap {
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - var(--tmv-nav-h));
}

@media (max-width: 900px) {
    .auth-wrap {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.auth-left {
    background: var(--tmv-bg-secondary);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 48px;
    position: relative;
    overflow: hidden;
}

@media (max-width: 900px) {
    .auth-left {
        display: none;
    }
}

.auth-left-glow-1 {
    position: absolute;
    top: -80px;
    left: -80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 232, 200, 0.09) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.auth-left-glow-2 {
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(124, 107, 255, 0.09) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.auth-left-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--tmv-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--tmv-border) 1px, transparent 1px);
    background-size: 52px 52px;
    opacity: 0.5;
    pointer-events: none;
}

.auth-features {
    position: relative;
    z-index: 1;
    margin-top: 48px;
}

.auth-feature-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.auth-feature-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    background: var(--tmv-accent-dim);
    border: 1px solid rgba(0, 232, 200, 0.2);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.auth-feature-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--tmv-accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-feature-icon.purple {
    background: var(--tmv-purple-dim);
    border-color: rgba(124, 107, 255, 0.2);
}

.auth-feature-icon.purple svg {
    stroke: var(--tmv-purple);
}

.auth-feature-item h3 {
    margin-bottom: 2px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
}

.auth-feature-item p {
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
    line-height: 1.5;
    margin: 0;
}

.auth-quote {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-md);
    padding: 20px 22px;
}

.auth-quote blockquote {
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--tmv-text-secondary);
    margin-bottom: 14px;
    line-height: 1.7;
}

.auth-quote-author {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
}

.auth-quote-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    color: var(--tmv-black);
}

.auth-quote-info strong {
    font-size: 0.875rem;
    color: var(--tmv-text-primary);
    display: block;
}

.auth-quote-info span {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
}

.auth-right {
    background: var(--tmv-bg-primary);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 48px 40px;
}

@media (max-width: 480px) {
    .auth-right {
        padding: 32px 20px;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }
}

.auth-card {
    width: 100%;
    max-width: 400px;
}

.auth-card-top {
    text-align: right;
    margin-bottom: 40px;
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
}

.auth-card-top a {
    color: var(--tmv-accent);
    font-weight: 600;
}

.auth-card-title {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    margin-bottom: 6px;
}

.auth-card-sub {
    font-size: 0.9375rem;
    color: var(--tmv-text-muted);
    margin-bottom: 28px;
    line-height: 1.6;
}

.auth-social {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}

.auth-social-btn {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: var(--tmv-radius-sm);
    border: 1px solid var(--tmv-border);
    background: var(--tmv-bg-card);
    color: var(--tmv-text-primary);
    font-family: var(--tmv-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    white-space: nowrap;
}

.auth-social-btn:hover {
    border-color: var(--tmv-border-hover);
    background: var(--tmv-bg-card2);
}

.auth-social-btn svg {
    width: 18px;
    height: 18px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.auth-divider {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: var(--tmv-text-muted);
    font-size: 0.8125rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    -webkit-flex: 1;
    flex: 1;
    height: 1px;
    background: var(--tmv-border);
}

.auth-check-row {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 12px;
}

.auth-check-label {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--tmv-text-secondary);
    cursor: pointer;
    line-height: 1;
}

.auth-check-label input[type="checkbox"] {
    accent-color: var(--tmv-accent);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.auth-forgot {
    font-size: 0.875rem;
    color: var(--tmv-accent);
    font-weight: 600;
    white-space: nowrap;
}

.auth-footer-text {
    text-align: center;
    margin-top: 22px;
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
}

.auth-footer-text a {
    color: var(--tmv-accent);
    font-weight: 600;
}

.password-wrap {
    position: relative;
}

.password-wrap .form-control {
    padding-right: 46px;
}

.password-eye {
    position: absolute;
    right: 13px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tmv-text-muted);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 4px;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.password-eye:hover {
    color: var(--tmv-accent);
}

.password-eye svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-terms-text {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    line-height: 1.6;
    margin-bottom: 18px;
}

.auth-terms-text a {
    color: var(--tmv-accent);
}

.pw-strength {
    margin-top: 7px;
}

.pw-strength-bars {
    display: -webkit-flex;
    display: flex;
    gap: 4px;
    margin-bottom: 5px;
}

.pw-strength-bar {
    -webkit-flex: 1;
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--tmv-border);
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
}

.pw-strength-label {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
}

/* Forgot password */
.forgot-page {
    min-height: 100vh;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    background: var(--tmv-bg-primary);
}

.forgot-body {
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 48px 24px;
}

.forgot-card {
    width: 100%;
    max-width: 440px;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-xl);
    padding: 44px 40px;
    text-align: center;
}

@media (max-width: 480px) {
    .forgot-card {
        padding: 32px 20px;
    }
}

.forgot-icon-wrap {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--tmv-accent-dim);
    border: 1px solid rgba(0, 232, 200, 0.25);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0 auto 24px;
    -webkit-animation: orbPulse 3s ease-in-out infinite;
    animation: orbPulse 3s ease-in-out infinite;
}

.forgot-icon-wrap svg {
    width: 30px;
    height: 30px;
    stroke: var(--tmv-accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.forgot-card h2 {
    margin-bottom: 10px;
}

.forgot-card > p {
    margin-bottom: 28px;
    font-size: 0.9375rem;
}

.forgot-back {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
    margin-top: 20px;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.forgot-back:hover {
    color: var(--tmv-accent);
}

.forgot-back svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.forgot-success {
    display: none;
    text-align: center;
}

.forgot-success.show {
    display: block;
}

.forgot-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tmv-accent-dim);
    border: 1px solid rgba(0, 232, 200, 0.3);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.forgot-success-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--tmv-accent);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*---------------------------------
    9.4 Blog Detail
---------------------------------*/

/* Article header inside page-hero */
.page-hero .blog-detail-meta {
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 24px;
}

.page-hero .blog-detail-author {
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.page-hero .blog-detail-share {
    margin-left: 0;
}

@media (max-width: 600px) {
    .page-hero .blog-detail-author {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        justify-content: center;
        text-align: center;
    }
    .page-hero .blog-detail-share {
        width: 100%;
        -webkit-justify-content: center;
        justify-content: center;
    }
}

.blog-detail-section {
    padding: 64px 0 96px;
}

@media (max-width: 768px) {
    .blog-detail-section {
        padding: 40px 0 64px;
    }
}
@media (max-width: 480px) {
    .blog-detail-section {
        padding: 32px 0 48px;
    }
}

.blog-detail-layout {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr 300px;
    grid-template-columns: 1fr 300px;
    gap: 52px;
    -webkit-align-items: start;
    align-items: start;
}

/* Grid children must shrink — prevents code blocks from causing horizontal overflow */
.blog-detail-layout article,
.blog-detail-layout .blog-sidebar {
    min-width: 0;
}

@media (max-width: 1024px) {
    .blog-detail-layout {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .blog-detail-layout .blog-sidebar {
        display: block;
    }
}

.blog-detail-cover {
    width: 100%;
    height: clamp(240px, 38vw, 480px);
    border-radius: var(--tmv-radius-lg);
    overflow: hidden;
    margin-bottom: 36px;
    position: relative;
    background: linear-gradient(135deg, #0d0628 0%, #0a1535 100%);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.blog-detail-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.blog-detail-meta {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 14px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.blog-detail-read {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 5px;
}

.blog-detail-title {
    font-size: clamp(1.75rem, 4vw, 2.625rem);
    line-height: 1.22;
    margin-bottom: 22px;
    letter-spacing: -0.03em;
}

.blog-detail-author {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--tmv-border);
    border-bottom: 1px solid var(--tmv-border);
    margin-bottom: 44px;
}

.blog-detail-av {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: var(--tmv-accent);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--tmv-black);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.blog-detail-av.purple {
    background: var(--tmv-purple);
}

.blog-detail-author-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
}

.blog-detail-author-role {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
}

.blog-detail-share {
    margin-left: auto;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.blog-detail-share span {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
}

.blog-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--tmv-border);
    background: var(--tmv-bg-card);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: var(--tmv-text-muted);
    cursor: pointer;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
}

.blog-share-btn:hover {
    border-color: var(--tmv-accent);
    color: var(--tmv-accent);
    background: var(--tmv-accent-dim);
}

.blog-share-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.blog-article h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    margin: 40px 0 14px;
    color: var(--tmv-text-primary);
}

.blog-article h3 {
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    margin: 32px 0 12px;
    color: var(--tmv-text-primary);
}

.blog-article p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--tmv-text-secondary);
    margin-bottom: 22px;
}

.blog-article ul,
.blog-article ol {
    padding-left: 22px;
    margin-bottom: 22px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 10px;
}

.blog-article ul li {
    list-style: disc;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--tmv-text-secondary);
}

.blog-article ol li {
    list-style: decimal;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--tmv-text-secondary);
}

.blog-article blockquote {
    border-left: 3px solid var(--tmv-accent);
    background: var(--tmv-accent-dim);
    border-radius: 0 var(--tmv-radius-sm) var(--tmv-radius-sm) 0;
    padding: 18px 22px;
    margin: 32px 0;
    font-style: italic;
    color: var(--tmv-text-primary);
    font-size: 1.0625rem;
    line-height: 1.75;
}

.blog-article hr {
    border: none;
    border-top: 1px solid var(--tmv-border);
    margin: 40px 0;
}

.blog-article code {
    font-family: monospace;
    font-size: 0.9em;
    background: var(--tmv-bg-card2);
    border: 1px solid var(--tmv-border);
    border-radius: 5px;
    padding: 2px 7px;
    color: var(--tmv-accent);
}

.blog-article pre {
    background: var(--tmv-bg-card2);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-sm);
    padding: 22px;
    overflow-x: auto;
    margin-bottom: 24px;
}

.blog-article pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--tmv-text-primary);
}

.blog-article .blog-callout {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-md);
    padding: 22px 24px;
    margin: 32px 0;
    display: -webkit-flex;
    display: flex;
    gap: 14px;
}

.blog-article .blog-callout-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin-top: 2px;
    color: var(--tmv-accent);
}

.blog-article .blog-callout-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.blog-article .blog-callout p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--tmv-text-primary);
}

.blog-post-nav {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--tmv-border);
}

@media (max-width: 560px) {
    .blog-post-nav {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.blog-post-nav-item {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-md);
    padding: 20px 22px;
    -webkit-transition: var(--tmv-transition);
    transition: var(--tmv-transition);
    display: block;
}

.blog-post-nav-item:hover {
    border-color: var(--tmv-border-hover);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.blog-post-nav-item.next {
    text-align: right;
}

.blog-post-nav-dir {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tmv-text-muted);
    margin-bottom: 6px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 5px;
}

.blog-post-nav-item.next .blog-post-nav-dir {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.blog-post-nav-dir svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.blog-post-nav-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
    line-height: 1.4;
}

.blog-author-bio {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    padding: 28px;
    display: -webkit-flex;
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

@media (max-width: 540px) {
    .blog-author-bio {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}

.blog-author-bio-av {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    background: var(--tmv-accent);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--tmv-black);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.blog-author-bio-av.purple {
    background: var(--tmv-purple);
}

.blog-author-bio-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tmv-text-muted);
    margin-bottom: 4px;
}

.blog-author-bio-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
    margin-bottom: 8px;
}

.blog-author-bio-text {
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
    line-height: 1.7;
    margin: 0;
}

.blog-related-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 800px) {
    .blog-related-grid {
        -webkit-grid-template-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .blog-related-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

/*---------------------------------
    9.5 Portfolio Detail
---------------------------------*/
.case-hero {
    padding: clamp(100px, 12vw, 156px) 0 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.case-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--tmv-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--tmv-border) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(
        ellipse 60% 50% at 50% 50%,
        black 30%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 60% 50% at 50% 50%,
        black 30%,
        transparent 100%
    );
}

.case-hero-tags {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 20px;
    position: relative;
}

.case-hero h1 {
    position: relative;
    margin-bottom: 18px;
}

.case-hero-sub {
    font-size: 1.125rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto 0;
    position: relative;
    color: var(--tmv-text-secondary);
}

.case-hero-kpi-strip {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(4, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--tmv-border);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    overflow: hidden;
    margin-top: 52px;
}

@media (max-width: 760px) {
    .case-hero-kpi-strip {
        -webkit-grid-template-columns: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .case-hero-kpi-strip {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.case-kpi {
    background: var(--tmv-bg-card);
    padding: 28px 24px;
    text-align: center;
}

.case-kpi-num {
    font-family: var(--tmv-font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--tmv-accent);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
}

.case-kpi-num.purple {
    color: var(--tmv-purple);
}

.case-kpi-num.orange {
    color: var(--tmv-color-orange);
}

.case-kpi-num.green {
    color: var(--tmv-color-green);
}

.case-kpi-label {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    font-weight: 500;
}

.case-cover {
    width: 100%;
    height: clamp(220px, 35vw, 400px);
    background: var(--tmv-bg-secondary);
    border-top: 1px solid var(--tmv-border);
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 52px;
}

.case-cover-inner {
    position: relative;
    z-index: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 20px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.case-screen {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-md);
    padding: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 10px;
}

.case-screen-sm {
    width: 160px;
    height: 110px;
}

.case-screen-lg {
    width: 280px;
    height: 200px;
}

@media (max-width: 560px) {
    .case-screen-sm {
        display: none;
    }
}

.case-cover-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 600px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(0, 232, 200, 0.07) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.case-body {
    padding: 80px 0;
}

@media (max-width: 768px) {
    .case-body {
        padding: 56px 0;
    }
}
@media (max-width: 480px) {
    .case-body {
        padding: 40px 0;
    }
}

.case-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    -webkit-align-items: center;
    align-items: center;
}

@media (max-width: 800px) {
    .case-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.case-grid.reverse {
    direction: rtl;
}

.case-grid.reverse > * {
    direction: ltr;
}

.case-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tmv-accent);
    margin-bottom: 10px;
}

.case-label.purple {
    color: var(--tmv-purple);
}

.case-label.orange {
    color: var(--tmv-color-orange);
}

.case-h {
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    margin-bottom: 16px;
    line-height: 1.28;
}

.case-p {
    font-size: 1rem;
    color: var(--tmv-text-secondary);
    line-height: 1.8;
    margin-bottom: 18px;
}

.case-p:last-child {
    margin-bottom: 0;
}

.case-checklist {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

.case-check-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 12px;
}

.case-check-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: var(--tmv-accent-dim);
    border: 1px solid rgba(0, 232, 200, 0.25);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 1px;
}

.case-check-icon svg {
    width: 11px;
    height: 11px;
    stroke: var(--tmv-accent);
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.case-check-icon.purple {
    background: var(--tmv-purple-dim);
    border-color: rgba(124, 107, 255, 0.25);
}

.case-check-icon.purple svg {
    stroke: var(--tmv-purple);
}

.case-check-text {
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
    line-height: 1.6;
    padding-top: 2px;
}

.case-visual-box {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-xl);
    padding: 36px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.case-visual-glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    pointer-events: none;
}

.case-visual-glow-accent {
    background: radial-gradient(
        circle,
        rgba(0, 232, 200, 0.1) 0%,
        transparent 70%
    );
}

.case-visual-glow-purple {
    background: radial-gradient(
        circle,
        rgba(124, 107, 255, 0.1) 0%,
        transparent 70%
    );
}

.case-visual-glow-orange {
    background: radial-gradient(
        circle,
        rgba(239, 158, 39, 0.09) 0%,
        transparent 70%
    );
}

.case-metric-cards {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 1;
    width: 100%;
}

.case-metric-card {
    background: var(--tmv-bg-card2);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-md);
    padding: 16px 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 14px;
}

.case-metric-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.case-metric-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.case-metric-val {
    font-family: var(--tmv-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--tmv-text-primary);
    line-height: 1;
}

.case-metric-desc {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    margin-top: 2px;
}

.case-results-strip {
    background: var(--tmv-bg-secondary);
    border-top: 1px solid var(--tmv-border);
    border-bottom: 1px solid var(--tmv-border);
    padding: 72px 0;
}

@media (max-width: 768px) {
    .case-results-strip {
        padding: 48px 0;
    }
}
@media (max-width: 480px) {
    .case-results-strip {
        padding: 36px 0;
    }
}

.case-results-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--tmv-border);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    overflow: hidden;
    margin-top: 48px;
}

@media (max-width: 640px) {
    .case-results-grid {
        -webkit-grid-template-columns: 1fr;
        grid-template-columns: 1fr;
    }
}

.case-result-item {
    background: var(--tmv-bg-card);
    padding: 36px 28px;
    text-align: center;
}

.case-result-num {
    font-family: var(--tmv-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 8px;
}

.case-result-desc {
    font-size: 0.9375rem;
    color: var(--tmv-text-muted);
    line-height: 1.5;
}

.case-testimonial {
    padding: 80px 0;
}

@media (max-width: 768px) {
    .case-testimonial {
        padding: 56px 0;
    }
}
@media (max-width: 480px) {
    .case-testimonial {
        padding: 40px 0;
    }
}

.case-testi-box {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.case-testi-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--tmv-accent-dim);
    border: 1px solid rgba(0, 232, 200, 0.2);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0 auto 28px;
}

.case-testi-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--tmv-accent);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.case-testi-quote {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-style: italic;
    color: var(--tmv-text-primary);
    line-height: 1.65;
    margin-bottom: 28px;
    font-family: var(--tmv-font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
}

.case-testi-author {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: 100px;
}

.case-testi-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tmv-accent);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--tmv-black);
}

.case-testi-av.purple {
    background: var(--tmv-purple);
}

.case-testi-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
}

.case-testi-role {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
}

/*---------------------------------
    4.11 Utility Classes
---------------------------------*/

/* Hero avatars */
.hero-av--teal {
    background: linear-gradient(135deg, var(--tmv-accent), #0099aa);
}
.hero-av--purple {
    background: linear-gradient(135deg, var(--tmv-purple), #4433cc);
}
.hero-av--orange {
    background: linear-gradient(135deg, #ef9e27, #cc6600);
}
.hero-av--red {
    background: linear-gradient(135deg, #e24b4a, #aa1111);
}

/* Page hero no-bottom-padding variant */
.page-hero--flush {
    padding-bottom: 0;
}

/* Inline accent link */
.link-accent {
    color: var(--tmv-accent);
    font-weight: 600;
}

/* Margin helpers */
.mt-10 {
    margin-top: 10px;
}
.mt-8 {
    margin-top: 8px;
}

/* Sidebar recent posts list */
.sidebar-recent-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 16px;
}
.sidebar-recent-item {
    display: -webkit-flex;
    display: flex;
    gap: 12px;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.sidebar-recent-thumb {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 8px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.sidebar-recent-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
    line-height: 1.4;
}

/* Auth panel */
.auth-panel-body {
    position: relative;
    z-index: 1;
}
.auth-panel-heading {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    max-width: 340px;
    line-height: 1.3;
}
.auth-quote-av--teal {
    background: var(--tmv-accent);
}
.auth-quote-av--purple {
    background: var(--tmv-purple);
}
.eye-closed {
    display: none;
}

/* Forgot password success state */
.forgot-group--left {
    text-align: left;
}
.forgot-success-title {
    margin-bottom: 10px;
}
.forgot-success-text {
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
    line-height: 1.7;
    margin-bottom: 18px;
}
.forgot-resend-text {
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
}

/* Legal strong highlight */
.legal-date {
    color: var(--tmv-text-primary);
}

/* Portfolio detail visual mockup */
.breadcrumb--center {
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 28px;
}
.badge--purple {
    background: var(--tmv-purple-dim);
    color: var(--tmv-purple);
    border-color: rgba(124, 107, 255, 0.2);
}
.badge--muted {
    background: var(--tmv-bg-card);
    color: var(--tmv-text-muted);
    border: 1px solid var(--tmv-border);
}
.case-screen--teal {
    border-color: rgba(0, 232, 200, 0.15);
}
.case-screen--teal2 {
    border-color: rgba(0, 232, 200, 0.2);
    gap: 16px;
}
.case-screen--purple {
    border-color: rgba(124, 107, 255, 0.15);
}
.case-screen-label {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    text-align: center;
    line-height: 1.4;
}
.case-screen-bar-wrap {
    width: 100%;
}
.case-screen-bar-label {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.case-screen-bar-track {
    height: 6px;
    background: var(--tmv-border);
    border-radius: 3px;
    overflow: hidden;
}
.case-screen-bar-fill {
    width: 78%;
    height: 100%;
    background: var(--tmv-accent);
    border-radius: 3px;
}
.case-screen-bar-footer {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-top: 6px;
}
.case-screen-bar-pct {
    font-size: 0.75rem;
    color: var(--tmv-accent);
    font-weight: 700;
}
.case-screen-bar-pct2 {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
}
.case-screen-stats {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    gap: 8px;
}
.case-screen-stat {
    -webkit-flex: 1;
    flex: 1;
    background: var(--tmv-bg-primary);
    border: 1px solid var(--tmv-border);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}
.case-screen-stat-val {
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--tmv-font-display);
}
.case-screen-stat-val--teal {
    color: var(--tmv-accent);
}
.case-screen-stat-val--purple {
    color: var(--tmv-purple);
}
.case-screen-stat-lbl {
    font-size: 0.7rem;
    color: var(--tmv-text-muted);
}
.case-body--bordered {
    background: var(--tmv-bg-primary);
    border-top: 1px solid var(--tmv-border);
}
.case-check-icon--red {
    background: rgba(226, 75, 74, 0.1);
    border-color: rgba(226, 75, 74, 0.25);
}
.case-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tmv-text-muted);
    margin-bottom: 4px;
}
.case-metric-icon--red {
    background: rgba(226, 75, 74, 0.1);
}
.case-hr {
    border: none;
    border-top: 1px solid var(--tmv-border);
    margin: 80px 0;
}
.case-workflow {
    position: relative;
    z-index: 1;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 12px;
}
.case-workflow-step {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
    background: var(--tmv-bg-card2);
    border: 1px solid var(--tmv-border);
    border-radius: 10px;
    padding: 14px 16px;
}
.case-workflow-step--accent {
    background: var(--tmv-accent-dim);
    border-color: rgba(0, 232, 200, 0.2);
}
.case-workflow-num {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}
.case-workflow-num--1 {
    background: var(--tmv-accent-dim);
    border: 1px solid rgba(0, 232, 200, 0.25);
    color: var(--tmv-accent);
}
.case-workflow-num--2 {
    background: var(--tmv-accent);
    color: var(--tmv-black);
}
.case-workflow-num--3 {
    background: var(--tmv-purple-dim);
    border: 1px solid rgba(124, 107, 255, 0.25);
    color: var(--tmv-purple);
}
.case-workflow-num--4 {
    background: rgba(29, 158, 117, 0.12);
    border: 1px solid rgba(29, 158, 117, 0.25);
    color: var(--tmv-color-green);
}
.case-workflow-text {
    font-size: 0.875rem;
    color: var(--tmv-text-secondary);
}
.case-workflow-text--bold {
    font-size: 0.875rem;
    color: var(--tmv-text-primary);
    font-weight: 600;
}
.case-workflow-arrow {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}
.case-result-num--teal {
    color: var(--tmv-accent);
}
.case-result-num--purple {
    color: var(--tmv-purple);
}
.case-result-num--orange {
    color: var(--tmv-color-orange);
}
.case-result-num--green {
    color: var(--tmv-color-green);
}
.case-testi-align {
    text-align: left;
}
.case-section--result {
    padding: 0 0 88px;
    background: var(--tmv-bg-primary);
}
.case-after-wrap {
    margin-top: 32px;
    display: -webkit-flex;
    display: flex;
    gap: 12px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.case-after-body {
    position: relative;
    z-index: 1;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 14px;
}
.case-after-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tmv-text-muted);
    margin-bottom: 2px;
}
.case-metric-icon--teal {
    background: var(--tmv-accent-dim);
}
.case-metric-val--teal {
    color: var(--tmv-accent);
}

/* Case visual glow position variants */
.case-visual-glow--bl {
    top: auto;
    bottom: -60px;
    right: auto;
    left: -60px;
}
.case-visual-glow--br {
    top: auto;
    bottom: -60px;
}

/* Case screen label accent/purple spans */
.case-screen-label-accent {
    color: var(--tmv-accent);
    font-weight: 700;
}
.case-screen-label-purple {
    color: var(--tmv-purple);
    font-weight: 700;
}

/* SVG chart gradient fill variant */
.chart-area--grad2 {
    fill: url(#chartGrad2);
}

/*---------------------------------
    9.6 404 Page
---------------------------------*/
.error-section {
    min-height: 100vh;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 120px 0 80px;
}

.error-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 80% 60% at 50% 0%,
        rgba(0, 232, 200, 0.06) 0%,
        transparent 60%
    );
    pointer-events: none;
}

.error-glow-1 {
    position: absolute;
    top: 10%;
    left: 15%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 232, 200, 0.07) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.error-glow-2 {
    position: absolute;
    bottom: 10%;
    right: 10%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(124, 107, 255, 0.07) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.error-inner {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.error-code {
    font-family: var(--tmv-font-display);
    font-size: clamp(6rem, 18vw, 12rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(
        135deg,
        var(--tmv-accent) 0%,
        var(--tmv-purple) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
    opacity: 0.9;
}

.error-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    margin-bottom: 16px;
}

.error-desc {
    font-size: 1.0625rem;
    color: var(--tmv-text-secondary);
    max-width: 480px;
    margin: 0 auto 36px;
    line-height: 1.75;
}

.error-actions {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 12px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.error-actions .btn svg {
    margin-right: 6px;
    vertical-align: middle;
}

.error-links {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 16px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 0.9375rem;
    color: var(--tmv-text-muted);
}

.error-links a {
    color: var(--tmv-text-secondary);
    font-weight: 500;
    transition: color var(--tmv-transition);
}

.error-links a:hover {
    color: var(--tmv-accent);
}

@media (max-width: 600px) {
    .error-section {
        padding: 100px 0 60px;
    }
    .error-actions {
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;
    }
}

/*---------------------------------
    4.12 Page Loader
---------------------------------*/

#page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: var(--tmv-bg-primary);
    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}

#page-loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    gap: 28px;
}

/* Spinner ring */
.loader-ring {
    position: relative;
    width: 56px;
    height: 56px;
}

.loader-ring svg {
    width: 100%;
    height: 100%;
    -webkit-animation: loaderRotate 1.4s linear infinite;
    animation: loaderRotate 1.4s linear infinite;
}

.loader-ring-track {
    fill: none;
    stroke: rgba(0, 232, 200, 0.12);
    stroke-width: 3;
}

.loader-ring-arc {
    fill: none;
    stroke: var(--tmv-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 88;
    stroke-dashoffset: 66;
    -webkit-animation: loaderArcPulse 1.4s ease-in-out infinite;
    animation: loaderArcPulse 1.4s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(0, 232, 200, 0.6));
}

@-webkit-keyframes loaderRotate {
    to {
        transform: rotate(360deg);
    }
}
@keyframes loaderRotate {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes loaderArcPulse {
    0%,
    100% {
        stroke-dashoffset: 66;
    }
    50% {
        stroke-dashoffset: 10;
    }
}
@keyframes loaderArcPulse {
    0%,
    100% {
        stroke-dashoffset: 66;
    }
    50% {
        stroke-dashoffset: 10;
    }
}

/* Dots bar */
.loader-dots {
    display: -webkit-flex;
    display: flex;
    gap: 7px;
}

.loader-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tmv-accent);
    opacity: 0.25;
    -webkit-animation: loaderDot 1.2s ease-in-out infinite;
    animation: loaderDot 1.2s ease-in-out infinite;
}

.loader-dots span:nth-child(2) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.loader-dots span:nth-child(3) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

@-webkit-keyframes loaderDot {
    0%,
    80%,
    100% {
        opacity: 0.2;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}
@keyframes loaderDot {
    0%,
    80%,
    100% {
        opacity: 0.2;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Bottom progress line */
.loader-progress {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--tmv-purple), var(--tmv-accent));
    box-shadow: 0 0 10px var(--tmv-accent);
    transition: width 0.3s ease;
    z-index: 100000;
}

/* keep body from jumping during load */
body.is-loading {
    overflow: hidden;
}

/*---------------------------------
    4.13 Video Modal
---------------------------------*/
.vmodal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vmodal[hidden] {
    display: none;
}

.vmodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.vmodal-box {
    position: relative;
    z-index: 1;
    width: min(880px, 92vw);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
    animation: vmodalIn 0.25s ease both;
}

@keyframes vmodalIn {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(16px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.vmodal-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    background: var(--tmv-black);
}

.vmodal-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.vmodal-close {
    position: absolute;
    top: -40px;
    right: 0;
    z-index: 2;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: var(--tmv-white);
    font-size: 1.5rem;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.vmodal-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/*---------------------------------
    4.14 Contact Form Validation
---------------------------------*/
.vex-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.form-control.is-invalid {
    border-color: #e24b4a;
    box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.18);
}

.form-control.is-valid {
    border-color: var(--tmv-accent);
}

.field-error {
    display: block;
    color: #e24b4a;
    font-size: 0.8125rem;
    margin-top: 5px;
    min-height: 18px;
}

.form-alert {
    display: none;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: 22px;
    align-items: center;
    gap: 10px;
}

.form-alert.show {
    display: flex;
}

.form-alert-success {
    background: rgba(0, 232, 200, 0.1);
    border: 1px solid rgba(0, 232, 200, 0.35);
    color: var(--tmv-accent);
}

.form-alert-error {
    background: rgba(226, 75, 74, 0.1);
    border: 1px solid rgba(226, 75, 74, 0.35);
    color: #e24b4a;
}

.btn-sending {
    opacity: 0.75;
    cursor: not-allowed;
    pointer-events: none;
}

/*---------------------------------
    4.15 Portfolio Overlay
---------------------------------*/
.portfolio-overlay-actions {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
}

.portfolio-lb-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    color: var(--tmv-white);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    cursor: pointer;
    -webkit-transition:
        background 0.2s,
        border-color 0.2s;
    transition:
        background 0.2s,
        border-color 0.2s;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.portfolio-lb-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
}

.portfolio-lb-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*---------------------------------
    4.16 Lightbox
---------------------------------*/
.vex-lb {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 20px;
}

.vex-lb[hidden] {
    display: none;
}

.vex-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.vex-lb-box {
    position: relative;
    z-index: 1;
    max-width: min(900px, 92vw);
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    gap: 14px;
}

.vex-lb-img {
    width: 100%;
    max-height: 70vh;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 12px;
    display: block;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.vex-lb-caption {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

.vex-lb-counter {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
}

.vex-lb-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(30, 30, 40, 0.85);
    color: var(--tmv-white);
    font-size: 1.2rem;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
    z-index: 2;
    line-height: 1;
}

.vex-lb-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.vex-lb-prev,
.vex-lb-next {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--tmv-white);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
    z-index: 2;
}

.vex-lb-prev {
    left: 16px;
}
.vex-lb-next {
    right: 16px;
}

.vex-lb-prev:hover,
.vex-lb-next:hover {
    background: rgba(255, 255, 255, 0.18);
}

.vex-lb-prev svg,
.vex-lb-next svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 600px) {
    .vex-lb-prev {
        left: 8px;
    }
    .vex-lb-next {
        right: 8px;
    }
    .vex-lb-prev,
    .vex-lb-next {
        width: 36px;
        height: 36px;
    }
}

/*---------------------------------
    9.7 AI Chatbot Page
---------------------------------*/
.chat-interface {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    overflow: hidden;
    max-width: 860px;
    margin: 0 auto;
    box-shadow: var(--tmv-shadow);
}

.chat-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--tmv-border);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--tmv-bg-card2);
}

.chat-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tmv-accent), var(--tmv-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tmv-white);
    flex-shrink: 0;
}

.chat-header-info {
    flex: 1;
}

.chat-header-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--tmv-text-primary);
}

.chat-header-status {
    font-size: 0.8125rem;
    color: var(--tmv-accent);
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tmv-accent);
    display: inline-block;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.chat-model-tags {
    display: flex;
    gap: 6px;
}

.chat-model-tag {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--tmv-border);
    color: var(--tmv-text-muted);
    background: transparent;
    cursor: pointer;
    transition: var(--tmv-transition);
}

.chat-model-tag.active {
    border-color: var(--tmv-accent);
    color: var(--tmv-accent);
    background: var(--tmv-accent-dim);
}

.chat-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 380px;
}

.chat-msg {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.chat-msg--user {
    flex-direction: row-reverse;
}

.chat-user-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tmv-white);
    background: linear-gradient(
        135deg,
        var(--tmv-purple),
        var(--tmv-purple-bright)
    );
    flex-shrink: 0;
}

.chat-bubble {
    padding: 13px 17px;
    border-radius: 16px;
    font-size: 0.9375rem;
    line-height: 1.65;
    max-width: 76%;
}

.chat-bubble--ai {
    background: var(--tmv-bg-card2);
    border: 1px solid var(--tmv-border);
    border-radius: 4px 16px 16px 16px;
    color: var(--tmv-text-primary);
}

.chat-bubble--user {
    background: var(--tmv-accent-dim);
    border: 1px solid var(--tmv-accent-glow);
    border-radius: 16px 4px 16px 16px;
    color: var(--tmv-text-primary);
}

.chat-action-tags {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.chat-action-tag {
    padding: 4px 11px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: rgba(0, 232, 200, 0.1);
    color: var(--tmv-accent);
    border: 1px solid var(--tmv-accent-glow);
}

.chat-typing {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
    background: var(--tmv-bg-card2);
    border: 1px solid var(--tmv-border);
    border-radius: 16px;
    width: fit-content;
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tmv-text-muted);
    animation: typingBounce 1.3s infinite;
}
.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%,
    60%,
    100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-6px);
    }
}

.chat-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--tmv-border);
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--tmv-bg-card2);
}

.chat-input {
    flex: 1;
    background: var(--tmv-bg-primary);
    border: 1px solid var(--tmv-border);
    border-radius: 10px;
    padding: 11px 15px;
    color: var(--tmv-text-primary);
    font-size: 0.9375rem;
    outline: none;
    font-family: var(--tmv-font-body);
    transition: border-color 0.2s;
}
.chat-input:focus {
    border-color: var(--tmv-accent);
}
.chat-input::placeholder {
    color: var(--tmv-text-muted);
}

.chat-send {
    height: 42px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tmv-transition);
    flex-shrink: 0;
}
.chat-features-strip {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.chat-feat-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: 50px;
    font-size: 0.875rem;
    color: var(--tmv-text-secondary);
}
.chat-feat-chip i {
    color: var(--tmv-accent);
}

/*---------------------------------
    9.8 AI Voice Page
---------------------------------*/
.tmv-border-top {
    border-top: 1px solid var(--tmv-border);
}
.ai-voice-hero-center {
    text-align: center;
    max-width: 900px;
}
.voice-studio {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: var(--tmv-shadow);
}

.voice-studio-top {
    padding: 24px 28px;
    border-bottom: 1px solid var(--tmv-border);
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.voice-textarea {
    flex: 1;
    min-width: 200px;
    background: var(--tmv-bg-primary);
    border: 1px solid var(--tmv-border);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--tmv-text-primary);
    font-size: 0.9375rem;
    font-family: var(--tmv-font-body);
    resize: none;
    min-height: 120px;
    outline: none;
    line-height: 1.65;
    transition: border-color 0.2s;
}
.voice-textarea:focus {
    border-color: var(--tmv-accent);
}
.voice-textarea::placeholder {
    color: var(--tmv-text-muted);
}

.voice-controls-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 200px;
}

.voice-select-label {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    display: block;
    margin-bottom: 4px;
}

.voice-select {
    width: 100%;
    background: var(--tmv-bg-primary);
    border: 1px solid var(--tmv-border);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--tmv-text-primary);
    font-size: 0.875rem;
    font-family: var(--tmv-font-body);
    outline: none;
    cursor: pointer;
}

.voice-speed-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.voice-range {
    flex: 1;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--tmv-border);
    outline: none;
}
.voice-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tmv-accent);
    cursor: pointer;
}

.voice-waveform-wrap {
    padding: 24px 28px;
    border-bottom: 1px solid var(--tmv-border);
}

.waveform-label {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    margin-bottom: 14px;
}

.waveform-bars {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 56px;
}

.waveform-bar {
    width: 4px;
    background: var(--tmv-accent);
    border-radius: 2px;
    opacity: 0.75;
    animation: waveAnim 1.2s ease-in-out infinite alternate;
}

@keyframes waveAnim {
    from {
        transform: scaleY(0.15);
    }
    to {
        transform: scaleY(1);
    }
}

.voice-playback-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

.voice-play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tmv-accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--tmv-transition);
}
.voice-play-btn:hover {
    background: var(--tmv-accent-hover);
}
.voice-play-btn svg {
    width: 16px;
    height: 16px;
    fill: var(--tmv-black);
}

.voice-time {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    font-variant-numeric: tabular-nums;
}

.voice-progress {
    flex: 1;
    height: 4px;
    background: var(--tmv-border);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.voice-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 38%;
    background: var(--tmv-accent);
    border-radius: 2px;
}

.voice-list {
    padding: 20px 28px;
}

.voice-list-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tmv-text-secondary);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.voice-items {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.voice-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--tmv-bg-card2);
    border: 1px solid var(--tmv-border);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--tmv-transition);
    min-width: 150px;
}
.voice-item:hover,
.voice-item.active {
    border-color: var(--tmv-accent-glow);
    background: var(--tmv-accent-dim);
}

.voice-item-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tmv-black);
    flex-shrink: 0;
}

.voice-item-info {
    flex: 1;
}
.voice-item-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
}
.voice-item-lang {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
}

/*---------------------------------
    9.9 AI Keywords Page
---------------------------------*/
.kw-studio {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: var(--tmv-shadow);
}

.kw-input-panel {
    padding: 24px 28px;
    border-bottom: 1px solid var(--tmv-border);
    background: var(--tmv-bg-card2);
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.kw-input-group {
    flex: 1;
    min-width: 200px;
}

.kw-label {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    display: block;
    margin-bottom: 8px;
}

.kw-input {
    width: 100%;
    background: var(--tmv-bg-primary);
    border: 1px solid var(--tmv-border);
    border-radius: 10px;
    padding: 12px 15px;
    color: var(--tmv-text-primary);
    font-size: 0.9375rem;
    font-family: var(--tmv-font-body);
    outline: none;
    transition: border-color 0.2s;
}
.kw-input:focus {
    border-color: var(--tmv-accent);
}
.kw-input::placeholder {
    color: var(--tmv-text-muted);
}

.kw-select {
    background: var(--tmv-bg-primary);
    border: 1px solid var(--tmv-border);
    border-radius: 10px;
    padding: 12px 15px;
    color: var(--tmv-text-primary);
    font-size: 0.875rem;
    font-family: var(--tmv-font-body);
    outline: none;
    cursor: pointer;
    min-width: 140px;
}

.kw-results-header {
    padding: 14px 28px;
    border-bottom: 1px solid var(--tmv-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.kw-results-count {
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
}
.kw-results-count strong {
    color: var(--tmv-accent);
}

.kw-export-btn {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--tmv-border);
    color: var(--tmv-text-secondary);
    cursor: pointer;
    transition: var(--tmv-transition);
    font-family: var(--tmv-font-body);
}
.kw-export-btn:hover {
    border-color: var(--tmv-accent-glow);
    color: var(--tmv-accent);
}

.kw-table {
    width: 100%;
    border-collapse: collapse;
}

.kw-table th {
    padding: 12px 16px 12px 28px;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tmv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--tmv-border);
    background: var(--tmv-bg-card2);
}

.kw-table td {
    padding: 14px 16px 14px 28px;
    border-bottom: 1px solid var(--tmv-border);
    font-size: 0.9375rem;
    vertical-align: middle;
}
.kw-table tr:last-child td {
    border-bottom: none;
}
.kw-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.kw-keyword {
    color: var(--tmv-text-primary);
    font-weight: 500;
}
.kw-volume-num {
    color: var(--tmv-text-secondary);
    font-variant-numeric: tabular-nums;
}
.kw-cpc {
    color: var(--tmv-color-green);
    font-weight: 500;
}
.kw-trend-up {
    color: var(--tmv-accent);
    font-size: 0.8125rem;
}
.kw-trend-down {
    color: var(--tmv-color-red);
    font-size: 0.8125rem;
}

.kw-diff {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
}
.kw-diff--easy {
    background: rgba(29, 158, 117, 0.15);
    color: var(--tmv-color-green);
}
.kw-diff--medium {
    background: rgba(239, 158, 39, 0.15);
    color: var(--tmv-color-orange);
}
.kw-diff--hard {
    background: rgba(226, 75, 74, 0.15);
    color: var(--tmv-color-red);
}

@media (max-width: 700px) {
    .kw-table {
        font-size: 0.8125rem;
    }
    .kw-table th,
    .kw-table td {
        padding: 10px 12px 10px 16px;
    }
    .kw-table th:nth-child(4),
    .kw-table td:nth-child(4) {
        display: none;
    }
}

/*---------------------------------
    9.10 About Page Extended
---------------------------------*/
.timeline-section {
    padding: 80px 0;
}

.timeline-track {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 0 0 52px;
}

.timeline-track::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        var(--tmv-accent),
        var(--tmv-purple),
        transparent
    );
}

.timeline-item {
    position: relative;
    padding-bottom: 48px;
}
.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -44px;
    top: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    border: 2px solid var(--tmv-border);
    background: var(--tmv-bg-card);
    color: var(--tmv-accent);
}
.timeline-dot--accent {
    border-color: var(--tmv-accent);
    background: var(--tmv-accent-dim);
}
.timeline-dot--purple {
    border-color: var(--tmv-purple);
    background: var(--tmv-purple-dim);
    color: var(--tmv-purple);
}
.timeline-dot--orange {
    border-color: var(--tmv-color-orange);
    background: rgba(239, 158, 39, 0.12);
    color: var(--tmv-color-orange);
}
.timeline-dot--green {
    border-color: var(--tmv-color-green);
    background: rgba(29, 158, 117, 0.12);
    color: var(--tmv-color-green);
}

.timeline-year {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tmv-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.timeline-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
    font-family: var(--tmv-font-display);
    margin-bottom: 8px;
}

.timeline-desc {
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
    line-height: 1.7;
}

/* 9.10 (continued) Investor / Backer Grid */
.investors-section {
    padding: 80px 0;
}

.investor-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
}

.investor-card {
    padding: 22px 36px;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
    transition: var(--tmv-transition);
    text-align: center;
}
.investor-card:hover {
    border-color: var(--tmv-border-hover);
    transform: translateY(-3px);
}

.investor-logo {
    font-family: var(--tmv-font-display);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--tmv-text-primary);
    letter-spacing: -0.02em;
}

.investor-type {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
}

/* About-2 mission boxes */
.mission-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
}

@media (max-width: 640px) {
    .mission-boxes {
        grid-template-columns: 1fr;
    }
}

.mission-box-card {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-md);
    padding: 22px;
    transition: var(--tmv-transition);
}
.mission-box-card:hover {
    border-color: var(--tmv-border-hover);
    transform: translateY(-2px);
}

.mission-box-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--tmv-accent-dim);
    border: 1px solid var(--tmv-accent-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 1.125rem;
    color: var(--tmv-accent);
}
.mission-box-icon--purple {
    background: var(--tmv-purple-dim);
    border-color: rgba(124, 107, 255, 0.25);
    color: var(--tmv-purple);
}
.mission-box-icon--orange {
    background: rgba(239, 158, 39, 0.12);
    border-color: rgba(239, 158, 39, 0.25);
    color: var(--tmv-color-orange);
}
.mission-box-icon--green {
    background: rgba(29, 158, 117, 0.12);
    border-color: rgba(29, 158, 117, 0.25);
    color: var(--tmv-color-green);
}

.mission-box-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
    margin-bottom: 6px;
    font-family: var(--tmv-font-display);
}
.mission-box-desc {
    font-size: 0.875rem;
    color: var(--tmv-text-secondary);
    line-height: 1.65;
}

/* 9.10 (continued) About-2 Large Hero Split */
.about2-hero {
    padding: 120px 0 80px;
}

.about2-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 880px) {
    .about2-hero-inner {
        grid-template-columns: 1fr;
    }
}

.about2-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-family: var(--tmv-font-display);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
}

.about2-hero h1 .gradient-text {
    background: linear-gradient(135deg, var(--tmv-accent), var(--tmv-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about2-hero p {
    font-size: 1.0625rem;
    color: var(--tmv-text-secondary);
    line-height: 1.75;
    margin-bottom: 32px;
}

/*---------------------------------
    9.11 Team Page
---------------------------------*/
.dept-section {
    padding: 0 0 80px;
}

.dept-label {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tmv-accent);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dept-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--tmv-border);
}

.team-grid-6 {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 900px) {
    .team-grid-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 460px) {
    .team-grid-6 {
        grid-template-columns: 1fr;
    }
}

/* Jobs */
.jobs-section {
    padding: 80px 0;
}

.job-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
}

.job-card {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-md);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--tmv-transition);
    text-decoration: none;
    flex-wrap: wrap;
}
.job-card:hover {
    border-color: var(--tmv-border-hover);
    transform: translateX(4px);
}

.job-dept-badge {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
}
.job-dept-badge--eng {
    background: var(--tmv-purple-dim);
    color: var(--tmv-purple);
}
.job-dept-badge--product {
    background: var(--tmv-accent-dim);
    color: var(--tmv-accent);
}
.job-dept-badge--design {
    background: rgba(239, 158, 39, 0.12);
    color: var(--tmv-color-orange);
}
.job-dept-badge--growth {
    background: rgba(29, 158, 117, 0.12);
    color: var(--tmv-color-green);
}
.job-dept-badge--sales {
    background: rgba(226, 75, 74, 0.1);
    color: var(--tmv-color-red);
}

.job-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
}
.job-meta {
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
}
.job-location {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--tmv-text-secondary);
    flex-shrink: 0;
}
.job-arrow {
    color: var(--tmv-accent);
    flex-shrink: 0;
}

/* Nav AI Tools dropdown color hint */
.nav-has-dropdown:has(.nav-dropdown a.active) > .nav-dropdown-toggle,
.mobile-pages-drop:has(.mobile-dropdown-menu a.active) > .nav-dropdown-toggle,
.nav-dropdown-toggle.active {
    color: var(--tmv-accent) !important;
}

/*---------------------------------
    9.12 Team Detail Page
---------------------------------*/

.team-detail-hero {
    padding: 60px 0 80px;
}

.team-detail-hero-inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
    align-items: start;
}

/* Left sidebar */
.team-detail-sidebar {
    position: sticky;
    top: 100px;
}

.team-detail-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tmv-font-display);
    font-weight: 800;
    font-size: 2.5rem;
    border: 3px solid var(--tmv-border);
}

.team-detail-name {
    font-family: var(--tmv-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tmv-text-primary);
    margin-bottom: 6px;
}

.team-detail-role {
    font-size: 1rem;
    color: var(--tmv-accent);
    font-weight: 600;
    margin-bottom: 4px;
}

.team-detail-dept {
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
    margin-bottom: 20px;
}

.team-detail-socials {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
}

.team-detail-social {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tmv-text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
    transition: var(--tmv-transition);
}
.team-detail-social:hover {
    border-color: var(--tmv-accent-glow);
    color: var(--tmv-accent);
}

.team-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.team-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.team-meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tmv-text-muted);
    font-weight: 700;
}

.team-meta-value {
    font-size: 0.9375rem;
    color: var(--tmv-text-primary);
    font-weight: 500;
}

/* Right content */
.team-detail-content h2 {
    font-size: 1.375rem;
    font-weight: 700;
    font-family: var(--tmv-font-display);
    color: var(--tmv-text-primary);
    margin-bottom: 16px;
    margin-top: 40px;
}

.team-detail-content h2:first-child {
    margin-top: 0;
}

.team-detail-content p {
    font-size: 1rem;
    color: var(--tmv-text-secondary);
    line-height: 1.8;
    margin-bottom: 16px;
}

/* 1024px — narrow sidebar */
@media (max-width: 1024px) {
    .team-detail-hero-inner {
        grid-template-columns: 240px 1fr;
        gap: 40px;
    }
}

/* 860px — sidebar collapses above content */
@media (max-width: 860px) {
    .team-detail-hero {
        padding: 40px 0 60px;
    }
    .team-detail-hero-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .team-detail-sidebar {
        position: static;
        top: auto;
    }
    .team-detail-avatar {
        margin: 0;
        width: 120px;
        height: 120px;
        font-size: 2rem;
    }
    .team-detail-name {
        font-size: 1.35rem;
    }
    .team-detail-socials {
        flex-wrap: wrap;
    }
    .team-detail-meta {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 24px;
    }
    .team-detail-content h2 {
        margin-top: 28px;
    }
}

/* 640px — stack sidebar fully */
@media (max-width: 640px) {
    .team-detail-hero {
        padding: 32px 0 48px;
    }
    .team-detail-sidebar {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .team-detail-avatar {
        margin-left: auto;
        margin-right: auto;
    }
    .team-detail-avatar {
        margin: 0 auto 16px;
        width: 100px;
        height: 100px;
        font-size: 1.75rem;
    }
    .team-detail-name {
        font-size: 1.25rem;
    }
    .team-detail-role {
        font-size: 0.9375rem;
    }
    .team-detail-socials {
        justify-content: center;
    }
    .team-detail-meta {
        grid-template-columns: repeat(2, 1fr);
        text-align: left;
    }
    .achievement-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 480px — single column */
@media (max-width: 480px) {
    .team-detail-hero {
        padding: 24px 0 40px;
    }
    .team-detail-avatar {
        width: 88px;
        height: 88px;
        font-size: 1.5rem;
    }
    .team-detail-meta {
        grid-template-columns: 1fr;
    }
    .team-detail-content h2 {
        font-size: 1.2rem;
        margin-top: 24px;
    }
    .team-detail-content p {
        font-size: 0.9375rem;
    }
    .achievement-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .achievement-num {
        font-size: 1.4rem;
    }
    .career-track {
        padding-left: 20px;
        margin-left: 4px;
    }
    .career-item::before {
        left: -26px;
    }
    .career-title {
        font-size: 0.9375rem;
    }
    .career-desc {
        font-size: 0.875rem;
    }
}

/* Skills / Tags */
.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.skill-tag {
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    color: var(--tmv-text-secondary);
    transition: var(--tmv-transition);
}
.skill-tag:hover {
    border-color: var(--tmv-accent-glow);
    color: var(--tmv-accent);
}

.skill-tag--accent {
    background: var(--tmv-accent-dim);
    border-color: var(--tmv-accent-glow);
    color: var(--tmv-accent);
}

.skill-tag--purple {
    background: var(--tmv-purple-dim);
    border-color: rgba(124, 107, 255, 0.3);
    color: var(--tmv-purple);
}

/* Career timeline */
.career-track {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 2px solid var(--tmv-border);
    padding-left: 28px;
    margin-left: 8px;
}

.career-item {
    position: relative;
    padding-bottom: 32px;
}
.career-item:last-child {
    padding-bottom: 0;
}

.career-item::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--tmv-accent);
    border: 2px solid var(--tmv-bg-primary);
}

.career-period {
    font-size: 0.8125rem;
    color: var(--tmv-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.career-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
    margin-bottom: 2px;
}

.career-company {
    font-size: 0.875rem;
    color: var(--tmv-text-muted);
    margin-bottom: 8px;
}

.career-desc {
    font-size: 0.9375rem;
    color: var(--tmv-text-secondary);
    line-height: 1.7;
}

/* Achievements / stat row */
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

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

.achievement-card {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-md);
    padding: 18px;
    text-align: center;
    transition: var(--tmv-transition);
}
.achievement-card:hover {
    border-color: var(--tmv-border-hover);
}

.achievement-num {
    font-family: var(--tmv-font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--tmv-accent);
    margin-bottom: 4px;
}

.achievement-label {
    font-size: 0.8125rem;
    color: var(--tmv-text-muted);
    line-height: 1.4;
}

/* Team member nav (prev/next) */
.team-member-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    margin-top: 60px;
}

.team-member-nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--tmv-text-primary);
    transition: var(--tmv-transition);
}
.team-member-nav-btn:hover {
    color: var(--tmv-accent);
}

.team-member-nav-btn--prev {
    flex-direction: row;
}
.team-member-nav-btn--next {
    flex-direction: row-reverse;
}

.team-nav-av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tmv-white);
    flex-shrink: 0;
}

.team-nav-info {
    line-height: 1.3;
}
.team-nav-dir {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    margin-bottom: 2px;
}
.team-nav-name {
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Team member nav responsive */
@media (max-width: 640px) {
    .team-member-nav {
        flex-direction: column;
        gap: 12px;
        padding: 18px 16px;
        margin-top: 40px;
        text-align: center;
    }
    .team-member-nav-btn--prev,
    .team-member-nav-btn--next {
        flex-direction: row;
        width: 100%;
        justify-content: flex-start;
        padding: 10px 14px;
        background: var(--tmv-bg-card2);
        border: 1px solid var(--tmv-border);
        border-radius: var(--tmv-radius-sm);
    }
    .team-member-nav-btn--next {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .team-member-nav {
        padding: 14px 12px;
    }
    .team-nav-name {
        font-size: 0.875rem;
    }
    .team-nav-av {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }
}

/* Team card link wrapper */
.team-card-link {
    text-decoration: none;
    display: block;
    height: 100%;
}
.team-card-link .team-card {
    cursor: pointer;
    height: 100%;
}
.team-card-link .team-card:hover .team-name {
    color: var(--tmv-accent);
}
.team-card-link .team-card .team-name {
    transition: color 0.2s;
}

/* ============================================================
   AI PAGE HERO (split-layout, home-page style — no breadcrumb)
   ============================================================ */
.ai-page-hero {
    position: relative;
    padding: 100px 0 0;
    overflow: hidden;
    background: var(--tmv-bg-primary);
}
.ai-page-hero-glow {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
    top: -100px;
    right: -100px;
    opacity: 0.18;
}
.ai-page-hero-glow--teal {
    background: var(--tmv-accent);
}
.ai-page-hero-glow--purple {
    background: var(--tmv-purple);
}

.ai-page-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0;
}
.ai-page-hero-inner--wide {
    grid-template-columns: 440px 1fr;
}

.ai-page-hero-text h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-family: var(--tmv-font-display);
    font-weight: 800;
    line-height: 1.15;
    margin: 16px 0 20px;
    color: var(--tmv-text-primary);
}
.ai-page-hero-text p {
    font-size: 1.05rem;
    color: var(--tmv-text-secondary);
    line-height: 1.7;
    max-width: 480px;
}
.ai-page-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 32px;
}
.ai-page-hero-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--tmv-border);
}
@media (max-width: 900px) {
    .ai-page-hero-actions,
    .ai-page-hero-stats {
        justify-content: center;
    }
}
.ai-chatbot-hero-center .ai-page-hero-actions,
.ai-chatbot-hero-center .ai-page-hero-stats {
    justify-content: start;
}
.ai-ph-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}
.ai-ph-stat strong {
    font-size: 1.4rem;
    font-weight: 800;
    font-family: var(--tmv-font-display);
    color: var(--tmv-text-primary);
}
.ai-ph-stat span {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ai-ph-divider {
    width: 1px;
    height: 36px;
    background: var(--tmv-border);
    flex-shrink: 0;
}

.ai-page-hero-visual {
    position: relative;
    padding-bottom: 56px;
}
.ai-page-hero-visual--table {
    overflow-x: auto;
}

/* Feature chips strip — moved outside hero */
.ai-feat-chips-wrap {
    background: var(--tmv-bg-secondary);
    border-top: 1px solid var(--tmv-border);
    border-bottom: 1px solid var(--tmv-border);
    padding: 56px 0;
}

@media (max-width: 768px) {
    .ai-feat-chips-wrap {
        padding: 40px 0;
    }
}
/* ============================================================
   AI TOOLS SHOWCASE — Home page section
   ============================================================ */
.ai-tools-showcase {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--tmv-border);
}

.ai-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.ai-showcase-card {
    background: var(--tmv-bg-secondary);
    border: 1px solid var(--tmv-border);
    border-radius: 18px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition:
        border-color 0.25s,
        transform 0.25s,
        box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}
.ai-showcase-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--tmv-accent), var(--tmv-purple));
    opacity: 0;
    transition: opacity 0.3s;
}
.ai-showcase-card:hover::before {
    opacity: 1;
}
.ai-showcase-card:hover {
    border-color: rgba(0, 232, 200, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.ai-showcase-card--purple:hover {
    border-color: rgba(124, 107, 255, 0.25);
}
.ai-showcase-card--orange:hover {
    border-color: rgba(239, 158, 39, 0.25);
}

.ai-showcase-card-top h3 {
    font-size: 1.15rem;
    font-family: var(--tmv-font-display);
    font-weight: 700;
    color: var(--tmv-text-primary);
    margin: 14px 0 10px;
    line-height: 1.3;
}
.ai-showcase-card-top p {
    font-size: 0.88rem;
    color: var(--tmv-text-secondary);
    line-height: 1.65;
    margin-bottom: 0;
}

/* Preview boxes */
.ai-showcase-preview {
    background: var(--tmv-bg-card, #0d0f1a);
    border: 1px solid var(--tmv-border);
    border-radius: 12px;
    padding: 18px;
    margin-top: 22px;
    flex: 1;
}

/* Mini chat preview */
.ai-showcase-chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sc-chat-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.sc-chat-msg.sc-user {
    flex-direction: row-reverse;
}
.sc-av {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--tmv-accent), #009e8a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #07080f;
    flex-shrink: 0;
}
.sc-user-av {
    width: 28px;
    height: 28px;
    background: linear-gradient(
        135deg,
        var(--tmv-purple),
        var(--tmv-purple-bright)
    );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--tmv-white);
    flex-shrink: 0;
}
.sc-bubble {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--tmv-border);
    border-radius: 0 10px 10px 10px;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: var(--tmv-text-secondary);
    line-height: 1.55;
    max-width: 80%;
}
.sc-bubble strong {
    color: var(--tmv-accent);
}
.sc-bubble--user {
    background: rgba(124, 107, 255, 0.15);
    border-color: rgba(124, 107, 255, 0.25);
    border-radius: 10px 0 10px 10px;
    color: var(--tmv-text-primary);
}
.sc-typing {
    display: flex;
    gap: 4px;
    padding: 6px 12px;
    width: fit-content;
}
.sc-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tmv-text-muted);
    animation: scTypeBounce 1.2s infinite;
}
.sc-typing span:nth-child(2) {
    animation-delay: 0.2s;
}
.sc-typing span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes scTypeBounce {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* Mini waveform preview */
.ai-showcase-voice {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sc-voice-label {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
}
.sc-waveform {
    display: flex;
    gap: 3px;
    align-items: center;
    height: 40px;
}
.sc-waveform span {
    flex: 1;
    background: var(--tmv-purple);
    border-radius: 2px;
    animation: scWave 1.4s ease-in-out infinite;
    min-height: 4px;
}
.sc-waveform span:nth-child(odd) {
    height: 60%;
    animation-delay: 0s;
}
.sc-waveform span:nth-child(even) {
    height: 100%;
    animation-delay: 0.2s;
}
.sc-waveform span:nth-child(3n) {
    height: 35%;
    animation-delay: 0.4s;
}
.sc-waveform span:nth-child(5n) {
    height: 80%;
    animation-delay: 0.1s;
}
@keyframes scWave {
    0%,
    100% {
        transform: scaleY(0.5);
        opacity: 0.6;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}
.sc-voice-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.73rem;
    color: var(--tmv-text-muted);
}

/* Mini keyword table preview */
.ai-showcase-keywords {
    padding: 0;
    overflow: hidden;
}
.sc-kw-row {
    display: grid;
    grid-template-columns: 1fr 70px 70px;
    padding: 9px 16px;
    font-size: 0.78rem;
    gap: 8px;
    align-items: center;
}
.sc-kw-row:not(:last-child) {
    border-bottom: 1px solid var(--tmv-border);
}
.sc-kw-head {
    background: rgba(255, 255, 255, 0.04);
    color: var(--tmv-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.sc-kw-row span:first-child {
    color: var(--tmv-text-primary);
}
.sc-kw-row span:nth-child(2) {
    color: var(--tmv-text-secondary);
    text-align: right;
}
.sc-diff {
    text-align: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}
.sc-diff--easy {
    background: rgba(0, 232, 200, 0.15);
    color: var(--tmv-accent);
}
.sc-diff--med {
    background: rgba(239, 158, 39, 0.15);
    color: #ef9e27;
}
.sc-diff--hard {
    background: rgba(226, 75, 74, 0.15);
    color: #e24b4a;
}

/* Showcase link */
.ai-showcase-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--tmv-accent);
    text-decoration: none;
    transition:
        gap 0.2s,
        opacity 0.2s;
}
.ai-showcase-link--purple {
    color: var(--tmv-purple);
}
.ai-showcase-link--orange {
    color: #ef9e27;
}
.ai-showcase-link:hover {
    gap: 10px;
    opacity: 0.85;
}

/* Badge orange (keywords) */
.badge-orange {
    background: rgba(239, 158, 39, 0.15);
    color: #ef9e27;
    border: 1px solid rgba(239, 158, 39, 0.25);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .ai-page-hero-inner,
    .ai-page-hero-inner--wide {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ai-page-hero-inner--wide {
        grid-template-columns: 1fr;
    }
    .ai-page-hero-visual {
        padding-bottom: 0;
    }
    .ai-page-hero-text p {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .ai-showcase-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ai-page-hero {
        padding-top: 70px;
    }
    .ai-page-hero-actions {
        flex-direction: column;
    }
    .ai-page-hero-stats {
        flex-wrap: wrap;
        gap: 14px;
    }
    .ai-showcase-card {
        padding: 24px 20px;
    }
}
/* --- End pages.css merge --- */

/* ============================================================
   AI PAGE HERO — CENTERED LAYOUT (home-page style)
   ============================================================ */
.ai-page-hero {
    position: relative;
    padding: 110px 0 0;
    overflow: hidden;
    background: var(--tmv-bg-primary);
}
.ai-page-hero .hero-bg {
    pointer-events: none;
}

.ai-page-hero-center {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.ai-page-hero-center h1 {
    font-size: clamp(2.2rem, 4.2vw, 4.2rem);
    font-family: var(--tmv-font-display);
    line-height: 1.13;
    color: var(--tmv-text-primary);
    margin: 14px 0 20px;
}
.ai-chatbot-hero-center p {
    font-size: 1.08rem;
    color: var(--tmv-text-secondary);
    line-height: 1.72;
    max-width: 560px;
    margin: 0 auto;
}
.ai-page-hero-center .ai-page-hero-actions {
    margin-top: 32px;
}
.ai-page-hero-center .ai-page-hero-stats {
    margin-top: 0;
    padding-top: 26px;
    border-top: 1px solid var(--tmv-border);
}

.ai-keyword-hero-center .ai-page-hero-stats {
    justify-content: center;
    padding: 0;
    border: none;
}
/* Tool visual block sitting below centered text */
.ai-page-hero-tool-wrap {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 56px auto 0;
    padding-bottom: 0;
}
.ai-page-hero-tool-wrap--wide {
    max-width: 1100px;
}

/* Purple-tinted orbs for voice page */
.hero-orb--purple-1 {
    background: var(--tmv-purple);
    box-shadow: 0 0 12px var(--tmv-purple);
}
.hero-orb--purple-2 {
    background: var(--tmv-purple);
    box-shadow: 0 0 10px var(--tmv-purple);
}
@media (max-width: 768px) {
    .ai-page-hero {
        padding-top: 80px;
    }
    .ai-page-hero-tool-wrap {
        margin-top: 40px;
    }
}

/* ============================================================
   AI VOICE — FLUID HERO PLAYER  (.vh-*)
   ============================================================ */
.vh-player-wrap {
    margin-top: 56px;
    background: linear-gradient(
        180deg,
        rgba(124, 107, 255, 0.12) 0%,
        rgba(7, 8, 15, 0) 100%
    );
    border-top: 1px solid rgba(124, 107, 255, 0.2);
    padding: 32px 40px 0;
    position: relative;
    z-index: 1;
}

/* Voice roster */
.vh-voices {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.vh-voice-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--tmv-border);
    border-radius: 50px;
    cursor: pointer;
    transition:
        border-color 0.2s,
        background 0.2s;
}
.vh-voice-btn:hover,
.vh-voice-btn.active {
    border-color: var(--tmv-purple);
    background: rgba(124, 107, 255, 0.12);
}
.vh-voice-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tmv-white);
    flex-shrink: 0;
}
.vh-voice-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
}
.vh-voice-lang {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
}

/* Waveform */
.vh-waveform {
    display: flex;
    gap: 3px;
    align-items: center;
    height: 80px;
    margin-bottom: 20px;
}
.vh-waveform span {
    flex: 1;
    border-radius: 3px;
    background: linear-gradient(
        180deg,
        var(--tmv-purple) 0%,
        rgba(124, 107, 255, 0.3) 100%
    );
    animation: vhWave 1.4s ease-in-out infinite;
}
.vh-waveform span:nth-child(3n + 1) {
    height: 30%;
    animation-delay: 0s;
}
.vh-waveform span:nth-child(3n + 2) {
    height: 100%;
    animation-delay: 0.18s;
}
.vh-waveform span:nth-child(3n) {
    height: 60%;
    animation-delay: 0.36s;
}
.vh-waveform span:nth-child(5n) {
    height: 80%;
    animation-delay: 0.09s;
}
.vh-waveform span:nth-child(7n) {
    height: 45%;
    animation-delay: 0.27s;
}
.vh-waveform span:nth-child(11n) {
    height: 20%;
    animation-delay: 0.45s;
}
@keyframes vhWave {
    0%,
    100% {
        transform: scaleY(0.4);
        opacity: 0.5;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* Playback bar */
.vh-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0 28px;
    border-top: 1px solid var(--tmv-border);
}
.vh-play {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tmv-purple);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tmv-white);
    flex-shrink: 0;
    transition:
        opacity 0.2s,
        transform 0.2s;
}
.vh-play:hover {
    opacity: 0.85;
    transform: scale(1.08);
}
.vh-play svg {
    width: 14px;
    height: 14px;
}
.vh-time {
    font-size: 0.8rem;
    color: var(--tmv-text-muted);
    flex-shrink: 0;
}
.vh-progress {
    flex: 1;
    height: 4px;
    background: var(--tmv-border);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
}
.vh-progress-fill {
    height: 100%;
    width: 36%;
    background: linear-gradient(90deg, var(--tmv-purple), var(--tmv-accent));
    border-radius: 2px;
}
.vh-quality {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.vh-dl {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .vh-player-wrap {
        padding: 24px 20px 0;
    }
    .vh-voice-btn .vh-voice-lang {
        display: none;
    }
    .vh-quality,
    .vh-dl {
        display: none;
    }
}
@media (max-width: 480px) {
    .vh-voices {
        gap: 8px;
    }
    .vh-voice-btn {
        padding: 8px 12px 8px 8px;
    }
}

/* ============================================================
   AI KEYWORDS — FLUID HERO MOCKUP  (.kwh-*)
   ============================================================ */
.kwh-wrap {
    margin-top: 48px;
    position: relative;
    z-index: 1;
}

/* Search bar */
.kwh-search-row {
    background: rgba(0, 232, 200, 0.06);
    border-top: 1px solid rgba(0, 232, 200, 0.18);
    border-bottom: 1px solid var(--tmv-border);
    padding: 20px 40px;
}
.kwh-search-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.kwh-search-inner > i {
    color: var(--tmv-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.kwh-search-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
    flex: 1;
}
.kwh-search-badge {
    font-size: 0.78rem;
    color: var(--tmv-accent);
    background: rgba(0, 232, 200, 0.1);
    border: 1px solid rgba(0, 232, 200, 0.2);
    border-radius: 20px;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    animation: kwBadgePulse 2s ease-in-out infinite;
}
@keyframes kwBadgePulse {
    0%,
    100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}
.kwh-gen-btn {
    flex-shrink: 0;
}

/* Results table */
.kwh-table-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 40px;
}
.kwh-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 10px;
    font-size: 0.85rem;
    color: var(--tmv-text-muted);
}
.kwh-export {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--tmv-border);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.8rem;
    color: var(--tmv-text-secondary);
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s;
}
.kwh-export:hover {
    border-color: var(--tmv-accent);
    color: var(--tmv-accent);
}
.kwh-table {
    width: 100%;
    border-collapse: collapse;
}
.kwh-table thead tr {
    border-bottom: 1px solid var(--tmv-border);
}
.kwh-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tmv-text-muted);
}
.kwh-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.18s;
}
.kwh-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}
.kwh-table td {
    padding: 13px 14px;
    font-size: 0.88rem;
    color: var(--tmv-text-secondary);
}
.kwh-num {
    color: var(--tmv-text-muted) !important;
    font-size: 0.78rem !important;
    width: 36px;
}
.kwh-kw {
    font-weight: 500;
    color: var(--tmv-text-primary);
}
.kwh-diff {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}
.kwh-diff--easy {
    background: rgba(0, 232, 200, 0.12);
    color: var(--tmv-accent);
}
.kwh-diff--med {
    background: rgba(239, 158, 39, 0.12);
    color: #ef9e27;
}
.kwh-diff--hard {
    background: rgba(226, 75, 74, 0.12);
    color: #e24b4a;
}
.kwh-trend-up {
    color: var(--tmv-accent);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 4px;
}
.kwh-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 0;
    border-top: 1px solid var(--tmv-border);
    font-size: 0.82rem;
    color: var(--tmv-text-muted);
}

@media (max-width: 768px) {
    .kwh-search-row {
        padding: 16px 20px;
    }
    .kwh-search-badge {
        display: none;
    }
    .kwh-table-wrap {
        padding: 0 20px 32px;
    }
    .kwh-table th:nth-child(3),
    .kwh-table td:nth-child(3),
    .kwh-table th:nth-child(6),
    .kwh-table td:nth-child(6) {
        display: none;
    }
}
@media (max-width: 480px) {
    .kwh-table th:nth-child(4),
    .kwh-table td:nth-child(4) {
        display: none;
    }
}

/* === MOVED FROM ai-keywords.html === */
.kwh-wrap {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(
        145deg,
        rgba(16, 18, 31, 0.97),
        rgba(12, 14, 26, 0.99)
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px var(--tmv-accent-shadow-dim) !important;
}
.kwh-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
}
.kwh-topbar-dots {
    display: flex;
    gap: 7px;
}
.kwh-topbar-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}
.kwh-topbar-dots span:nth-child(1) {
    background: #ff5f57;
}
.kwh-topbar-dots span:nth-child(2) {
    background: #ffbd2e;
}
.kwh-topbar-dots span:nth-child(3) {
    background: #28c941;
}
.kwh-topbar-label {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
    letter-spacing: 0.05em;
}
.kwh-topbar-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--tmv-accent);
    background: rgba(0, 232, 200, 0.08);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(0, 232, 200, 0.15);
}
.kwh-topbar-badge i {
    font-size: 0.7rem;
}

.kwh-search-row {
    padding: 18px 24px 14px;
}
.kwh-search-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 232, 200, 0.2);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 0 0 4px rgba(0, 232, 200, 0.04);
}
.kwh-search-inner > i {
    color: var(--tmv-accent);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.kwh-search-text {
    flex: 1;
    font-size: 0.95rem;
    color: var(--tmv-text-primary);
    font-weight: 500;
}
.kwh-search-badge {
    font-size: 0.73rem;
    color: var(--tmv-accent);
    background: rgba(0, 232, 200, 0.08);
    border: 1px solid rgba(0, 232, 200, 0.15);
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.kwh-gen-btn {
    flex-shrink: 0;
    background: var(--tmv-accent) !important;
    color: var(--tmv-black) !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
}
.kwh-table-wrap {
    padding: 0 24px 24px;
}
.kwh-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 6px;
}
.kwh-count {
    font-size: 0.82rem;
    color: var(--tmv-text-muted);
}
.kwh-count strong {
    color: var(--tmv-text-primary);
}
.kwh-export {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--tmv-border);
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.kwh-export:hover {
    border-color: var(--tmv-accent);
    color: var(--tmv-accent);
}
.kwh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.kwh-table thead tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.kwh-table th {
    padding: 10px 8px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--tmv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.kwh-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}
.kwh-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}
.kwh-table td {
    padding: 12px 8px;
    color: var(--tmv-text-secondary);
    vertical-align: middle;
}
.kwh-num {
    color: var(--tmv-text-muted) !important;
    font-size: 0.78rem !important;
    width: 36px;
}
.kwh-kw {
    color: var(--tmv-text-primary) !important;
    font-weight: 600;
}
.kwh-diff {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
}
.kwh-diff--easy {
    background: rgba(0, 232, 200, 0.12);
    color: var(--tmv-accent);
}
.kwh-diff--med {
    background: rgba(239, 158, 39, 0.12);
    color: #ef9e27;
}
.kwh-diff--hard {
    background: rgba(226, 75, 74, 0.12);
    color: #e24b4a;
}
.kwh-trend-up {
    color: var(--tmv-accent);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 4px;
}
.kwh-intent {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.kwh-intent--info {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}
.kwh-intent--comm {
    background: rgba(124, 107, 255, 0.12);
    color: var(--tmv-purple);
}
.kwh-intent--trans {
    background: rgba(29, 158, 117, 0.12);
    color: #1d9e75;
}
.kwh-vol-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kwh-vol-track {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}
.kwh-vol-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--tmv-accent),
        rgba(0, 232, 200, 0.4)
    );
}
.kwh-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
    margin-top: 6px;
}
.link-accent {
    color: var(--tmv-accent);
    text-decoration: none;
}
.link-accent:hover {
    text-decoration: underline;
}
.kwh-fill-55 {
    width: 55%;
}
.kwh-fill-37 {
    width: 37%;
}
.kwh-fill-25 {
    width: 25%;
}
.kwh-fill-20 {
    width: 20%;
}

/* === MOVED FROM ai-keywords.html tool section === */
.kw-tool-v2 {
    max-width: 1060px;
    margin: 0 auto;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-xl);
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
}
.kwt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid var(--tmv-border);
    background: rgba(255, 255, 255, 0.015);
}
.kwt-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.kwt-header-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(
        135deg,
        rgba(0, 232, 200, 0.2),
        rgba(0, 232, 200, 0.05)
    );
    border: 1px solid rgba(0, 232, 200, 0.25);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tmv-accent);
}
.kwt-header-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
}
.kwt-header-sub {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
    margin-top: 1px;
}
.kwt-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 4px;
}
.kwt-tab {
    padding: 7px 18px;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tmv-text-muted);
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.2s;
}
.kwt-tab.active {
    background: rgba(0, 232, 200, 0.1);
    color: var(--tmv-accent);
    border: 1px solid rgba(0, 232, 200, 0.25);
}
.kwt-tab:hover:not(.active) {
    color: var(--tmv-text-primary);
    background: rgba(255, 255, 255, 0.04);
}
.kwt-search-section {
    padding: 24px 28px;
    border-bottom: 1px solid var(--tmv-border);
}
.kwt-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 232, 200, 0.2);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: 0 0 0 4px rgba(0, 232, 200, 0.04);
    transition: border-color 0.2s;
}
.kwt-search-bar:focus-within {
    border-color: var(--tmv-accent);
}
.kwt-search-bar i {
    color: var(--tmv-accent);
    font-size: 1rem;
    flex-shrink: 0;
}
.kwt-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--tmv-text-primary);
    font-size: 1rem;
    font-family: var(--tmv-font-body);
}
.kwt-search-input::placeholder {
    color: var(--tmv-text-muted);
}
.kwt-ai-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 0.73rem;
    color: var(--tmv-text-muted);
}
.kwt-ai-badge i {
    color: var(--tmv-accent);
}
.kwt-generate-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(
        135deg,
        var(--tmv-accent),
        var(--tmv-accent-hover)
    );
    color: var(--tmv-black);
    font-weight: 700;
    font-size: 0.9rem;
    font-family: var(--tmv-font-body);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 24px rgba(0, 232, 200, 0.3);
    transition: all 0.2s;
    flex-shrink: 0;
}
.kwt-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(0, 232, 200, 0.45);
}
.kwt-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.kwt-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tmv-border);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--tmv-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.kwt-filter.active {
    background: rgba(0, 232, 200, 0.08);
    border-color: rgba(0, 232, 200, 0.25);
    color: var(--tmv-accent);
}
.kwt-filter:hover:not(.active) {
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--tmv-text-primary);
}
.kwt-filter select {
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.kwt-body {
    display: grid;
    grid-template-columns: 1fr 280px;
}
.kwt-results {
    padding: 0;
    overflow-x: auto;
}
.kwt-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    border-bottom: 1px solid var(--tmv-border);
}
.kwt-results-count {
    font-size: 0.82rem;
    color: var(--tmv-text-muted);
}
.kwt-results-count strong {
    color: var(--tmv-text-primary);
}
.kwt-export-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--tmv-border);
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.kwt-export-btn:hover {
    border-color: var(--tmv-accent);
    color: var(--tmv-accent);
}
.kwt-table {
    width: 100%;
    border-collapse: collapse;
}
.kwt-table thead tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.kwt-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--tmv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.kwt-table th.sortable {
    cursor: pointer;
}
.kwt-table th.sortable:hover {
    color: var(--tmv-accent);
}
.kwt-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
    cursor: pointer;
}
.kwt-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}
.kwt-table tbody tr.selected {
    background: rgba(0, 232, 200, 0.04);
}
.kwt-table td {
    padding: 13px 16px;
    color: var(--tmv-text-secondary);
    vertical-align: middle;
}
.kwt-kw {
    color: var(--tmv-text-primary) !important;
    font-weight: 600;
    font-size: 0.9rem;
}
.kwt-num {
    color: var(--tmv-text-muted);
    font-size: 0.78rem;
    width: 32px;
}
.kwt-volume strong {
    color: var(--tmv-text-primary);
    font-weight: 700;
    display: block;
    font-size: 0.88rem;
}
.kwt-vol-track {
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
    width: 60px;
}
.kwt-vol-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--tmv-accent),
        rgba(0, 232, 200, 0.4)
    );
    border-radius: 3px;
}
.kwt-diff-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}
.kwt-diff-badge i {
    font-size: 0.65rem;
}
.kwt-diff--easy {
    background: rgba(0, 232, 200, 0.1);
    color: var(--tmv-accent);
}
.kwt-diff--med {
    background: rgba(239, 158, 39, 0.1);
    color: #ef9e27;
}
.kwt-diff--hard {
    background: rgba(226, 75, 74, 0.1);
    color: #e24b4a;
}
.kwt-trend-up {
    color: var(--tmv-accent);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.kwt-trend-down {
    color: #e24b4a;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.kwt-intent-badge {
    font-size: 0.67rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.kwt-intent--info {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
}
.kwt-intent--comm {
    background: rgba(124, 107, 255, 0.1);
    color: var(--tmv-purple);
}
.kwt-intent--trans {
    background: rgba(29, 158, 117, 0.1);
    color: #1d9e75;
}
.kwt-intent--nav {
    background: rgba(239, 158, 39, 0.1);
    color: #ef9e27;
}
.kwt-save-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--tmv-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tmv-text-muted);
    font-size: 0.75rem;
    transition: all 0.2s;
}
.kwt-save-btn:hover {
    background: rgba(0, 232, 200, 0.08);
    border-color: rgba(0, 232, 200, 0.25);
    color: var(--tmv-accent);
}
.kwt-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    border-top: 1px solid var(--tmv-border);
    font-size: 0.8rem;
    color: var(--tmv-text-muted);
}
.kwt-sidebar {
    border-left: 1px solid var(--tmv-border);
    padding: 22px 20px;
}
.kwt-sidebar-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--tmv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 14px;
}
.kwt-cluster {
    padding: 12px 14px;
    border: 1px solid var(--tmv-border);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.kwt-cluster.active {
    background: rgba(0, 232, 200, 0.08);
    border-color: rgba(0, 232, 200, 0.25);
}
.kwt-cluster:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

/* === MOVED FROM ai-voice.html === */
.vh-player-wrap {
    max-width: 860px;
    margin: 0 auto;
    background: linear-gradient(
        145deg,
        rgba(16, 18, 31, 0.97),
        rgba(12, 14, 26, 0.99)
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px var(--tmv-purple-shadow-dim) !important;
    backdrop-filter: blur(20px);
}
.vh-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
}
.vh-topbar-dots {
    display: flex;
    gap: 7px;
}
.vh-topbar-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}
.vh-topbar-dots span:nth-child(1) {
    background: #ff5f57;
}
.vh-topbar-dots span:nth-child(2) {
    background: #ffbd2e;
}
.vh-topbar-dots span:nth-child(3) {
    background: #28c941;
}
.vh-topbar-label {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
    letter-spacing: 0.05em;
}
.vh-topbar-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--tmv-accent);
    background: rgba(0, 232, 200, 0.08);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(0, 232, 200, 0.15);
}
.vh-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tmv-accent);
    animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}
.vh-voices {
    display: flex;
    gap: 10px;
    padding: 18px 24px 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.vh-voices::-webkit-scrollbar {
    display: none;
}
.vh-voice-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.vh-voice-btn:hover {
    border-color: rgba(124, 107, 255, 0.3);
    background: rgba(124, 107, 255, 0.06);
}
.vh-voice-btn.active {
    border-color: rgba(124, 107, 255, 0.5);
    background: rgba(124, 107, 255, 0.1);
    box-shadow: 0 0 16px rgba(124, 107, 255, 0.15);
}
.vh-voice-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--tmv-white);
    flex-shrink: 0;
}
.vh-voice-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
}
.vh-voice-lang {
    font-size: 0.72rem;
    color: var(--tmv-text-muted);
    margin-left: 2px;
}
.vh-wave-section {
    padding: 8px 24px 16px;
}
.vh-wave-label {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vh-waveform {
    display: flex;
    align-items: center;
    gap: 2.5px;
    height: 52px;
    overflow: hidden;
}
.vh-waveform span {
    flex: 1;
    border-radius: 3px;
    background: linear-gradient(to top, var(--tmv-purple), var(--tmv-accent));
    animation: vhWave 1.4s ease-in-out infinite alternate;
    transform-origin: center;
    opacity: 0.8;
}
@keyframes vhWave {
    from {
        transform: scaleY(0.12);
        opacity: 0.4;
    }
    to {
        transform: scaleY(1);
        opacity: 0.9;
    }
}
.vh-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.vh-play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--tmv-purple),
        var(--tmv-purple-bright)
    );
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(124, 107, 255, 0.35);
    transition: all 0.2s;
}
.vh-play:hover {
    transform: scale(1.07);
    box-shadow: 0 6px 28px rgba(124, 107, 255, 0.5);
}
.vh-play svg {
    width: 16px;
    height: 16px;
    fill: var(--tmv-white);
    margin-left: 2px;
}
.vh-time {
    font-size: 0.8rem;
    color: var(--tmv-text-muted);
    flex-shrink: 0;
}
.vh-progress {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.vh-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 36%;
    background: linear-gradient(90deg, var(--tmv-purple), var(--tmv-accent));
    border-radius: 4px;
}
.vh-quality {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.vh-quality i {
    color: var(--tmv-accent);
}
.vh-dl {
    flex-shrink: 0;
    background: rgba(0, 232, 200, 0.07) !important;
    border-color: rgba(0, 232, 200, 0.2) !important;
    color: var(--tmv-accent) !important;
    font-size: 0.8rem !important;
}
.vh-dl:hover {
    background: rgba(0, 232, 200, 0.15) !important;
    border-color: var(--tmv-accent) !important;
}
.voice-studio-v2 {
    max-width: 1060px;
    margin: 0 auto;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-xl);
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
}
.vs2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid var(--tmv-border);
    background: rgba(255, 255, 255, 0.015);
}
.vs2-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.vs2-header-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(
        135deg,
        rgba(124, 107, 255, 0.2),
        rgba(124, 107, 255, 0.05)
    );
    border: 1px solid rgba(124, 107, 255, 0.25);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tmv-purple);
}
.vs2-header-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
}
.vs2-header-sub {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
    margin-top: 1px;
}
.vs2-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 4px;
}
.vs2-tab {
    padding: 7px 18px;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tmv-text-muted);
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.2s;
}
.vs2-tab.active {
    background: rgba(124, 107, 255, 0.15);
    color: var(--tmv-purple);
    border: 1px solid rgba(124, 107, 255, 0.25);
}
.vs2-tab:hover:not(.active) {
    color: var(--tmv-text-primary);
    background: rgba(255, 255, 255, 0.04);
}
.vs2-body {
    display: grid;
    grid-template-columns: 210px 1fr 270px;
    min-height: 480px;
}
.vs2-voices {
    border-right: 1px solid var(--tmv-border);
    padding: 18px 0;
    overflow-y: auto;
    max-height: 520px;
    scrollbar-width: thin;
    scrollbar-color: var(--tmv-border) transparent;
}
.vs2-voices-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--tmv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0 16px 12px;
}
.vs2-voice-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-left: 2px solid transparent;
    position: relative;
}
.vs2-voice-card:hover {
    background: rgba(255, 255, 255, 0.03);
}
.vs2-voice-card.active {
    background: rgba(124, 107, 255, 0.08);
    border-left-color: var(--tmv-purple);
}
.vs2-vc-av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tmv-white);
    flex-shrink: 0;
    position: relative;
}
.vs2-vc-info {
    flex: 1;
    min-width: 0;
}
.vs2-vc-name {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
}
.vs2-vc-lang {
    font-size: 0.73rem;
    color: var(--tmv-text-muted);
    margin-top: 2px;
}
.vs2-vc-tag {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.vs2-vc-tag--pro {
    background: rgba(239, 158, 39, 0.12);
    color: #ef9e27;
    border: 1px solid rgba(239, 158, 39, 0.2);
}
.vs2-vc-tag--new {
    background: rgba(0, 232, 200, 0.1);
    color: var(--tmv-accent);
    border: 1px solid rgba(0, 232, 200, 0.2);
}
.vs2-editor {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--tmv-border);
}
.vs2-editor-area {
    flex: 1;
    position: relative;
}
.vs2-textarea {
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 22px 24px;
    background: transparent;
    border: none;
    color: var(--tmv-text-primary);
    font-family: var(--tmv-font-body);
    font-size: 0.9375rem;
    line-height: 1.75;
    resize: none;
    outline: none;
}
.vs2-textarea::placeholder {
    color: var(--tmv-text-muted);
}
.vs2-editor-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--tmv-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vs2-char-count {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
}
.vs2-char-count span {
    color: var(--tmv-text-primary);
    font-weight: 600;
}
.vs2-editor-actions {
    display: flex;
    gap: 8px;
}
.vs2-btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--tmv-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--tmv-text-secondary);
    font-family: var(--tmv-font-body);
    flex-shrink: 0;
}
.vs2-btn-sm:hover {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--tmv-text-primary);
}
.vs2-output {
    background: rgba(255, 255, 255, 0.015);
    border-top: 1px solid var(--tmv-border);
    padding: 18px 22px;
}
.vs2-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.vs2-output-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tmv-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.vs2-output-meta {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.vs2-output-meta .dot {
    color: var(--tmv-accent);
}
.vs2-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 48px;
    margin-bottom: 14px;
}
.vs2-wave-bar {
    flex: 1;
    border-radius: 3px;
    background: linear-gradient(
        to top,
        rgba(124, 107, 255, 0.7),
        rgba(0, 232, 200, 0.5)
    );
    transform-origin: center;
    animation: vs2Wave 1.6s ease-in-out infinite alternate;
}
.vs2-wave-bar.muted {
    background: rgba(255, 255, 255, 0.08);
    animation: none;
}
@keyframes vs2Wave {
    from {
        transform: scaleY(0.1);
    }
    to {
        transform: scaleY(1);
    }
}
.vs2-playback {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vs2-play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tmv-purple);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 18px rgba(124, 107, 255, 0.3);
    transition: all 0.2s;
}
.vs2-play-btn:hover {
    transform: scale(1.08);
}
.vs2-play-btn svg {
    width: 14px;
    height: 14px;
    fill: var(--tmv-white);
    margin-left: 2px;
}
.vs2-playbar {
    flex: 1;
    height: 4px;
    background: var(--tmv-border);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.vs2-playbar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 36%;
    background: linear-gradient(90deg, var(--tmv-purple), var(--tmv-accent));
}
.vs2-t {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
    flex-shrink: 0;
}
.vs2-controls {
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.vs2-ctrl-section {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tmv-border);
}
.vs2-ctrl-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.vs2-ctrl-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--tmv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
}
.vs2-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--tmv-border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--tmv-text-primary);
    font-size: 0.85rem;
    font-family: var(--tmv-font-body);
    outline: none;
    cursor: pointer;
    appearance: none;
    transition: border-color 0.2s;
}
.vs2-select:focus {
    border-color: rgba(124, 107, 255, 0.4);
}
.vs2-speed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.vs2-speed-row span:not(.vs2-speed-val) {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
}
.vs2-speed-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tmv-purple);
}
.vs2-range {
    width: 100%;
    appearance: none;
    height: 4px;
    border-radius: 4px;
    background: var(--tmv-border);
    outline: none;
    cursor: pointer;
}
.vs2-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tmv-purple);
    box-shadow: 0 0 10px rgba(124, 107, 255, 0.4);
    cursor: pointer;
}
.vs2-emotions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vs2-emotion {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--tmv-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--tmv-text-muted);
    transition: all 0.2s;
}
.vs2-emotion:hover {
    border-color: rgba(124, 107, 255, 0.3);
    color: var(--tmv-text-primary);
}
.vs2-emotion.active {
    background: rgba(124, 107, 255, 0.12);
    border-color: rgba(124, 107, 255, 0.4);
    color: var(--tmv-purple);
}
.vs2-quality-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.vs2-quality-opt {
    padding: 8px 6px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--tmv-border);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.2s;
}
.vs2-quality-opt.active {
    border-color: rgba(0, 232, 200, 0.4);
    background: rgba(0, 232, 200, 0.07);
}
.vs2-qo-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
}
.vs2-qo-sub {
    font-size: 0.68rem;
    color: var(--tmv-text-muted);
    margin-top: 2px;
}
.vs2-quality-opt.active .vs2-qo-label {
    color: var(--tmv-accent);
}
.vs2-generate-btn {
    width: 100%;
    padding: 14px;
    font-size: 0.92rem;
    font-weight: 700;
    font-family: var(--tmv-font-display);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(
        135deg,
        var(--tmv-purple),
        var(--tmv-purple-bright)
    );
    color: var(--tmv-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 30px rgba(124, 107, 255, 0.35);
    transition: all 0.2s;
}
.vs2-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(124, 107, 255, 0.5);
}
.vs2-generating-badge {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--tmv-accent);
    background: rgba(0, 232, 200, 0.07);
    border: 1px solid rgba(0, 232, 200, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 12px;
}
.vs2-gen-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 232, 200, 0.2);
    border-top-color: var(--tmv-accent);
    border-radius: 50%;
    animation: vs2spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes vs2spin {
    to {
        transform: rotate(360deg);
    }
}
.voice-clone-showcase {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    padding: 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.vcl-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 158, 39, 0.1);
    border: 1px solid rgba(239, 158, 39, 0.2);
    color: #ef9e27;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}
.vcl-left h3 {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}
.vcl-left p {
    color: var(--tmv-text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 20px;
}
.vcl-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vcl-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--tmv-text-secondary);
}
.vcl-check {
    width: 20px;
    height: 20px;
    background: rgba(0, 232, 200, 0.1);
    border: 1px solid rgba(0, 232, 200, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--tmv-accent);
    font-size: 0.65rem;
    margin-top: 1px;
}
.vcl-right {
    background: var(--tmv-bg-primary);
    border: 1px solid var(--tmv-border);
    border-radius: 16px;
    padding: 24px;
}
.vcl-upload {
    border: 2px dashed rgba(124, 107, 255, 0.25);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    margin-bottom: 20px;
    transition: border-color 0.2s;
    cursor: pointer;
}
.vcl-upload:hover {
    border-color: rgba(124, 107, 255, 0.5);
}
.vcl-upload-icon {
    width: 48px;
    height: 48px;
    background: rgba(124, 107, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: var(--tmv-purple);
    font-size: 1.2rem;
}
.vcl-upload p {
    font-size: 0.85rem;
    color: var(--tmv-text-secondary);
}
.vcl-upload strong {
    color: var(--tmv-text-primary);
}
.vcl-upload small {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    display: block;
    margin-top: 4px;
}
.vcl-sample {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tmv-border);
    border-radius: 10px;
    margin-bottom: 10px;
}
.vcl-sample:last-child {
    margin-bottom: 0;
}
.vcl-sample-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tmv-white);
    flex-shrink: 0;
}
.vcl-sample-info {
    flex: 1;
    min-width: 0;
}
.vcl-sample-name {
    font-size: 0.85rem;
    font-weight: 600;
}
.vcl-sample-meta {
    font-size: 0.73rem;
    color: var(--tmv-text-muted);
    margin-top: 2px;
}
.vcl-sample-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(29, 158, 117, 0.1);
    color: #1d9e75;
    border: 1px solid rgba(29, 158, 117, 0.2);
}
.voice-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    overflow: hidden;
    margin-top: 48px;
}
.voice-step {
    background: var(--tmv-bg-card);
    padding: 36px 28px;
    position: relative;
}
.voice-step-icon {
    width: 44px;
    height: 44px;
    background: rgba(124, 107, 255, 0.1);
    border: 1px solid rgba(124, 107, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tmv-purple);
    margin-bottom: 16px;
}
.voice-step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.voice-step p {
    font-size: 0.88rem;
    color: var(--tmv-text-secondary);
    line-height: 1.65;
}
/* AI Tool Demo Section (ai-voice #demo, etc.) */
.ai-tool-section {
    padding: 80px 0;
}
@media (max-width: 768px) {
    .ai-tool-section {
        padding: 56px 0;
    }
}
@media (max-width: 480px) {
    .ai-tool-section {
        padding: 40px 0;
    }
}

/* === COMMON PAGE UTILITY CLASSES === */
.chat-body .chat-av {
    width: 32px;
    height: 32px;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.hero-glow-1 {
    background: radial-gradient(
        circle,
        rgba(124, 107, 255, 0.08) 0%,
        transparent 70%
    );
}
.hero-glow-2 {
    background: radial-gradient(
        circle,
        rgba(0, 232, 200, 0.06) 0%,
        transparent 70%
    );
}
.hero-glow-3 {
    background: radial-gradient(
        circle,
        rgba(124, 107, 255, 0.04) 0%,
        transparent 70%
    );
}
.ai-page-hero--purple .hero-orb--1,
.ai-page-hero--purple .right.hero-orb--1,
.ai-page-hero--purple .hero-orb--3,
.ai-page-hero--purple .right.hero-orb--3 {
    background: var(--tmv-purple);
    box-shadow: 0 0 12px var(--tmv-purple);
}
.ai-page-hero--purple .hero-orb--2 {
    background: var(--tmv-accent);
    box-shadow: 0 0 10px var(--tmv-accent);
}

/* Voice Avatar Gradients */
.voice-av-purple {
    background: linear-gradient(
        135deg,
        var(--tmv-purple),
        var(--tmv-purple-bright)
    );
}
.voice-av-accent {
    background: linear-gradient(135deg, var(--tmv-accent), #009e8a);
}
.voice-av-orange {
    background: linear-gradient(135deg, #ef9e27, #e07a00);
}
.voice-av-red {
    background: linear-gradient(135deg, #e24b4a, #c13030);
}
.voice-av-green {
    background: linear-gradient(135deg, #1d9e75, #136b50);
}
.voice-av-purple-alt {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
}
.voice-av-blue {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

/* Team Avatar Gradients */
.team-av-purple {
    background: var(--tmv-purple-bright);
}
.team-av-accent {
    background: #009e8a;
}
.team-av-orange {
    background: #e07a00;
}
.team-av-red {
    background: #c13030;
}
.team-av-green {
    background: #136b50;
}
.team-av-purple-accent {
    background: var(--tmv-purple);
}
.team-av-orange-purple {
    background: var(--tmv-color-orange);
}
.team-av-accent-purple {
    background: var(--tmv-accent);
}
.team-av-red-orange {
    background: #e24b4a;
}

/* Utility classes for team-detail */
.pt-nav-h {
    padding-top: var(--tmv-nav-h);
}
.pt-32 {
    padding-top: 32px;
}
.mt-0 {
    margin-top: 0;
}
.value-icon-large {
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--tmv-font-display);
}
.text-star {
    color: var(--tmv-color-star);
}
.breadcrumb-hero {
    padding-top: var(--tmv-nav-h);
}
.breadcrumb-hero .breadcrumb-hero-container {
    padding-top: 32px;
}
.values-grid--flush {
    margin-top: 0;
}
.value-icon--large {
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--tmv-font-display);
}
.value-icon--star i {
    color: var(--tmv-color-star);
}
.value-icon--trophy i {
    color: var(--tmv-color-star);
}
.team-nav-av--green {
    background: linear-gradient(135deg, #1d9e75, #136b50);
}
.team-nav-av--purple {
    background: linear-gradient(
        135deg,
        var(--tmv-purple),
        var(--tmv-purple-bright)
    );
}
.avatar-gradient-5 {
    background: linear-gradient(
        135deg,
        var(--tmv-purple),
        var(--tmv-purple-bright)
    );
}
.avatar-gradient-6 {
    background: linear-gradient(135deg, #ef9e27, #e07a00);
}
.avatar-gradient-7 {
    background: linear-gradient(135deg, var(--tmv-accent), #009e8a);
}
.avatar-gradient-8 {
    background: linear-gradient(135deg, #e24b4a, #c13030);
}
.avatar-gradient-9 {
    background: linear-gradient(135deg, var(--tmv-purple), var(--tmv-accent));
}
.avatar-gradient-10 {
    background: linear-gradient(135deg, #1d9e75, #136b50);
}
.avatar-gradient-11 {
    background: linear-gradient(
        135deg,
        var(--tmv-color-orange),
        var(--tmv-purple)
    );
}
.avatar-gradient-12 {
    background: linear-gradient(135deg, var(--tmv-accent), var(--tmv-purple));
}
.avatar-gradient-13 {
    background: linear-gradient(135deg, #e24b4a, #ef9e27);
}

/* === HERO PLAYER IMPROVEMENTS === */
.vh-player-wrap {
    max-width: 860px;
    margin: 0 auto;
    background: linear-gradient(
        145deg,
        rgba(16, 18, 31, 0.97),
        rgba(12, 14, 26, 0.99)
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px var(--tmv-purple-shadow-dim) !important;
    backdrop-filter: blur(20px);
}
.vh-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
}
.vh-topbar-dots {
    display: flex;
    gap: 7px;
}
.vh-topbar-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}
.vh-topbar-dots span:nth-child(1) {
    background: #ff5f57;
}
.vh-topbar-dots span:nth-child(2) {
    background: #ffbd2e;
}
.vh-topbar-dots span:nth-child(3) {
    background: #28c941;
}
.vh-topbar-label {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
    letter-spacing: 0.05em;
}
.vh-topbar-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--tmv-accent);
    background: rgba(0, 232, 200, 0.08);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(0, 232, 200, 0.15);
}
.vh-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tmv-accent);
    animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

.vh-voices {
    display: flex;
    gap: 10px;
    padding: 18px 24px 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.vh-voices::-webkit-scrollbar {
    display: none;
}
.vh-voice-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.vh-voice-btn:hover {
    border-color: rgba(124, 107, 255, 0.3);
    background: rgba(124, 107, 255, 0.06);
}
.vh-voice-btn.active {
    border-color: rgba(124, 107, 255, 0.5);
    background: rgba(124, 107, 255, 0.1);
    box-shadow: 0 0 16px rgba(124, 107, 255, 0.15);
}
.vh-voice-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--tmv-white);
    flex-shrink: 0;
}
.vh-voice-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
}
.vh-voice-lang {
    font-size: 0.72rem;
    color: var(--tmv-text-muted);
    margin-left: 2px;
}

.vh-wave-section {
    padding: 8px 24px 16px;
}
.vh-wave-label {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vh-waveform {
    display: flex;
    align-items: center;
    gap: 2.5px;
    height: 52px;
    overflow: hidden;
}
.vh-waveform span {
    flex: 1;
    border-radius: 3px;
    background: linear-gradient(to top, var(--tmv-purple), var(--tmv-accent));
    animation: vhWave 1.4s ease-in-out infinite alternate;
    transform-origin: center;
    opacity: 0.8;
}
@keyframes vhWave {
    from {
        transform: scaleY(0.12);
        opacity: 0.4;
    }
    to {
        transform: scaleY(1);
        opacity: 0.9;
    }
}

.vh-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.vh-play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--tmv-purple),
        var(--tmv-purple-bright)
    );
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(124, 107, 255, 0.35);
    transition: all 0.2s;
}
.vh-play:hover {
    transform: scale(1.07);
    box-shadow: 0 6px 28px rgba(124, 107, 255, 0.5);
}
.vh-play svg {
    width: 16px;
    height: 16px;
    fill: var(--tmv-white);
    margin-left: 2px;
}
.vh-time {
    font-size: 0.8rem;
    color: var(--tmv-text-muted);
    flex-shrink: 0;
}
.vh-progress {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.vh-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 36%;
    background: linear-gradient(90deg, var(--tmv-purple), var(--tmv-accent));
    border-radius: 4px;
}
.vh-quality {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.vh-quality i {
    color: var(--tmv-accent);
}
.vh-dl {
    flex-shrink: 0;
    background: rgba(0, 232, 200, 0.07) !important;
    border-color: rgba(0, 232, 200, 0.2) !important;
    color: var(--tmv-accent) !important;
    font-size: 0.8rem !important;
}
.vh-dl:hover {
    background: rgba(0, 232, 200, 0.15) !important;
    border-color: var(--tmv-accent) !important;
}

/* === PREMIUM VOICE STUDIO v2 === */
.voice-studio-v2 {
    max-width: 1060px;
    margin: 0 auto;
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-xl);
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
}
.vs2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid var(--tmv-border);
    background: rgba(255, 255, 255, 0.015);
}
.vs2-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.vs2-header-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(
        135deg,
        rgba(124, 107, 255, 0.2),
        rgba(124, 107, 255, 0.05)
    );
    border: 1px solid rgba(124, 107, 255, 0.25);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tmv-purple);
}
.vs2-header-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
}
.vs2-header-sub {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
    margin-top: 1px;
}
.vs2-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 4px;
}
.vs2-tab {
    padding: 7px 18px;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tmv-text-muted);
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.2s;
}
.vs2-tab.active {
    background: rgba(124, 107, 255, 0.15);
    color: var(--tmv-purple);
    border: 1px solid rgba(124, 107, 255, 0.25);
}
.vs2-tab:hover:not(.active) {
    color: var(--tmv-text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.vs2-body {
    display: grid;
    grid-template-columns: 210px 1fr 270px;
    min-height: 480px;
}

.vs2-voices {
    border-right: 1px solid var(--tmv-border);
    padding: 18px 0;
    overflow-y: auto;
    max-height: 520px;
    scrollbar-width: thin;
    scrollbar-color: var(--tmv-border) transparent;
}
.vs2-voices-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--tmv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0 16px 12px;
}
.vs2-voice-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-left: 2px solid transparent;
    position: relative;
}
.vs2-voice-card:hover {
    background: rgba(255, 255, 255, 0.03);
}
.vs2-voice-card.active {
    background: rgba(124, 107, 255, 0.08);
    border-left-color: var(--tmv-purple);
}
.vs2-vc-av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tmv-white);
    flex-shrink: 0;
    position: relative;
}
.vs2-vc-info {
    flex: 1;
    min-width: 0;
}
.vs2-vc-name {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--tmv-text-primary);
}
.vs2-vc-lang {
    font-size: 0.73rem;
    color: var(--tmv-text-muted);
    margin-top: 2px;
}
.vs2-vc-tag {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.vs2-vc-tag--pro {
    background: rgba(239, 158, 39, 0.12);
    color: #ef9e27;
    border: 1px solid rgba(239, 158, 39, 0.2);
}
.vs2-vc-tag--new {
    background: rgba(0, 232, 200, 0.1);
    color: var(--tmv-accent);
    border: 1px solid rgba(0, 232, 200, 0.2);
}

.vs2-editor {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--tmv-border);
}
.vs2-editor-area {
    flex: 1;
    position: relative;
}
.vs2-textarea {
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 22px 24px;
    background: transparent;
    border: none;
    color: var(--tmv-text-primary);
    font-family: var(--tmv-font-body);
    font-size: 0.9375rem;
    line-height: 1.75;
    resize: none;
    outline: none;
}
.vs2-textarea::placeholder {
    color: var(--tmv-text-muted);
}
.vs2-editor-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--tmv-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vs2-char-count {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
}
.vs2-char-count span {
    color: var(--tmv-text-primary);
    font-weight: 600;
}
.vs2-editor-actions {
    display: flex;
    gap: 8px;
}
.vs2-btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--tmv-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--tmv-text-secondary);
    font-family: var(--tmv-font-body);
}
.vs2-btn-sm:hover {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--tmv-text-primary);
}

.vs2-output {
    background: rgba(255, 255, 255, 0.015);
    border-top: 1px solid var(--tmv-border);
    padding: 18px 22px;
}
.vs2-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.vs2-output-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tmv-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.vs2-output-meta {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.vs2-output-meta .dot {
    color: var(--tmv-accent);
}
.vs2-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 48px;
    margin-bottom: 14px;
}
.vs2-wave-bar {
    flex: 1;
    border-radius: 3px;
    background: linear-gradient(
        to top,
        rgba(124, 107, 255, 0.7),
        rgba(0, 232, 200, 0.5)
    );
    transform-origin: center;
    animation: vs2Wave 1.6s ease-in-out infinite alternate;
}
.vs2-wave-bar.muted {
    background: rgba(255, 255, 255, 0.08);
    animation: none;
}
@keyframes vs2Wave {
    from {
        transform: scaleY(0.1);
    }
    to {
        transform: scaleY(1);
    }
}
.vs2-playback {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vs2-play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tmv-purple);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 18px rgba(124, 107, 255, 0.3);
    transition: all 0.2s;
}
.vs2-play-btn:hover {
    transform: scale(1.08);
}
.vs2-play-btn svg {
    width: 14px;
    height: 14px;
    fill: var(--tmv-white);
    margin-left: 2px;
}
.vs2-playbar {
    flex: 1;
    height: 4px;
    background: var(--tmv-border);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.vs2-playbar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 36%;
    background: linear-gradient(90deg, var(--tmv-purple), var(--tmv-accent));
}
.vs2-t {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
    flex-shrink: 0;
}

.vs2-controls {
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.vs2-ctrl-section {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tmv-border);
}
.vs2-ctrl-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.vs2-ctrl-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--tmv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
}
.vs2-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--tmv-border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--tmv-text-primary);
    font-size: 0.85rem;
    font-family: var(--tmv-font-body);
    outline: none;
    cursor: pointer;
    appearance: none;
    transition: border-color 0.2s;
}
.vs2-select:focus {
    border-color: rgba(124, 107, 255, 0.4);
}
.vs2-speed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.vs2-speed-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tmv-purple);
}
.vs2-range {
    width: 100%;
    appearance: none;
    height: 4px;
    border-radius: 4px;
    background: var(--tmv-border);
    outline: none;
    cursor: pointer;
}
.vs2-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tmv-purple);
    box-shadow: 0 0 10px rgba(124, 107, 255, 0.4);
    cursor: pointer;
}
.vs2-emotions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vs2-emotion {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--tmv-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--tmv-text-muted);
    transition: all 0.2s;
}
.vs2-emotion:hover {
    border-color: rgba(124, 107, 255, 0.3);
    color: var(--tmv-text-primary);
}
.vs2-emotion.active {
    background: rgba(124, 107, 255, 0.12);
    border-color: rgba(124, 107, 255, 0.4);
    color: var(--tmv-purple);
}
.vs2-quality-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.vs2-quality-opt {
    padding: 8px 6px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--tmv-border);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.2s;
}
.vs2-quality-opt.active {
    border-color: rgba(0, 232, 200, 0.4);
    background: rgba(0, 232, 200, 0.07);
}
.vs2-qo-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tmv-text-primary);
}
.vs2-qo-sub {
    font-size: 0.68rem;
    color: var(--tmv-text-muted);
    margin-top: 2px;
}
.vs2-quality-opt.active .vs2-qo-label {
    color: var(--tmv-accent);
}
.vs2-generate-btn {
    width: 100%;
    padding: 14px;
    font-size: 0.92rem;
    font-weight: 700;
    font-family: var(--tmv-font-display);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(
        135deg,
        var(--tmv-purple),
        var(--tmv-purple-bright)
    );
    color: var(--tmv-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 30px rgba(124, 107, 255, 0.35);
    transition: all 0.2s;
}
.vs2-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(124, 107, 255, 0.5);
}
.vs2-generating-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--tmv-accent);
    background: rgba(0, 232, 200, 0.07);
    border: 1px solid rgba(0, 232, 200, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 12px;
}
.vs2-gen-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 232, 200, 0.2);
    border-top-color: var(--tmv-accent);
    border-radius: 50%;
    animation: vs2spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes vs2spin {
    to {
        transform: rotate(360deg);
    }
}

/* Voice Clone Section */
.voice-clone-showcase {
    background: var(--tmv-bg-card);
    border: 1px solid var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    padding: 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.vcl-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 158, 39, 0.1);
    border: 1px solid rgba(239, 158, 39, 0.2);
    color: #ef9e27;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}
.vcl-left h3 {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}
.vcl-left p {
    color: var(--tmv-text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 20px;
}
.vcl-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vcl-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--tmv-text-secondary);
}
.vcl-check {
    width: 20px;
    height: 20px;
    background: rgba(0, 232, 200, 0.1);
    border: 1px solid rgba(0, 232, 200, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--tmv-accent);
    font-size: 0.65rem;
    margin-top: 1px;
}
.vcl-right {
    background: var(--tmv-bg-primary);
    border: 1px solid var(--tmv-border);
    border-radius: 16px;
    padding: 24px;
}
.vcl-upload {
    border: 2px dashed rgba(124, 107, 255, 0.25);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    margin-bottom: 20px;
    transition: border-color 0.2s;
    cursor: pointer;
}
.vcl-upload:hover {
    border-color: rgba(124, 107, 255, 0.5);
}
.vcl-upload-icon {
    width: 48px;
    height: 48px;
    background: rgba(124, 107, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: var(--tmv-purple);
    font-size: 1.2rem;
}
.vcl-upload p {
    font-size: 0.85rem;
    color: var(--tmv-text-secondary);
}
.vcl-upload strong {
    color: var(--tmv-text-primary);
}
.vcl-upload small {
    font-size: 0.75rem;
    color: var(--tmv-text-muted);
    display: block;
    margin-top: 4px;
}
.vcl-sample {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tmv-border);
    border-radius: 10px;
    margin-bottom: 10px;
}
.vcl-sample:last-child {
    margin-bottom: 0;
}
.vcl-sample-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tmv-white);
    flex-shrink: 0;
}
.vcl-sample-info {
    flex: 1;
    min-width: 0;
}
.vcl-sample-name {
    font-size: 0.85rem;
    font-weight: 600;
}
.vcl-sample-meta {
    font-size: 0.73rem;
    color: var(--tmv-text-muted);
    margin-top: 2px;
}
.vcl-sample-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(29, 158, 117, 0.1);
    color: #1d9e75;
    border: 1px solid rgba(29, 158, 117, 0.2);
}

/* How it works steps */
.voice-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--tmv-border);
    border-radius: var(--tmv-radius-lg);
    overflow: hidden;
    margin-top: 48px;
}
.voice-step {
    background: var(--tmv-bg-card);
    padding: 36px 28px;
    position: relative;
}
.voice-step-icon {
    width: 44px;
    height: 44px;
    background: rgba(124, 107, 255, 0.1);
    border: 1px solid rgba(124, 107, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tmv-purple);
    margin-bottom: 16px;
}
.voice-step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.voice-step p {
    font-size: 0.88rem;
    color: var(--tmv-text-secondary);
    line-height: 1.65;
}

/* Additional utility classes for inline style removal */
.vs2-btn-shrink {
    flex-shrink: 0;
}
.vs2-speed-label {
    font-size: 0.78rem;
    color: var(--tmv-text-muted);
}
.vcl-sample-av-jd {
    background: linear-gradient(
        135deg,
        var(--tmv-purple),
        var(--tmv-purple-bright)
    );
}
.vcl-sample-av-ml {
    background: linear-gradient(135deg, #1d9e75, #136b50);
}
.map-iframe {
    border: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* ============================================================
   RESPONSIVE — AI PAGES (ThemeForest standard breakpoints)
   ai-chatbot · ai-keywords · ai-voice
   Breakpoints: 1200 / 1024 / 768 / 576 / 480
   ============================================================ */

/*---------------------------------
    9.13 AI Pages Responsive
---------------------------------*/
/* ---- AI PAGE HERO CENTER (all 3 pages) ---- */
@media (max-width: 1024px) {
    .ai-page-hero {
        padding-top: 90px;
    }
    .ai-page-hero-center {
        max-width: 700px;
    }
    .kwh-wrap,
    .vh-player-wrap {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media (max-width: 768px) {
    .ai-page-hero {
        padding-top: 80px;
    }
    .ai-page-hero-center h1 {
        font-size: clamp(1.8rem, 6vw, 2.8rem);
    }
    .ai-page-hero-center {
        padding: 0 4px;
    }
    .ai-keyword-hero-center {
        padding-bottom: 56px;
    }
    .ai-page-hero-center .ai-page-hero-actions {
        flex-direction: column;
        align-items: center;
    }
    .ai-page-hero-center .ai-page-hero-actions .btn {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
    .ai-page-hero-stats {
        flex-wrap: wrap;
        gap: 16px 24px;
    }
    .ai-ph-divider {
        display: none;
    }
    .ai-feat-chips-wrap {
        padding: 32px 0;
    }
    .chat-features-strip {
        gap: 10px;
    }
    .chat-feat-chip {
        padding: 8px 14px;
        font-size: 0.82rem;
    }
}

@media (max-width: 576px) {
    .ai-page-hero {
        padding-top: 72px;
    }
    .ai-page-hero-center h1 {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }
}

/* ---- AI CHATBOT — Chat Interface ---- */
@media (max-width: 768px) {
    .chat-interface {
        border-radius: var(--tmv-radius-md);
    }
    .chat-header {
        padding: 13px 16px;
        gap: 10px;
        flex-wrap: wrap;
    }
    .chat-model-tags {
        gap: 4px;
    }
    .chat-model-tag {
        padding: 3px 8px;
        font-size: 0.7rem;
    }
    .chat-body {
        padding: 16px;
        gap: 14px;
        min-height: 280px;
    }
    .chat-bubble {
        font-size: 0.875rem;
        max-width: 85%;
    }
    .chat-footer {
        padding: 10px 14px;
        gap: 8px;
    }
    .chat-input {
        padding: 9px 12px;
        font-size: 0.875rem;
    }
    .chat-send {
        height: 38px;
    }
}

@media (max-width: 576px) {
    .chat-header-name {
        font-size: 0.875rem;
    }
    .chat-header-status {
        font-size: 0.75rem;
    }
    .chat-model-tags {
        display: none;
    }
    .chat-bubble {
        max-width: 90%;
        padding: 11px 14px;
    }
    .chat-action-tags {
        gap: 6px;
    }
    .chat-action-tag {
        font-size: 0.75rem;
        padding: 3px 9px;
    }
}

@media (max-width: 480px) {
    .chat-body {
        padding: 12px;
    }
    .chat-footer {
        padding: 10px 12px;
    }
}

/* ---- AI KEYWORDS — Hero Mockup (.kwh-*) ---- */
@media (max-width: 768px) {
    .kwh-wrap {
        border-radius: 16px;
        margin-left: 16px;
        margin-right: 16px;
    }
    .kwh-topbar {
        padding: 12px 18px;
    }
    .kwh-topbar-label {
        display: none;
    }
    .kwh-search-row {
        padding: 14px 18px 12px;
    }
    .kwh-search-inner {
        padding: 10px 14px;
        gap: 10px;
    }
    .kwh-search-text {
        font-size: 0.88rem;
    }
    .kwh-search-badge {
        display: none;
    }
    .kwh-table-wrap {
        padding: 0 18px 20px;
    }
    .kwh-table th,
    .kwh-table td {
        padding: 9px 8px;
    }
    .kwh-table th:nth-child(5),
    .kwh-table td:nth-child(5),
    .kwh-table th:nth-child(6),
    .kwh-table td:nth-child(6) {
        display: none;
    }
}

@media (max-width: 480px) {
    .kwh-wrap {
        margin-left: 12px;
        margin-right: 12px;
        border-radius: 12px;
    }
    .kwh-topbar {
        padding: 10px 14px;
    }
    .kwh-table th:nth-child(3),
    .kwh-table td:nth-child(3),
    .kwh-table th:nth-child(4),
    .kwh-table td:nth-child(4) {
        display: none;
    }
    .kwh-gen-btn {
        display: none;
    }
}

/* ---- AI KEYWORDS — Premium Tool (.kwt-*) ---- */
@media (max-width: 1024px) {
    .kwt-body {
        grid-template-columns: 1fr;
    }
    .kwt-sidebar {
        display: none;
    }
    .kw-tool-v2 {
        border-radius: var(--tmv-radius-lg);
    }
}

@media (max-width: 768px) {
    .kwt-header {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 18px;
    }
    .kwt-tabs {
        order: 3;
        width: 100%;
        justify-content: flex-start;
    }
    .kwt-tab {
        padding: 6px 14px;
        font-size: 0.78rem;
    }
    .kwt-search-section {
        padding: 16px 18px;
    }
    .kwt-search-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }
    .kwt-search-input {
        min-width: 0;
        flex: 1 1 200px;
    }
    .kwt-generate-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 18px;
    }
    .kwt-filters {
        gap: 6px;
    }
    .kwt-filter {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
    .kwt-results-header {
        padding: 12px 18px;
    }
    .kwt-table th,
    .kwt-table td {
        padding: 10px 12px;
    }
    .kwt-table th:nth-child(5),
    .kwt-table td:nth-child(5),
    .kwt-table th:nth-child(6),
    .kwt-table td:nth-child(6) {
        display: none;
    }
    .kwt-table-footer {
        padding: 12px 18px;
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .kwt-header-icon {
        display: none;
    }
    .kwt-ai-badge {
        display: none;
    }
    .kwt-table th:nth-child(4),
    .kwt-table td:nth-child(4) {
        display: none;
    }
    .kwt-table th,
    .kwt-table td {
        padding: 9px 10px;
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .kwt-search-section {
        padding: 14px 14px;
    }
    .kwt-table th:nth-child(3),
    .kwt-table td:nth-child(3) {
        display: none;
    }
}

/* ---- AI VOICE — Hero Player (.vh-*) ---- */
@media (max-width: 768px) {
    .vh-player-wrap {
        border-radius: 16px;
        margin-left: 16px;
        margin-right: 16px;
    }
    .vh-topbar {
        padding: 12px 18px;
    }
    .vh-topbar-label {
        display: none;
    }
    .vh-voices {
        padding: 14px 18px 12px;
        gap: 8px;
    }
    .vh-voice-btn {
        padding: 7px 12px;
        gap: 8px;
    }
    .vh-voice-lang {
        display: none;
    }
    .vh-wave-section {
        padding: 6px 18px 12px;
    }
    .vh-waveform {
        height: 40px;
    }
    .vh-controls {
        padding: 12px 18px 16px;
        gap: 10px;
    }
    .vh-quality {
        display: none;
    }
    .vh-dl {
        display: none;
    }
}

@media (max-width: 576px) {
    .vh-player-wrap {
        margin-left: 12px;
        margin-right: 12px;
        border-radius: 14px;
    }
    .vh-topbar-badge {
        display: none;
    }
    .vh-voice-name {
        font-size: 0.78rem;
    }
    .vh-time {
        display: none;
    }
    .vh-waveform {
        height: 32px;
    }
}

@media (max-width: 480px) {
    .vh-voices {
        padding: 10px 14px;
    }
    .vh-wave-section {
        padding: 6px 14px 10px;
    }
    .vh-controls {
        padding: 10px 14px 14px;
    }
}

/* ---- AI VOICE — Premium Studio (.vs2-*) ---- */
@media (max-width: 1024px) {
    .vs2-body {
        grid-template-columns: 190px 1fr;
    }
    .vs2-controls {
        display: none;
    }
    .voice-studio-v2 {
        border-radius: var(--tmv-radius-lg);
    }
}

@media (max-width: 768px) {
    .vs2-body {
        grid-template-columns: 1fr;
    }
    .vs2-voices {
        display: none;
    }
    .vs2-header {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 18px;
    }
    .vs2-tabs {
        width: 100%;
        justify-content: flex-start;
    }
    .vs2-tab {
        padding: 6px 14px;
        font-size: 0.78rem;
    }
    .vs2-textarea {
        font-size: 0.9rem;
        padding: 16px 18px;
        min-height: 160px;
    }
    .vs2-editor-footer {
        padding: 10px 16px;
    }
    .vs2-output {
        padding: 14px 16px;
    }
    .vs2-wave {
        height: 36px;
    }
    .vs2-playback {
        gap: 8px;
    }
    .voice-steps {
        grid-template-columns: 1fr;
    }
    .voice-clone-showcase {
        grid-template-columns: 1fr;
    }
    .vcl-left h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    .vs2-header-icon {
        display: none;
    }
    .vs2-header {
        padding: 12px 14px;
    }
    .vs2-textarea {
        padding: 14px 14px;
        font-size: 0.875rem;
    }
    .vs2-editor-footer {
        padding: 8px 14px;
    }
    .vs2-output {
        padding: 12px 14px;
    }
    .voice-step {
        padding: 24px 20px;
    }
    .vcl-right {
        padding: 18px;
    }
    .vcl-upload {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .voice-studio-v2 {
        border-radius: var(--tmv-radius-md);
    }
    .vs2-wave {
        height: 28px;
    }
    .vs2-playback {
        flex-wrap: wrap;
    }
    .vs2-playbar {
        min-width: 100%;
        order: 3;
    }
    .vcl-checklist li {
        font-size: 0.83rem;
    }
}