.dvc-section {
    background: var(--color-surface);
    padding-block: 0;
    position: relative
}

.dvc-grid {
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
    display: grid
}

@media (width<=960px) {
    .dvc-grid {
        grid-template-columns: 1fr;
        gap: 3rem
    }
}

.dvc-content {
    min-width: 0
}

.dvc-badge {
    margin-block-end: 1.5rem
}

.dvc-badge__icon {
    width: 16px;
    height: 16px;
    color: var(--color-accent);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    background-color: currentColor
}

.dvc-heading {
    color: var(--color-foreground);
    letter-spacing: -.01em;
    margin: 0 0 1.25rem;
    line-height: 1.05
}

.dvc-heading__line {
    display: block
}

.dvc-heading__accent {
    color: var(--color-accent)
}

.dvc-sub {
    max-width: 36rem;
    margin: 0 0 2rem;
    font-size: 1.0625rem;
    line-height: 1.55
}

.dvc-cta-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-block-end: 2.25rem;
    display: flex
}

.dvc-cta--primary {
    background-color: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-default, 10px);
    letter-spacing: .01em;
    padding: .95rem 1.85rem;
    font-size: .9375rem;
    font-weight: 600;
    transition: transform .18s, box-shadow .2s, background-color .18s;
    box-shadow: inset 0 1px #fff3, 0 12px 26px #00dc8247
}

.dvc-cta--primary:hover {
    opacity: 1;
    background-color: #5a499b;
    transform: translateY(-1px);
    box-shadow: inset 0 1px #ffffff40, 0 16px 32px #00dc8257
}

.dvc-cta--primary:active {
    transform: translateY(0)
}

.dvc-cta--secondary {
    color: var(--color-accent);
    align-items: center;
    gap: .45rem;
    padding: .95rem .25rem;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap .2s, color .18s;
    display: inline-flex
}

.dvc-cta--secondary:hover {
    color: #4d3f81;
    gap: .75rem
}

.dvc-cta__arrow {
    flex: none;
    width: 16px;
    height: 16px
}

[dir=rtl] .dvc-cta__arrow {
    transform: scaleX(-1)
}

.dvc-points {
    flex-direction: column;
    gap: .8rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.dvc-points li {
    color: var(--color-muted);
    align-items: flex-start;
    gap: .75rem;
    font-size: .9375rem;
    line-height: 1.5;
    display: flex
}

[dir=rtl] .dvc-points li {
    font-family: var(--font-arabic-body, "ITF Huwiya Arabic", inherit)
}

.dvc-point__dot {
    background: var(--color-accent-soft);
    border-radius: 50%;
    flex: none;
    width: 18px;
    height: 18px;
    margin-block-start: 2px;
    position: relative
}

.dvc-point__dot:after {
    content: "";
    background: var(--color-accent);
    border-radius: 50%;
    width: 6px;
    height: 6px;
    margin: auto;
    position: absolute;
    inset: 0
}

.dvc-demo {
    min-width: 0
}

.dvc-demo__chrome {
    background: #fff;
    border: 1px solid #00dc8224;
    border-radius: 28px;
    padding: 1.75rem;
    transition: height .4s cubic-bezier(.22, 1, .36, 1);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px #ffffffe6, 0 36px 80px -28px #2b165e4d, 0 18px 38px -14px #2b165e29
}

@media (width<=640px) {
    .dvc-demo__chrome {
        padding: 1.25rem
    }
}

.dvc-tabs {
    border-block-end: 1px solid #00dc8226;
    gap: 1.75rem;
    margin-block-end: 2rem;
    display: flex
}

.dvc-tab {
    color: var(--color-muted);
    cursor: pointer;
    white-space: nowrap;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: .5rem;
    padding: .75rem 0;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    transition: color .18s;
    display: inline-flex;
    position: relative
}

.dvc-tab:after {
    content: "";
    background: var(--color-accent);
    transform-origin: 50%;
    height: 2px;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    transform: scaleX(0)
}

.dvc-tab[aria-selected=true] {
    color: var(--color-accent)
}

.dvc-tab[aria-selected=true]:after {
    transform: scaleX(1)
}

.dvc-tab:hover {
    color: var(--color-foreground)
}

.dvc-tab[aria-selected=true]:hover {
    color: var(--color-accent)
}

.dvc-tab__icon {
    color: currentColor;
    width: 14px;
    height: 14px;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    background-color: currentColor
}

.dvc-panel {
    animation: .24s both dvc-fade
}

@keyframes dvc-fade {
    0% {
        opacity: 0;
        transform: translateY(4px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.dvc-carousel {
    align-items: center;
    gap: .75rem;
    display: flex
}

.dvc-carousel__arrow {
    width: 42px;
    height: 42px;
    color: var(--color-accent);
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #00dc8233;
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    transition: border-color .2s, background .2s, transform .18s, box-shadow .2s;
    display: inline-flex
}

.dvc-carousel__arrow:hover {
    border-color: var(--color-accent);
    background: #00dc820f;
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -10px #2b165e66
}

.dvc-carousel__arrow:active {
    transform: translateY(0)
}

.dvc-carousel__arrow svg {
    width: 22px;
    height: 22px
}

[dir=rtl] .dvc-carousel__arrow svg {
    transform: scaleX(-1)
}

.dvc-carousel__stage {
    flex: auto;
    min-width: 0;
    overflow: hidden
}

.dvc-carousel__stage.is-swap {
    animation: .36s cubic-bezier(.22, 1, .36, 1) dvc-swap-next
}

.dvc-carousel__stage[data-dir=prev].is-swap {
    animation-name: dvc-swap-prev
}

@keyframes dvc-swap-next {
    0% {
        opacity: 0;
        transform: translate(22px)
    }
    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes dvc-swap-prev {
    0% {
        opacity: 0;
        transform: translate(-22px)
    }
    to {
        opacity: 1;
        transform: translate(0)
    }
}

[dir=rtl] .dvc-carousel__stage[data-dir=next].is-swap {
    animation-name: dvc-swap-prev
}

[dir=rtl] .dvc-carousel__stage[data-dir=prev].is-swap {
    animation-name: dvc-swap-next
}

.dvc-carousel__pager {
    justify-content: center;
    gap: .45rem;
    margin-block-start: -.5rem;
    display: flex
}

.dvc-pagedot {
    cursor: pointer;
    background: #00dc8238;
    border: 0;
    border-radius: 999px;
    width: 8px;
    height: 8px;
    padding: 0;
    transition: background .2s, width .25s cubic-bezier(.22, 1, .36, 1)
}

.dvc-pagedot:hover {
    background: #00dc8273
}

.dvc-pagedot[aria-current=true] {
    background: var(--color-accent);
    width: 22px
}

.dvc-persona__tag {
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-size: .7rem;
    font-weight: 700
}

[data-dvc-lang=ar] .dvc-persona__tag {
    letter-spacing: 0;
    text-transform: none;
    font-size: .8125rem;
    font-family: var(--font-sans-ar-body, "ITF Huwiya Arabic", inherit)
}

.dvc-voice-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
    display: flex
}

.dvc-persona__body {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    max-width: 36rem;
    margin-inline: auto;
    display: flex
}

.dvc-persona__name {
    font-family: var(--font-serif-display, "Lora", serif);
    color: var(--color-foreground);
    letter-spacing: -.01em;
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 2.25rem
}

.dvc-persona__name[lang=ar] {
    font-family: var(--font-sans-ar-display, "Lyon Arabic Display", inherit);
    font-size: 2rem;
    line-height: 2.25rem
}

.dvc-persona__quote {
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 4.5rem;
    margin: .35rem 0 0;
    display: flex
}

.dvc-persona__quote-text {
    color: var(--color-foreground);
    text-wrap: balance;
    font-size: .9375rem;
    line-height: 1.55;
    display: inline
}

.dvc-persona__quote-text:before {
    content: "“";
    color: var(--color-accent);
    margin-inline-end: .1rem
}

.dvc-persona__quote-text:after {
    content: "”";
    color: var(--color-accent);
    margin-inline-start: .1rem
}

.dvc-persona__quote-text[lang^=ar] {
    font-family: var(--font-sans-ar-body, "ITF Huwiya Arabic", inherit);
    font-size: 1rem;
    line-height: 1.6
}

.dvc-word {
    color: color-mix(in srgb, var(--color-foreground) 24%, transparent);
    transition: color .18s
}

.dvc-word.is-spoken {
    color: var(--color-foreground)
}

.dvc-dots {
    --dvc-dot: 5px;
    --dvc-gap-x: 5px;
    --dvc-gap-y: 5px;
    justify-content: center;
    align-items: end;
    gap: var(--dvc-gap-x);
    direction: ltr;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    display: flex;
    overflow: hidden;
    mask-image: linear-gradient(90deg, #0000 0%, #000 8% 92%, #0000 100%)
}

.dvc-dots__col {
    align-items: center;
    gap: var(--dvc-gap-y);
    flex-direction: column-reverse;
    display: flex
}

.dvc-dots__col span {
    width: var(--dvc-dot);
    height: var(--dvc-dot);
    background: #00dc8229;
    border-radius: 50%;
    transition: background-color .22s
}

.dvc-dots[data-state=playing] .dvc-dots__col[data-level="1"] span:nth-child(-n+1),
.dvc-dots[data-state=playing] .dvc-dots__col[data-level="2"] span:nth-child(-n+2),
.dvc-dots[data-state=playing] .dvc-dots__col[data-level="3"] span:nth-child(-n+3),
.dvc-dots[data-state=playing] .dvc-dots__col[data-level="4"] span:nth-child(-n+4),
.dvc-dots[data-state=playing] .dvc-dots__col[data-level="5"] span:nth-child(-n+5),
.dvc-dots[data-state=playing] .dvc-dots__col[data-level="6"] span:nth-child(-n+6),
.dvc-dots[data-state=playing] .dvc-dots__col[data-level="7"] span:nth-child(-n+7),
.dvc-dots[data-state=playing] .dvc-dots__col[data-level="8"] span:nth-child(-n+8) {
    background: var(--color-accent)
}

.dvc-persona__cta {
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    display: flex
}

.dvc-play {
    background: var(--color-accent);
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.65rem;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    transition: transform .18s, background-color .18s, box-shadow .2s;
    display: inline-flex;
    box-shadow: inset 0 1px #fff3, 0 10px 24px #00dc824d
}

.dvc-play:hover {
    background: #5a499b;
    transform: translateY(-1px);
    box-shadow: inset 0 1px #ffffff40, 0 14px 30px #00dc825c
}

.dvc-play[data-state=playing] {
    background: #2b165e
}

.dvc-play__icon {
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    display: inline-flex
}

.dvc-play__icon-svg {
    width: 18px;
    height: 18px
}

.dvc-play__icon-svg[data-dvc-play-svg=pause],
.dvc-play[data-state=playing] .dvc-play__icon-svg[data-dvc-play-svg=play] {
    display: none
}

.dvc-play[data-state=playing] .dvc-play__icon-svg[data-dvc-play-svg=pause] {
    display: block
}

.dvc-play__hint {
    color: var(--color-muted);
    text-align: center;
    font-size: .75rem
}

.dvc-chat-scenarios-wrap {
    flex-direction: column;
    gap: .6rem;
    margin-block-end: 1.25rem;
    display: flex
}

.dvc-chat-scenarios__label {
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-size: .7rem;
    font-weight: 700
}

[data-dvc-lang=ar] .dvc-chat-scenarios__label {
    letter-spacing: 0;
    text-transform: none;
    font-size: .8125rem;
    font-family: var(--font-sans-ar-display, "Lyon Arabic Display", inherit)
}

.dvc-chat-scenarios {
    flex-wrap: wrap;
    gap: .5rem;
    display: flex
}

.dvc-chat-scenario {
    color: var(--color-muted);
    cursor: pointer;
    white-space: nowrap;
    background: #fff;
    border: 1.5px solid #00dc822e;
    border-radius: 999px;
    padding: .5rem .9rem;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    transition: border-color .2s, background .2s, color .2s, transform .2s
}

.dvc-chat-scenario:hover {
    color: var(--color-foreground);
    border-color: #00dc826b;
    transform: translateY(-1px)
}

.dvc-chat-scenario[aria-selected=true] {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: #00dc820f
}

[data-dvc-lang=ar] .dvc-chat-scenario {
    font-size: .875rem;
    font-family: var(--font-sans-ar-body, "ITF Huwiya Arabic", inherit)
}

.dvc-chat-card {
    flex-direction: column;
    gap: .85rem;
    display: flex
}

.dvc-chat-head {
    border-block-end: 1px solid #00dc821a;
    align-items: center;
    gap: .75rem;
    padding-block-end: .85rem;
    display: flex
}

.dvc-chat-head__avatar {
    background: #00dc821a;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    display: inline-flex
}

.dvc-chat-head__avatar img {
    width: 22px;
    height: 22px
}

.dvc-chat-head__title-block {
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    display: flex
}

.dvc-chat-head__title {
    color: var(--color-foreground);
    font-size: .9375rem;
    font-weight: 700
}

.dvc-chat-head__status {
    color: var(--color-muted);
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    display: inline-flex
}

.dvc-chat-head__dot {
    background: #2cc26a;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 3px #2cc26a2e
}

.dvc-chat-body {
    scroll-behavior: smooth;
    height: 300px;
    padding: .25rem .1rem;
    position: relative;
    overflow-y: auto
}

.dvc-chat-body::-webkit-scrollbar {
    width: 6px
}

.dvc-chat-body::-webkit-scrollbar-thumb {
    background: #00dc822e;
    border-radius: 99px
}

.dvc-chat-list {
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.dvc-bubble {
    border-radius: 16px;
    max-width: 80%;
    padding: .65rem .9rem;
    font-size: .9375rem;
    line-height: 1.45;
    animation: .28s cubic-bezier(.22, 1, .36, 1) both dvc-bubble-in
}

.dvc-bubble[dir=rtl] {
    font-family: var(--font-arabic-body, "ITF Huwiya Arabic", inherit)
}

@keyframes dvc-bubble-in {
    0% {
        opacity: 0;
        transform: translateY(6px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.dvc-bubble--you {
    background: var(--color-accent);
    color: #fff;
    border-end-end-radius: 6px;
    align-self: flex-end
}

.dvc-bubble--agent {
    color: var(--color-foreground);
    background: #00dc8214;
    border-end-start-radius: 6px;
    align-self: flex-start
}

.dvc-bubble__text {
    display: block
}

.dvc-chat-typing {
    background: #00dc8214;
    border-radius: 16px;
    align-self: flex-start;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-block-start: .4rem;
    padding: .5rem .75rem;
    display: inline-flex
}

.dvc-chat-typing span {
    background: var(--color-accent);
    opacity: .6;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    animation: 1.1s ease-in-out infinite dvc-typing
}

.dvc-chat-typing span:nth-child(2) {
    animation-delay: .18s
}

.dvc-chat-typing span:nth-child(3) {
    animation-delay: .36s
}

@keyframes dvc-typing {
    0%,
    to {
        opacity: .5;
        transform: translateY(0)
    }
    50% {
        opacity: 1;
        transform: translateY(-3px)
    }
}

.dvc-chat-compose {
    border-block-start: 1px solid #00dc821a;
    gap: .5rem;
    padding-block-start: .85rem;
    display: flex
}

.dvc-chat-compose__input {
    min-width: 0;
    color: var(--color-muted);
    background: #fafaff;
    border: 1px solid #00dc822e;
    border-radius: 10px;
    flex: 1;
    padding: .65rem .95rem;
    font-family: inherit;
    font-size: .875rem
}

.dvc-chat-compose__input:disabled {
    cursor: not-allowed
}

.dvc-chat-compose__send {
    cursor: not-allowed;
    background: #00dc8226;
    border: 0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    display: inline-flex
}

.dvc-chat-compose__icon {
    background-color: var(--color-accent);
    width: 16px;
    height: 16px;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat
}