:root{

    --bg:#050816;
    --panel:#0B1020;
    --panel2:#111827;

    --primary:#7C3AED;
    --primary2:#6366F1;

    --text:#FFFFFF;
    --muted:#94A3B8;

    --border:#1F2937;
}

*{

    margin:0;
    padding:0;

    box-sizing:border-box;
}

body{

    background:var(--bg);

    color:white;

    font-family:
        Inter,
        sans-serif;

    overflow-x:hidden;
}

a{

    text-decoration:none;
}

.navbar{

    position:sticky;

    top:0;

    z-index:999;

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 60px;

    background:
        rgba(5,8,22,.95);

    backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid
        rgba(255,255,255,.05);
}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:28px;

    font-weight:700;
}

.logo-icon{

    color:#8B5CF6;

    font-size:32px;
}

.nav-links{

    display:flex;

    align-items:center;

    gap:28px;
}

.nav-links a{

    color:#CBD5E1;
}

.register-btn{

    padding:
        12px 22px;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #6366F1
        );

    color:white;
}

.hero{

    max-width:1400px;

    margin:auto;

    padding:
        80px 60px;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:60px;

    align-items:center;
}

.hero-badge{

    display:inline-block;

    padding:
        10px 18px;

    border-radius:999px;

    background:
        rgba(
            124,
            58,
            237,
            .15
        );

    color:#A78BFA;

    margin-bottom:30px;
}

.hero h1{

    font-size:76px;

    line-height:1.05;

    margin-bottom:25px;
}

.hero h1 span{

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #4F46E5
        );

    -webkit-background-clip:text;

    color:transparent;
}

.hero p{

    color:#CBD5E1;

    font-size:22px;

    line-height:1.7;

    max-width:650px;

    margin-bottom:35px;
}

.hero-actions{

    display:flex;

    gap:18px;
}

.start-btn{

    padding:
        16px 32px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #6366F1
        );

    color:white;

    font-weight:600;
}

.login-btn{

    padding:
        16px 32px;

    border-radius:14px;

    border:
        1px solid
        #374151;

    color:white;
}

.dashboard-mockup{

    height:420px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            #0F172A,
            #090E1A
        );

    border:
        1px solid
        rgba(
            124,
            58,
            237,
            .4
        );

    box-shadow:
        0 0 100px
        rgba(
            124,
            58,
            237,
            .2
        );

    padding:30px;
}

.dashboard-mockup h3{

    font-size:30px;
}

.featured-voices{

    max-width:1400px;

    margin:auto;

    padding:40px 60px 80px;
}

.featured-voices h2{

    text-align:center;

    font-size:42px;

    margin-bottom:40px;
}

.voices-row{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:24px;
}

.featured-card{

    background:
        linear-gradient(
            180deg,
            #101827,
            #0B1220
        );

    border:
        1px solid
        rgba(
            124,
            58,
            237,
            .2
        );

    border-radius:24px;

    padding:24px;

    display:flex;

    align-items:center;

    gap:18px;

    transition:.25s;
}

.featured-card:hover{

    transform:
        translateY(-4px);

    border-color:
        #8B5CF6;
}

.voice-avatar{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:700;

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #6366F1
        );
}

.voice-info{

    flex:1;
}

.voice-info h3{

    margin-bottom:8px;
}

.voice-meta{

    color:#94A3B8;

    font-size:14px;

    margin-bottom:8px;
}

.stars{

    color:#FBBF24;
}

.play-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #6366F1
        );

    color:white;

    font-size:18px;
}


.featured-voices-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 32px;
}

.featured-voices-heading h2 {
    margin: 5px 0 8px;
    text-align: left;
}

.featured-voices-heading p {
    margin: 0;
    color: #94a3b8;
    font-size: 16px;
}

.featured-voices-eyebrow {
    color: #a78bfa;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
}

.refresh-voices-btn {
    min-height: 44px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(167, 139, 250, .38);
    border-radius: 14px;
    color: #ede9fe;
    background: rgba(124, 58, 237, .12);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.refresh-voices-btn:hover {
    border-color: #a78bfa;
    background: rgba(124, 58, 237, .22);
    transform: translateY(-1px);
}

.refresh-voices-btn:disabled {
    opacity: .5;
    cursor: wait;
    transform: none;
}

.featured-card {
    min-width: 0;
}

.featured-card.is-playing {
    border-color: #a78bfa;
    box-shadow: 0 14px 34px rgba(76, 29, 149, .22);
}

.voice-avatar {
    flex: 0 0 auto;
    background:
        linear-gradient(
            135deg,
            hsl(var(--voice-hue, 258) 82% 62%),
            hsl(calc(var(--voice-hue, 258) + 35) 78% 51%)
        );
}

.voice-info {
    min-width: 0;
}

.voice-info h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-preview-ready {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #c4b5fd;
    font-size: 12px;
    font-weight: 700;
}

.voice-preview-ready::before {
    width: 7px;
    height: 7px;
    content: "";
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, .7);
}

.play-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

.play-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 24px rgba(124, 58, 237, .34);
}

.play-btn.is-loading {
    cursor: wait;
    animation: voice-preview-pulse .9s ease-in-out infinite alternate;
}

.play-btn.is-playing {
    background: linear-gradient(135deg, #10b981, #059669);
}

.featured-voices-status {
    min-height: 22px;
    margin: -18px 0 10px;
    color: #fca5a5;
    font-size: 13px;
}

.featured-voices-loading {
    grid-column: 1 / -1;
    padding: 38px;
    border: 1px dashed rgba(167, 139, 250, .28);
    border-radius: 20px;
    color: #94a3b8;
    text-align: center;
}

@keyframes voice-preview-pulse {
    from { opacity: .55; }
    to { opacity: 1; }
}

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

@media (max-width: 680px) {
    .featured-voices {
        padding: 34px 18px 64px;
    }

    .featured-voices-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .featured-voices-heading h2 {
        font-size: 34px;
    }

    .refresh-voices-btn {
        align-self: flex-start;
    }

    .voices-row {
        grid-template-columns: 1fr;
    }
}

.features-section{

    max-width:1400px;

    margin:auto;

    padding:40px 60px 80px;
}

.features-section h2{

    text-align:center;

    font-size:42px;

    margin-bottom:40px;
}

.features-grid{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:24px;
}

.feature-card{

    background:
        linear-gradient(
            180deg,
            #101827,
            #0B1220
        );

    border:
        1px solid
        rgba(
            124,
            58,
            237,
            .15
        );

    border-radius:24px;

    padding:32px;

    transition:.25s;
}

.feature-card:hover{

    transform:
        translateY(-5px);

    border-color:
        #8B5CF6;

    box-shadow:
        0 0 40px
        rgba(
            124,
            58,
            237,
            .15
        );
}

.feature-icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    border-radius:18px;

    margin-bottom:24px;

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #6366F1
        );
}

.feature-card h3{

    margin-bottom:16px;

    font-size:22px;
}

.feature-card p{

    color:#94A3B8;

    line-height:1.7;
}

.pricing{

    max-width:1400px;

    margin:auto;

    padding:80px 60px 120px;
}

.pricing h2{

    text-align:center;

    font-size:48px;

    margin-bottom:50px;
}

.pricing-grid{

    display:grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:30px;
}

.plan{

    background:
        linear-gradient(
            180deg,
            #101827,
            #0B1220
        );

    border:
        1px solid
        rgba(
            124,
            58,
            237,
            .15
        );

    border-radius:28px;

    padding:40px;

    transition:.3s;
}

.plan:hover{

    transform:
        translateY(-8px);

    border-color:
        #8B5CF6;
}

.plan h3{

    font-size:28px;

    margin-bottom:20px;
}

.price{

    font-size:56px;

    font-weight:700;

    margin-bottom:10px;
}

.characters{

    color:#94A3B8;

    margin-bottom:30px;
}

.plan ul{

    list-style:none;
}

.plan li{

    margin-bottom:14px;

    color:#CBD5E1;
}

.featured{

    border:
        2px solid
        #8B5CF6;

    box-shadow:
        0 0 60px
        rgba(
            124,
            58,
            237,
            .25
        );
}

.ultimate{

    border:
        2px solid
        #F59E0B;

    box-shadow:
        0 0 60px
        rgba(
            245,
            158,
            11,
            .20
        );
}

/* Dynamic pricing */
.vml-pricing {
    max-width: 1760px;
    padding-left: 28px;
    padding-right: 28px;
}

.vml-pricing-heading {
    max-width: 840px;
    margin: 0 auto 32px;
    text-align: center;
}

.vml-pricing-heading > span {
    color: #a78bfa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
}

.vml-pricing-heading h2 {
    margin: 12px 0 10px;
}

.vml-pricing-heading p {
    margin: 0;
    color: #94a3b8;
    line-height: 1.7;
}

.vml-pricing-period-switch {
    width: max-content;
    margin: 26px auto 0;
    padding: 5px;
    display: flex;
    gap: 5px;
    border: 1px solid rgba(167, 139, 250, .26);
    border-radius: 999px;
    background: rgba(8, 12, 24, .78);
}

.vml-pricing-period-switch button {
    min-width: 120px;
    min-height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    color: #94a3b8;
    background: transparent;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.vml-pricing-period-switch button.active {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    box-shadow: 0 0 18px rgba(124, 58, 237, .42);
}

.vml-pricing-status {
    min-height: 26px;
    margin-bottom: 18px;
    color: #cbd5e1;
    text-align: center;
}

.vml-pricing-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.vml-pricing-card {
    min-width: 0;
    min-height: 560px;
    padding: 28px 22px 24px;
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(148, 163, 184, .28);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(15, 23, 42, .97), rgba(5, 10, 24, .98));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .25);
    transition: transform .22s ease, box-shadow .22s ease;
}

.vml-pricing-card:hover { transform: translateY(-6px); }
.vml-pricing-card-trial { border-color: rgba(148, 163, 184, .62); }
.vml-pricing-card-start { border-color: rgba(59, 130, 246, .78); }
.vml-pricing-card-pro { border-color: rgba(168, 85, 247, .88); box-shadow: 0 0 42px rgba(168, 85, 247, .22); }
.vml-pricing-card-ultimate { border-color: rgba(245, 158, 11, .86); }
.vml-pricing-card-custom { border-color: rgba(20, 184, 166, .78); }

.vml-pricing-card-head span {
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.vml-pricing-card-head h3 {
    margin: 9px 0 22px;
    font-size: 27px;
}

.vml-pricing-price {
    min-height: 68px;
    font-size: clamp(34px, 3vw, 50px);
    font-weight: 900;
    letter-spacing: -.04em;
}

.vml-pricing-period,
.vml-pricing-capacity {
    color: #94a3b8;
    font-size: 13px;
}

.vml-pricing-card ul {
    flex: 1;
    margin: 28px 0 24px;
    padding: 0;
    list-style: none;
}

.vml-pricing-card li {
    position: relative;
    margin-bottom: 13px;
    padding-left: 22px;
    color: #cbd5e1;
}

.vml-pricing-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #a78bfa;
    font-weight: 900;
}

.vml-pricing-cta {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(167, 139, 250, .5);
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.vml-pricing-card-custom .vml-pricing-cta {
    background: linear-gradient(135deg, #0f766e, #0d9488);
}

@media (max-width: 1380px) {
    .vml-pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

@media (max-width: 620px) {
    .vml-pricing { padding-left: 18px; padding-right: 18px; }
    .vml-pricing-grid { grid-template-columns: 1fr; }
    .vml-pricing-card { min-height: auto; }
}


.vml-pricing-session-details {
    margin-top: 18px;
    padding: 14px;
    display: grid;
    gap: 8px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 14px;
    background: rgba(2, 6, 23, .32);
    color: #94a3b8;
    font-size: 12px;
}

.vml-pricing-session-details div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.vml-pricing-session-details strong {
    color: #e2e8f0;
    text-align: right;
}


.vml-pricing-extra-copy {
    margin: 14px 0 2px;
    padding: 12px 13px;
    border-left: 3px solid #8b5cf6;
    border-radius: 8px;
    color: #cbd5e1;
    background: rgba(124, 58, 237, .09);
    font-size: 12px;
    line-height: 1.55;
}

.vml-pricing-extra-copy strong {
    color: #f5f3ff;
}

.vml-pricing-extra-copy.muted {
    border-left-color: rgba(148, 163, 184, .4);
    color: #64748b;
    background: rgba(148, 163, 184, .05);
}


/* Force all five pricing cards on one row */
.vml-pricing-grid {
    display: grid !important;
    grid-template-columns:
        repeat(5, minmax(220px, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

@media (max-width: 1380px) {
    .vml-pricing {
        overflow-x: auto;
    }

    .vml-pricing-grid {
        min-width: 1280px;
        grid-template-columns:
            repeat(5, minmax(220px, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .vml-pricing-grid {
        min-width: 1280px;
        grid-template-columns:
            repeat(5, minmax(220px, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .vml-pricing {
        padding-left: 18px;
        padding-right: 18px;
        overflow-x: auto;
    }

    .vml-pricing-grid {
        min-width: 1280px;
        grid-template-columns:
            repeat(5, minmax(220px, 1fr)) !important;
    }

    .vml-pricing-card {
        min-height: 560px;
    }
}


/* VML pricing session selector */
.vml-pricing-session-picker {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.9rem;
    border: 1px solid rgba(127, 127, 127, 0.24);
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.08);
}

.vml-pricing-session-picker > span {
    font-weight: 700;
}

.vml-pricing-session-picker select {
    width: 100%;
    min-height: 42px;
    padding: 0 0.75rem;
    border: 1px solid rgba(127, 127, 127, 0.32);
    border-radius: 9px;
    background: inherit;
    color: inherit;
    font: inherit;
}

.vml-pricing-session-picker small {
    opacity: 0.72;
}

.vml-pricing-total {
    display: grid;
    gap: 0.55rem;
    margin: 1rem 0;
    padding: 0.9rem;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.08);
}

.vml-pricing-total > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vml-pricing-total-final {
    margin-top: 0.25rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(127, 127, 127, 0.24);
    font-size: 1.05rem;
}

/* VML PRICING PURCHASE LAYOUT START */

.vml-pricing-card {
    display: flex;
    flex-direction: column;
}

.vml-pricing-card > .vml-pricing-card-head {
    order: 1;
}

.vml-pricing-card > .vml-pricing-price {
    order: 2;
}

.vml-pricing-card > .vml-pricing-period {
    order: 3;
}

.vml-pricing-card > ul {
    order: 4;
    margin-top: 22px;
    margin-bottom: auto;
    padding-bottom: 22px;
}

.vml-pricing-card > .vml-pricing-session-picker,
.vml-pricing-card > .vml-pricing-extra-copy {
    order: 5;
}

.vml-pricing-card > .vml-pricing-total {
    order: 6;
}

.vml-pricing-card > .vml-pricing-session-details {
    order: 7;
}

.vml-pricing-card > .vml-pricing-cta {
    order: 8;
    margin-top: 14px;
}

.vml-pricing-session-picker {
    gap: 6px;
    margin: 10px 0;
    padding: 11px 12px;
    font-size: 12px;
}

.vml-pricing-session-picker > span {
    font-size: 13px;
    line-height: 1.25;
}

.vml-pricing-session-picker small {
    font-size: 11px;
    line-height: 1.25;
}

.vml-pricing-session-picker select {
    min-height: 38px;
    padding: 0 10px;
    background: #111827 !important;
    color: #f8fafc !important;
    color-scheme: dark;
    font-size: 13px;
}

.vml-pricing-session-picker select option {
    background: #111827 !important;
    color: #f8fafc !important;
}

.vml-pricing-total {
    gap: 5px;
    margin: 8px 0 10px;
    padding: 11px 12px;
    font-size: 12px;
}

.vml-pricing-total > div {
    gap: 10px;
}

.vml-pricing-total span {
    font-size: 12px;
    line-height: 1.2;
}

.vml-pricing-total strong {
    font-size: 12px;
    white-space: nowrap;
}

.vml-pricing-total-final {
    margin-top: 3px;
    padding-top: 8px;
}

.vml-pricing-total-final span,
.vml-pricing-total-final strong {
    font-size: 14px;
    font-weight: 800;
}

.vml-pricing-session-details {
    gap: 5px;
    margin-top: 6px;
    padding: 10px 12px;
}

.vml-pricing-session-details > div {
    gap: 8px;
}

.vml-pricing-session-details span {
    font-size: 11px;
    line-height: 1.2;
}

.vml-pricing-session-details strong {
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.vml-pricing-extra-copy {
    margin: 10px 0;
    padding: 10px 12px;
    font-size: 11px;
    line-height: 1.35;
}

/* VML PRICING PURCHASE LAYOUT END */


.vml-pricing-card > .vml-pricing-credits {
    order: 5;
}

.vml-pricing-card > .vml-pricing-session-picker,
.vml-pricing-card > .vml-pricing-extra-copy {
    order: 6;
}

.vml-pricing-card > .vml-pricing-total {
    order: 7;
}

.vml-pricing-card > .vml-pricing-session-details {
    order: 8;
}

.vml-pricing-card > .vml-pricing-cta {
    order: 9;
}

.vml-pricing-credits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
    padding: 11px 12px;
    border: 1px solid rgba(56, 189, 248, 0.26);
    border-radius: 11px;
    background: rgba(14, 116, 144, 0.1);
}

.vml-pricing-credits span {
    font-size: 12px;
}

.vml-pricing-credits strong {
    font-size: 15px;
    white-space: nowrap;
}

/* VML PUBLIC HERO LOGO ONLY START */

/*
 * Navbar-ul public nu mai afișează iconiță,
 * text sau alt element de brand.
 */
.navbar.navbar-logo-free {
    justify-content: flex-end;
}


.navbar.navbar-logo-free > .logo {
    display: none !important;
}


/*
 * Hero-ul public afișează numai logo-ul mare
 * în locul fostului Voices Dashboard.
 */
.hero-logo-showcase {
    width: 100%;
    min-width: 0;
    min-height: 420px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    overflow: visible;

    background: transparent;
}


.hero-main-logo {
    width:
        min(
            100%,
            560px
        );

    height: auto;
    max-height: 440px;

    display: block;

    border-radius: 28px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 30px 48px
            rgba(0, 0, 0, .36)
        )
        drop-shadow(
            0 0 34px
            rgba(124, 58, 237, .24)
        );
}


/*
 * Neutralizează complet vechiul dashboard,
 * chiar dacă markup-ul reapare accidental.
 */
.hero-right .dashboard-mockup,
.hero-right .dashboard-mockup h3 {
    display: none !important;
}


@media (max-width: 1024px) {
    .hero-logo-showcase {
        min-height: 330px;

        padding: 18px;
    }

    .hero-main-logo {
        width:
            min(
                100%,
                470px
            );

        max-height: 360px;

        border-radius: 24px;
    }
}


@media (max-width: 760px) {
    .navbar.navbar-logo-free {
        justify-content: center;
    }

    .hero-logo-showcase {
        min-height: 250px;

        padding:
            10px
            4px;
    }

    .hero-main-logo {
        width:
            min(
                92vw,
                390px
            );

        max-height: 290px;

        border-radius: 20px;
    }
}


@media (max-width: 390px) {
    .hero-logo-showcase {
        min-height: 215px;
    }

    .hero-main-logo {
        width:
            min(
                94vw,
                345px
            );

        border-radius: 17px;
    }
}

/* VML PUBLIC HERO LOGO ONLY END */