@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@800&display=swap');
/* CSS Variables */:root {    /* Light Theme (Default) */    --primary: #5a32fa;    --primary-hover: #4b26e0;    --primary-light: rgba(0, 117, 255, 0.1);    --secondary: #00d2ff;    --secondary-hover: #00b8e6;    --bg-main: #f8fafc;    --bg-alt: #f1f5f9;    --surface: #ffffff;    --surface-border: rgba(0, 0, 0, 0.05);    --text-main: #0f172a;    --text-muted: #64748b;    --text-light: #94a3b8;    --glass-bg: rgba(255, 255, 255, 0.8);    --glass-border: rgba(255, 255, 255, 0.5);    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);    --gradient-brand: linear-gradient(135deg, var(--primary), var(--secondary));    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;    --font-display: 'Outfit', var(--font-sans);    --transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease;    --radius-sm: 0.5rem;    --radius-md: 1rem;    --radius-lg: 1.5rem;}/* Dark Theme */[data-theme="dark"] {    --primary: #7a5cff;    --primary-hover: #967dff;    --primary-light: rgba(122, 92, 255, 0.15);    --secondary: #00e5ff;    --secondary-hover: #4dffff;    --bg-main: #0c0d10;    --bg-alt: #0c0d10;    --surface: #15161a;    --surface-border: rgba(255, 255, 255, 0.05);    --text-main: #f8fafc;    --text-muted: #cbd5e1;    --text-light: #64748b;    --glass-bg: rgba(12, 13, 16, 0.8);    --glass-border: rgba(255, 255, 255, 0.05);    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);}/* Base Styles */* {    margin: 0;    padding: 0;    box-sizing: border-box;}html {    scroll-behavior: smooth;    scroll-padding-top: 80px;}body {    font-family: var(--font-sans);    background-color: var(--bg-main);    color: var(--text-main);    line-height: 1.6;    overflow-x: hidden;}body.theme-transition {    transition: background-color 0.3s ease, color 0.3s ease;}h1, h2, h3, h4, h5, h6 {    font-family: var(--font-display);    font-weight: 700;    line-height: 1.2;    color: var(--text-main);    margin-bottom: 1rem;}p {    margin-bottom: 1rem;    color: var(--text-muted);}a {    color: var(--primary);    text-decoration: none;    transition: var(--transition);}img {    max-width: 100%;    height: auto;    display: block;}ul {    list-style: none;}/* Layout */.container {    width: 100%;    max-width: 1200px;    margin: 0 auto;    padding: 0 1.5rem;}.section {    padding: 6rem 0;}.bg-alt {    background-color: var(--bg-alt);}.text-center {    text-align: center;}.w-100 {    width: 100%;}.mt-2 { margin-top: 0.5rem; }.mt-4 { margin-top: 1.5rem; }.ml-auto { margin-left: auto; }.section-header {    max-width: 700px;    margin: 0 auto 4rem;}.h2 {    font-size: 2.5rem;}/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 24px;
    min-height: 48px;
    border-radius: 999px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 250ms ease;
    border: none;
    font-size: 1rem;
    text-decoration: none;
}
.btn-primary {
    background: linear-gradient(90deg, #2563EB 0%, #0EA5E9 50%, #00D4FF 100%);
    background-size: 150% auto;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.btn-primary:hover {
    transform: translateY(-2px);
    background-position: right center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    color: #ffffff;
}
.btn-primary i {
    transition: transform 250ms ease;
}
.btn-primary:hover i {
    transform: translateX(3px);
}
.btn-secondary {
    background: #ffffff;
    color: var(--text-main);
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
[data-theme="dark"] .btn-secondary {
    background: var(--surface);
    border-color: rgba(255, 255, 255, 0.1);
}
.btn-secondary:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.btn-outline {
    background: transparent;
    color: var(--text-main);
    border: 1px solid #e2e8f0;
    box-shadow: none;
}
[data-theme="dark"] .btn-outline {
    border-color: rgba(255, 255, 255, 0.1);
}
.btn-outline:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    color: var(--primary);
}
.btn-large {
    padding: 14px 32px;
    min-height: 54px;
    font-size: 1.05rem;
}
@media (max-width: 768px) {
    .btn-large {
        width: 100%;
        padding: 14px 20px;
    }
}
/* Glassmorphism Classes */.glass-card {    background: var(--glass-bg);    backdrop-filter: blur(16px);    -webkit-backdrop-filter: blur(16px);    border: 1px solid var(--glass-border);    border-radius: var(--radius-lg);    box-shadow: var(--glass-shadow);}.glass-panel {    background: var(--glass-bg);    backdrop-filter: blur(16px);    -webkit-backdrop-filter: blur(16px);    border: 1px solid var(--glass-border);    border-radius: var(--radius-lg);    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);    overflow: hidden;}/* Navbar */.navbar {    position: fixed;    top: 0;    left: 0;    right: 0;    height: 64px;    z-index: 1000;    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;    background: transparent;    border-bottom: 1px solid transparent;}.navbar.scrolled {    background: var(--surface);    backdrop-filter: blur(12px);    -webkit-backdrop-filter: blur(12px);    border-bottom: 1px solid var(--surface-border);    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);}.nav-container {    height: 100%;    display: flex;    align-items: center;    justify-content: space-between;    max-width: 1280px;    margin: 0 auto;    padding: 0 24px;}.logo {    display: flex;    align-items: center;    justify-content: flex-start;    flex: 1 1 0;    gap: 0.75rem;    font-family: var(--font-sans);    font-weight: 600;    font-size: 1.2rem;    letter-spacing: -0.02em;    color: var(--text-main);    white-space: nowrap;}.logo-icon {    width: 28px;    height: 28px;    min-width: 28px;    min-height: 28px;    flex-shrink: 0;    background-image: url('assets/logos/Icon-light.png');    background-size: contain;    background-position: center;    background-repeat: no-repeat;    background-color: transparent;    position: relative;    overflow: hidden;}[data-theme="dark"] .logo-icon {    background-image: url('assets/logos/Icon-Dark.png');}.nav-links {    display: flex;    align-items: center;    gap: 24px;    flex: 0 0 auto;    margin-right: 32px;}.nav-links a {    color: var(--text-main);    font-weight: 500;    font-size: 0.9rem;    white-space: nowrap;    text-decoration: none;    transition: color 0.25s ease;}.nav-links a:hover {    color: var(--primary);}.nav-actions {    display: flex;    align-items: center;    justify-content: flex-end;    flex: 1 1 0;    gap: 24px;}.theme-btn {    background: none;    border: none;    font-size: 1.2rem;    color: var(--text-main);    cursor: pointer;    width: 36px;    height: 36px;    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    transition: var(--transition);}.theme-btn:hover {    background: var(--bg-alt);}.login-link {    color: var(--text-main);    font-weight: 500;    font-size: 0.95rem;    white-space: nowrap;    text-decoration: none;    transition: color 0.25s ease;}.login-link:hover {    color: var(--primary);}.navbar .btn {    padding: 0.5rem 1.25rem;    font-size: 0.9rem;    font-weight: 600;    border-radius: 9999px;    background: #000000;    color: #ffffff;    border: none;    white-space: nowrap;    transition: all 0.3s ease;}.navbar .btn:hover {    background-color: var(--primary);    transform: translateY(-1px);}.navbar .btn-arrow {    display: inline-block;    transition: transform 0.3s ease;}.navbar .btn:hover .btn-arrow {    transform: translateX(3px);}.mobile-menu-btn {    display: none;    background: none;    border: none;    font-size: 1.5rem;    color: var(--text-main);    cursor: pointer;}/* Hero Section */.hero {    position: relative;    padding: 10rem 0 8rem;    min-height: 85vh;    display: flex;    align-items: center;    overflow: hidden;}.hero-bg-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    z-index: -1;
    background:
        radial-gradient(circle at 50% 10%, rgba(244, 248, 255, 0.6) 0%, rgba(244, 248, 255, 0) 70%),
        radial-gradient(circle at 15% 40%, rgba(241, 248, 255, 0.4) 0%, rgba(241, 248, 255, 0) 65%),
        radial-gradient(circle at 85% 75%, rgba(238, 247, 255, 0.3) 0%, rgba(238, 247, 255, 0) 65%);
    filter: blur(100px);
    pointer-events: none;
    opacity: 0.8;
}

@media (min-width: 768px) {
    .hero-bg-glow {
        opacity: 1;
        background:
            radial-gradient(circle at 50% -10%, rgba(234, 243, 255, 0.9) 0%, rgba(234, 243, 255, 0) 70%),
            radial-gradient(circle at -5% 30%, rgba(226, 240, 255, 0.9) 0%, rgba(226, 240, 255, 0) 70%),
            radial-gradient(circle at 105% 85%, rgba(220, 238, 255, 0.8) 0%, rgba(220, 238, 255, 0) 70%);
    }

    .hero-bg-glow::before,
    .hero-bg-glow::after {
        content: '';
        position: absolute;
        z-index: -1;
        pointer-events: none;
    }

    /* Forme organique douce gauche */
    .hero-bg-glow::before {
        top: -10%;
        left: -15%;
        width: 65vw;
        height: 80vh;
        background: linear-gradient(135deg, #E2F0FF 0%, rgba(234, 243, 255, 0.3) 100%);
        border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%;
        transform: rotate(-15deg);
        opacity: 0.95;
    }

    /* Forme organique douce droite/bas */
    .hero-bg-glow::after {
        bottom: -15%;
        right: -15%;
        width: 60vw;
        height: 75vh;
        background: linear-gradient(135deg, #E4F8FF 0%, rgba(220, 238, 255, 0.3) 100%);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: rotate(15deg);
        opacity: 0.9;
    }
}

[data-theme="dark"] .hero-bg-glow {
    width: 1000px;
    height: 600px;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
}
[data-theme="dark"] .hero-bg-glow::before,
[data-theme="dark"] .hero-bg-glow::after {
    display: none;
}.hero-container {    display: grid;    grid-template-columns: 1fr;    gap: 4rem;    align-items: center;    text-align: center;    position: relative;}.badge {    display: inline-flex; width: fit-content; margin-left: auto; margin-right: auto; align-items: center; gap: 6px;    padding: 0.25rem 0.75rem;    background: var(--primary-light);    color: var(--primary);    border-radius: 999px;    font-size: 0.75rem;    font-weight: 600;    margin-bottom: 1.5rem;    white-space: normal;    height: auto;    text-align: center;}[data-theme="dark"] .badge {    background: rgba(122, 92, 255, 0.2);    color: #e2d9ff;}
.hero-content h1 {    font-size: clamp(2rem, 7vw, 3.5rem);    margin-bottom: 1.5rem;    font-family: 'Inter', system-ui, sans-serif;    font-weight: 800;    letter-spacing: -0.04em;    line-height: 1.1;    word-break: break-word;}.animated-gradient {    background: linear-gradient(90deg, #2563eb, #60a5fa, #1d4ed8, #2563eb);    background-size: 300% auto;    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    background-clip: text;    animation: gradient-shift 4s linear infinite;}@keyframes gradient-shift {    0% { background-position: 0% center; }    100% { background-position: 300% center; }}.hero-content p {    font-size: 1.125rem;    margin: 0 auto 2.5rem;    max-width: 700px;}.hero-cta {    display: flex;    justify-content: center;    margin-bottom: 3rem;}.hero-social-proof {    display: flex;    flex-direction: row;    justify-content: center;    align-items: center;    gap: 1.5rem;    margin-top: 2rem;}.avatars {    display: flex;    align-items: center;}.avatars img {    width: 38px;    height: 38px;    border-radius: 50%;    border: 2px solid var(--bg-main);    margin-left: -12px;    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);    object-fit: cover;    flex-shrink: 0;}.avatars img:first-child {    margin-left: 0;}.rating-text {    display: flex;    flex-direction: column;    align-items: flex-start;    justify-content: center;    gap: 0.2rem;}.hero-rating {    color: #f97316;    font-size: 1.15rem;    display: flex;    gap: 0.2rem;    line-height: 1;    margin: 0;    padding: 0;}.hero-social-proof p {    margin: 0;    padding: 0;    font-size: 0.95rem;    color: var(--text-muted);    line-height: 1.2;    white-space: nowrap;    text-align: left;}.highlight-number {    color: var(--primary);    font-weight: 700;}[data-theme="dark"] .highlight-number {    color: #ffffff;}/* App Demo Visual */.app-demo {    display: flex;    flex-direction: column;    max-width: 600px;    margin: 0 auto;}.app-header {    display: flex;    align-items: center;    padding: 1rem;    background: rgba(0, 0, 0, 0.03);    border-bottom: 1px solid var(--surface-border);}[data-theme="dark"] .app-header {    background: rgba(255, 255, 255, 0.02);}.dots {    display: flex;    gap: 6px;}.dots span {    width: 12px;    height: 12px;    border-radius: 50%;    background: #ff5f56;}.dots span:nth-child(2) { background: #ffbd2e; }.dots span:nth-child(3) { background: #27c93f; }.app-title {    margin: 0 auto;    font-size: 0.875rem;    font-weight: 600;    color: var(--text-muted);}.app-body {    padding: 1.5rem;}.voice-selector {    display: flex;    align-items: center;    gap: 1rem;    padding: 1rem;    border: 1px solid var(--surface-border);    border-radius: var(--radius-md);    margin-bottom: 1rem;    cursor: pointer;    transition: var(--transition);}.voice-selector:hover {    border-color: var(--primary);}.voice-avatar {    width: 48px;    height: 48px;    border-radius: 50%;    object-fit: cover;}.voice-selector div {    display: flex;    flex-direction: column;}.voice-selector span {    font-size: 0.8rem;    color: var(--text-light);}.app-body textarea {    width: 100%;    height: 150px;    padding: 1rem;    border: 1px solid var(--surface-border);    border-radius: var(--radius-md);    background: transparent;    color: var(--text-main);    font-family: inherit;    resize: none;    margin-bottom: 1rem;}.app-body textarea:focus {    outline: none;    border-color: var(--primary);}.app-controls {    display: flex;    align-items: center;    justify-content: space-between;    gap: 1rem;}.sliders {    display: flex;    gap: 1rem;    flex: 1;}.sliders label {    font-size: 0.8rem;    color: var(--text-muted);    display: flex;    flex-direction: column;    gap: 0.5rem;    width: 100%;}input[type=range] {    width: 100%;    accent-color: var(--primary);}.audio-player {    display: flex;    align-items: center;    gap: 1rem;    padding: 1rem;    background: var(--bg-alt);    border-radius: var(--radius-md);}.play-btn {    width: 40px;    height: 40px;    border-radius: 50%;    background: var(--primary);    color: white;    border: none;    display: flex;    align-items: center;    justify-content: center;    cursor: pointer;}.waveform {    flex: 1;    height: 30px;    background: repeating-linear-gradient(        90deg,        var(--primary) 0%,        var(--primary) 2px,        transparent 2px,        transparent 6px    );    opacity: 0.5;    border-radius: 4px;}.time {    font-size: 0.8rem;    color: var(--text-muted);}/* Features Section */    .features-grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 2rem;}.feature-card {    padding: 2rem;    background: var(--surface);    border: 1px solid var(--surface-border);    border-radius: 24px; /* Slightly softer premium corners */    transition: var(--transition);    display: flex;    flex-direction: column;    height: 100%; /* Ensures equal height strictly */}.feature-card:hover {    transform: translateY(-5px);    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05); /* Premium soft hover shadow */}.feature-icon {    width: 54px;    height: 54px;    border-radius: 14px;    background: var(--primary-light);    color: var(--primary);    display: flex;    align-items: center;    justify-content: center;    font-size: 1.5rem;    margin-bottom: 1.25rem;}.feature-card h3 {    margin-bottom: 0.75rem;    font-size: 1.15rem;    font-weight: 700;    line-height: 1.3;}.feature-card p {    margin-bottom: 0;    font-size: 0.95rem;    line-height: 1.6; /* Comfortable reading */    color: var(--text-muted);}@media (max-width: 1024px) {    .features-grid {        grid-template-columns: repeat(2, 1fr);        gap: 1.5rem;    }}@media (max-width: 768px) {    .features-grid {        grid-template-columns: 1fr;        gap: 1.25rem;    }    .feature-card {        padding: 1.5rem;    }    .feature-icon {        margin-bottom: 1rem;    }}    /* How it Works *//* Voice Demos */.demos-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));    gap: 2rem;}.demo-card {    position: relative;    height: 350px;    border-radius: var(--radius-lg);    overflow: hidden;    background-size: cover;    background-position: center;    padding: 1.5rem;    display: flex;    flex-direction: column;    justify-content: space-between;    transition: var(--transition);}.demo-card:hover {    transform: translateY(-5px);    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);}.demo-card::before {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.7));    z-index: 1;}.demo-top-label {    position: relative;    z-index: 2;    background: transparent;    color: #fff;    font-weight: 500;    font-size: 1.1rem;    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}.demo-player {    position: relative;    z-index: 2;    display: flex;    align-items: center;    justify-content: space-between;    padding: 1rem 1.5rem;    background: rgba(255, 255, 255, 0.2);    backdrop-filter: blur(10px);    -webkit-backdrop-filter: blur(10px);    border: 1px solid rgba(255, 255, 255, 0.3);    border-radius: 3rem;}.demo-info h4 {    margin: 0 0 0.25rem 0;    font-size: 1.1rem;    color: #fff;}.demo-info p {    margin: 0;    font-size: 0.85rem;    color: rgba(255, 255, 255, 0.8);}.demo-play-btn {    width: 45px;    height: 45px;    border-radius: 50%;    background: #fff;    color: #000;    border: none;    display: flex;    align-items: center;    justify-content: center;    font-size: 1.2rem;    cursor: pointer;    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);    transition: var(--transition);    flex-shrink: 0;}.demo-play-btn:hover {    transform: scale(1.05);}/* Pricing DailyKash Style */.pricing-grid.dk-style {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));    gap: 2rem;    align-items: stretch;    max-width: 1200px;    margin: 0 auto;}.dk-card {    padding: 3rem 2.5rem;    border-radius: 1.5rem;    position: relative;    display: flex;    flex-direction: column;}.dk-card-white {    background: #ffffff;    border: 1px solid #e5e7eb;    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);    color: #111827;}[data-theme="dark"] .dk-card-white {    background: #1f2937;    border-color: #374151;    color: #f9fafb;}.dk-card-primary {    background: var(--gradient-brand);    color: #ffffff;    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);}[data-theme="dark"] .dk-card-primary {    background: var(--gradient-brand);}.dk-badge {    display: inline-block;    padding: 0.25rem 0.75rem;    border-radius: 1rem;    font-size: 0.75rem;    font-weight: 700;    letter-spacing: 0.05em;    margin-bottom: 1.5rem;    align-self: flex-start;}.dk-badge-gray {    background: #f3f4f6;    color: #6b7280;}[data-theme="dark"] .dk-badge-gray {    background: #374151;    color: #9ca3af;}.dk-badge-white-trans {    background: rgba(255, 255, 255, 0.2);    color: #ffffff;}.dk-recommended-badge {    position: absolute;    top: -12px;    left: 50%;    transform: translateX(-50%);    background: #f59e0b;    color: #ffffff;    padding: 0.25rem 1rem;    border-radius: 1rem;    font-size: 0.75rem;    font-weight: 700;    display: flex;    align-items: center;    gap: 0.25rem;    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);}.dk-card h3 {    font-size: 1.75rem;    font-weight: 800;    margin-bottom: 0.5rem;}.dk-card-white h3 { color: #111827; }[data-theme="dark"] .dk-card-white h3 { color: #f9fafb; }.dk-card-primary h3 { color: #ffffff; }.dk-subtitle {    font-size: 0.95rem;    line-height: 1.5;    margin-bottom: 2rem;    min-height: 3rem;}.dk-card-white .dk-subtitle { color: #6b7280; }[data-theme="dark"] .dk-card-white .dk-subtitle { color: #9ca3af; }.dk-card-primary .dk-subtitle { color: rgba(255, 255, 255, 0.9); }.dk-price-container {    display: flex;    align-items: baseline;    gap: 0.5rem;    margin-bottom: 0.25rem;}.dk-price {    font-size: 3.5rem;    font-weight: 800;    line-height: 1;}.dk-price-right {    display: flex;    flex-direction: column;}.dk-currency {    font-size: 1rem;    font-weight: 600;}.dk-price-note {    font-size: 0.85rem;    margin-bottom: 2rem;}.dk-card-white .dk-price-note { color: #6b7280; }[data-theme="dark"] .dk-card-white .dk-price-note { color: #9ca3af; }.dk-card-primary .dk-price-note { color: rgba(255, 255, 255, 0.8); }.dk-features {    flex-grow: 1;    margin-bottom: 2.5rem;}.dk-features li {    display: flex;    align-items: center;    gap: 0.75rem;    margin-bottom: 1rem;    font-size: 0.95rem;    font-weight: 500;}.dk-features li i {    font-size: 1.25rem;}.dk-icon-primary { color: var(--primary); }.dk-icon-white { color: #ffffff; }.dk-icon-gray { color: #9ca3af; }.dk-card-white .dk-features li { color: #1f2937; }[data-theme="dark"] .dk-card-white .dk-features li { color: #d1d5db; }.dk-card-primary .dk-features li { color: #ffffff; }.dk-features li.dk-disabled {    color: #9ca3af;}[data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"]
/* Testimonials */    100% { transform: translateX(calc(-50% - 1rem)); }}.stars {    color: #fbbf24;    margin-bottom: 1rem;    font-size: 1.2rem;}.quote {    font-size: 1.1rem;    font-style: normal;    margin-bottom: 2rem;    color: var(--text-main);}.author {    display: flex;    align-items: center;    gap: 1rem;}.author img {    width: 50px;    height: 50px;    border-radius: 50%;}.author h4 {    margin: 0;    font-size: 1rem;}.author span {    font-size: 0.875rem;    color: var(--text-muted);}/* FAQ */.faq-container {    max-width: 800px;    margin: 0 auto;    display: flex;    flex-direction: column;    gap: 1rem;}.faq-item {    overflow: hidden;}.faq-question {    width: 100%;    text-align: left;    padding: 1.5rem 2rem;    background: none;    border: none;    font-size: 1.1rem;    font-weight: 600;    font-family: var(--font-sans);    color: var(--text-main);    cursor: pointer;    display: flex;    justify-content: space-between;    align-items: center;}.faq-question i {    transition: var(--transition);}.faq-item.active .faq-question i {    transform: rotate(180deg);}.faq-answer {    padding: 0 2rem;    max-height: 0;    overflow: hidden;    transition: max-height 0.3s ease;}.faq-item.active .faq-answer {    padding-bottom: 1.5rem;}/* CTA Bottom */.cta-card {    padding: 4rem 2rem;    background: linear-gradient(135deg, rgba(90, 50, 250, 0.1), rgba(0, 210, 255, 0.1));}[data-theme="dark"] .cta-card {    background: linear-gradient(135deg, rgba(122, 92, 255, 0.1), rgba(0, 229, 255, 0.1));}.cta-card h2 {    font-size: 2.5rem;    margin-bottom: 1rem;}.cta-card p {    font-size: 1.1rem;    max-width: 600px;    margin: 0 auto 2.5rem;}.cta-buttons {    display: flex;    flex-direction: column;    align-items: center;}/* Footer */.footer {    background: var(--bg-alt);    padding: 5rem 0 2rem;    border-top: 1px solid var(--surface-border);}.footer-grid {    display: grid;    grid-template-columns: 2fr 1fr 1fr 1fr;    gap: 4rem;    margin-bottom: 4rem;}.footer-brand p {    margin: 1.5rem 0;    max-width: 300px;}.social-links {    display: flex;    gap: 1rem;}.social-links a {    width: 40px;    height: 40px;    border-radius: 50%;    background: var(--surface);    display: flex;    align-items: center;    justify-content: center;    color: var(--text-main);    border: 1px solid var(--surface-border);}.social-links a:hover {    background: var(--primary);    color: white;    border-color: var(--primary);}.footer-links h3 {    font-size: 1.1rem;    margin-bottom: 1.5rem;}.footer-links ul li {    margin-bottom: 0.75rem;}.footer-links ul a {    color: var(--text-muted);}.footer-links ul a:hover {    color: var(--primary);}.footer-bottom {    display: flex;    justify-content: space-between;    align-items: center;    padding-top: 2rem;    border-top: 1px solid var(--surface-border);}.footer-lang {    display: flex;    align-items: center;    gap: 0.5rem;    color: var(--text-muted);}.footer-lang select {    background: transparent;    border: none;    color: var(--text-main);    font-family: inherit;    font-weight: 500;    outline: none;}/* Animations */.fade-in-up {    animation: fadeInUp 0.3s ease-out forwards;    /* opacity: 0; removed to avoid initial blank screen */    transform: translateY(10px);}.delay-1 { animation-delay: 0.2s; }@keyframes fadeInUp {    to {        opacity: 1;        transform: translateY(0);    }}/* --- Auth Page Styles --- */.back-btn {    position: absolute;    top: 2rem;    left: 2rem;    display: flex;    align-items: center;    gap: 0.5rem;    color: var(--text-main);    text-decoration: none;    font-weight: 600;    font-size: 0.95rem;    padding: 0.5rem 1rem;    border-radius: var(--radius-full);    background: var(--glass-bg);    border: 1px solid var(--glass-border);    backdrop-filter: blur(10px);    -webkit-backdrop-filter: blur(10px);    transition: var(--transition);    z-index: 50;}.back-btn:hover {    background: var(--bg-alt);    transform: translateX(-5px);}.auth-page {    display: flex;    align-items: center;    justify-content: center;    min-height: 100vh;    padding: 2rem;    position: relative;    overflow-x: hidden;}.auth-container {    width: 100%;    max-width: 450px;    position: relative;    z-index: 10;    display: flex;    flex-direction: column;    align-items: center;}.auth-logo {    margin-bottom: 2rem;    font-size: 1.5rem;}.auth-card {    width: 100%;    padding: 2.5rem;    background: var(--glass-bg);    border: 1px solid var(--glass-border);    backdrop-filter: blur(16px);    -webkit-backdrop-filter: blur(16px);    border-radius: var(--radius-lg);    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);}.auth-tabs {    display: flex;    margin-bottom: 2rem;    background: rgba(0, 0, 0, 0.05);    border-radius: var(--radius-md);    padding: 0.25rem;}[data-theme="dark"] .auth-tabs {    background: rgba(255, 255, 255, 0.05);}.auth-tab {    flex: 1;    padding: 0.75rem;    text-align: center;    border: none;    background: transparent;    color: var(--text-muted);    font-weight: 600;    font-size: 0.95rem;    border-radius: var(--radius-md);    cursor: pointer;    transition: var(--transition);}.auth-tab.active {    background: var(--bg-main);    color: var(--text-main);    box-shadow: 0 2px 5px rgba(0,0,0,0.05);}.auth-form {    display: none;    animation: fadeInUp 0.4s ease forwards;}.auth-form.active {    display: block;}.form-group {    margin-bottom: 1.25rem;}.form-group label {    display: block;    margin-bottom: 0.5rem;    font-weight: 500;    font-size: 0.9rem;    color: var(--text-main);}.label-row {    display: flex;    justify-content: space-between;    align-items: center;}.forgot-password {    font-size: 0.8rem;    color: var(--primary);    text-decoration: none;}.forgot-password:hover {    text-decoration: underline;}.form-group input {    width: 100%;    padding: 0.75rem 1rem;    border: 1px solid var(--surface-border);    border-radius: var(--radius-md);    background: var(--bg-main);    color: var(--text-main);    font-family: inherit;    font-size: 1rem;    transition: var(--transition);}.form-group input:focus {    outline: none;    border-color: var(--primary);    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);}.auth-divider {    display: flex;    align-items: center;    text-align: center;    margin: 1.5rem 0;}.auth-divider::before,.auth-divider::after {    content: '';    flex: 1;    border-bottom: 1px solid var(--surface-border);}.auth-divider span {    padding: 0 1rem;    color: var(--text-muted);    font-size: 0.85rem;    font-weight: 500;}.google-btn {    display: flex;    align-items: center;    justify-content: center;    gap: 0.5rem;    background: var(--bg-main);    border: 1px solid var(--surface-border);    color: var(--text-main);}.google-btn i {    font-size: 1.25rem;    color: #DB4437; /* Google red just for a little color, or leave generic */}.auth-footer {    margin-top: 1.5rem;    text-align: center;    font-size: 0.85rem;    color: var(--text-muted);}.auth-footer a {    color: var(--primary);    text-decoration: none;}.theme-btn-fixed {    position: fixed;    bottom: 2rem;    right: 2rem;}/* Responsive Design */@media (max-width: 992px) {    .hero-container {        grid-template-columns: 1fr;        text-align: center;    }    .hero-content h1 {        /* Géré par clamp() désormais */    }    .hero-content p {        margin: 0 auto 2.5rem;    }    .hero-cta {        justify-content: center;    }    .hero-social-proof {        flex-direction: row;        justify-content: center;        align-items: center;        gap: 0.75rem;    }    .rating-text {        align-items: flex-start;        text-align: left;        gap: 0.1rem;    }    .avatars img {        width: 34px;        height: 34px;        margin-left: -10px;        border-width: 2px;    }    .hero-rating {        font-size: 1rem;    }    .hero-social-proof p {        white-space: normal;        font-size: 0.85rem;        line-height: 1.3;        margin: 0;        padding: 0;        text-align: left;    }        .footer-grid {        grid-template-columns: 1fr 1fr;    }}@media (max-width: 768px) {    .nav-links,    .login-link,    .nav-actions .btn-primary {        display: none;    }    /* Mobile Menu Full Width Implementation */    .navbar.menu-active .nav-links {        display: flex;        flex-direction: column;        position: absolute;        top: 64px; /* Height of the mobile navbar */        left: 0;        width: 100%;        margin: 0; /* Override desktop margin-right */        padding: 2rem 0;        background: var(--glass-bg);        backdrop-filter: blur(16px);        -webkit-backdrop-filter: blur(16px);        border-bottom: 1px solid var(--surface-border);        box-shadow: var(--glass-shadow);        gap: 2rem;        align-items: center;        justify-content: center;    }    .navbar.menu-active .nav-links a {        font-size: 1.1rem;        width: 100%;        text-align: center;        padding: 0.5rem 0;    }    .nav-actions {        gap: 12px;    }    .nav-container {        padding: 0 20px;    }    .back-btn {        top: 1rem;        left: 1rem;        padding: 0.4rem 0.8rem;        font-size: 0.85rem;    }    .mobile-menu-btn {        display: block;        margin-left: 4px;    }    .h2 {        font-size: 2rem;    }    .navbar {        height: 64px;    }    .logo {        font-size: 1.15rem;    }    .logo-icon {        width: 28px;        height: 28px;        min-width: 28px;    }    /* Mobile Hero Optimization */    .hero {        padding: 6.5rem 20px 4rem;        min-height: auto; /* Allow natural flow, remove huge empty spaces */    }    .hero-content .badge { font-size: 11.5px; padding: 5px 12px; margin: 0 auto 24px; display: inline-flex; text-align: center; line-height: 1.25; }
    .hero-content h1 {        font-size: clamp(30px, 8vw, 36px);        line-height: 1.25;        margin-bottom: 20px;        text-wrap: balance;    }    .hero-content h1 br {        display: none; /* Let the text flow and balance naturally on mobile */    }    .hero-content p {        font-size: 16px;        line-height: 1.55;        max-width: 330px;        margin: 0 auto 28px;    }    .hero-cta {        display: flex;        justify-content: center;        margin-bottom: 32px;    }    .hero-cta .btn {        width: auto;        min-width: 260px;        max-width: 100%;        height: 56px;        padding: 0 24px;        display: flex;        align-items: center;        justify-content: center;        gap: 12px;        font-size: 16px;        font-weight: 600;        white-space: nowrap;        border-radius: 999px;    }    /* Social Proof Mobile Horizontal Layout */    .hero-social-proof {        display: flex;        flex-direction: row;        align-items: center;        justify-content: center;        gap: 12px;        max-width: 340px;        margin: 0 auto;    }    .rating-text {        display: flex;        flex-direction: column;        align-items: flex-start;        text-align: left;        gap: 0.25rem;    }    .hero-social-proof p, .hero-social-proof span {        text-align: left;        font-size: 0.85rem;        max-width: 100%;        margin: 0;    }    .price-card.popular {        transform: none;    }    .step-line {        left: 24px;    }}@media (max-width: 576px) {    .footer-grid {        grid-template-columns: 1fr;        gap: 2rem;    }    .footer-bottom {        flex-direction: column;        gap: 1rem;        text-align: center;    }    .hero-content h1 {        /* Géré par clamp() désormais */    }}/* Voice Previews Section */
.voice-previews {
    position: relative;
    overflow: hidden;
}
.audio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

@media (min-width: 1024px) {
    .audio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1023px) and (min-width: 768px) {
    .audio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .audio-grid {
        grid-template-columns: 1fr;
    }
}

.voice-card-premium {
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
[data-theme="dark"] .voice-card-premium {
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.voice-card-premium:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 190, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 190, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);
}

.voice-avatar-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 1.25rem;
    padding: 3px;
    background: rgba(0, 190, 255, 0.05);
    border: 1px solid rgba(0, 190, 255, 0.15);
    box-shadow: 0 4px 10px rgba(0, 190, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.voice-info {
    margin-bottom: 1.5rem;
}

.voice-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.2rem;
    letter-spacing: -0.01em;
}

.voice-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
}

.voice-play-btn {
    width: 100%;
    background: rgba(0, 190, 255, 0.04);
    color: #007bb5; /* Bleu cyan élégant et lisible */
    border: 1px solid rgba(0, 190, 255, 0.15);
    padding: 0.65rem 1.25rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background 0.25s ease, border-color 0.25s ease;
    font-family: inherit;
}
[data-theme="dark"] .voice-play-btn {
    color: #00d2ff;
}

.voice-play-btn:hover, .voice-card-premium:hover .voice-play-btn {
    background: rgba(0, 190, 255, 0.08);
    border-color: rgba(0, 190, 255, 0.25);
    color: #006b9e;
}
[data-theme="dark"] .voice-play-btn:hover, [data-theme="dark"] .voice-card-premium:hover .voice-play-btn {
    color: #00e5ff;
}

.voice-card-premium.is-playing .voice-play-btn {
    background: rgba(0, 190, 255, 0.12);
    border-color: rgba(0, 190, 255, 0.35);
    color: #006b9e;
}
[data-theme="dark"] .voice-card-premium.is-playing .voice-play-btn {
    color: #00e5ff;
}

.voice-card-premium.is-playing .voice-avatar-wrapper {
    border-color: rgba(0, 190, 255, 0.4);
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 210, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); }
}

/* Features Section */    .features-grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 2rem;}.feature-card {    padding: 2rem;    background: var(--surface);    border: 1px solid var(--surface-border);    border-radius: 24px; /* Slightly softer premium corners */    transition: var(--transition);    display: flex;    flex-direction: column;    height: 100%; /* Ensures equal height strictly */}.feature-card:hover {    transform: translateY(-5px);    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05); /* Premium soft hover shadow */}.feature-icon {    width: 54px;    height: 54px;    border-radius: 14px;    background: var(--primary-light);    color: var(--primary);    display: flex;    align-items: center;    justify-content: center;    font-size: 1.5rem;    margin-bottom: 1.25rem;}.feature-card h3 {    margin-bottom: 0.75rem;    font-size: 1.15rem;    font-weight: 700;    line-height: 1.3;}.feature-card p {    margin-bottom: 0;    font-size: 0.95rem;    line-height: 1.6; /* Comfortable reading */    color: var(--text-muted);}@media (max-width: 1024px) {    .features-grid {        grid-template-columns: repeat(2, 1fr);        gap: 1.5rem;    }}@media (max-width: 768px) {    .features-grid {        grid-template-columns: 1fr;        gap: 1.25rem;    }    .feature-card {        padding: 1.5rem;    }    .feature-icon {        margin-bottom: 1rem;    }}    /* How it Works */.steps-container {    display: flex;    flex-direction: column;    gap: 3rem;    position: relative;    max-width: 800px;    margin: 0 auto;}.step-line {    position: absolute;    top: 0;    bottom: 0;    left: 24px;    width: 2px;    background: var(--surface-border);    z-index: 0;}.step {    display: flex;    gap: 2rem;    position: relative;    z-index: 1;}.step-number {    width: 50px;    height: 50px;    border-radius: 50%;    background: var(--gradient-brand);    color: white;    display: flex;    align-items: center;    justify-content: center;    font-size: 1.5rem;    font-weight: bold;    flex-shrink: 0;    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);}.step-content {    background: var(--surface);    padding: 2rem;    border-radius: var(--radius-lg);    border: 1px solid var(--surface-border);    flex: 1;}[data-theme="dark"] .step-content {    background: var(--glass-bg);}/* Voice Demos */.demos-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));    gap: 2rem;}.demo-card {    position: relative;    height: 350px;    border-radius: var(--radius-lg);    overflow: hidden;    background-size: cover;    background-position: center;    padding: 1.5rem;    display: flex;    flex-direction: column;    justify-content: space-between;    transition: var(--transition);}.demo-card:hover {    transform: translateY(-5px);    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);}.demo-card::before {    content: '';    position: absolute;    inset: 0;    background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.7));    z-index: 1;}.demo-top-label {    position: relative;    z-index: 2;    background: transparent;    color: #fff;    font-weight: 500;    font-size: 1.1rem;    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}.demo-player {    position: relative;    z-index: 2;    display: flex;    align-items: center;    justify-content: space-between;    padding: 1rem 1.5rem;    background: rgba(255, 255, 255, 0.2);    backdrop-filter: blur(10px);    -webkit-backdrop-filter: blur(10px);    border: 1px solid rgba(255, 255, 255, 0.3);    border-radius: 3rem;}.demo-info h4 {    margin: 0 0 0.25rem 0;    font-size: 1.1rem;    color: #fff;}.demo-info p {    margin: 0;    font-size: 0.85rem;    color: rgba(255, 255, 255, 0.8);}.demo-play-btn {    width: 45px;    height: 45px;    border-radius: 50%;    background: #fff;    color: #000;    border: none;    display: flex;    align-items: center;    justify-content: center;    font-size: 1.2rem;    cursor: pointer;    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);    transition: var(--transition);    flex-shrink: 0;}.demo-play-btn:hover {    transform: scale(1.05);}/* Pricing DailyKash Style */.pricing-grid.dk-style {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));    gap: 2rem;    align-items: stretch;    max-width: 1200px;    margin: 0 auto;}.dk-card {    padding: 3rem 2.5rem;    border-radius: 1.5rem;    position: relative;    display: flex;    flex-direction: column;}.dk-card-white {    background: #ffffff;    border: 1px solid #e5e7eb;    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);    color: #111827;}[data-theme="dark"] .dk-card-white {    background: #1f2937;    border-color: #374151;    color: #f9fafb;}.dk-card-primary {    background: var(--gradient-brand);    color: #ffffff;    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);}[data-theme="dark"] .dk-card-primary {    background: var(--gradient-brand);}.dk-badge {    display: inline-block;    padding: 0.25rem 0.75rem;    border-radius: 1rem;    font-size: 0.75rem;    font-weight: 700;    letter-spacing: 0.05em;    margin-bottom: 1.5rem;    align-self: flex-start;}.dk-badge-gray {    background: #f3f4f6;    color: #6b7280;}[data-theme="dark"] .dk-badge-gray {    background: #374151;    color: #9ca3af;}.dk-badge-white-trans {    background: rgba(255, 255, 255, 0.2);    color: #ffffff;}.dk-recommended-badge {    position: absolute;    top: -12px;    left: 50%;    transform: translateX(-50%);    background: #f59e0b;    color: #ffffff;    padding: 0.25rem 1rem;    border-radius: 1rem;    font-size: 0.75rem;    font-weight: 700;    display: flex;    align-items: center;    gap: 0.25rem;    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);}.dk-card h3 {    font-size: 1.75rem;    font-weight: 800;    margin-bottom: 0.5rem;}.dk-card-white h3 { color: #111827; }[data-theme="dark"] .dk-card-white h3 { color: #f9fafb; }.dk-card-primary h3 { color: #ffffff; }.dk-subtitle {    font-size: 0.95rem;    line-height: 1.5;    margin-bottom: 2rem;    min-height: 3rem;}.dk-card-white .dk-subtitle { color: #6b7280; }[data-theme="dark"] .dk-card-white .dk-subtitle { color: #9ca3af; }.dk-card-primary .dk-subtitle { color: rgba(255, 255, 255, 0.9); }.dk-price-container {    display: flex;    align-items: baseline;    gap: 0.5rem;    margin-bottom: 0.25rem;}.dk-price {    font-size: 3.5rem;    font-weight: 800;    line-height: 1;}.dk-price-right {    display: flex;    flex-direction: column;}.dk-currency {    font-size: 1rem;    font-weight: 600;}.dk-price-note {    font-size: 0.85rem;    margin-bottom: 2rem;}.dk-card-white .dk-price-note { color: #6b7280; }[data-theme="dark"] .dk-card-white .dk-price-note { color: #9ca3af; }.dk-card-primary .dk-price-note { color: rgba(255, 255, 255, 0.8); }.dk-features {    flex-grow: 1;    margin-bottom: 2.5rem;}.dk-features li {    display: flex;    align-items: center;    gap: 0.75rem;    margin-bottom: 1rem;    font-size: 0.95rem;    font-weight: 500;}.dk-features li i {    font-size: 1.25rem;}.dk-icon-primary { color: var(--primary); }.dk-icon-white { color: #ffffff; }.dk-icon-gray { color: #9ca3af; }.dk-card-white .dk-features li { color: #1f2937; }[data-theme="dark"] .dk-card-white .dk-features li { color: #d1d5db; }.dk-card-primary .dk-features li { color: #ffffff; }.dk-features li.dk-disabled {    color: #9ca3af;}[data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"] [data-theme="dark"]
/* Testimonials */    100% { transform: translateX(calc(-50% - 1rem)); }}.stars {    color: #fbbf24;    margin-bottom: 1rem;    font-size: 1.2rem;}.quote {    font-size: 1.1rem;    font-style: normal;    margin-bottom: 2rem;    color: var(--text-main);}.author {    display: flex;    align-items: center;    gap: 1rem;}.author img {    width: 50px;    height: 50px;    border-radius: 50%;}.author h4 {    margin: 0;    font-size: 1rem;}.author span {    font-size: 0.875rem;    color: var(--text-muted);}/* FAQ */.faq-container {    max-width: 800px;    margin: 0 auto;    display: flex;    flex-direction: column;    gap: 1rem;}.faq-item {    overflow: hidden;}.faq-question {    width: 100%;    text-align: left;    padding: 1.5rem 2rem;    background: none;    border: none;    font-size: 1.1rem;    font-weight: 600;    font-family: var(--font-sans);    color: var(--text-main);    cursor: pointer;    display: flex;    justify-content: space-between;    align-items: center;}.faq-question i {    transition: var(--transition);}.faq-item.active .faq-question i {    transform: rotate(180deg);}.faq-answer {    padding: 0 2rem;    max-height: 0;    overflow: hidden;    transition: max-height 0.3s ease;}.faq-item.active .faq-answer {    padding-bottom: 1.5rem;}/* CTA Bottom */.cta-card {    padding: 4rem 2rem;    background: linear-gradient(135deg, rgba(90, 50, 250, 0.1), rgba(0, 210, 255, 0.1));}[data-theme="dark"] .cta-card {    background: linear-gradient(135deg, rgba(122, 92, 255, 0.1), rgba(0, 229, 255, 0.1));}.cta-card h2 {    font-size: 2.5rem;    margin-bottom: 1rem;}.cta-card p {    font-size: 1.1rem;    max-width: 600px;    margin: 0 auto 2.5rem;}.cta-buttons {    display: flex;    flex-direction: column;    align-items: center;}/* Footer */.footer {    background: var(--bg-alt);    padding: 5rem 0 2rem;    border-top: 1px solid var(--surface-border);}.footer-grid {    display: grid;    grid-template-columns: 2fr 1fr 1fr 1fr;    gap: 4rem;    margin-bottom: 4rem;}.footer-brand p {    margin: 1.5rem 0;    max-width: 300px;}.social-links {    display: flex;    gap: 1rem;}.social-links a {    width: 40px;    height: 40px;    border-radius: 50%;    background: var(--surface);    display: flex;    align-items: center;    justify-content: center;    color: var(--text-main);    border: 1px solid var(--surface-border);}.social-links a:hover {    background: var(--primary);    color: white;    border-color: var(--primary);}.footer-links h3 {    font-size: 1.1rem;    margin-bottom: 1.5rem;}.footer-links ul li {    margin-bottom: 0.75rem;}.footer-links ul a {    color: var(--text-muted);}.footer-links ul a:hover {    color: var(--primary);}.footer-bottom {    display: flex;    justify-content: space-between;    align-items: center;    padding-top: 2rem;    border-top: 1px solid var(--surface-border);}.footer-lang {    display: flex;    align-items: center;    gap: 0.5rem;    color: var(--text-muted);}.footer-lang select {    background: transparent;    border: none;    color: var(--text-main);    font-family: inherit;    font-weight: 500;    outline: none;}/* Animations */.fade-in-up {    animation: fadeInUp 0.3s ease-out forwards;    /* opacity: 0; removed to avoid initial blank screen */    transform: translateY(10px);}.delay-1 { animation-delay: 0.2s; }@keyframes fadeInUp {    to {        opacity: 1;        transform: translateY(0);    }}/* --- Auth Page Styles --- */.back-btn {    position: absolute;    top: 2rem;    left: 2rem;    display: flex;    align-items: center;    gap: 0.5rem;    color: var(--text-main);    text-decoration: none;    font-weight: 600;    font-size: 0.95rem;    padding: 0.5rem 1rem;    border-radius: var(--radius-full);    background: var(--glass-bg);    border: 1px solid var(--glass-border);    backdrop-filter: blur(10px);    -webkit-backdrop-filter: blur(10px);    transition: var(--transition);    z-index: 50;}.back-btn:hover {    background: var(--bg-alt);    transform: translateX(-5px);}.auth-page {    display: flex;    align-items: center;    justify-content: center;    min-height: 100vh;    padding: 2rem;    position: relative;    overflow-x: hidden;}.auth-container {    width: 100%;    max-width: 450px;    position: relative;    z-index: 10;    display: flex;    flex-direction: column;    align-items: center;}.auth-logo {    margin-bottom: 2rem;    font-size: 1.5rem;}.auth-card {    width: 100%;    padding: 2.5rem;    background: var(--glass-bg);    border: 1px solid var(--glass-border);    backdrop-filter: blur(16px);    -webkit-backdrop-filter: blur(16px);    border-radius: var(--radius-lg);    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);}.auth-tabs {    display: flex;    margin-bottom: 2rem;    background: rgba(0, 0, 0, 0.05);    border-radius: var(--radius-md);    padding: 0.25rem;}[data-theme="dark"] .auth-tabs {    background: rgba(255, 255, 255, 0.05);}.auth-tab {    flex: 1;    padding: 0.75rem;    text-align: center;    border: none;    background: transparent;    color: var(--text-muted);    font-weight: 600;    font-size: 0.95rem;    border-radius: var(--radius-md);    cursor: pointer;    transition: var(--transition);}.auth-tab.active {    background: var(--bg-main);    color: var(--text-main);    box-shadow: 0 2px 5px rgba(0,0,0,0.05);}.auth-form {    display: none;    animation: fadeInUp 0.4s ease forwards;}.auth-form.active {    display: block;}.form-group {    margin-bottom: 1.25rem;}.form-group label {    display: block;    margin-bottom: 0.5rem;    font-weight: 500;    font-size: 0.9rem;    color: var(--text-main);}.label-row {    display: flex;    justify-content: space-between;    align-items: center;}.forgot-password {    font-size: 0.8rem;    color: var(--primary);    text-decoration: none;}.forgot-password:hover {    text-decoration: underline;}.form-group input {    width: 100%;    padding: 0.75rem 1rem;    border: 1px solid var(--surface-border);    border-radius: var(--radius-md);    background: var(--bg-main);    color: var(--text-main);    font-family: inherit;    font-size: 1rem;    transition: var(--transition);}.form-group input:focus {    outline: none;    border-color: var(--primary);    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);}.auth-divider {    display: flex;    align-items: center;    text-align: center;    margin: 1.5rem 0;}.auth-divider::before,.auth-divider::after {    content: '';    flex: 1;    border-bottom: 1px solid var(--surface-border);}.auth-divider span {    padding: 0 1rem;    color: var(--text-muted);    font-size: 0.85rem;    font-weight: 500;}.google-btn {    display: flex;    align-items: center;    justify-content: center;    gap: 0.5rem;    background: var(--bg-main);    border: 1px solid var(--surface-border);    color: var(--text-main);}.google-btn i {    font-size: 1.25rem;    color: #DB4437; /* Google red just for a little color, or leave generic */}.auth-footer {    margin-top: 1.5rem;    text-align: center;    font-size: 0.85rem;    color: var(--text-muted);}.auth-footer a {    color: var(--primary);    text-decoration: none;}.theme-btn-fixed {    position: fixed;    bottom: 2rem;    right: 2rem;}/* Responsive Design */@media (max-width: 992px) {    .hero-container {        grid-template-columns: 1fr;        text-align: center;    }    .hero-content h1 {        /* Géré par clamp() désormais */    }    .hero-content p {        margin: 0 auto 2.5rem;    }    .hero-cta {        justify-content: center;    }    .hero-social-proof {        flex-direction: row;        justify-content: center;        align-items: center;        gap: 0.75rem;    }    .rating-text {        align-items: flex-start;        text-align: left;        gap: 0.1rem;    }    .avatars img {        width: 34px;        height: 34px;        margin-left: -10px;        border-width: 2px;    }    .hero-rating {        font-size: 1rem;    }    .hero-social-proof p {        white-space: normal;        font-size: 0.85rem;        line-height: 1.3;        margin: 0;        padding: 0;        text-align: left;    }        .footer-grid {        grid-template-columns: 1fr 1fr;    }}@media (max-width: 768px) {    .nav-links,    .login-link,    .nav-actions .btn-primary {        display: none;    }    /* Mobile Menu Full Width Implementation */    .navbar.menu-active .nav-links {        display: flex;        flex-direction: column;        position: absolute;        top: 60px; /* Height of the mobile navbar */        left: 0;        width: 100%;        margin: 0; /* Override desktop margin-right */        padding: 2rem 0;        background: var(--glass-bg);        backdrop-filter: blur(16px);        -webkit-backdrop-filter: blur(16px);        border-bottom: 1px solid var(--surface-border);        box-shadow: var(--glass-shadow);        gap: 2rem;        align-items: center;        justify-content: center;    }    .navbar.menu-active .nav-links a {        font-size: 1.1rem;        width: 100%;        text-align: center;        padding: 0.5rem 0;    }    .nav-actions {        gap: 12px;    }    .nav-container {        padding: 0 20px;    }    .back-btn {        top: 1rem;        left: 1rem;        padding: 0.4rem 0.8rem;        font-size: 0.85rem;    }    .mobile-menu-btn {        display: block;        margin-left: 4px;    }    .h2 {        font-size: 2rem;    }    .navbar {        height: 60px;    }    .logo {        font-size: 1.15rem;    }    .logo-icon {        width: 28px;        height: 28px;        min-width: 28px;    }    /* Mobile Hero Optimization */    .hero {        padding: 6.5rem 20px 4rem;        min-height: auto; /* Allow natural flow, remove huge empty spaces */    }    .hero-content .badge { font-size: 11.5px; padding: 5px 12px; margin: 0 auto 24px; display: inline-flex; text-align: center; line-height: 1.25; }    .hero-content h1 {        font-size: clamp(30px, 8vw, 36px);        line-height: 1.25;        margin-bottom: 20px;        text-wrap: balance;    }    .hero-content h1 br {        display: none; /* Let the text flow and balance naturally on mobile */    }    .hero-content p {        font-size: 16px;        line-height: 1.55;        max-width: 330px;        margin: 0 auto 28px;    }    .hero-cta {        display: flex;        justify-content: center;        margin-bottom: 32px;    }    .hero-cta .btn {        width: auto;        min-width: 260px;        max-width: 100%;        height: 56px;        padding: 0 24px;        display: flex;        align-items: center;        justify-content: center;        gap: 12px;        font-size: 16px;        font-weight: 600;        white-space: nowrap;        border-radius: 999px;    }    /* Social Proof Mobile Horizontal Layout */    .hero-social-proof {        display: flex;        flex-direction: row;        align-items: center;        justify-content: center;        gap: 12px;        max-width: 340px;        margin: 0 auto;    }    .rating-text {        display: flex;        flex-direction: column;        align-items: flex-start;        text-align: left;        gap: 0.25rem;    }    .hero-social-proof p, .hero-social-proof span {        text-align: left;        font-size: 0.85rem;        max-width: 100%;        margin: 0;    }    .price-card.popular {        transform: none;    }    .step-line {        left: 24px;    }}@media (max-width: 576px) {    .footer-grid {        grid-template-columns: 1fr;        gap: 2rem;    }    .footer-bottom {        flex-direction: column;        gap: 1rem;        text-align: center;    }    .hero-content h1 {        /* Géré par clamp() désormais */    }}/* Voice Previews Section */.voice-previews {    position: relative;    overflow: hidden;}.audio-grid {    display: grid;    grid-template-columns: repeat(1, 1fr);    gap: 1.5rem;    margin-top: 2rem;}@media (min-width: 768px) {    .audio-grid {        grid-template-columns: repeat(2, 1fr);    }}@media (min-width: 1024px) {    .audio-grid {        grid-template-columns: repeat(3, 1fr);    }}.audio-card-wrapper {    display: flex;    flex-direction: column;    gap: 1.5rem; /* ~24px spacing to title */    align-items: center;}/* Voice Spheres */.sphere-container {    position: relative;    width: 220px;    height: 220px;    margin: 0 auto;    cursor: pointer;    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}.sphere-container:hover {    transform: scale(1.02);}.voice-sphere {    position: absolute;    top: 0; left: 0;    width: 100%;    height: 100%;    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;    box-shadow:        inset -15px -15px 30px rgba(0, 0, 0, 0.05),        inset 15px 15px 30px rgba(255, 255, 255, 0.15),        0 15px 30px rgba(0, 0, 0, 0.05);    overflow: hidden;    /* Reacts to Web Audio API */    --audio-scale: 1;    --audio-intensity: 0;    transform: scale(var(--audio-scale));    transition: box-shadow 0.4s ease;    animation: organic-breathe 10s ease-in-out infinite alternate;}/* Internal luminous matter */.voice-sphere::before {    content: '';    position: absolute;    top: -50%; left: -50%;    width: 200%; height: 200%;    mix-blend-mode: screen;    opacity: calc(0.4 + var(--audio-intensity) * 0.6);    transition: opacity 0.1s ease-out;}/* 1. NARRATEUR: bleu / cyan */.audio-card-wrapper:nth-child(1) .voice-sphere {    background: radial-gradient(circle at 40% 40%, #2563eb 0%, #1e3a8a 70%, #0f172a 100%);    animation-delay: 0s;}.audio-card-wrapper:nth-child(1) .voice-sphere::before {    background: radial-gradient(circle at 30% 30%, #38bdf8 0%, transparent 45%),                radial-gradient(circle at 70% 70%, #06b6d4 0%, transparent 45%);    animation: rotate-liquid 20s linear infinite;}/* 2. PUBLICITÉ: bleu / indigo plus lumineux */.audio-card-wrapper:nth-child(2) .voice-sphere {    background: radial-gradient(circle at 40% 40%, #3730a3 0%, #312e81 70%, #0f172a 100%);    animation-delay: -3s;}.audio-card-wrapper:nth-child(2) .voice-sphere::before {    background: radial-gradient(circle at 30% 60%, #818cf8 0%, transparent 50%),                radial-gradient(circle at 70% 40%, #60a5fa 0%, transparent 50%);    animation: rotate-liquid 18s linear infinite reverse;}/* 3. PODCAST: bleu profond / cyan doux */.audio-card-wrapper:nth-child(3) .voice-sphere {    background: radial-gradient(circle at 40% 40%, #1e3a8a 0%, #172554 70%, #0f172a 100%);    animation-delay: -6s;}.audio-card-wrapper:nth-child(3) .voice-sphere::before {    background: radial-gradient(circle at 60% 30%, #22d3ee 0%, transparent 40%),                radial-gradient(circle at 40% 80%, #3b82f6 0%, transparent 40%);    animation: rotate-liquid 22s linear infinite;}.sphere-container:hover .voice-sphere {    box-shadow:        inset -15px -15px 30px rgba(0, 0, 0, 0.05),        inset 15px 15px 30px rgba(255, 255, 255, 0.25),        0 25px 50px rgba(0, 0, 0, 0.05);}.sphere-container.is-playing .voice-sphere {    /* Subtle outer glow that reacts to audio intensity */    box-shadow:        inset -15px -15px 30px rgba(0, 0, 0, 0.05),        inset 15px 15px 30px rgba(255, 255, 255, 0.25),        0 20px 50px rgba(0, 0, 0, 0.05) * 0.4));}/* Subtle border deformation */@keyframes organic-breathe {    0% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }    33% { border-radius: 51% 49% 48% 52% / 49% 51% 49% 51%; }    66% { border-radius: 49% 51% 52% 48% / 52% 49% 51% 49%; }    100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }}/* Rotation of internal gradients */@keyframes rotate-liquid {    0% { transform: rotate(0deg) scale(1); }    50% { transform: rotate(180deg) scale(1.1); }    100% { transform: rotate(360deg) scale(1); }}.play-pause-btn {    position: absolute;    top: 50%; left: 50%;    transform: translate(-50%, -50%);    z-index: 10;    width: 60px;    height: 60px;    border-radius: 50%;    background: rgba(255, 255, 255, 0.15);    border: 1px solid rgba(255, 255, 255, 0.3);    color: #ffffff;    display: flex;    align-items: center;    justify-content: center;    font-size: 1.75rem;    pointer-events: none;    transition: all 0.3s ease;    backdrop-filter: blur(4px);    -webkit-backdrop-filter: blur(4px);    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);}.sphere-container:hover .play-pause-btn {    background: rgba(255, 255, 255, 0.25);    transform: translate(-50%, -50%) scale(1.05); /* maintain centering */}.sphere-container.is-playing .play-pause-btn {    background: rgba(255, 255, 255, 0.1);    border-color: rgba(255, 255, 255, 0.1);    box-shadow: none;}.audio-info-below {    text-align: center;    display: flex;    flex-direction: column;    align-items: center;    gap: 0.75rem;}.voice-name, .audio-info-below h3 {    font-size: 1.25rem;    font-weight: 600;    color: var(--text-main);    font-family: var(--font-display);    margin: 0;    letter-spacing: -0.01em;}@media (prefers-reduced-motion: reduce) {    .voice-sphere {        animation: none !important;        transition: none !important;        --audio-scale: 1 !important;    }}/* --- Atomvoix Loader Component --- */.atom-loader {    display: inline-block;    position: relative;    vertical-align: middle;    --dot-bg: currentColor;    --dot-active: currentColor;}.atom-loader.small { width: 18px; height: 18px; margin-right: 0.5rem; }.atom-loader.medium { width: 32px; height: 32px; margin: 0 auto; color: var(--text-muted); --dot-active: var(--primary); }.atom-loader.large { width: 48px; height: 48px; margin: 0 auto; color: var(--text-muted); --dot-active: var(--primary); }.atom-loader span {    position: absolute;    width: 24%;    height: 24%;    background: var(--dot-bg);    border-radius: 50%;    animation: atom-loader-spin 1.2s linear infinite;    opacity: 0.3;}/* 8 dots radially positioned */.atom-loader span:nth-child(1) { left: 38%; top: 0%;   animation-delay: -1.05s; }.atom-loader span:nth-child(2) { left: 65%; top: 11%;  animation-delay: -0.9s; }.atom-loader span:nth-child(3) { left: 76%; top: 38%;  animation-delay: -0.75s; }.atom-loader span:nth-child(4) { left: 65%; top: 65%;  animation-delay: -0.6s; }.atom-loader span:nth-child(5) { left: 38%; top: 76%;  animation-delay: -0.45s; }.atom-loader span:nth-child(6) { left: 11%; top: 65%;  animation-delay: -0.3s; }.atom-loader span:nth-child(7) { left: 0%;  top: 38%;  animation-delay: -0.15s; }.atom-loader span:nth-child(8) { left: 11%; top: 11%;  animation-delay: 0s; }@keyframes atom-loader-spin {    0%, 100% { opacity: 0.3; transform: scale(1); background: var(--dot-bg); box-shadow: none; }    20% { opacity: 1; transform: scale(1.3); background: rgba(0, 0, 0, 0.05); box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); }}/* Simplified Footer */.footer-grid.simplified {    grid-template-columns: 2fr 1fr 1fr;}@media (max-width: 1024px) {    .footer-grid.simplified {        grid-template-columns: 1fr 1fr;    }}@media (max-width: 576px) {    .footer-grid.simplified {        grid-template-columns: 1fr;    }}/* Legal Pages */.legal-page {    padding: 8rem 0 4rem;    background: var(--bg-main);}.legal-container {    max-width: 1000px;}.legal-header {    margin-bottom: 4rem;}.legal-header h1 {    font-size: 2.5rem;    margin-bottom: 1rem;    font-family: 'Outfit', sans-serif;    color: var(--text-main);}.legal-header p {    font-size: 1.1rem;    color: var(--text-muted);    margin-bottom: 1rem;}.last-updated {    font-size: 0.9rem;    color: var(--primary);    font-weight: 500;}.legal-layout {    display: flex;    gap: 3rem;    align-items: flex-start;}.legal-sidebar {    flex: 0 0 280px;    position: sticky;    top: 100px;}.legal-toc {    padding: 1.5rem;}.legal-toc h3 {    font-size: 1.1rem;    margin-bottom: 1rem;    color: var(--text-main);}.legal-toc ul {    list-style: none;    padding: 0;    margin: 0;}.legal-toc ul li {    margin-bottom: 0.5rem;}.legal-toc ul li:last-child {    margin-bottom: 0;}.legal-toc ul a {    color: var(--text-muted);    text-decoration: none;    font-size: 0.9rem;    transition: var(--transition);}.legal-toc ul a:hover {    color: var(--primary);}.legal-content {    flex: 1;}.legal-content section {    margin-bottom: 3rem;}.legal-content h2 {    font-size: 1.5rem;    margin-bottom: 1rem;    color: var(--text-main);    font-family: 'Outfit', sans-serif;}.legal-content p {    color: var(--text-main);    opacity: 0.8;    line-height: 1.7;    margin-bottom: 1rem;}.legal-content ul {    margin-left: 1.5rem;    margin-bottom: 1rem;    color: var(--text-main);    opacity: 0.8;    line-height: 1.7;}.back-action {    margin-top: 4rem;    padding-top: 2rem;    border-top: 1px solid var(--surface-border);}@media (max-width: 900px) {    .legal-layout {        flex-direction: column;    }    .legal-sidebar {        position: static;        flex: auto;        width: 100%;        margin-bottom: 2rem;    }}/* Language Selector */.lang-selector-container {    position: relative;    display: inline-block;}.lang-toggle-btn {    display: flex !important;    align-items: center !important;    justify-content: center !important;    gap: 0.3rem !important;    padding: 0 0.8rem !important;    width: auto !important;    border-radius: 999px !important;    font-size: 0.95rem !important;}#current-lang-display {    font-size: 0.85rem;    font-weight: 600;    font-family: var(--font-main);}.lang-dropdown {    position: absolute;    top: 130%;    right: 0;    background: var(--surface);    border: 1px solid var(--glass-border);    border-radius: 12px;    box-shadow: var(--shadow-lg);    padding: 0.5rem;    min-width: 140px;    display: flex;    flex-direction: column;    gap: 0.3rem;    opacity: 0;    visibility: hidden;    transform: translateY(10px);    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);    z-index: 1000;}.lang-dropdown.active {    opacity: 1;    visibility: visible;    transform: translateY(0);}.lang-option {    display: flex;    align-items: center;    gap: 0.6rem;    padding: 0.6rem 0.8rem;    border-radius: 8px;    color: var(--text-color);    text-decoration: none;    font-size: 0.9rem;    font-weight: 500;    transition: background 0.2s ease, color 0.2s ease;}.lang-option:hover {    background: var(--surface-hover);    color: var(--primary-color);}/* ========================================================= *//* LOGO TYPOGRAPHY UPDATE                                    *//* ========================================================= */.logo, .sidebar-logo, .auth-logo-white {    font-family: 'Inter', sans-serif !important;    font-weight: 700 !important;
    letter-spacing: -0.03em !important;}

/* ========================================================= */
/* PRICING BUTTONS CLEAN SAAS REDESIGN                       */
/* ========================================================= */

/* Base setup for pricing buttons to overcome any .btn global conflicts */
.dk-card .dk-btn-outline,
.dk-card .dk-btn-white {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* espace texte/flèche : environ 8px */
    height: 52px;
    padding: 0 2rem;
    border-radius: 999px !important;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 200ms ease-out;
    text-decoration: none;
    width: 100%;
    margin-top: auto; /* aligns buttons perfectly at the bottom of the flex card */
    box-shadow: none !important;
}

/* 1. BOUTONS STANDARD (on white card) */
.dk-card-white .dk-btn-outline {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #E2E5EA !important;
}
.dk-card-white .dk-btn-outline i {
    transition: transform 200ms ease-out;
}
.dk-card-white .dk-btn-outline:hover {
    border-color: #C2C8D0 !important; /* bordure légèrement plus foncée */
    transform: translateY(-1px);
    background: #f9fafb !important;
}
.dk-card-white .dk-btn-outline:hover i {
    transform: translateX(2px);
}

/* 2. BOUTON DU PLAN MIS EN AVANT (on colored card) */
.dk-card-primary .dk-btn-white {
    background: #ffffff !important; /* Fond blanc */
    color: #111827 !important; /* Texte et flèche violet/bleu */
    border: 1px solid rgba(255, 255, 255, 0.9) !important; /* Bordure très subtile */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* Ombre très légère */
}
.dk-card-primary .dk-btn-white i {
    transition: transform 200ms ease-out;
}
.dk-card-primary .dk-btn-white:hover {
    background: #f9fafb !important;
    color: #000000 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}
.dk-card-primary .dk-btn-white:hover i {
    transform: translateX(2px);
}

/* Dark mode adjustments */
/* Dark mode adjustments */
[data-theme="dark"] .dk-card-white .dk-btn-outline {
    background: var(--surface) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important; /* Texte blanc cassé lisible */
}
[data-theme="dark"] .dk-card-white .dk-btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important; /* Maintien du texte blanc au survol */
}

/* ========================================================= */
/* COMPACT SAAS PRICING CARDS REDESIGN                       */
/* ========================================================= */

/* 7. Padding des cartes */
.pricing-grid.dk-style .dk-card {
    padding: 2.25rem 2rem !important;
}

/* 1. Titres des plans */
.pricing-grid.dk-style .dk-card h3 {
    font-size: 1.6rem !important;
    margin-bottom: 0.25rem !important;
}

/* 2. Description */
.pricing-grid.dk-style .dk-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1.5rem !important;
    min-height: 2.5rem !important;
}

/* 3. Prix */
.pricing-grid.dk-style .dk-price-container {
    margin-bottom: 0.15rem !important;
}
.pricing-grid.dk-style .dk-price {
    font-size: 2.85rem !important;
}

/* 4. Espacement avant les fonctionnalités */
.pricing-grid.dk-style .dk-price-note {
    margin-bottom: 1.25rem !important;
}

/* 5. Liste des fonctionnalités */
.pricing-grid.dk-style .dk-features {
    margin-bottom: 2rem !important;
}
.pricing-grid.dk-style .dk-features li {
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
    font-size: 0.9rem !important;
}
.pricing-grid.dk-style .dk-features li:last-child {
    margin-bottom: 0 !important;
}

/* 6. Icônes check */
.pricing-grid.dk-style .dk-features li i {
    font-size: 1.1rem !important;
}

/* Responsive adjustments for mobile/tablet */
@media (max-width: 768px) {
    .pricing-grid.dk-style .dk-card {
        padding: 1.75rem 1.5rem !important;
    }
    .pricing-grid.dk-style .dk-price {
        font-size: 2.5rem !important;
    }
}

/* ========================================================= */
/* MOBILE RESPONSIVE OPTIMIZATIONS (Landing Page)            */
/* ========================================================= */
@media (max-width: 768px) {
    /* 1. Global Section Padding Reduction */
    /* Prevents huge empty gaps between sections */
    .section {
        padding: 4rem 0 3rem !important;
    }

    /* Reduces the massive margin under section titles */
    .section-header {
        margin-bottom: 2.5rem !important;
    }

    /* 2. Hero Section */
    .hero {
        padding-top: 5rem !important;
        padding-bottom: 2rem !important;
    }

    /* 3. Audio Previews (Voix IA) */
    .audio-grid {
        gap: 2rem !important;
        margin-top: 1rem !important;
    }

    .audio-card-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Reduce the size of the spheres */
    .sphere-container {
        width: 140px !important;
        height: 140px !important;
        margin: 0 auto !important;
    }

    /* Adjust the text below the spheres to be closer */
    .audio-info-below {
        margin-top: -0.5rem !important;
        gap: 0.5rem !important;
    }

    .audio-info-below h3 {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    /* Extra compaction for very small screens (320px - 480px) */
    .section {
        padding: 3rem 0 2rem !important;
    }

    .section-header {
        margin-bottom: 2rem !important;
    }

    .audio-grid {
        gap: 1.5rem !important;
    }

    .sphere-container {
        width: 130px !important;
        height: 130px !important;
    }
}

/* ========================================================= */
/* COMPREHENSIVE MOBILE RESPONSIVE FIXES (Global)            */
/* ========================================================= */
@media (max-width: 768px) {
    /* 1. Global Viewport & Overflow fixes */

    /* 6. Technologie de pointe & 7. Tarifs */
    /* Force 1 single column on mobile to prevent squishing or overflow */
    .features-grid, .pricing-grid.dk-style {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    /* 8. Témoignages (Testimonials) */
    /* Mobile responsive marquee (horizontal scroll: DROITE -> GAUCHE) */

    /* Restore the duplicated cards for infinite loop */

    /* 9. FAQ */
    .faq-container {
        gap: 0.5rem !important; /* Petit espace vertical entre les éléments */
    }

    .faq-question {
        padding: 1rem 1.25rem !important; /* Réduction drastique des marges internes pour donner plus de place au texte */
        font-size: 0.95rem !important; /* Cible: ~15px pour une parfaite lisibilité sans prendre trop de place */
        line-height: 1.4 !important;
    }

    .faq-answer {
        padding: 0 1.25rem !important; /* Alignement avec le padding de la question */
        font-size: 0.9rem !important;
    }

    .faq-item.active .faq-answer {
        padding-bottom: 1rem !important;
    }

    /* 10. CTA Final */
    .cta-card {
        padding: 2.5rem 1.5rem !important;
    }

    .cta-card h2 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }

    .cta-card p {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
    }
}

/* ========================================================= */
/* GRADIENT UPDATE: BOUTON "MON TABLEAU DE BORD" (HERO CTA)  */
/* ========================================================= */
/* Target the Hero CTA button strictly by its ID */
#hero-main-cta {
    background: linear-gradient(90deg, #2563EB 0%, #0EA5E9 50%, #00D4FF 100%) !important;
    background-size: 100% 100% !important; /* override the 150% from .btn-primary */
    color: #ffffff !important;
    border: none !important;
}

#hero-main-cta:hover {
    background: linear-gradient(90deg, #3B82F6 0%, #38BDF8 50%, #22D3EE 100%) !important;
    color: #ffffff !important;
}

/* ========================================================= */
/* FIX: AUDIO SPHERE VISUAL ARTIFACTS / HALOS                */
/* ========================================================= */
.voice-sphere {
    /*
     * 1. Remove the 'organic-breathe' animation.
     * This animation dynamically distorted the border-radius (e.g. 51% 49%),
     * which caused severe clipping bugs (blue artifacts/halos) on WebKit/Safari
     * when combined with inner rotating elements and overflow: hidden.
     */
    animation: none !important;

    /* 2. Force the circle to remain perfectly round as requested */
    border-radius: 50% !important;

    /* 3. Anti-aliasing clipping fix for WebKit browsers */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);

    /* 4. Hardware acceleration to prevent sub-pixel rendering bleeds during scale */
    backface-visibility: hidden;
    transform: translateZ(0) scale(var(--audio-scale));
}

/* Ensure JS scaling uses the hardware accelerated transform */
.sphere-container.is-playing .voice-sphere,
.sphere-container:hover .voice-sphere {
    transform: translateZ(0) scale(var(--audio-scale));
}

/* ========================================================= */
/* OPTIMISATION TYPOGRAPHIQUE : TITRES ET SOUS-TITRES        */
/* ========================================================= */
/* S'applique uniquement aux sections (à partir de la 2e section). */
/* Le titre principal (Hero h1) reste strictement inchangé. */

.section-header h2,
.section-header .h2 {
    font-size: 2.15rem !important; /* Réduit d'environ 15% par rapport aux 2.5rem par défaut */
    line-height: 1.25 !important;
    margin-bottom: 0.8rem !important; /* Réduit légèrement l'espace sous le titre */
}

.section-header p {
    font-size: 1.05rem !important; /* Réduit d'environ 10% */
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

.section-header {
    margin-bottom: 3.5rem !important; /* L'espace entre le header et le contenu est légèrement réduit (était 4rem) */
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .section-header h2,
    .section-header .h2 {
        font-size: 1.6rem !important; /* Réduit par rapport aux 1.8rem/2rem actuels */
        line-height: 1.3 !important;
        margin-bottom: 0.6rem !important;
    }

    .section-header p {
        font-size: 0.95rem !important; /* Réduit d'environ 10% par rapport à 1rem/1.1rem */
        line-height: 1.5 !important;
        max-width: 95% !important; /* Garantit que le sous-titre ne touche pas les bords extrêmes */
    }

    .section-header {
        margin-bottom: 2rem !important; /* Compacte la présentation mobile */
    }
}

/* ========================================================= */
/* REFONTE DES BOUTONS : PILL BUTTONS (LANDING PAGE)         */
/* ========================================================= */
/* S'applique spécifiquement aux boutons d'action de la landing page */

#hero-main-cta,
#guest-header-actions .btn,
#user-header-actions .btn,
.cta-buttons .btn,
.dk-card .dk-btn-outline,
.dk-card .dk-btn-white {
    border-radius: 999px !important;
}

/* ========================================================= */
/* EDITORIAL SECTION */
/* ========================================================= */
.editorial {
    padding: 6rem 0;
    overflow: hidden;
}

.editorial-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.editorial-image-wrapper {
    position: relative;
    width: 100%;
}

.editorial-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.1;
    object-fit: cover;
    border-radius: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.editorial-content {
    display: flex;
    flex-direction: column;
}

.editorial-content h2 {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 1.25rem;
    color: var(--text-main);
}

.static-accent {
    color: #1D75FF;
}

.editorial-lead {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.editorial-divider {
    height: 1px;
    width: 4rem;
    background: linear-gradient(90deg, rgba(29, 117, 255, 0.3), transparent);
    margin-bottom: 2rem;
}

.editorial-mission {
    margin-bottom: 2.5rem;
    padding-left: 1rem;
    border-left: 2px solid rgba(29, 117, 255, 0.15);
}

.mission-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: #1D75FF;
}

.mission-header i {
    font-size: 1.25rem;
}

.mission-header h3, .mission-header span {
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.editorial-mission h4, .editorial-mission h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.editorial-mission p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0;
}

.editorial-cta {
    margin-top: 0;
}

.editorial-cta .btn {
    border-radius: 999px;
    padding: 1rem 2.5rem;
    font-size: 1.05rem;
    display: inline-flex;
    width: fit-content;
}

@media (max-width: 992px) {
    .editorial-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .editorial-image-wrapper {
        order: -1;
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .editorial {
        padding: 4rem 0;
    }

    .editorial-content h2 {
        margin-bottom: 1rem;
    }

    .editorial-lead {
        margin-bottom: 1.5rem;
    }

    .editorial-divider {
        margin-bottom: 1.5rem;
    }

    .editorial-mission {
        margin-bottom: 2rem;
    }

    .editorial-cta {
        display: flex;
        justify-content: stretch;
    }

    .editorial-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

.d-block-desktop { display: block; }
@media (max-width: 768px) { .d-block-desktop { display: inline; } }

.desktop-break { display: block; }
@media (max-width: 768px) { .desktop-break { display: none !important; } }

/* =========================================
   VOICE CLONING SECTION
   ========================================= */
.voice-cloning {
    padding: 6rem 0;
    background-color: var(--bg-main);
}

.voice-cloning-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.voice-cloning-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.voice-cloning-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    object-fit: cover;
    aspect-ratio: 4/3;
}

.voice-cloning-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.voice-cloning-content .badge {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0; display: inline-flex;
    letter-spacing: 0.5px;
}

.voice-cloning-content .h2 {
    margin-bottom: 1.2rem;
    font-size: 2.5rem;
    line-height: 1.2;
}

.voice-cloning-content .description {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.benefit-number {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.benefit-text h4 {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 0.3rem;
    font-weight: 600;
}

.benefit-text p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Media Queries for Voice Cloning */
@media (max-width: 1024px) {
    .voice-cloning-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .voice-cloning-image {
        order: -1; /* Image always on top for mobile/tablet */
    }

    .voice-cloning-content .h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .voice-cloning {
        padding: 4rem 0;
    }
}

/* =========================================
   HOW IT WORKS TIMELINE (HORIZONTAL)
   ========================================= */
.how-it-works {
    padding: 6rem 0;
}

.how-it-works .section-header {
    margin-bottom: 5rem;
}

.how-it-works-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* Connecting Line - Desktop (Horizontal) */
.how-it-works-line {
    position: absolute;
    top: 30px; /* Center of the 60px circle */
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--surface-border);
    z-index: 0;
}

.how-it-works-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 1rem;
}

.how-it-works-number {
    width: 60px;
    height: 60px;
    background: var(--primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-display);
    margin-bottom: 2rem;
    box-shadow: 0 0 0 8px var(--bg-alt); /* Creates a gap effect around the circle */
}

.how-it-works-content h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}

.how-it-works-content p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Mobile & Tablet - Vertical Timeline */
@media (max-width: 768px) {
    .how-it-works {
        padding: 3rem 0;
    }

    .how-it-works .section-header {
        margin-bottom: 2rem;
    }

    .how-it-works-timeline {
        flex-direction: column;
        gap: 2.5rem; /* Space between steps */
        align-items: center; /* Center everything */
        padding-left: 0;
        position: relative;
    }

    /* Connecting Line - Mobile (Vertical Centered) */
    .how-it-works-line {
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: auto;
        right: auto;
        z-index: 0;
    }

    .how-it-works-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem; /* Space between circle and title */
        padding: 0;
        width: 100%;
        max-width: 300px; /* Keep text constrained and neat */
        z-index: 1;
    }

    .how-it-works-number {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        margin-bottom: 0;
        flex-shrink: 0;
        box-shadow: 0 0 0 6px var(--bg-alt);
        margin-top: 0;
    }

    .how-it-works-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .how-it-works-content h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .how-it-works-content p {
        font-size: 0.9rem;
        line-height: 1.4;
        margin: 0;
        max-width: 280px; /* Prevent long single lines */
    }
}

/* Voice Cloning Adjustments */
.voice-cloning-desc-2 {
    margin-top: -0.5rem; /* Reduces space between the two paragraphs slightly */
}

.voice-cloning-content .btn {
    border-radius: 999px; /* Clear rounded shape, but not a full circle */
    padding: 12px 32px; /* Slightly wider to look better rounded */
}

/* =========================================
   TESTIMONIALS (CLEAN & ROBUST)
   ========================================= */

/* Viewport for the carousel - Contains everything securely */
.marquee-container {
    width: 100%; /* Takes 100% of the parent .container */
    overflow: hidden; /* Clips the cards exactly here */
    position: relative;
    padding: 1rem 0;
    /* Ensure no margin hacks */
    margin: 0;
    left: auto;
    right: auto;
}

/* The moving track */
.testimonials-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    width: max-content;
    /* Continuous, linear scroll */
    animation: scroll 30s linear infinite;
    /* Respect reduced motion */
}

@media (prefers-reduced-motion: reduce) {
    .testimonials-track {
        animation-play-state: paused;
    }
}

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

@keyframes scroll {
    0% { transform: translateX(0); }
    /* The translation depends on the exact width of half the track.
       Using max-content and duplicating items means -50% shifts exactly one set.
       Gap is 2rem, so subtract half the gap if necessary, but standard is -50% - (gap/2). */
    100% { transform: translateX(calc(-50% - 1rem)); }
}

/* Individual Card */
.testimonial-card {
    padding: 2.25rem;
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    white-space: normal;
    height: auto;
}

.testimonial-card .stars {
    color: #fbbf24;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.testimonial-card .quote {
    font-size: 1.05rem;
    font-style: normal;
    margin-bottom: 2rem;
    color: var(--text-main);
    flex-grow: 1;
    line-height: 1.6;
}

.testimonial-card .author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-card .author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-card .author h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-main);
}

.testimonial-card .author span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Optional: Elegant edge fade strictly contained within the marquee */
/* Desktop */
.marquee-container::before,
.marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 10;
    pointer-events: none;
}
.marquee-container::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-alt) 0%, transparent 100%);
}
.marquee-container::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-alt) 0%, transparent 100%);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .marquee-container::before,
    .marquee-container::after {
        width: 60px;
    }
}

@media (max-width: 768px) {
    .marquee-container {
        /* Remove any pseudo-elements on mobile for maximum space if needed, or keep them small */
        padding: 0.5rem 0;
    }

    .marquee-container::before,
    .marquee-container::after {
        width: 30px;
    }

    .testimonials-track {
        gap: 1.25rem;
        animation: scroll 40s linear infinite; /* Slower on mobile */
    }

    .testimonial-card {
        width: 280px; /* Fits nicely on small screens without touching edges */
        padding: 1.5rem;
    }

    .testimonial-card .quote {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-50% - 0.625rem)); } /* -50% - half gap (1.25rem/2) */
    }
}

/* ========================================================= */
/* DYNAMIC HERO CTA MOBILE/DESKTOP LOGIC                     */
/* ========================================================= */
.hero-cta-desktop { display: inline-flex; }


@media (max-width: 768px) {
    .hero-cta-desktop { display: none !important; }

}

/* Responsive Mobile CTA Container */
.hero-cta-mobile-container { display: none; }
@media (max-width: 768px) {
    .hero-cta-mobile-container { display: inline-flex !important; flex-direction: column; width: 100%; align-items: center; }
}

/* Badge Blue Light Mode */
.badge.badge-blue {
    background: #FFFFFF;
    color: #3b82f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0,0,0,0.03);
}
.hero-content .badge.badge-blue::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #3b82f6;
    border-radius: 50%;
}

/* Badge Blue Dark Mode */
[data-theme="dark"] .badge.badge-blue {
    background: rgba(255, 255, 255, 0.03);
    color: #60a5fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255,255,255,0.05);
}
[data-theme="dark"] .hero-content .badge.badge-blue::before {
    background-color: #60a5fa;
}

/* Scroll Reveal System */
.js-scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}
.js-scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 767px) {
    .js-scroll-reveal {
        transform: translateY(16px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .js-scroll-reveal {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Ajustement de la taille du bouton Navbar sur Desktop (réduction ~10-15%) */
@media (min-width: 769px) {
    .navbar .btn {
        padding: 0.42rem 1.1rem;
        font-size: 0.82rem;
    }
}