/* Start Root */
:root {
    --page-width: 1320px;
    --bg-main: #0a0a0f;
    --main-color: #d4d4d8;
    --bg-card: #111118;
    --white-color: #ffffff;
    --paragraph-color: #dadada;
    --icon-color: #71717a;
    --border-color: #1e1e2e;
    --main-hover-border-color: #f4f4f566;
    timeline-scope: --s1, --s2, --s3, --s4, --s5, --s6, --s7, --s8, --s9, --s10, --s11;
    --accent: #6366f1;
    --accent-2: #8b5cf6;
    --accent-glow: rgba(99, 102, 241, 0.15);
    --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
}

body {
    font-family: "Manrope", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* End Root */

/* Start Reset Tag */
a {
    color: var(--main-color);
}

dl,
ol,
ul {
    padding: 0;
    margin: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

/* End Reset Tag */

/* Start Var */
.layout-fluid .container,
.layout-fluid [class*=" container-"],
.layout-fluid [class^=container-] {
    padding-left: 3rem;
    padding-right: 3rem;
    max-width: var(--page-width);
}

#languages_app a {
    padding: 0.75rem;
    font-size: 1rem;
}

.pagination {
    justify-content: end;
}

.sm_block {
    display: none;
}

.btn-primary,
.bg-custom {
    background-color: var(--bg-main);
    background-image: unset;
}

.btn-primary:hover,
.bg-custom:hover {
    background-color: var(--bg-main);
}

/* End Bar */

/* Start Reset Tags */
body {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    --tw-bg-opacity: 1;
    background-color: var(--bg-main);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: var(--bg-main);
    scroll-behavior: smooth;
    font-family: "Outfit", sans-serif;
}

section {
    margin-top: 6rem;
    margin-bottom: 5rem;
    padding: 0 6rem;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    border: none;
    color: var(--white-color)
}

button:hover,
a:hover {
    text-decoration: none !important;
}

a,
button {
    outline: none !important;
    box-shadow: none !important;
}

p {
    color: var(--paragraph-color);
    font-weight: 400;
}

select,
textarea,
input.phone,
input:not(.form-check-input) {
    outline: none !important;
    box-shadow: none !important;
    font-size: 0.90rem !important;
    border-radius: 8px !important;
}

textarea::placeholder,
input::placeholder {
    font-size: 0.80rem;
    color: var(--paragraph-color) !important;
}

select,
textarea,
input:not(.form-check-input) {
    background-color: transparent !important;
    color: var(--white-color) !important;
    border: 1px solid var(--border-color) !important;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

input:is(.form-check-input):checked {
    background-color: var(--aous-aw-gray-700) !important;
    border: none !important;
    outline: none;
    box-shadow: none;
}

label,
.col-form-label,
.form-label {
    color: var(--paragraph-color) !important;
}

select:focus,
textarea:focus,
textarea:focus,
input.phone:focus,
input:focus {
    border-color: var(--main-hover-border-color) !important;
}

.icon {
    color: rgb(229 229 229);
}

@keyframes strok {
    100% {
        stroke-dashoffset: 400;
    }
}


@keyframes shape-fade {
    entry 0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }

    entry 100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    exit 0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    exit 100% {
        opacity: 0;
        transform: translateY(-40px) scale(1.1);
    }
}

@keyframes content-focus {
    0% {
        filter: blur(12px);
        opacity: 0;
        transform: scale(0.8) translateY(40px);
        border-color: transparent;
    }

    45%,
    55% {
        filter: blur(0);
        opacity: 1;
        transform: scale(1) translateY(0);
        color: var(--white-color);
        border-color: var(--paragraph-color);
    }

    100% {
        filter: blur(12px);
        opacity: 0;
        transform: scale(0.95) translateY(-40px);
        border-color: transparent;
    }
}

@keyframes progress-grow {
    to {
        transform: scaleY(1);
    }
}

@keyframes circle-grow {
    to {
        stroke-dashoffset: 0;
    }
}

.container-xl,
.container {
    padding-right: calc(var(--aous-aw-gutter-x) * 1.5);
    padding-left: calc(var(--aous-aw-gutter-x) * 1.5);
}

hr {
    margin: 1rem;
}

/* End Reset Tags */

/* Start Var */

.w-120 {
    min-width: 120px;
}

.w-140 {
    min-width: 140px;
}

.w-160 {
    min-width: 160px;
}

.w-180 {
    min-width: 180px;
}

.w-200 {
    min-width: 200px;
}

.text_gradient {
    color: transparent;
    background-clip: text;
    --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
    background-image: linear-gradient(135deg, #ffffff 30%, #a5b4fc 70%, #8b5cf6 100%);
    line-height: 1.07 !important;
}

.n-resize {
    resize: none;
}

.header_description {
    margin: 1rem auto;
    line-height: 1.5;
    font-size: 1rem;
    color: var(--paragraph-color);
}

.lg-none {
    display: none !important;
}

.provider_links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.provider_links a img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.btn-main {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: var(--white-color);
    padding-block: 0.75rem;
}

.text_paragraph {
    color: var(--paragraph-color);
    font-size: 0.85rem;
    line-height: 1.6;
}

.header_section {
    margin-bottom: 2.5rem;
}

.header_title {
    color: transparent;
    font-size: 3rem;
}

.header_section_large {
    text-align: center;
    margin-bottom: 5rem;
}

.header_section_large .section_title {
    color: transparent;
    background-clip: text;
    --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
    background-image: linear-gradient(135deg, #ffffff 30%, #a5b4fc 70%, #8b5cf6 100%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 7.5rem;
    line-height: normal;
}

.header_section_large span {
    display: block;
    font-size: 1.5rem;
    color: var(--paragraph-color);
}

/* End Var */
/* Start Tools */
.rotating_headline_area {
    position: relative;
    width: 40rem;
    height: 3.5rem;
    overflow: hidden;
}

.rotating_headline_area .rotating_headline ul {
    display: inline-block;
    height: auto;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rotating_headline_area .rotating_headline li {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    transition: transform 0.8s ease, opacity 0.6s ease;
    transform: translate(0, 0);
    opacity: 1;
    font-size: 2rem;
    font-weight: 600;
    color: white;
}

.rotating_headline_area .rotating_headline li.last {
    transform: translateY(calc(-100% - 50%));
    opacity: 0;
}

.rotating_headline_area .rotating_headline li.next {
    transform: translateY(calc(100% - 50%));
    opacity: 0;
}

/* End Tools */


/* Start Reset Var */

.card {
    background-color: var(--bg-card);
    color: var(--white-color);
    border: unset;
}

.modal-content {
    background-color: var(--bg-main);
}

.modal-header {
    background-color: rgb(9 9 11/var(--tw-bg-opacity));
    border: none;
}

.modal-backdrop {
    background-color: var(--bg-card);
}

/* End Reset Var */

/* Start Nav App */

.navbar {
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 100%;
    z-index: 99;
    padding-block: 0.75rem;
}

.navbar.not_home_page {
    position: static;
}

.navbar_link_tools {
    display: none;
}

.navbar .navbar-nav {
    gap: 2.5rem;
}

.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .nav-item .nav-link-title {
    font-weight: 600;
    color: var(--white-color);
    font-size: 1rem;
}

body .navbar .navbar-brand a {
    font-size: 1.5rem;
    color: var(--white-color);
}

body:not(.not_home_page) .navbar .navbar-brand a {
    color: var(--white-color);
}

.navbar .navbar-nav .nav-link.btn_tranparent {
    border-radius: 30rem;
    padding-block: 0.5rem;
    background: hsla(0, 0%, 100%, 0.05);
    color: var(--white-color);
    min-width: 8.5rem;
    font-size: 1rem;
    gap: 0.5rem;
}

.navbar .navbar-nav .nav-link.btn_tranparent.auth_user {
    min-width: 10.5rem;
    background: rgba(99, 102, 241, 0.15);
}

.navbar .navbar-nav .nav-link.btn_tranparent:hover {
    background: hsla(0, 0%, 100%, 0.3);
}

.navbar .navbar-nav .nav-link.btn_tranparent svg {
    --aous-aw-icon-size: 0.85rem;
    stroke-width: 3.5;
    margin-top: 3px;
    color: white !important;
}

html[dir="rtl"] .contact_submit_btn svg,
html[dir="rtl"] .get_started .content_card_started .card_started a svg,
html[dir="rtl"] .navbar .navbar-nav .nav-link.btn_tranparent svg {
    transform: rotate(180deg);
}

.navbar .language_dropdown .dropdown-toggle:after {
    display: none;
}

.navbar .dropdown-menu {
    top: 3rem;
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: unset;
    border: unset;
}

.navbar .dropdown-menu a {
    color: var(--white-color);
    padding-bottom: 0.75rem;
}

@keyframes navbar-show {
    from {
        transform: translateY(-100%)
    }

    to {
        transform: translateY(0)
    }
}

@-webkit-keyframes navbar-show {
    from {
        transform: translateY(-100%)
    }

    to {
        transform: translateY(0)
    }
}

/* End Nav App */

/* Start Landing */
.landing {
    --tw-bg-opacity: 1;
    background-color: var(--bg-main);
    min-height: 100vh;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.landing .radial_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(80% 50% at 50% -20%, rgb(49 58 63), hsla(0, 0%, 100%, 0));
}

.landing>svg {
    -webkit-mask-image: radial-gradient(100% 80% at top center, #fff, transparent);
    mask-image: radial-gradient(100% 80% at top center, #fff, transparent);
    stroke: hsla(0, 0%, 100%, .05);
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
}

.landing h1 {
    color: transparent;
    font-size: 4.25rem;
    width: 35%;
    line-height: 1.1;
    text-align: center;
    padding-top: 11rem;
    letter-spacing: -.025em;
}

.landing .the_canvas_area {
    width: 100%;
    height: 100vh;
    position: absolute;
}

.landing .the_canvas_area canvas {
    position: absolute;
    display: block;
    width: 50%;
    height: 100%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    opacity: 0.4;
}

.landing .landing_description {
    margin-top: 0.75rem;
}

.landing .landing_description p {
    width: 60%;
    margin: 0 auto;
    text-align: center;
    font-size: 1.20rem;
    color: var(--paragraph-color);
}

.landing .action_buttons {
    display: flex;
    margin-top: 6rem;
    position: relative;
    z-index: 3;
}

.landing .action_buttons a {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color: var(--white-color);
    font-size: 1.1rem;
    text-align: center;
}

.landing .action_buttons a.with_border {
    border: 1px solid white;
    font-weight: 600;
}

.landing .action_buttons a svg {
    --aous-aw-icon-size: 1.75rem;
}

/* End Landing */

/* Start Account Dasboard */

.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transform: translateY(20px);
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

.db_wrapper {
    position: relative;
    padding: 5rem 0 5rem;
}

@keyframes aurora_drift_1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -20px) scale(1.08);
    }

    66% {
        transform: translate(-20px, 15px) scale(0.95);
    }
}

@keyframes aurora_drift_2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-25px, 20px) scale(1.05);
    }

    66% {
        transform: translate(18px, -12px) scale(0.97);
    }
}

.db_aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.db_aurora_1 {
    width: 420px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 70%);
    top: 10%;
    left: 10%;
    animation: aurora_drift_1 14s ease-in-out infinite;
}

.db_aurora_2 {
    width: 360px;
    height: 260px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%);
    bottom: 5%;
    right: 8%;
    animation: aurora_drift_2 18s ease-in-out infinite;
}

.account_dashboard_area {
    position: relative;
    z-index: 1;
    perspective: 1400px;
    margin: 0 auto;
}

.account_dashboard_area {
    position: relative;
    z-index: 1;
}

.db_illustration {
    position: relative;
    height: 520px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(160deg, #0c0c10 0%, #0e0e14 100%);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}

.db_illu_center_glow {
    position: absolute;
    width: 500px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12), transparent 65%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(40px);
    pointer-events: none;
}

@keyframes illu_in_left {
    from {
        opacity: 0;
        transform: translateX(-18px) rotate(var(--rot));
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(var(--rot));
    }
}

@keyframes illu_in_right {
    from {
        opacity: 0;
        transform: translateX(18px) rotate(var(--rot));
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(var(--rot));
    }
}

@keyframes illu_in_up {
    from {
        opacity: 0;
        transform: translateY(16px) rotate(var(--rot));
    }

    to {
        opacity: 1;
        transform: translateY(0) rotate(var(--rot));
    }
}

@keyframes illu_float_a {

    0%,
    100% {
        transform: rotate(var(--rot)) translateY(0px);
    }

    50% {
        transform: rotate(var(--rot)) translateY(-6px);
    }
}

@keyframes illu_float_b {

    0%,
    100% {
        transform: rotate(var(--rot)) translateY(0px);
    }

    50% {
        transform: rotate(var(--rot)) translateY(-9px);
    }
}

@keyframes illu_float_c {

    0%,
    100% {
        transform: rotate(var(--rot)) translateY(0px);
    }

    50% {
        transform: rotate(var(--rot)) translateY(-5px);
    }
}

.db_illu_card {
    position: absolute;
    background: rgba(18, 18, 22, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.db_illu_card_label {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.07em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Profile card */
.db_illu_profile {
    --rot: -2deg;
    top: 4%;
    left: 6%;
    width: 330px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    z-index: 3;
    animation: illu_in_left 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-name: illu_in_left, illu_float_c;
    animation-duration: 0.6s, 7s;
    animation-delay: 0.1s, 0.7s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
    transform: rotate(var(--rot));
}

.db_illu_avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-gradient);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.db_illu_profile_info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.db_illu_profile_name {
    height: 8px;
    width: 100px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
}

.db_illu_profile_handle {
    font-size: 0.65rem;
    color: rgba(99, 102, 241, 0.8);
}

.db_illu_profile_socials {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.db_illu_social {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: block;
}

/* Analytics card */
.db_illu_analytics {
    --rot: 2.5deg;
    top: 6%;
    right: 5%;
    width: 195px;
    z-index: 4;
    animation-name: illu_in_right, illu_float_a;
    animation-duration: 0.6s, 5.5s;
    animation-delay: 0.25s, 0.85s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
    transform: rotate(var(--rot));
}

.db_illu_big_num {
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 0.6rem;
}

.db_illu_bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 44px;
    margin-bottom: 0.5rem;
}

.db_illu_bars span {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: rgba(99, 102, 241, 0.25);
    transition: height 0.3s;
}

.db_illu_bars span:last-child {
    background: var(--accent-gradient);
}

.db_illu_trend {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    color: #4ade80;
}

.db_illu_trend svg {
    color: #4ade80;
}

/* Links card */
.db_illu_links {
    --rot: -2.5deg;
    top: 30%;
    left: 3%;
    width: 215px;
    z-index: 5;
    animation-name: illu_in_left, illu_float_b;
    animation-duration: 0.6s, 6.5s;
    animation-delay: 0.4s, 1s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
    transform: rotate(var(--rot));
}

.db_illu_link_item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.4rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    margin-bottom: 0.3rem;
}

.db_illu_link_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.db_illu_link_name {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
    flex: 1;
}

.db_illu_link_stat {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.25);
}

.db_illu_toggle_on,
.db_illu_toggle_off {
    width: 24px;
    height: 13px;
    border-radius: 7px;
    flex-shrink: 0;
    position: relative;
}

.db_illu_toggle_on {
    background: #6366f1;
}

.db_illu_toggle_on::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: white;
}

.db_illu_toggle_off {
    background: rgba(255, 255, 255, 0.1);
}

.db_illu_toggle_off::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

/* Form card */
.db_illu_form {
    --rot: 1.5deg;
    top: 35%;
    right: 4%;
    width: 195px;
    z-index: 4;
    animation-name: illu_in_right, illu_float_a;
    animation-duration: 0.6s, 8s;
    animation-delay: 0.5s, 1.2s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
    transform: rotate(var(--rot));
}

.db_illu_live_dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
    animation: mock_pulse_dot 2s ease-in-out infinite;
}

.db_illu_field {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    height: 26px;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    overflow: hidden;
}

.db_illu_field_bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
}

.db_illu_field_filled {
    background: rgba(255, 255, 255, 0.18);
}

.db_illu_field_active {
    background: rgba(99, 102, 241, 0.35);
    display: flex;
    align-items: center;
    gap: 2px;
}

.db_illu_submit_btn {
    background: var(--accent-gradient);
    color: white;
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    padding: 0.4rem;
    border-radius: 8px;
    margin-top: 0.25rem;
}

.db_illu_appt {
    --rot: -1.2deg;
    bottom: 15%;
    left: 8%;
    width: 235px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    z-index: 6;
    animation-name: illu_in_up, illu_float_c;
    animation-duration: 0.6s, 5s;
    animation-delay: 0.6s, 1.3s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
    transform: rotate(var(--rot));
}

.db_illu_appt_2 {
    --rot: 1.8deg;
    bottom: 3%;
    left: 22%;
    z-index: 5;
    animation-delay: 0.75s, 1.5s;
    transform: rotate(var(--rot));
}

.db_illu_appt_avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.db_illu_appt_avatar_2 {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.db_illu_appt_info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db_illu_appt_name {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.db_illu_appt_time {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
}

.db_illu_qr {
    --rot: 4deg;
    top: 50%;
    left: 42%;
    padding: 0.65rem;
    z-index: 3;
    animation-name: illu_in_up, illu_float_b;
    animation-duration: 0.6s, 9s;
    animation-delay: 0.55s, 1.6s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
    transform: rotate(var(--rot));
}

.db_illu_qr_grid {
    display: grid;
    grid-template-columns: repeat(4, 10px);
    gap: 2px;
}

.db_illu_qr_grid span {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.7);
    display: block;
}

.db_qr_e {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Status badges */
.db_status {
    display: inline-flex;
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 600;
    flex-shrink: 0;
}

.db_status_confirmed {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
}

.db_status_pending {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

@keyframes mock_pulse_dot {

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

    50% {
        transform: scale(1.4);
        opacity: 0.6;
    }
}

@keyframes mock_cursor_blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.db_cursor {
    color: #818cf8;
    animation: mock_cursor_blink 1s step-end infinite;
    font-size: 0.7rem;
}

/* Connection lines */
.db_illu_lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* Card glows */
.db_illu_analytics {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 50px rgba(99, 102, 241, 0.12);
}

.db_illu_form {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 40px rgba(139, 92, 246, 0.1);
}

.db_illu_links {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 35px rgba(99, 102, 241, 0.08);
}

/* Animated top border on analytics card */
.db_illu_analytics::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.7), rgba(139, 92, 246, 0.7), transparent);
    border-radius: 1px;
}

/* Bar grow animation */
@keyframes bar_grow {
    from {
        height: 0;
    }

    to {
        height: var(--bh);
    }
}

.db_bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: rgba(99, 102, 241, 0.22);
    transform-origin: bottom;
    animation: bar_grow 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    height: var(--bh);
}

.db_bar:nth-child(1) {
    animation-delay: 0.8s;
}

.db_bar:nth-child(2) {
    animation-delay: 0.9s;
}

.db_bar:nth-child(3) {
    animation-delay: 1.0s;
}

.db_bar:nth-child(4) {
    animation-delay: 1.1s;
}

.db_bar:nth-child(5) {
    animation-delay: 1.2s;
}

.db_bar:nth-child(6) {
    animation-delay: 1.3s;
}

.db_bar:nth-child(7) {
    animation-delay: 1.4s;
}

.db_bar_accent {
    background: var(--accent-gradient) !important;
}

/* Toast notification */
@keyframes toast_cycle {
    0% {
        opacity: 0;
        transform: translateX(20px) rotate(1deg);
    }

    12% {
        opacity: 1;
        transform: translateX(0) rotate(1deg);
    }

    70% {
        opacity: 1;
        transform: translateX(0) rotate(1deg);
    }

    82% {
        opacity: 0;
        transform: translateX(20px) rotate(1deg);
    }

    100% {
        opacity: 0;
        transform: translateX(20px) rotate(1deg);
    }
}

.db_illu_toast {
    position: absolute;
    top: 56%;
    right: 18%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: rgba(18, 18, 22, 0.92);
    border: 1px solid rgba(74, 222, 128, 0.25);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(74, 222, 128, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 7;
    white-space: nowrap;
    animation: toast_cycle 7s 1.8s ease-in-out infinite;
    opacity: 0;
}

.db_illu_toast_icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(74, 222, 128, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db_illu_toast_icon svg {
    color: #4ade80;
}

.db_illu_toast_text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db_illu_toast_title {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
}

.db_illu_toast_sub {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1;
}

@keyframes db_float_1 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes db_float_2 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes db_float_3 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes db_badge_in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.92);
    }

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

.db_badge {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: rgba(20, 20, 24, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: db_badge_in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    white-space: nowrap;
}

.db_badge_clicks {
    top: 14%;
    right: -2%;
    animation-delay: 0.3s, 0.9s;
    animation-name: db_badge_in, db_float_1;
    animation-duration: 0.6s, 5s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
}

.db_badge_subscriber {
    top: 54%;
    left: -3%;
    animation-delay: 0.6s, 1.2s;
    animation-name: db_badge_in, db_float_2;
    animation-duration: 0.6s, 6.5s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
}

.db_badge_qr {
    bottom: 8%;
    right: 4%;
    animation-delay: 0.9s, 1.5s;
    animation-name: db_badge_in, db_float_3;
    animation-duration: 0.6s, 4.5s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
}

.db_badge_icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db_badge_icon svg {
    color: white;
}

.db_badge_icon_blue {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.db_badge_icon_green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.db_badge_icon_violet {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.db_badge_text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db_badge_val {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--white-color);
    line-height: 1;
}

.db_badge_lbl {
    font-size: 0.7rem;
    color: var(--paragraph-color);
    line-height: 1;
}

.floating-icons {
    position: relative;
    width: 100%;
    height: 400px;
    perspective: 1000px;
}

.floating-icons .icon {
    position: absolute;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

.i1 {
    top: 10%;
    left: 10%;
}

.i2 {
    top: 20%;
    right: 15%;
}

.i3 {
    top: 50%;
    left: 20%;
}

.i4 {
    top: 70%;
    right: 25%;
}

.i5 {
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
}


/* End Account Dasboard */

/* Start Single page */
.single_page {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.single_page .title_single {
    color: var(--white-color);
    font-size: 1.25rem;
}

.single_page .description_title_single {
    width: 70%;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: transparent;
    padding-top: 2rem;
    margin-bottom: 5rem;
}

.single_page .single_page_info {
    padding-top: 4rem;
}

.single_page .single_page_info .service_list_description {
    padding-inline: 2rem;
}

.single_page .single_page_info .service_list_description h3 {
    color: var(--white-color);
}

.single_page .single_page_info .service_list_description p {
    margin-bottom: 2rem !important;
}

.single_page .single_page_info .service_title_content {
    position: relative;
    padding-left: 1rem;
    padding-bottom: 2rem;
}

.single_page .single_page_info .service_title_content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 1px;
    background-color: var(--border-color);
}

.single_page .single_page_info .service_title_content h2::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    height: 20px;
    width: 1px;
    background-color: var(--white-color);
    z-index: 99;
}

.single_page .single_page_info .service_title_content .service_title {
    color: var(--white-color);
}

.single_page .single_page_info .service_title_content h2 {
    color: var(--white-color);
}

.single_page .single_page_info .service_title_content .text_description {
    color: var(--paragraph-color);
}

.single_page.pricing_content {
    position: relative;
    overflow: hidden;
    padding-top: 0;
}

.single_page .cards_info {
    margin-top: 3rem;
}

.single_page .cards_info .dark_card {
    background-color: var(--white-color);
}

.single_page .cards_info .standard_plan_card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 0;
    background-color: #181e21;
    border-radius: 12px;
}

.single_page .cards_info .standard_plan_card .text_content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.single_page .cards_info .standard_plan_card .text_content h1 {
    font-size: 1.75rem;
    margin: 0;
    color: var(--white-color);
}

.single_page .cards_info .dark_card .standard_plan_card .text_content h1 {
    color: var(--white-color);
}

.single_page .cards_info .standard_plan_card .text_content a {
    display: flex;
    align-items: center;
    background: var(--main-color);
    padding: 0.35rem 1rem;
    border-radius: 30px;
    width: max-content;
    margin-top: 2.5rem;
    font-weight: 500;
    color: var(--bg-card);
}

.single_page .cards_info .standard_plan_card .text_content a svg {
    color: var(--bg-card);
}

.single_page .cards_info .dark_card .standard_plan_card .text_content p {
    color: var(--paragraph-color);
    margin-bottom: 4rem;
    font-size: 0.95rem;
}

.single_page .cards_info .standard_plan_card .details_content {
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
}

.single_page .cards_info .standard_plan_card .details_content .card_details_cotntent {
    background: var(--bg-card);
    height: 100%;
    display: grid;
    justify-items: center;
    row-gap: 4px;
    text-align: center;
    padding: 1.5rem;
}

.single_page .cards_info .dark_card .standard_plan_card .details_content .card_details_cotntent {
    color: var(--white-color);
    align-items: center;
}

.single_page .cards_info .standard_plan_card .details_content .card_details_cotntent h1 {
    font-weight: 500;
    font-size: 1.75rem;
    color: var(--white-color);
}

.single_page .cards_info .standard_plan_card .details_content .card_details_cotntent span {
    font-weight: 500;
    font-size: 1rem;
    color: var(--paragraph-color);
}

.single_page .cards_info .link_card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 5px;
}

.single_page .cards_info .link_card span {
    padding: 0.65rem;
    background: #f6f9fc;
    width: 100px;
    text-align: center;
}

.single_page .cards_info .link_card b {
    font-size: 1rem;
    font-weight: 500;
}

.single_page .card_list_services {
    margin-top: 6rem;
    padding-block: 3rem;
}

.single_page .card_list_services .card_list_services_header {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: transparent;
}

.single_page .card_list_services .card_list_services_description {
    font-size: 1rem;
    font-weight: 400;
    width: 60%;
}

.single_page .card_list_services .list_services_info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 5rem;
    row-gap: 3.5rem;
}

.single_page .card_list_services .list_services_info .list_service {
    position: relative;
}

.single_page .card_list_services .list_services_info .list_service::after {
    content: '';
    position: absolute;
    top: 9px;
    left: -13px;
    height: 100%;
    width: 1px;
    background-color: #1c1c1c;
}

.single_page .card_list_services .list_services_info .list_service .service_name {
    position: relative;
    font-size: 1rem;
    margin-left: 4px;
    color: var(--white-color);
}

.single_page .card_list_services .list_services_info .list_service .service_name::after {
    content: '';
    position: absolute;
    top: 9px;
    left: -17px;
    height: 15px;
    width: 1.5px;
    background-color: var(--white-color);
    z-index: 99;
}

.single_page .card_list_services .list_services_info .list_service ul li {
    padding-bottom: 0.25rem;
    display: flex;
    gap: 0.30rem;
}

.single_page .card_list_services .list_services_info .list_service ul li span {
    color: var(--paragraph-color);
    font-weight: 500;
}

.single_page .card_list_services .list_services_info .list_service ul li svg {
    --aous-aw-icon-size: 1.35rem;
    opacity: .3;
}

.single_page .pricing_table_info {
    margin-top: 8rem;
    border-bottom: 1px solid rgb(200 204 234 / 10%);
}

.single_page .pricing_table_info>h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    width: 70%;
}

.single_page .pricing_table_info>p {
    margin-bottom: 2.5rem;
    font-size: 1rem;
}

.single_page .pricing_table_info .pricing_section {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.single_page .pricing_table_info .pricing_section .pricing_section_header,
.single_page .pricing_table_info .pricing_section .pricing_section_body_content {
    position: relative;
    padding: 1rem;
}

.single_page .pricing_table_info .pricing_section .pricing_section_header h4,
.single_page .pricing_table_info .pricing_section .pricing_section_body_content h4 {
    color: var(--white-color);
}


.single_page .pricing_table_info .pricing_section .pricing_section_header span,
.single_page .pricing_table_info .pricing_section .pricing_section_body_content span {
    color: var(--paragraph-color);

}

.single_page .pricing_table_info .pricing_section .pricing_section_header::before,
.single_page .pricing_table_info .pricing_section .pricing_section_body_content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: rgb(200 204 234 / 10%);
}

.single_page .pricing_table_info .pricing_section .pricing_section_header::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: rgb(200 204 234 / 10%);
}

.single_page .pricing_table_info .pricing_section .pricing_section_header h2 {
    position: relative;
    color: var(--white-color);
}

.single_page .pricing_table_info .pricing_section .pricing_section_header h2::after {
    content: '';
    position: absolute;
    left: -1rem;
    top: 6px;
    width: 1px;
    height: 1rem;
    background-color: var(--white-color);
}

.single_page .pricing_table_info .pricing_section .pricing_section_body .pricing_section_body_row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    position: relative;
}

.single_page .pricing_table_info .pricing_section .pricing_section_body .pricing_section_body_row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: rgb(200 204 234 / 10%);
}

.single_page .pricing_table_info .pricing_section .pricing_section_body .pricing_section_body_row .pricing_section_body_container {
    position: relative;
}

.single_page .pricing_table_info .pricing_section .pricing_section_body .pricing_section_body_row .pricing_section_body_container .pricing_section_body_price_list {
    background-color: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    position: relative;
    height: 100%;
}

.single_page .pricing_table_info .pricing_section .pricing_section_body .pricing_section_body_row .pricing_section_body_container .pricing_section_body_price_list::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: rgb(200 204 234 / 10%);
}

.single_page .pricing_table_info .pricing_section .pricing_section_body .pricing_section_body_row .pricing_section_body_container .pricing_section_body_price_list .pricing_section_body_price {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
}

.single_page .pricing_table_info .pricing_section .pricing_section_body .pricing_section_body_row .pricing_section_body_container .pricing_section_body_price_list .pricing_section_body_price span {
    display: block;
    color: var(--paragraph-color);
}

.single_page .pricing_table_info .pricing_section .pricing_section_body .pricing_section_body_row .pricing_section_body_container .pricing_section_body_price_list .pricing_section_body_price .price_info {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--white-color);
}

.single_page .pricing_table_info .pricing_section .pricing_section_body .pricing_section_body_row .pricing_section_body_container .pricing_section_body_price_list .pricing_section_body_price .price_info small {
    font-size: 0.9rem;
    font-weight: 500;
}

.single_page .pricing_table_info .pricing_section .pricing_section_body .pricing_section_body_row .pricing_section_body_container .pricing_section_body_price_list .pricing_section_body_price a {
    display: block;
    margin-top: 1rem;
    color: var(--main-color);
    font-weight: 500;
}

.single_page .pricing_table_info .pricing_section .pricing_section_body .pricing_section_body_row .pricing_section_body_container .pricing_section_body_price_list .pricing_section_body_price a svg {
    color: var(--main-color);
}

/* Hero */
.pricing_page_hero {
    position: relative;
    padding: 5rem 0 4rem;
    margin-bottom: 6rem;
    text-align: center;
    overflow: hidden;
}

.pricing_page_hero_inner {
    position: relative;
    z-index: 1;
}

.pricing_page_h1 {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 1rem 0 1.25rem;
}

.pricing_page_sub {
    font-size: 1.05rem;
    color: var(--paragraph-color);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Cards on pricing page — slightly taller / more padding */
.pricing_grid_page {
    margin-top: 0;
    padding-bottom: 5rem;
}

/* ---- Comparison table ---- */
.pricing_compare_wrap {
    padding-top: 1rem;
    padding-bottom: 6rem;
    border-top: 1px solid var(--border-color);
}

.pricing_compare_header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.pricing_compare_header h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

.pricing_compare_header p {
    font-size: 0.95rem;
    color: var(--paragraph-color);
    max-width: 460px;
    margin: 0 auto;
}

.pricing_compare_block {
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: var(--bg-card);
}

.pricing_compare_block_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: rgba(99, 102, 241, 0.06);
    border-bottom: 1px solid var(--border-color);
}

.pricing_compare_plan_name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent);
    letter-spacing: 0.02em;
}

.pricing_compare_plan_pages {
    font-size: 0.8rem;
    color: var(--paragraph-color);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.pricing_compare_row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1rem;
    padding: 0.95rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    align-items: center;
}

.pricing_compare_row:last-child {
    border-bottom: none;
}

.pricing_compare_row:hover {
    background: rgba(255, 255, 255, 0.015);
}

.pricing_compare_label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pcl_title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--white-color);
}

.pcl_sub {
    font-size: 0.78rem;
    color: var(--paragraph-color);
    line-height: 1.45;
}

.pricing_compare_val {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pcv_price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white-color);
    letter-spacing: -0.02em;
}

.pcv_sub {
    font-size: 0.78rem;
    color: var(--paragraph-color);
}

.pricing_compare_pills {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pcv_pill {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
}

.pcv_included {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #4ade80;
}

.pcv_included svg {
    --aous-aw-icon-size: 1rem;
    color: #4ade80;
    flex-shrink: 0;
}

.pcv_na {
    font-size: 0.82rem;
    color: var(--paragraph-color);
    opacity: 0.5;
}

/* End Single page */

/* ============================================================
   Features Page
   ============================================================ */
.features_page_wrap {
    padding-bottom: 4rem;
}

.features_page_hero {
    position: relative;
    padding: 4.5rem 0 3rem;
    text-align: center;
    overflow: hidden;
}

.features_page_hero_inner {
    position: relative;
    z-index: 1;
}

.features_page_h1 {
    font-size: clamp(2rem, 4.5vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0.85rem 0 1.1rem;
    max-width: 700px;
    margin-inline: auto;
}

.features_page_sub {
    font-size: 1rem;
    color: var(--paragraph-color);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Feature tag pill */
.features_page_tag {
    width: fit-content;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent);
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: 0.2rem 0.75rem;
    border-radius: 20px;
    margin-bottom: 0.85rem;
}

/* Get started link inside feature card */
.features_page_cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: gap 0.2s ease, opacity 0.2s;
}

.features_page_cta svg {
    --aous-aw-icon-size: 0.85rem;
    color: var(--accent);
    transition: transform 0.2s ease;
}

.features_page_cta:hover {
    opacity: 0.8;
}

.features_page_cta:hover svg {
    transform: translateX(4px);
}

/* Start Features */
.features_cards_container {
    margin-block: 6rem 4rem;
    overflow: hidden;
}

.features_cards_area {
    counter-reset: feature-num;
}

.features_cards_area .features_card {
    display: flex;
    align-items: center;
    gap: 7rem;
    margin-bottom: 8rem;
    counter-increment: feature-num;
    position: relative;
}

.features_cards_area .features_card.reverse {
    flex-direction: row-reverse;
}

.features_card_enter .image_content {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.features_card_enter.reverse .image_content {
    transform: translateX(36px);
}

.features_card_enter .text_content {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}

.features_card_enter.is_visible .image_content,
.features_card_enter.is_visible .text_content {
    opacity: 1;
    transform: translate(0, 0);
}

.features_num_bg {
    position: absolute;
    bottom: -0.5rem;
    right: 1rem;
    font-size: 9rem;
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, transparent 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    user-select: none;
}

.features_num_bg::before {
    content: "0"counter(feature-num);
}

.features_card.reverse .features_num_bg {
    right: auto;
    left: 1rem;
}

/* Radial glow inside image */
.features_img_glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(99, 102, 241, 0.1), transparent 65%);
    pointer-events: none;
    z-index: 1;
}

.features_cards_area .features_card .image_content {
    position: relative;
    flex: 1;
    height: 28.5rem;
    border-radius: 24px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    animation: feature_glow_pulse 6s ease-in-out infinite;
}

.features_cards_area .features_card:hover .image_content {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 0 48px rgba(99, 102, 241, 0.15), 0 0 0 1px rgba(99, 102, 241, 0.1);
    animation: none;
}

.features_cards_area .features_card .image_content::after {
    content: "";
    height: 240px;
    width: 2px;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 600ms ease;
    background: linear-gradient(transparent, var(--accent), transparent);
    opacity: 0.3;
    animation: toTop 10s linear infinite;
}

.features_cards_area .features_card .image_content::before {
    content: "";
    height: 120px;
    width: 2px;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: opacity 600ms ease-in-out;
    background: linear-gradient(transparent, var(--accent-2), transparent);
    opacity: 0.18;
    animation: toBottom 13s linear infinite;
}

.features_cards_area .features_card:hover .image_content::after {
    opacity: 1;
    animation: toTop 3.5s linear infinite;
}

.features_cards_area .features_card:hover .image_content::before {
    opacity: 1;
    animation: toBottom 3.5s linear infinite;
}

@keyframes feature_glow_pulse {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(99, 102, 241, 0);
    }

    50% {
        box-shadow: 0 0 50px rgba(99, 102, 241, 0.1);
    }
}

.features_cards_area .features_card .image_content img {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    object-fit: contain;
    transform: translateY(8rem);
    transition: all 1.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.features_cards_area .features_card:hover .image_content img {
    transform: translateY(0rem) scale(1.05);
}

.features_cards_area .features_card .image_content .shine {
    content: "";
    position: absolute;
    top: -100%;
    left: -60%;
    width: 120px;
    height: 300%;
    background: linear-gradient(120deg, transparent, rgba(99, 102, 241, 0.18), transparent);
    transform: rotate(20deg);
    opacity: 0;
    pointer-events: none;
    filter: blur(3rem);
    z-index: 99;
}

.features_cards_area .features_card:hover .image_content .shine {
    animation: shineMove 1.6s ease;
    opacity: 1;
}

.features_cards_area .features_card.reverse:hover .image_content .shine {
    animation: shineReMove 1.6s ease;
    opacity: 1;
}

@keyframes shineMove {
    0% {
        left: -100%;
    }

    100% {
        left: 130%;
    }
}

@keyframes shineReMove {
    0% {
        left: 100%;
    }

    100% {
        left: -130%;
    }
}

@keyframes toTop {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-200%);
    }
}

@keyframes toBottom {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(200%);
    }
}

.features_cards_area .features_card .text_content {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

.features_cards_area .features_card .text_content::before {
    content: "0"counter(feature-num);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 20px;
    padding: 0.25rem 0.85rem;
    width: fit-content;
    margin-bottom: 1.25rem;
}

.features_cards_area .text_content h1 {
    font-size: 2.25rem;
    margin-bottom: 1.25rem;
    color: transparent;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.features_cards_area .text_content p {
    font-size: 1.1rem;
    color: var(--paragraph-color);
    line-height: 1.75;
    margin-bottom: 2rem;
    max-width: 440px;
}

.features_cards_area .text_content .btn {
    padding: 0.6rem 1rem;
    font-size: 1rem;
    border-radius: 30px;
    font-weight: 600;
}

/* Feature Floating Badges */
.feat_badges {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.feat_badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.38rem 0.8rem;
    background: rgba(10, 10, 15, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #e4e4e7;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.feat_badge_a {
    bottom: 1.4rem;
    left: 1.1rem;
    animation: feat_float_a 3.8s ease-in-out infinite;
}

.feat_badge_b {
    bottom: 1.4rem;
    right: 1.1rem;
    animation: feat_float_b 4.4s ease-in-out infinite;
    animation-delay: 1.2s;
}

@keyframes feat_float_a {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes feat_float_b {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

.feat_badge_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}

.feat_dot_indigo {
    background: #6366f1;
    color: #6366f1;
}

.feat_dot_violet {
    background: #8b5cf6;
    color: #8b5cf6;
}

.feat_dot_blue {
    background: #3b82f6;
    color: #3b82f6;
}

.feat_dot_green {
    background: #22c55e;
    color: #22c55e;
}

.feat_dot_orange {
    background: #f97316;
    color: #f97316;
}

/* Dot-grid texture in image area */
.features_cards_area .features_card .image_content {
    background-image: radial-gradient(rgba(99, 102, 241, 0.12) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* Feature floating chips */
.feat_chip {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(8, 8, 20, 0.80);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    padding: 6px 13px 6px 9px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(228, 228, 231, 0.9);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.feat_chip svg {
    color: var(--accent);
    flex-shrink: 0;
}

.feat_chip_tl {
    top: 1.2rem;
    left: 1.2rem;
    animation: feat_chip_up 4s ease-in-out infinite;
}

.feat_chip_br {
    bottom: 1.8rem;
    right: 1.2rem;
    animation: feat_chip_dn 4.6s ease-in-out infinite;
    animation-delay: -2.3s;
}

.features_card.reverse .feat_chip_tl {
    left: auto;
    right: 1.2rem;
}

.features_card.reverse .feat_chip_br {
    right: auto;
    left: 1.2rem;
}

@keyframes feat_chip_up {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes feat_chip_dn {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7px);
    }
}

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

.dot_green {
    background: #22c55e;
    box-shadow: 0 0 7px rgba(34, 197, 94, 0.6);
}

.dot_indigo {
    background: #6366f1;
    box-shadow: 0 0 7px rgba(99, 102, 241, 0.6);
}

.dot_violet {
    background: #8b5cf6;
    box-shadow: 0 0 7px rgba(139, 92, 246, 0.6);
}

/* Scroll reveal for chips */
.features_card_enter .feat_chip {
    opacity: 0;
    transition: opacity 0.55s ease 0.55s;
}

.features_card_enter.is_visible .feat_chip {
    opacity: 1;
}

/* Feature icon badge — floats in text column */
.feat_icon_wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.18);
    color: var(--accent);
    margin-bottom: 1.1rem;
}

/* Scroll reveal for icon */
.features_card_enter .feat_icon_wrap {
    opacity: 0;
    transform: scale(0.65) rotate(-8deg);
    transition: opacity 0.45s ease 0.08s,
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s;
}

.features_card_enter.is_visible .feat_icon_wrap {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Vertical connector between feature cards */
.features_cards_area .features_card:not(:last-child) {
    padding-bottom: 0;
}

.features_cards_area .features_card:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8rem;
    transform: translateX(-50%);
    width: 1px;
    height: 8rem;
    background: linear-gradient(to bottom, rgba(99, 102, 241, 0.25), transparent);
    pointer-events: none;
}

/* End Features */

/* Start App Footer */
.app_footer {
    min-height: 100vh;
    background-color: var(--bg-main);
    border-top: 1px solid var(--border-color);
}

.not_home_page .app_footer {
    padding: 0;
}

.footer_cta_wrap {
    position: relative;
    padding: 6rem 0 5.5rem;
    overflow: hidden;
    text-align: center;
}

.footer_cta_glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(99, 102, 241, 0.18), transparent 70%);
    pointer-events: none;
}

.footer_cta_inner {
    position: relative;
    z-index: 1;
}

.footer_cta_heading {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    background: linear-gradient(135deg, #ffffff 30%, #a5b4fc 70%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.25rem;
}

.footer_cta_sub {
    font-size: 1.05rem;
    color: var(--paragraph-color);
    max-width: 500px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

.footer_cta_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    background: var(--accent-gradient);
    color: white;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.footer_cta_btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: skewX(-20deg);
    animation: btn_shimmer 3.5s ease-in-out infinite;
}

.footer_cta_btn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(99, 102, 241, 0.4);
    color: white;
}

.footer_cta_btn svg {
    transition: transform 0.2s;
}

html[dir="rtl"] .footer_cta_btn svg {
    rotate: 180deg;
}

.footer_cta_btn:hover svg {
    transform: translateX(3px);
}

.footer_divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
}

.app_footer .app_footer_content .links {
    display: grid;
    grid-template-columns: 35% 60%;
    gap: 5%;
    padding: 3rem 0;
}

.footer_brand {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    text-decoration: none;
}

.app_footer .app_footer_content .description p {
    width: 90%;
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--paragraph-color);
    margin-bottom: 1.75rem;
}

.app_mobile_icons {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

html[dir="rtl"] .app_mobile_icons {
    align-items: flex-end;
}

.store_badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
    min-width: 150px;
}

.store_badge:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.06);
    transform: translateY(-2px);
}

.store_badge svg {
    --aous-aw-icon-size: 1.4rem;
    flex-shrink: 0;
    color: var(--white-color);
}

.store_badge_text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.store_badge_sub {
    font-size: 0.65rem;
    color: var(--paragraph-color);
    line-height: 1;
}

.store_badge_name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--white-color);
    line-height: 1;
}

.app_footer .app_footer_content .links_footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.app_footer .app_footer_content .links_footer .links_col .title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1.25rem;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--white-color);
}

.app_footer .app_footer_content .links_footer .links_col .title::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-gradient);
    flex-shrink: 0;
}

.app_footer .app_footer_content .links_footer .links_col ul li {
    margin-bottom: 0.55rem;
}

.app_footer .app_footer_content .links_footer .links_col ul li a {
    font-size: 0.875rem;
    color: var(--paragraph-color);
    text-decoration: none;
    transition: color 0.2s, padding-inline-start 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.app_footer .app_footer_content .links_footer .links_col ul li a::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.2s ease;
    flex-shrink: 0;
}

.app_footer .app_footer_content .links_footer .links_col ul li a:hover {
    color: var(--white-color);
}

.app_footer .app_footer_content .links_footer .links_col ul li a:hover::before {
    width: 10px;
}

/* Copyright bar */
.app_footer .app_footer_content .content_copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.not_home_page .app_footer .app_footer_content .content_copyright {
    border-top: 0;
}

.app_footer .app_footer_content .content_copyright .copyright {
    font-size: 0.8rem;
    color: var(--paragraph-color);
}

/* Legal links inside copyright bar */
.footer_legal_links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.footer_legal_links a {
    color: var(--paragraph-color);
    text-decoration: none;
    transition: color 0.2s;
}

.footer_legal_links a:hover {
    color: var(--white-color);
}

.footer_dot_sep {
    color: var(--border-color);
    user-select: none;
}

.app_footer .app_footer_content .content_copyright .links_social_media {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.social_icon_link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.social_icon_link:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-2px);
}

.app_footer .app_footer_content .content_copyright .links_social_media a svg {
    --aous-aw-icon-size: 1rem;
    color: var(--paragraph-color);
    transition: color 0.2s;
}

.app_footer .app_footer_content .content_copyright .links_social_media a:hover svg {
    color: var(--white-color);
}

/* End App Footer */

/* ============================================================
   Auth Section — Split Screen
   ============================================================ */
.auth_section {
    display: flex;
    min-height: 100vh;
    position: relative;
}

/* ---- Left: Brand Panel ---- */
.auth_brand_panel {
    position: relative;
    width: 52%;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.auth_brand_inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 3.5rem;
    width: 100%;
}

/* Aurora blobs */
.auth_brand_aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

.auth_aurora_1 {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.22), transparent 65%);
    top: -100px;
    left: -100px;
}

.auth_aurora_2 {
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.18), transparent 65%);
    bottom: -80px;
    right: -60px;
}

/* Dot grid */
.auth_brand_dot_grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    z-index: 0;
    pointer-events: none;
}

/* Logo */
.auth_brand_logo {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--white-color);
    text-decoration: none;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Headline */
.auth_brand_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 3rem;
}

.auth_brand_heading {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.12;
    margin: 0.85rem 0 1rem;
}

.auth_brand_sub {
    color: var(--paragraph-color);
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 380px;
    margin-bottom: 2rem;
}

/* Feature list */
.auth_feat_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth_feat_item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--white-color);
    font-size: 0.9rem;
    font-weight: 500;
}

.auth_feat_check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    flex-shrink: 0;
    color: var(--accent);
}

.auth_feat_check svg {
    --aous-aw-icon-size: 0.7rem;
    color: var(--accent);
}

/* Social proof */
.auth_brand_proof {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.auth_proof_avatars {
    display: flex;
}

.auth_proof_av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    margin-left: -8px;
    flex-shrink: 0;
}

.auth_proof_av:first-child {
    margin-left: 0;
}

.auth_av_1 {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.auth_av_2 {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.auth_av_3 {
    background: linear-gradient(135deg, #10b981, #3b82f6);
}

.auth_av_4 {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.auth_proof_text {
    font-size: 0.8rem;
    color: var(--paragraph-color);
    font-weight: 500;
}

/* ---- Right: Form Panel ---- */
.auth_section .form_content {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 48%;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    padding: 2rem;
}

.auth_section .form_content .form-check-input[type=checkbox] {
    background: transparent;
    border-color: var(--main-hover-border-color);
}

.auth_section .form_content .the_form .title {
    position: relative;
    display: block;
    color: var(--white-color);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-left: 30px;
}

.auth_section .form_content .the_form .title::after {
    width: 18px;
    height: 18px;
    background-color: var(--accent);
    animation: pulse 1s linear infinite;
}

.auth_section .form_content .the_form .title::after,
.auth_section .form_content .the_form .title::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    border-radius: 50%;
    left: 0px;
    top: 7px;
    background-color: var(--accent);
}

.auth_section .form_content .the_form p {
    color: var(--paragraph-color);
    font-size: 1rem;
}

.auth_section .form_content .the_form .card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    z-index: 1;
    min-height: 370px;
    max-width: 440px;
    width: 440px;
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.auth_section .form_content .the_form .card .other_links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

.auth_section .form_content .the_form .card .other_links .remember_me label,
.auth_section .form_content .the_form .card .other_links .forgot_password a {
    color: var(--paragraph-color);
    font-size: 0.85rem;
    font-weight: 500;
}

form .action_buttons button {
    background: var(--accent-gradient);
    color: white;
    margin-top: 1rem;
    padding-inline: 1.5rem;
    padding-block: 0.75rem;
    border-radius: 30px;
    border: unset;
    font-weight: 600;
    font-size: 1rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

form .action_buttons button:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.auth_section .note_area {
    text-align: center;
    max-width: 440px;
    width: 100%;
    margin-top: 1rem;
}

.auth_section .note_area span {
    display: block;
    padding: 1rem;
    color: var(--paragraph-color);
    opacity: .5;
}

.auth_section .note_area p a {
    color: var(--accent);
    font-weight: 600;
    font-size: 1rem;
}

.addon_content {
    position: relative;
}

.addon_content .show_hidden {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    z-index: 9999;
    cursor: pointer;
    display: none;
}

.addon_content .show_hidden.active {
    display: block;
}

/* End Auth Section */

/* Star Sweet Alerts */
#toast-container>div {
    padding: 15px;
}

#toast-container .toast {
    min-width: 250px;
    border-radius: 7px;
}

#toast-container .toast .toast-message {
    font-size: 14px;
    font-weight: 400;
}

#toast-container>.toast-success,
#toast-container>.toast-warning,
#toast-container>.toast-primary,
#toast-container>.toast-info,
#toast-container>.toast-error {
    background-image: unset !important;
    box-shadow: none;
    opacity: 1;
    font-size: 0.9rem;
}

#toast-container>.toast-error {
    background-color: var(--aous-aw-danger);
}

#toast-container>.toast-success {
    background-color: var(--aous-aw-success);
}

#toast-container>.toast-warning {
    background-color: var(--aous-aw-warning);
}

#toast-container>.toast-primary {
    background-color: var(--main-color);
}

#toast-container>.toast-info {
    background-color: var(--main-color);
}

/* End Sweet Alerts */

/* Start Cookie card */
.cookie_card {
    padding: 1.5rem;
    width: 60%;
    background-color: var(--bg-card);
    display: grid;
    align-items: center;
    gap: 2rem;
    margin: auto;
    border-radius: 10px;
    grid-template-columns: 3.75fr 1fr;
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translate(-50%, 80px);
    box-shadow: 1px 6px 15px #0506064f;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}

.cookie_card.show {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0px);
}

.cookie_card .cookie_content h1 {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--white-color);
    font-size: 1.1rem;
}

.cookie_card .cookie_content h1 svg {
    --aous-aw-icon-size: 1.75rem;
    color: #E4904B;
}

.cookie_card .cookie_content p {
    color: var(--paragraph-color);
    margin-top: 0.75rem;
    line-height: 1.7;
}

.cookie_card .cookie_content a {
    font-weight: 500;
}

.cookie_card .cookie_action {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cookie_card .cookie_action .btn {
    display: block;
    width: 100%;
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--white-color);
}

.cookie_card .cookie_action .btn.accept_cookie {
    background-color: var(--main-color);
    color: var(--white-color);
    border-color: var(--main-color);
}

/* End Cookie card */

/* ============================================================
   Contact Page
   ============================================================ */

.contact_wrap {
    padding-bottom: 6rem;
}

/* Hero */
.contact_hero {
    position: relative;
    padding: 4.5rem 0 3.5rem;
    text-align: center;
    overflow: hidden;
}

.contact_hero_inner {
    position: relative;
    z-index: 1;
}

.contact_hero_h1 {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0.85rem 0 1rem;
}

.contact_hero_sub {
    font-size: 1rem;
    color: var(--paragraph-color);
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Layout */
.contact_layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 3rem;
    padding-top: 1.5rem;
}

/* ---- Info column ---- */
.contact_info_col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact_info_block_label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 1rem;
}

.contact_info_block {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.contact_info_item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: border-color 0.2s;
}

.contact_info_item:hover {
    border-color: rgba(99, 102, 241, 0.3);
}

.contact_info_icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact_info_icon svg {
    --aous-aw-icon-size: 1.1rem;
    color: var(--accent);
}

.contact_info_text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact_info_key {
    font-size: 0.75rem;
    color: var(--paragraph-color);
    font-weight: 500;
}

.contact_info_val {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--white-color);
}

/* Help list */
.contact_help_block {
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

.contact_help_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.contact_help_list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.contact_help_icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.contact_help_icon svg {
    --aous-aw-icon-size: 0.95rem;
    color: var(--paragraph-color);
}

.contact_help_list li span {
    font-size: 0.875rem;
    color: var(--paragraph-color);
    line-height: 1.55;
}

/* ---- Form column ---- */
.contact_form_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
}

.contact_form_row_2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.contact_field {
    margin-bottom: 0.75rem;
}

.contact_field:last-of-type {
    margin-bottom: 0;
}

.contact_field input,
.contact_field textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    color: var(--white-color);
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    font-family: inherit;
    resize: none;
}

.contact_field input::placeholder,
.contact_field textarea::placeholder {
    color: var(--paragraph-color);
}

.contact_field input:focus,
.contact_field textarea:focus {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.04);
}

/* Form footer: checkbox + submit */
.contact_form_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.contact_privacy_label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    flex: 1;
}

.contact_privacy_label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.contact_privacy_label span {
    font-size: 0.8rem;
    color: var(--paragraph-color);
    line-height: 1.5;
}

.contact_privacy_label span a {
    color: var(--accent);
    text-decoration: none;
}

.contact_privacy_label span a:hover {
    text-decoration: underline;
}

.contact_submit_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.5rem;
    background: var(--accent-gradient);
    color: #fff;
    border: none;
    border-radius: 30rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.contact_submit_btn svg {
    --aous-aw-icon-size: 1.1rem;
    color: white;
    transition: transform 0.2s;
}

.contact_submit_btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(99, 102, 241, 0.35);
}

.contact_submit_btn:hover svg {
    transform: translateX(3px);
}

.aous_aw_animation {
    opacity: 0;
}

[data-move="translateYScale"] {
    transform: translateY(0) scale(0.9);
}

[data-move="translateToTop"] {
    transform: translateY(20px);
}

[data-move="translateToDown"] {
    transform: translateY(-20px);
}

/* Start Check brand link */

.check_brand_link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-card);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    margin: 4rem auto;
    padding: 0;
    width: 80%;
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    animation: feature_glow_pulse 7s ease-in-out infinite;
}

.check_brand_link:hover {
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 0 72px rgba(99, 102, 241, 0.12);
    animation: none;
}

.check_brand_link::after {
    content: "";
    height: 220px;
    width: 2px;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 600ms ease;
    background: linear-gradient(transparent, var(--accent), transparent);
    opacity: 0.3;
    animation: toTop 11s linear infinite;
}

.check_brand_link::before {
    content: "";
    height: 120px;
    width: 2px;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: opacity 600ms ease-in-out;
    background: linear-gradient(transparent, var(--accent-2), transparent);
    opacity: 0.2;
    animation: toBottom 14s linear infinite;
}

.check_brand_link:hover::after {
    opacity: 1;
    animation: toTop 3.5s linear infinite;
}

.check_brand_link:hover::before {
    opacity: 1;
    animation: toBottom 3.5s linear infinite;
}

.check_brand_link .section_content {
    padding: 4rem 2rem;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease-in-out;
    width: 100%;
    text-align: center;
}

.check_brand_link .radial_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(70% 60% at 50% -10%, rgba(99, 102, 241, 0.18), transparent);
    pointer-events: none;
}

.check_brand_link>svg {
    -webkit-mask-image: radial-gradient(100% 100% at top center, #fff, transparent);
    mask-image: radial-gradient(100% 100% at top center, #fff, transparent);
    stroke: hsla(0, 0%, 100%, .04);
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
}

.check_brand_eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 20px;
    padding: 0.28rem 0.9rem;
    margin-bottom: 1rem;
}

.check_brand_link .section_content .header_description {
    color: var(--paragraph-color);
    margin-bottom: 2rem;
}

.check_brand_link .section_content.show_result {
    height: 100%;
}

.check_brand_input_wrap {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
    max-width: 560px;
    width: 100%;
}

.check_brand_input_wrap:focus-within {
    border-color: rgba(99, 102, 241, 0.55);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.check_brand_domain_prefix {
    padding: 0 0.5rem 0 1.25rem;
    font-size: 0.9rem;
    color: var(--paragraph-color);
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
}

.check_brand_input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 0.85rem 0.5rem;
    font-size: 0.95rem;
    color: var(--white-color);
    font-weight: 500;
    min-width: 0;
}

.check_brand_input::placeholder {
    color: var(--icon-color);
}

.check_brand_submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 4px;
    border-radius: 12px;
    background: var(--accent-gradient);
    color: white;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.2s;
}

.check_brand_submit:hover {
    opacity: 0.85;
    transform: scale(0.96);
    color: white;
}

.check_brand_submit svg {
    --aous-aw-icon-size: 1.3rem;
}

.check_brand_preview {
    margin-top: 0.85rem;
    font-size: 0.85rem;
    color: var(--icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.check_brand_preview .preview_domain {
    color: var(--paragraph-color);
}

.check_brand_preview .preview_username {
    color: var(--icon-color);
    transition: color 0.2s;
}

.check_brand_preview .preview_username.preview_has_value {
    color: var(--accent);
    font-style: normal;
    font-weight: 600;
}

.check_brand_link .section_content .check_result.show {
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
    visibility: hidden;
    opacity: 0;
    transition: all 0.25s ease-in-out;
    transform: translateY(16px);
    border-radius: 16px;
    display: inline-block;
    max-width: 560px;
    width: 100%;
}

.check_brand_link .section_content .check_result.available {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.check_brand_link .section_content .check_result.not_available {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.check_brand_link .section_content .check_result.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.check_brand_link .section_content .check_result .result_status_msg {
    font-size: 0.9rem;
    color: var(--main-color);
    margin-bottom: 0.4rem;
}

.check_brand_link .section_content .check_result .result_other_msg {
    font-size: 0.82rem;
    color: var(--paragraph-color);
    margin: 0;
}

.result_username_ok {
    color: #34d399;
    font-weight: 700;
}

.result_username_no {
    color: #f87171;
    font-weight: 700;
}

/* End Check brand link */


@keyframes pulse {
    from {
        transform: scale(0.9);
        opacity: 1;
    }

    to {
        transform: scale(1.8);
        opacity: 0;
    }
}

@keyframes tada {
    0% {
        transform: scale3d(1, 1, 1);
    }

    10%,
    5% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -5deg);
    }

    15%,
    25%,
    35%,
    45% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg);
    }

    20%,
    30%,
    40% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg);
    }

    50% {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes toTop {
    0% {
        top: 0%;
    }

    50% {
        top: 40%;
    }

    100% {
        top: 0%;
    }
}

@keyframes toBottom {
    0% {
        bottom: 0%;
    }

    50% {
        bottom: 50%;
    }

    100% {
        bottom: 0%;
    }
}

/* Start Main status area */

.main_status_area .navbar {
    padding: 1.5rem 4rem;
    background: #f5f5f5;
}

.main_status_area .navbar .language_dropdown .dropdown-toggle:after {
    display: none;
}

.main_status_area .breadcrumb {
    gap: 4rem;
}

.main_status_area .breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    display: none;
}

.main_status_area .breadcrumb .breadcrumb-item a {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--aous-aw-muted);
    font-weight: 500;
}

.main_status_area .breadcrumb .breadcrumb-item.active a {
    color: var(--aous-aw-var(--bg-main));
    font-weight: 700;
}

.main_status_area .breadcrumb .breadcrumb-item a:hover {
    text-decoration: none;
}

.main_status_area .breadcrumb .breadcrumb-item a .step_nr {
    width: 25px;
    height: 25px;
    background: var(--aous-aw-white);
    text-align: center;
    border-radius: 50%;
    color: var(--aous-aw-var(--bg-main));
    line-height: 25px;
    font-weight: 700;
    font-size: 0.85rem;
}

.main_status_area .breadcrumb .breadcrumb-item.active a .step_nr {
    background: var(--bg-card);
    color: var(--aous-aw-white);
}

.main_status_area .header_page h1 {
    font-size: 2rem;
    font-weight: bold;
}

.main_status_area .header_page p {
    width: 70%;
    padding-top: 1.5rem;
    font-size: 1rem;
}

.main_status_area .step {
    padding: 0 10rem;
}

.main_status_area .page_input {
    padding: 0.85rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 1rem;
}

.main_status_area .page_input.form-control {
    border-width: 1.25px;
}

.main_status_area .page_input.form-control:focus {
    border-width: 1.25px;
    border-color: var(--main-color);
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
    outline: none !important;
    box-shadow: none !important;
}

.main_status_area .plugin-dropdown_input .dropdown-input {
    border-color: var(--border-color);
    padding-block: 0.75rem;
}

.main_status_area .tom_select .ts-control {
    font-size: 1rem !important;
    border: none;
    outline: none;
    box-shadow: none;
    border: 1.25px solid #e4e4e7;
    padding: 1.1rem 0.85rem;
    border-radius: 10px;
}

.main_status_area .form-label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem !important
}

.main_status_area .form-label.label_multiselect {
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.main_status_area .form-selectgroup .form-selectgroup-input {
    outline: none !important;
    box-shadow: none !important;
}

.main_status_area .form-selectgroup svg {
    --aous-aw-icon-size: 1.75rem;
}

.main_status_area .form-selectgroup .form-selectgroup-label {
    font-size: 0.9rem;
    font-weight: 500;
    outline: none !important;
    box-shadow: none !important;
    color: var(--aous-aw-var(--bg-main));
}

.main_status_area .form-selectgroup .form-selectgroup-input:not(:checked)+.form-selectgroup-label {
    background-color: white !important;
    opacity: .8;
    border: 1px solid var(--border-color) !important;
}

.main_status_area .form-selectgroup .form-selectgroup-input:checked+.form-selectgroup-label {
    border-color: var(--bg-card) !important;
    color: var(--bg-card);
    font-weight: 500;
    opacity: 1;
    border: 1px solid var(--border-color) !important;
}

.main_status_area .step_img {
    width: 475px;
    height: 475px;
    object-fit: cover;
    position: sticky;
    top: 10rem;
}

.main_status_area .step_img.first_img {
    border-radius: 50%;
}

.main_status_area .prev,
.main_status_area .next {
    margin-top: 2rem;
    padding: 1rem;
    font-weight: 700;
}

.main_status_area .next {
    background-image: linear-gradient(1deg, #000000, #3d3838) !important;
    color: var(--white-color);
}

.main_status_area .card_select_plan {
    margin-top: 5rem;
    border-radius: 20px;
}

.main_status_area .card_select_plan .content_card_select_plan {
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr;
    align-items: center;
}

.main_status_area .card_select_plan .content_card_select_plan .first_col {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.main_status_area .card_select_plan .content_card_select_plan .first_col img {
    width: 115px;
    border-radius: 15px;
}

.main_status_area .card_select_plan .content_card_select_plan .first_col h1 {
    font-size: 2.5rem;
}

.main_status_area .card_select_plan .content_card_select_plan .second_col {
    display: grid;
    gap: 15px;
    grid-template-rows: repeat(3, 23px);
    grid-auto-flow: column;
}

.main_status_area .card_select_plan .content_card_select_plan .second_col div.active {
    font-weight: bold;
}

.main_status_area .card_select_plan .content_card_select_plan .third_col {
    text-align: end;
}

.main_status_area .card_select_plan .content_card_select_plan .third_col button {
    margin-top: 0rem;
    padding: 0.8rem;
    font-weight: 700;
}

.main_status_area .grid_col {
    grid-template-columns: 1fr 1fr;
    display: grid;
}

/* End Main status area */

/* Start Solutions cards */
.solutions_cards_container {
    margin-block: 7rem;
}

.solutions_cards {
    display: grid;
    gap: 0.7rem;
    margin-bottom: 1.5rem;
}

.solutions_cards.first_section {
    grid-template-columns: 1fr 1fr 1.4fr;
}

.solutions_cards.second_section {
    grid-template-columns: 1.4fr 1fr 1fr;
}

.solutions_cards .solutions_card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.solutions_cards .solutions_card:hover svg {
    animation: strok 3s forwards;
}

.solutions_cards .solutions_card .text_content {
    padding: 1.5rem 1rem;
}

.solutions_cards .solutions_card .title_card {
    color: var(--white-color);
    font-size: 1.25rem;
}

.solutions_cards .solutions_card .text_card {
    display: block;
    font-size: 1rem;
    color: var(--paragraph-color);
    min-height: 5rem;
}

.solutions_cards .solutions_card .solutions_card_content {
    min-height: 5rem;
}

.solutions_cards .solutions_card .btn {
    background-color: transparent;
    color: var(--main-text);
}

.solutions_cards .solutions_card .solutions_card_content .custom_img {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

.solutions_cards .solutions_card .solutions_card_content .custom_img .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.4s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards ease-in-out;
}

.solutions_cards .solutions_card .solutions_card_content .custom_img .icon-container:nth-child(1) {
    animation-delay: 0.2s;
}

.solutions_cards .solutions_card .solutions_card_content .custom_img .icon-container:nth-child(2) {
    animation-delay: 0.4s;
}

.solutions_cards .solutions_card .solutions_card_content .custom_img .icon-container:nth-child(3) {
    animation-delay: 0.6s;
}

.solutions_cards .solutions_card .solutions_card_content .custom_img .icon-container:nth-child(4) {
    animation-delay: 0.8s;
}

.solutions_cards .solutions_card .solutions_card_content .custom_img .icon-container:nth-child(5) {
    animation-delay: 1s;
}

.solutions_cards .solutions_card .solutions_card_content .custom_img .icon-container:nth-child(6) {
    animation-delay: 1.2s;
}

.solutions_cards .solutions_card .solutions_card_content .custom_img .icon-container:nth-child(7) {
    animation-delay: 1.4s;
}

.solutions_cards .solutions_card .solutions_card_content .custom_img .icon-container svg {
    --aous-aw-icon-size: 2.15rem;
}

.solutions_cards .solutions_card .solutions_card_content .custom_img .icon-container svg.arrow_icon {
    --aous-aw-icon-size: 1.5rem;
}

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

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

.solutions_cards .solutions_card .solutions_card_content .custom_img .icon-container:hover {
    transform: scale(1.15);
}

.solutions_cards .solutions_card .solutions_card_content .custom_img .whatsapp-icon {
    color: var(--aous-aw-success);
    filter: drop-shadow(0 0 10px rgba(50, 205, 50, 0.4));
    transition: filter 0.3s ease;
}

.solutions_cards .solutions_card .solutions_card_content .custom_img .whatsapp-icon:hover {
    filter: drop-shadow(0 0 15px rgba(50, 205, 50, 0.7));
}

.solutions_cards .solutions_card .solutions_card_content .custom_qr {
    text-align: center;
}

.solutions_cards .solutions_card .solutions_card_content .custom_qr svg {
    --aous-aw-icon-size: 10rem;
}

.solutions_cards .second_section {
    background-color: transparent;
    border: unset;
}

.solutions_cards.second_section .multi_step_content {
    background-color: transparent;
    border: unset;
}

.solutions_cards.second_section .multi_step_content .avatar {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--aous-aw-avatar-shadow), 0 0 0 2px #202024;
}

.solutions_cards.second_section .solutions_card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.solutions_cards.second_section .solutions_card .icon_text {
    padding: 1.5rem 1.75rem;
}

.solutions_cards.second_section .solutions_card .icon_text svg {
    --aous-aw-icon-size: 2.2rem;
}

.solutions_cards .multi_step_content .text_content .title_card {
    font-size: 1.85rem;
    margin-bottom: 1.4rem;
    font-weight: 400;
    margin-top: 1.25rem;
    color: var(--white-color);
}

#chart {
    mask-image: linear-gradient(181deg, var(--bg-main), transparent);
}

/* End Solutions cards */
/* Start Helper page */
.helper_page {
    margin-block: 3rem;
    min-height: 100vh;
}

.helper_page header {
    padding-top: 1.5rem;
    margin-bottom: 2rem;
}

.helper_page header h1 {
    margin-bottom: 1rem;
}

.helper_page .section_text {
    margin-bottom: 4rem;
    width: 75%;
}

.helper_page .section_text span,
.helper_page .section_text p {
    font-size: 1rem;
}

.helper_page .section_text ul {
    list-style: disc;
    padding-inline: 2rem;
    margin-bottom: 1rem;
}

.helper_page .section_text ul li {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

/* End Helper page */


/* ---- Languages Modal ---- */
.lang_modal_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.lang_modal_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.lang_modal_title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--white-color);
    letter-spacing: 0.01em;
}

.lang_modal_close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    cursor: pointer;
    color: var(--paragraph-color);
    transition: background 0.2s, color 0.2s;
}

.lang_modal_close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white-color);
}

.lang_modal_close svg {
    --aous-aw-icon-size: 0.75rem;
}

.lang_modal_body {
    padding: 0.75rem !important;
}

.list_languages {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lang_item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--white-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.lang_item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
    color: var(--white-color);
}

.lang_item_active {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--white-color);
}

.lang_item_active:hover {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.4);
}

.lang_flag {
    width: 26px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.lang_name {
    flex: 1;
}

.lang_check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    color: white;
}

.lang_check svg {
    --aous-aw-icon-size: 0.65rem;
    color: white;
}

/* End List languages */


/* Start Get started */
.get_started {
    margin-top: 6rem;
    padding-top: 5rem;
    padding-bottom: 6rem;
    background-color: var(--bg-main);
    position: relative;
    overflow: hidden;
}

.get_started::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
    opacity: 0.5;
}

.get_started::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 200px;
    background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.1), transparent 70%);
    pointer-events: none;
}

.get_started .content_card_started {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.get_started .content_card_started .card_started h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: transparent;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.get_started .content_card_started .card_started p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--paragraph-color);
    min-height: 5rem;
}

.get_started .content_card_started .card_started>span {
    font-size: 0.9rem;
    line-height: 1.5;
}

.get_started .content_card_started .card_started .action_buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.get_started .content_card_started .card_started a {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    font-weight: 500;
    border-radius: 30px;
    color: var(--white-color);
    font-size: 0.95rem;
    gap: 0.3rem;
    text-decoration: none;
    transition: gap 0.2s, color 0.2s, opacity 0.2s;
}

.get_started .content_card_started .card_started:not(.action_buttons) a {
    padding-inline: 0;
}

.get_started .content_card_started .card_started a:not(.start_now_btn) {
    color: var(--paragraph-color);
}

.get_started .content_card_started .card_started a:not(.start_now_btn):hover {
    color: var(--white-color);
    gap: 0.55rem;
}

.get_started .content_card_started .card_started a.start_now_btn {
    background: var(--accent-gradient);
    color: var(--white-color);
    min-width: 8rem;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.get_started .content_card_started .card_started a.start_now_btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: skewX(-20deg);
    animation: btn_shimmer 3s ease-in-out infinite;
}

@keyframes btn_shimmer {
    0% {
        left: -80%;
    }

    50%,
    100% {
        left: 130%;
    }
}

.get_started .content_card_started .card_started a.start_now_btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(99, 102, 241, 0.42);
}

.get_started .content_card_started .card_started a.start_now_btn svg {
    color: var(--white-color);
}

.get_started .content_card_started .card_started:nth-child(2),
.get_started .content_card_started .card_started:nth-child(3) {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.75rem;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.get_started .content_card_started .card_started:nth-child(2):hover,
.get_started .content_card_started .card_started:nth-child(3):hover {
    border-color: rgba(99, 102, 241, 0.35);
    transform: translateY(-3px);
}

.get_started .content_card_started .card_started .icon_content {
    position: relative;
    width: fit-content;
    margin-bottom: 1rem;
}

.get_started .content_card_started .card_started .icon_content::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 12px;
    background: var(--accent-glow);
    z-index: 0;
    height: 3rem;
}

.get_started .content_card_started .card_started .icon_content svg {
    --aous-aw-icon-size: 2rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
    color: var(--accent);
}

.get_started .content_card_started .card_started h2 {
    position: relative;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--white-color);
    padding-inline-start: 14px;
    margin-bottom: 0.75rem;
}

.get_started .content_card_started .card_started h2::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    width: 2px;
    height: 18px;
    background: var(--accent-gradient);
    border-radius: 2px;
}

html[dir="rtl"] .get_started .content_card_started .card_started h2 {
    padding-inline-start: 0;
    padding-inline-end: 14px;
}

html[dir="rtl"] .get_started .content_card_started .card_started h2::after {
    right: 0;
    left: unset;
}

/* End Get started */

/* Start Services Scrolling */
.services_scrolling .sticky_visual_area {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100vh;
    display: grid;
    place-items: center;
    z-index: 10;
    pointer-events: none;
}

html[dir="rtl"] .services_scrolling .sticky_visual_area {
    right: unset;
    left: 0;
}

.services_scrolling .shape_container_area {
    position: absolute;
    width: 310px;
    height: 100vh;
    display: grid;
    place-items: center;
    opacity: 0;
    animation-name: shape-fade;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.services_scrolling .shape_container_area img {
    border-radius: 24px;
}

.services_scrolling .shape-1 {
    animation-timeline: --s1;
}

.services_scrolling .shape-2 {
    animation-timeline: --s2;
}

.services_scrolling .shape-3 {
    animation-timeline: --s3;
}

.services_scrolling .shape-4 {
    animation-timeline: --s4;
}

.services_scrolling .shape-5 {
    animation-timeline: --s5;
}

.services_scrolling .shape-6 {
    animation-timeline: --s6;
}

.services_scrolling .shape-7 {
    animation-timeline: --s7;
}

.services_scrolling .shape-8 {
    animation-timeline: --s8;
}

.services_scrolling .shape-9 {
    animation-timeline: --s9;
}

.services_scrolling .shape-10 {
    animation-timeline: --s10;
}

.services_scrolling .shape-11 {
    animation-timeline: --s11;
}

.services_scrolling .content {
    width: 50%;
    padding-bottom: 20vh;
    position: relative;
    z-index: 20;
}

.services_scrolling .main_text {
    height: 90vh;
    display: flex;
    align-items: center;
    padding-left: 10vw;
}

html[dir="rtl"] .services_scrolling .main_text {
    padding-left: unset;
    padding-right: 10vw;
}

.services_scrolling .scroll_section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10vw;
    padding-right: 2rem;
    view-timeline-axis: block;
    view-timeline-inset: 40% 40%;
}

html[dir="rtl"] .services_scrolling .scroll_section {
    padding-left: unset;
    padding-right: 10vw;
}

.services_scrolling .s1 {
    view-timeline-name: --s1;
}

.services_scrolling .s2 {
    view-timeline-name: --s2;
}

.services_scrolling .s3 {
    view-timeline-name: --s3;
}

.services_scrolling .s4 {
    view-timeline-name: --s4;
}

.services_scrolling .s5 {
    view-timeline-name: --s5;
}

.services_scrolling .s6 {
    view-timeline-name: --s6;
}

.services_scrolling .s7 {
    view-timeline-name: --s7;
}

.services_scrolling .s8 {
    view-timeline-name: --s8;
}

.services_scrolling .s9 {
    view-timeline-name: --s9;
}

.services_scrolling .s10 {
    view-timeline-name: --s10;
}

.services_scrolling .s11 {
    view-timeline-name: --s11;
}

.services_scrolling .main_text h1 {
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    font-weight: 300;
    margin: 0;
    color: var(--paragraph-color);
    opacity: 0.8;
}

.services_scrolling .title_large {
    display: block;
    font-size: 4.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--white-color);
    margin-top: 1rem;
    line-height: 1.1;
}

.services_scrolling .focus_text {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--aous-aw-muted);
    margin: 0;
    max-width: 500px;
    letter-spacing: -0.02em;
    animation: content-focus linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}

.services_scrolling .description_text {
    font-size: 1.2rem;
    color: #666;
    margin-top: 1.5rem;
    max-width: 90%;
    line-height: 1.7;
    font-weight: 300;
    border-left: 2px solid var(--paragraph-color);
    padding-left: 1.5rem;
    animation: content-focus linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}

html[dir="rtl"] .services_scrolling .description_text {
    border-left: unset;
    border-right: 2px solid var(--paragraph-color);
    padding-left: 0;
    padding-right: 1.5rem;
}

.services_scrolling .mobile_progress {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

.services_scrolling .mobile_progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.services_scrolling .progress_circle_mobile {
    fill: none;
    stroke: var(--paragraph-color);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: circle-grow linear;
    animation-timeline: scroll();
}

.services_scrolling .track_circle {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 8;
}

/* End Services Scrolling */

/* Start Faq */
.faqs_area {
    margin-top: 8rem;
    margin-bottom: 6rem;
}

.faqs_eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 20px;
    padding: 0.28rem 0.9rem;
    margin-bottom: 1rem;
}

.faqs_area .section_title h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: 3rem;
    color: transparent;
    width: 55%;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.faqs_area .questions_area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    row-gap: 0.6rem;
}

.faqs_area .questions_area .accordion-item {
    background: var(--bg-card);
    border-radius: 14px !important;
    border: 1px solid var(--border-color) !important;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faqs_area .questions_area .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(99, 102, 241, 0.4) !important;
    box-shadow: inset 3px 0 0 var(--accent), 0 0 28px rgba(99, 102, 241, 0.09);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), transparent) !important;
}

.faqs_area .questions_area .accordion-button {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white-color);
    background: transparent !important;
    padding: 1rem;
    box-shadow: none !important;
    transition: color 0.2s;
}

.faqs_area .questions_area .accordion-button:not(.collapsed) {
    color: var(--accent) !important;
}

.faqs_area .questions_area .accordion-button::after {
    background-image: none;
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--paragraph-color);
    transition: transform 0.3s ease, color 0.25s ease, content 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

html[dir="rtl"] .faqs_area .questions_area .accordion-button::after {
    margin-right: auto;
    margin-left: unset;
}

.faqs_area .questions_area .accordion-button:not(.collapsed)::after {
    content: '−';
    color: var(--accent);
    transform: rotate(180deg);
}

.faqs_area .questions_area .accordion-body {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--paragraph-color);
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* End Faq */

.plans_wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.plans_wrapper .plan_box {
    border-radius: 14px;
    padding: 18px;
    background: #121214;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.plans_wrapper .plan_highlight {
    border: 2px solid transparent;
}

.plans_wrapper .plan_header {
    margin-bottom: 10px;
}

.plans_wrapper .plan_price {
    font-size: 26px;
    font-weight: bold;
}

.plans_wrapper .plan_features {
    margin-top: 12px;
    margin-bottom: 12px;
}

.plans_wrapper .feature {
    font-size: 14px;
    margin-bottom: 6px;
}

.plans_wrapper .plan_footer {
    margin-top: 10px;
}

.plans_wrapper .plan_footer button {
    background: var(--bg-card);
    border-radius: 12px;
}

/* Rotating Headline — Gradient Text */
.rotating_headline_area .rotating_headline li {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Hero — Indigo Radial Glow */
.landing .radial_img {
    background-image: radial-gradient(80% 50% at 50% -20%, rgba(60, 48, 130, 0.75), hsla(0, 0%, 100%, 0));
}

/* Hero — Smooth transitions on action buttons */
.landing .action_buttons a {
    transition: all 0.3s ease;
}

/* Hero CTA Primary Button — Indigo Gradient */
.landing .action_buttons a.with_border {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25) !important;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.landing .action_buttons a.with_border::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: skewX(-20deg);
    animation: btn_shimmer 3.5s ease-in-out infinite;
}

.landing .action_buttons a.with_border:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, 0.45) !important;
}

/* Account Dashboard — Responsive */

.solutions_section {
    padding: 5rem 0 6rem;
    overflow: hidden;
}

.solutions_section_header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.solutions_eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 20px;
    padding: 0.3rem 1rem;
    margin-bottom: 1rem;
}

.solutions_heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

/* Marquee */
.solutions_marquee_wrap {
    position: relative;
    overflow: hidden;
    margin-bottom: 0.75rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    padding: 0.25rem 0;
}

.solutions_marquee_wrap_rev {
    margin-bottom: 0;
}

@keyframes marquee_fwd {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee_fwd_rev {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
    }
}


@keyframes marquee_bwd {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
    }
}

@keyframes marquee_bwd_rev {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.solutions_marquee_track {
    display: flex;
    gap: 0.75rem;
    width: max-content;
    padding: 0.5rem 0;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.solutions_track_fwd {
    animation: marquee_fwd 32s linear infinite;
}

html[dir="rtl"] .solutions_track_fwd {
    animation: marquee_fwd_rev 32s linear infinite;
}

.solutions_track_bwd {
    animation: marquee_bwd 26s linear infinite;
    transform: translateX(-50%);
}

html[dir="rtl"] .solutions_track_bwd {
    animation: marquee_bwd_rev 26s linear infinite;
    transform: translateX(50%);
}

.solutions_marquee_wrap:hover .solutions_marquee_track {
    animation-play-state: paused;
}

.solutions_m_card {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--main-color);
    transition: border-color 0.25s, background 0.25s;
    cursor: default;
}

.solutions_m_card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.05);
}

.solutions_m_icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.solutions_m_icon svg {
    --aous-aw-icon-size: 1rem;
    color: white;
}

.solutions_m_icon_indigo {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
}

.solutions_m_icon_violet {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.solutions_m_icon_blue {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.solutions_m_icon_green {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.solutions_m_icon_orange {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

/* Activity Ticker */
.solutions_ticker_wrap {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: rgba(99, 102, 241, 0.03);
    margin: 2.5rem 0;
    padding: 0.65rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    position: relative;
    height: 5.25rem;
}

.solutions_ticker_live {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #4ade80;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    margin-right: 1.5rem;
    white-space: nowrap;
    position: absolute;
    top: 10px;
    z-index: 999999;
}

.solutions_live_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    flex-shrink: 0;
    animation: mock_pulse_dot 1.8s ease-in-out infinite;
}

@keyframes ticker_scroll {
    from {
        transform: translateX(0);
    }

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

@keyframes ticker_scroll_rev {
    from {
        transform: translateX(0);
    }

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


.solutions_ticker_track {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    white-space: nowrap;
    width: max-content;
    animation: ticker_scroll 30s linear infinite;
    font-size: 0.82rem;
    color: var(--paragraph-color);
}

.solutions_ticker_track:hover {
    animation-play-state: paused;
}

html[dir="rtl"] .solutions_ticker_track {
    animation: ticker_scroll_rev 30s linear infinite;
}

.solutions_tick_sep {
    color: rgba(99, 102, 241, 0.4);
    font-size: 1rem;
}

/* Stats row */
.solutions_stats_row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 4rem;
    padding: 2.5rem 3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
}

.solutions_stat {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.solutions_stat_num {
    font-size: clamp(2rem, 4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    color: transparent;
    background-clip: text;
    --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
    background-image: linear-gradient(135deg, #ffffff 30%, #a5b4fc 70%, #8b5cf6 100%);
}

.solutions_stat_lbl {
    font-size: 0.9rem;
    color: var(--paragraph-color);
}

.solutions_stat_sep {
    width: 1px;
    height: 60px;
    background: var(--border-color);
    flex-shrink: 0;
}

/* End Solutions Marquee */

/* Features Card — Indigo Border Lines */
.features_cards_area .features_card .image_content::after {
    background: linear-gradient(transparent, var(--accent), transparent);
}

.features_cards_area .features_card .image_content::before {
    background: linear-gradient(transparent, var(--accent-2), transparent);
}

/* Auth Section — Indigo Pulse Dot */
.auth_section .form_content .the_form .title::after,
.auth_section .form_content .the_form .title::before {
    background-color: var(--accent);
}

/* Form Submit Button — Indigo Gradient */
form .action_buttons button {
    background: var(--accent-gradient);
    color: var(--white-color);
    transition: all 0.3s ease;
}

form .action_buttons button:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: var(--white-color);
    box-shadow: 0 6px 22px rgba(99, 102, 241, 0.35) !important;
}

/* Get Started — Indigo CTA (moved to main get_started block) */

/* Services Scrolling — Indigo Progress Circle */
.services_scrolling .progress_circle {
    stroke: var(--accent);
}

/* Cookie — Indigo Accept Button */
.cookie_card .cookie_action .btn.accept_cookie {
    background: var(--accent-gradient);
    border-color: transparent;
    transition: all 0.3s ease;
}

.cookie_card .cookie_action .btn.accept_cookie:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

/* Nav — Indigo Active Link */
.navbar .navbar-nav .nav-link.active .nav-link-title {
    color: var(--accent);
}

/* Footer Links — Indigo Hover */
.app_footer .app_footer_content .links_footer .links_col ul li a:hover {
    color: var(--accent);
}

/* Footer Social Icons — Indigo Hover */
.app_footer .app_footer_content .content_copyright .links_social_media a:hover svg {
    color: var(--accent) !important;
}

/* Input Focus — Subtle Indigo Ring */
select:focus,
textarea:focus,
input.phone:focus,
input:focus {
    border-color: rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08) !important;
}

/* Plans Highlight — Indigo Border */
.plans_wrapper .plan_highlight {
    border-color: var(--accent) !important;
    box-shadow: 0 0 25px var(--accent-glow);
}

/* Glow Pulse Keyframe */
@keyframes glow-pulse {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(99, 102, 241, 0.1);
    }

    50% {
        box-shadow: 0 0 35px rgba(99, 102, 241, 0.35);
    }
}

/* Animated Gradient Keyframe */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* End Accent System */


/* Link Bar */
.landing_link_bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: #161618;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 0.55rem 1.25rem;
    margin-top: 2.5rem;
    position: relative;
    z-index: 3;
    flex-wrap: wrap;
    justify-content: center;
    backdrop-filter: blur(8px);
    direction: ltr;
    position: relative;
    overflow: hidden;
}

.landing_link_bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: skewX(-20deg);
    animation: btn_shimmer 5s ease-in-out infinite;
}

.link_bar_url {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.link_bar_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse-dot 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulse-dot {

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

    50% {
        opacity: 0.5;
        transform: scale(1.4);
    }
}

.link_bar_domain {
    color: var(--paragraph-color);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

.link_bar_username {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.875rem;
}

.link_bar_divider {
    width: 1px;
    height: 1.25rem;
    background: var(--border-color);
    flex-shrink: 0;
}

.link_bar_tags {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.link_bar_tags span {
    font-size: 0.75rem;
    color: var(--paragraph-color);
    padding: 0.2rem 0.65rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.link_bar_tags .link_tag_accent {
    color: var(--accent);
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.08);
    font-weight: 600;
}

/* Hero Stats */
.landing_stats {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-top: 2.75rem;
    position: relative;
    z-index: 3;
}

.landing_stats .stat_item {
    text-align: center;
}

.landing_stats .stat_num {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--white-color);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.landing_stats .stat_label {
    display: block;
    font-size: 0.78rem;
    color: var(--paragraph-color);
    margin-top: 0.3rem;
    letter-spacing: 0.02em;
}

.landing_stats .stat_sep {
    width: 1px;
    height: 2.25rem;
    background: var(--border-color);
}


.bento_section {
    margin-top: 7rem;
    margin-bottom: 5rem;
    padding: 0 6rem;
}

/* Header */
.bento_header {
    text-align: center;
    margin-bottom: 4rem;
}

.bento_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 1.5rem;
    padding: 0.35rem 1rem;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 20px;
    width: fit-content;
}

.bento_heading {
    font-size: 3.25rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.bento_subheading {
    max-width: 480px;
    margin: 1.5rem auto 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Grid */
.bento_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Base Card */
.bento_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 280px;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.bento_card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 0 40px var(--accent-glow);
    transform: translateY(-4px);
}

/* Large card (2 columns) */
.bento_card.bento_card_lg {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    min-height: 240px;
}

.bento_card.bento_card_lg .bento_card_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bento_card.bento_card_lg .bento_visual {
    flex: 1;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Icon Wrap */
.bento_icon_wrap {
    width: 46px;
    height: 46px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.bento_icon_wrap svg {
    --aous-aw-icon-size: 1.35rem;
    color: var(--accent);
}

/* Card Typography */
.bento_card_title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white-color);
    margin: 0;
    line-height: 1.3;
}

.bento_card_desc {
    font-size: 0.875rem;
    color: var(--paragraph-color);
    line-height: 1.65;
    margin: 0;
}

/* Visual area for small cards */
.bento_visual {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

/* ---- Appointments Mini Calendar ---- */
.mini_calendar {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 0.9rem;
    width: 100%;
    max-width: 220px;
}

.mini_cal_header {
    text-align: center;
    font-size: 0.75rem;
    color: var(--paragraph-color);
    font-weight: 600;
    margin-bottom: 0.6rem;
    letter-spacing: 0.04em;
}

.mini_cal_days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    text-align: center;
}

.mini_cal_days span {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.68rem;
    color: var(--paragraph-color);
    margin: 0 auto;
}

.mini_cal_days span.cal_today {
    background: var(--accent);
    color: white;
    font-weight: 700;
}

.mini_cal_days span.cal_booked {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent);
}

.mini_cal_days span.cal_lbl {
    color: var(--paragraph-color) !important;
    font-size: 0.62rem !important;
    opacity: 0.4;
    font-weight: 600;
}

.apt_confirm_badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 20px;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    color: var(--accent);
    margin-top: 0.85rem;
    width: fit-content;
}

.apt_badge_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse 1s linear infinite;
    flex-shrink: 0;
}

/* ---- QR Card ---- */
.bento_qr_visual {
    align-items: center;
    justify-content: center;
}

.fake_qr_wrap {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fake_qr_wrap svg {
    --aous-aw-icon-size: 5rem;
    color: var(--paragraph-color);
    opacity: 0.6;
}

/* ---- vCard Preview ---- */
.vcard_preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem;
}

.vcard_avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-gradient);
    flex-shrink: 0;
}

.vcard_lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vcard_line {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.vcard_line_lg {
    width: 80%;
}

.vcard_line_sm {
    width: 50%;
}

.vcard_save_pill {
    font-size: 0.7rem;
    padding: 0.3rem 0.65rem;
    background: var(--accent-gradient);
    border-radius: 20px;
    color: white;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Products Preview ---- */
.products_preview {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

.product_mini_card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    transition: border-color 0.3s ease;
}

.product_mini_card:hover {
    border-color: rgba(99, 102, 241, 0.3);
}

.product_mini_img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
}

.product_img_1 {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.product_img_2 {
    background: linear-gradient(135deg, #ec4899, #f97316);
}

.product_mini_body {
    flex: 1;
}

.product_mini_line {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    width: 70%;
    margin-bottom: 5px;
}

.product_mini_price {
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 600;
}

.product_mini_cta {
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 20px;
    color: var(--accent);
    flex-shrink: 0;
    font-weight: 500;
}

/* ---- Subscribers Preview ---- */
.subscribers_preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.subscriber_row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.65rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.sub_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    opacity: 0.7;
}

.sub_line {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    flex: 1;
}

.sub_line_sm {
    max-width: 55%;
}

.sub_line_md {
    max-width: 70%;
}

/* ---- Links Preview ---- */
.links_preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.link_preview_row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s ease;
}

.link_preview_row:hover {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.04);
}

.link_prev_icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    flex-shrink: 0;
}

.link_prev_lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.link_prev_line {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.link_prev_sm {
    width: 55%;
}

.link_prev_arrow {
    color: var(--paragraph-color);
    font-size: 0.8rem;
    opacity: 0.4;
    flex-shrink: 0;
}

/* ---- Leads Form Preview ---- */
.leads_preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.leads_inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
}

.leads_inputs .text_field {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: rgb(255 255 255 / 40%);
    text-align: center;
    padding: 6px;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    gap: 3px;
}

.leads_inputs .text_field svg {
    --aous-aw-icon-size: 0.9rem;
}

.leads_field {
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    width: 100%;
}

.leads_field_sm {
    width: 70%;
}

.leads_btn {
    height: 30px;
    background: var(--accent-gradient);
    border-radius: 7px;
    width: 90px;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    margin-top: 0.25rem;
}

.share_icons_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    width: 100%;
}

.share_icon_item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: white;
}

.share_icon_item svg {
    --aous-aw-icon-size: 1.3rem;
}

.share_icon_fb {
    background: #1877f2;
}

.share_icon_ig {
    background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
}

.share_icon_wa {
    background: #25d366;
}

.share_icon_tk {
    background: #010101;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.share_icon_li {
    background: #0a66c2;
}

.share_icon_x {
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.wallet_badges {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

.wallet_badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.wallet_badge svg {
    --aous-aw-icon-size: 1.25rem;
    flex-shrink: 0;
}

.wallet_apple {
    background: #1c1c1e;
}

.wallet_custom {
    background: rgba(255, 255, 255, 0.05);
}

.wallet_google {
    background: #fff;
    color: #3c4043;
    border-color: rgba(0, 0, 0, 0.12);
}


/* Card reveal */
.bento_card {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        background 0.3s ease;
}

.bento_card.bento_visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Link preview icons ---- */
.link_prev_icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.link_prev_icon svg {
    --aous-aw-icon-size: 0.95rem;
    color: #fff;
}

.link_prev_fb {
    background: #1877f2;
}

.link_prev_ig {
    background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
}

.link_prev_yt {
    background: #ff0000;
}

.link_prev_wa {
    background: #25d366;
}

.link_prev_tt {
    background: #010101;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Link rows slide-in stagger */
.bento_card .link_preview_row {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease, background 0.25s ease;
}

.bento_card.bento_visible .link_preview_row:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.22s;
}

.bento_card.bento_visible .link_preview_row:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.34s;
}

.bento_card.bento_visible .link_preview_row:nth-child(3) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.46s;
}

/* Link row hover: slide right + arrow shows */
.link_preview_row:hover {
    transform: translateX(5px) !important;
}

.link_prev_arrow {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.link_preview_row:hover .link_prev_arrow {
    opacity: 1 !important;
    transform: translateX(3px);
}

/* ---- Share icons: 4-column grid ---- */
.share_icons_grid {
    grid-template-columns: repeat(4, 1fr);
}

.share_icon_yt {
    background: #ff0000;
}

.share_icon_tg {
    background: #2aabee;
}

.share_icon_sc {
    background: #fffc00;
}

.share_icon_sc svg {
    color: #111 !important;
}

/* Share icons staggered pop-in */
.bento_card .share_icon_item {
    opacity: 0;
    transform: scale(0.55);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease;
}

.bento_card.bento_visible .share_icon_item:nth-child(1) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.14s;
}

.bento_card.bento_visible .share_icon_item:nth-child(2) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.20s;
}

.bento_card.bento_visible .share_icon_item:nth-child(3) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.26s;
}

.bento_card.bento_visible .share_icon_item:nth-child(4) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.32s;
}

.bento_card.bento_visible .share_icon_item:nth-child(5) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.38s;
}

.bento_card.bento_visible .share_icon_item:nth-child(6) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.44s;
}

.bento_card.bento_visible .share_icon_item:nth-child(7) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.50s;
}

.bento_card.bento_visible .share_icon_item:nth-child(8) {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.56s;
}

/* Share icon hover bounce */
.share_icon_item:hover {
    transform: scale(1.2) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* ---- Subscriber dots wave ---- */
.sub_dot {
    animation: bento_dot_wave 2.4s ease-in-out infinite;
}

.subscriber_row:nth-child(2) .sub_dot {
    animation-delay: 0.4s;
}

.subscriber_row:nth-child(3) .sub_dot {
    animation-delay: 0.8s;
}

@keyframes bento_dot_wave {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.18);
    }
}

/* Subscriber lines grow */
.sub_line {
    width: 0 !important;
    transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.bento_card.bento_visible .subscriber_row:nth-child(1) .sub_line {
    width: 100% !important;
    transition-delay: 0.2s;
}

.bento_card.bento_visible .subscriber_row:nth-child(2) .sub_line {
    width: 55% !important;
    transition-delay: 0.35s;
}

.bento_card.bento_visible .subscriber_row:nth-child(3) .sub_line {
    width: 70% !important;
    transition-delay: 0.5s;
}

/* ---- Calendar booked glow ---- */
@keyframes bento_cal_glow {

    0%,
    100% {
        background: rgba(99, 102, 241, 0.15);
    }

    50% {
        background: rgba(99, 102, 241, 0.38);
        box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
    }
}

.mini_cal_days span.cal_booked {
    animation: bento_cal_glow 2.8s ease-in-out infinite;
}

.mini_cal_days span.cal_booked:nth-child(7) {
    animation-delay: 0s;
}

.mini_cal_days span.cal_booked:nth-child(15) {
    animation-delay: 0.9s;
}

.mini_cal_days span.cal_booked:nth-child(17) {
    animation-delay: 1.8s;
}

/* ---- Wallet badges slide-in ---- */
.wallet_badge {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease;
}

.bento_card.bento_visible .wallet_badge:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.18s;
}

.bento_card.bento_visible .wallet_badge:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.30s;
}

.bento_card.bento_visible .wallet_badge:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.42s;
}

.wallet_badge:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ---- vCard save pill bounce on card hover ---- */
@keyframes bento_pill_bounce {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.bento_card:hover .vcard_save_pill {
    animation: bento_pill_bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Product cards hover lift ---- */
.product_mini_card {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.product_mini_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* ---- QR wrap glow pulse ---- */
@keyframes bento_qr_glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }

    50% {
        box-shadow: 0 0 18px 4px rgba(99, 102, 241, 0.18);
    }
}

.bento_card:hover .fake_qr_wrap {
    animation: bento_qr_glow 1.8s ease-in-out infinite;
}

/* End Feature Bento */

.testimonials_section {
    padding: 3rem 0 5rem;
    position: relative;
}

.testimonials_header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.testimonials_eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 20px;
    padding: 0.3rem 1rem;
    margin-bottom: 1rem;
}

.testimonials_heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

.testimonials_subheading {
    font-size: 1rem;
    color: var(--paragraph-color);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.65;
}

.testimonials_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.testimonial_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 0.25s, transform 0.25s;
}

.testimonial_card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    transform: translateY(-3px);
}

.testimonial_stars {
    display: flex;
    gap: 1.5px;
}

.testimonial_stars svg {
    --aous-aw-icon-size: 1.25rem;
    color: #f59e0b;
    fill: #f59e0b;
}

.testimonial_text {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--main-color);
    flex: 1;
}

.testimonial_author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.testimonial_avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.02em;
}

.testimonial_avatar_1 {
    background: linear-gradient(135deg, #f472b6, #ec4899);
}

.testimonial_avatar_2 {
    background: linear-gradient(135deg, #34d399, #059669);
}

.testimonial_avatar_3 {
    background: linear-gradient(135deg, #fb923c, #ea580c);
}

.testimonial_avatar_4 {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

.testimonial_avatar_5 {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.testimonial_avatar_6 {
    background: linear-gradient(135deg, #facc15, #ca8a04);
}

.testimonial_author_info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial_name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--white-color);
}

.testimonial_role {
    font-size: 0.78rem;
    color: var(--paragraph-color);
}

/* End Testimonials */

.pricing_section {
    padding: 5rem 0 7rem;
    position: relative;
}

.pricing_header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.pricing_eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 20px;
    padding: 0.3rem 1rem;
    margin-bottom: 1rem;
}

.pricing_heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

.pricing_subheading {
    font-size: 1rem;
    color: var(--paragraph-color);
    max-width: 530px;
    margin: 0 auto;
    line-height: 1.65;
}

.pricing_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

.pricing_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: border-color 0.25s, transform 0.25s;
}

.pricing_card:hover {
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-4px);
}

.pricing_card_pro {
    border-color: rgba(99, 102, 241, 0.45);
    background: linear-gradient(160deg, rgba(99, 102, 241, 0.08) 0%, var(--bg-card) 60%);
    position: relative;
}

.pricing_card_pro:hover {
    border-color: rgba(99, 102, 241, 0.7);
}

.pricing_card_top {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pricing_pro_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pricing_plan_name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white-color);
    letter-spacing: -0.01em;
}

.pricing_badge {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    background: var(--accent-gradient);
    color: white;
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
}

.pricing_price_wrap {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.pricing_price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--white-color);
    letter-spacing: -0.04em;
    line-height: 1;
}

.pricing_per {
    font-size: 0.85rem;
    color: var(--paragraph-color);
}

.pricing_plan_desc {
    font-size: 0.875rem;
    color: var(--paragraph-color);
    line-height: 1.55;
    margin-top: 0.25rem;
}

.pricing_features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
}

.pricing_features li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--main-color);
}

.pricing_features li svg {
    --aous-aw-icon-size: 1.25rem;
    color: var(--accent);
    flex-shrink: 0;
}

.pricing_cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}

.pricing_cta:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.pricing_cta_ghost {
    border: 1px solid var(--border-color);
    color: var(--main-color);
    background: transparent;
}

.pricing_cta_ghost:hover {
    border-color: rgba(99, 102, 241, 0.4);
    color: var(--white-color);
}

.pricing_cta_accent {
    background: var(--accent-gradient);
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

.pricing_cta_accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg);
    animation: btn_shimmer 3s ease-in-out infinite;
}

.pricing_card_biz {
    border-color: rgba(139, 92, 246, 0.35);
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.07) 0%, var(--bg-card) 60%);
    position: relative;
}

.pricing_card_biz:hover {
    border-color: rgba(139, 92, 246, 0.6);
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(139, 92, 246, 0.1);
}

.pricing_badge_biz {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: white;
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
}

.pricing_cta_biz {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

.pricing_cta_biz::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: skewX(-20deg);
    animation: btn_shimmer 3.8s ease-in-out infinite;
}

.pricing_cta_biz:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.38);
}

.pricing_footer {
    text-align: center;
    margin-top: 2.5rem;
}

.pricing_all_link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    transition: gap 0.2s;
}

.pricing_all_link:hover {
    gap: 0.7rem;
    color: var(--accent);
}

.pricing_all_link svg {
    --aous-aw-icon-size: 1.25rem;
    color: var(--accent);
}

.vcp_page {
    padding: 100px 0 80px;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    margin-top: 5rem;
}

.vcp_page::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, .12) 0%, transparent 70%);
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.vcp_header {
    text-align: center;
    margin-bottom: 56px;
}

.vcp_header h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--white-color);
    margin: 12px 0 14px;
    line-height: 1.15;
}

.vcp_header p {
    color: var(--paragraph-color);
    font-size: 1rem;
    opacity: .65;
}

/* ── Builder layout ── */
.vcp_builder {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 40px;
    align-items: start;
}

/* ── Form Side ── */
.vcp_form_card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 3rem;
}

.vcp_section_label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--icon-color);
    margin-bottom: 14px;
}

.vcp_fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.vcp_fields.single {
    grid-template-columns: 1fr 1fr;
}

.vcp_field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vcp_field label {
    font-size: .8rem;
    color: var(--icon-color);
    font-weight: 500;
}

.vcp_field input {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .9rem;
    color: var(--white-color);
    font-family: inherit;
    transition: border-color .2s;
    outline: none;
}

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

.vcp_field input::placeholder {
    color: var(--icon-color);
    opacity: .6;
}

/* ── Layout selector ── */
.vcp_layouts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vcp_layout_btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--icon-color);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}

.vcp_layout_btn svg {
    flex-shrink: 0;
}

.vcp_layout_btn.active,
.vcp_layout_btn:hover {
    border-color: var(--accent);
    color: var(--white-color);
    background: rgba(99, 102, 241, .1);
}

/* ── Theme selector ── */
.vcp_themes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.vcp_theme_btn {
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color .2s;
}

.vcp_theme_btn.active {
    border-color: var(--accent);
}

.vcp_theme_swatch {
    width: 72px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px;
    gap: 4px;
}

.vcp_theme_swatch_rt {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
    opacity: .7;
}

.vcp_theme_swatch_divider {
    width: 14px;
    height: 1px;
    border-radius: 1px;
}

.vcp_theme_swatch_line {
    height: 2.5px;
    border-radius: 2px;
}

.vcp_theme_name {
    text-align: center;
    font-size: .65rem;
    font-weight: 600;
    color: var(--icon-color);
    padding: 3px 0 1px;
}

.vcp_theme_btn.active .vcp_theme_name {
    color: var(--accent);
}

/* ── Preview Side ── */
.vcp_preview_side {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 4rem;
}

.vcp_preview_wrap {
    width: 100%;
    aspect-ratio: 9/5;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/* ═══════════════════════════════
       CARD BASE
    ═══════════════════════════════ */
.vcp_card {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    display: none;
    font-family: 'Manrope', sans-serif;
}

.vcp_card.active {
    display: flex;
    flex-direction: column;
}

.vcp_card_bg {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    z-index: 0;
}

.vcp_card>* {
    position: relative;
    z-index: 1;
}

/* bg must stay absolute — override the > * rule (equal specificity, later wins) */
.vcp_card .vcp_card_bg {
    position: absolute;
    z-index: 0;
}

/* shared text */
.vc_brand {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    opacity: .7;
}

.vc_name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.vc_role {
    font-size: 13px;
    line-height: 1.3;
}

.vc_contact {
    font-size: 12.5px;
    line-height: 1.5;
}

.vcp_card.classic {
    padding: 18px 20px 16px;
    justify-content: space-between;
}

.classic_watermark {
    position: absolute;
    right: -14px;
    top: 10px;
    font-size: 120px;
    font-weight: 800;
    opacity: .5;
    z-index: 0;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.classic_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.classic_body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.classic_divider {
    width: 24px;
    height: 1.5px;
    border-radius: 1px;
    margin: 5px 0;
}

.classic_footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 60%;
}

.classic_qr_corner {
    position: absolute;
    bottom: 12px;
    right: 12px;
    border: 1px solid;
    border-radius: 7px;
    padding: 4px;
}

html[dir="rtl"] .classic_qr_corner {
    right: unset;
    left: 12px;
}


/* ═══════════════════════════════
       CIRCLE LAYOUT
    ═══════════════════════════════ */
.vcp_card.circle {
    padding: 0;
}

.circle_ring_lg,
.circle_ring_sm {
    position: absolute;
    border-radius: 50%;
    border: 1px solid;
    pointer-events: none;
    z-index: 0;
}

.circle_ring_lg {
    width: 200px;
    height: 200px;
    right: -60px;
    top: -60px;
}

.circle_ring_sm {
    width: 130px;
    height: 130px;
    right: -18px;
    top: -18px;
}

.circle_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 0;
}

.circle_center {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
}

.circle_avatar_ring {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid;
    padding: 3px;
    flex-shrink: 0;
}

.circle_avatar_inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle_initials {
    font-size: 18px;
    font-weight: 700;
}

.circle_info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.circle_dot {
    width: 18px;
    height: 1.5px;
    border-radius: 1px;
    margin: 3px 0;
}

.circle_qr {
    position: absolute;
    bottom: 10px;
    right: 10px;
    border: 1px solid;
    border-radius: 7px;
    padding: 3px;
}


html[dir="rtl"] .circle_qr {
    right: unset;
    left: 10px;
}

/* ═══════════════════════════════
       SPLIT LAYOUT
    ═══════════════════════════════ */
.vcp_card.split {
    flex-direction: row !important;
}

.split_strip {
    width: 32%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 10px;
}

.split_avatar_ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.split_initials {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.split_brand_label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, .6);
}

.split_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px 16px;
}

.split_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.split_body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.split_divider {
    width: 22px;
    height: 1.5px;
    border-radius: 1px;
    margin: 3px 0;
}

.split_footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.split_contacts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.split_qr {
    border: 1px solid;
    border-radius: 7px;
    padding: 3px;
}

/* ═══════════════════════════════
       MINIMAL LAYOUT
    ═══════════════════════════════ */
.vcp_card.minimal {
    justify-content: flex-start;
}

.minimal_bar {
    height: 3px;
    width: 40%;
    border-radius: 0 2px 2px 0;
}

.minimal_inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 20px 16px;
}

.minimal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.minimal_center {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.minimal_name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.5px;
}

.minimal_line {
    width: 32px;
    height: 2px;
    border-radius: 1px;
    margin: 3px 0;
}

.minimal_footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.minimal_contacts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.minimal_qr {
    border: 1px solid;
    border-radius: 7px;
    padding: 3px;
}

/* ═══════════════════════════════
       HORIZON LAYOUT
    ═══════════════════════════════ */
.vcp_card.horizon {
    justify-content: flex-start;
}

.horizon_top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    padding: 14px 16px 10px;
}

.horizon_avatar_ring {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px solid;
    padding: 3px;
    flex-shrink: 0;
}

.horizon_avatar_inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.horizon_info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.horizon_accent_line {
    width: 20px;
    height: 1.5px;
    border-radius: 1px;
    margin: 2px 0;
}

.horizon_brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.horizon_sep {
    height: 1px;
    margin: 0 16px;
}

.horizon_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 14px;
}

.horizon_contacts {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    padding-right: 10px;
}

.horizon_contact_row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.horizon_qr {
    border: 1px solid;
    border-radius: 7px;
    padding: 3px;
}

/* ═══════════════════════════════
       RETRO LAYOUT
    ═══════════════════════════════ */
.vcp_card.retro {
    padding: 10px;
}

.retro_frame {
    flex: 1;
    border: 1px solid;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.retro_dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.retro_dot_tl {
    top: -2px;
    left: -2px;
}

.retro_dot_tr {
    top: -2px;
    right: -2px;
}

.retro_dot_bl {
    bottom: -2px;
    left: -2px;
}

.retro_dot_br {
    bottom: -2px;
    right: -2px;
}

.retro_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.retro_brand {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 3px;
    opacity: .75;
}

.retro_rule {
    border: none;
    border-bottom: 1px dashed;
    margin: 6px 0;
}

.retro_center {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2px 0;
}

.retro_footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.retro_contacts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    padding-right: 8px;
}

.retro_qr {
    border: 1px solid;
    border-radius: 6px;
    padding: 3px;
}

/* ═══════════════════════════════
       NEON LAYOUT
    ═══════════════════════════════ */
.vcp_card.neon {
    padding: 0;
}

.neon_scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    z-index: 0;
}

.neon_glow_blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.neon_corner {
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 18px;
}

.neon_corner_tl {
    top: 9px;
    left: 9px;
    border-top: 2px solid;
    border-left: 2px solid;
    border-radius: 4px 0 0 0;
}

.neon_corner_br {
    bottom: 9px;
    right: 9px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-radius: 0 0 4px 4px;
}

.neon_inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.neon_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px 0;
}

.neon_rt {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    text-shadow: 0 0 8px currentColor;
}

.neon_center {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
}

.neon_avatar_outer {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    border: 1.5px solid;
    padding: 3px;
    flex-shrink: 0;
    box-shadow: 0 0 10px currentColor;
}

.neon_avatar_inner {
    width: 100%;
    height: 100%;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neon_name_block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.neon_name {
    font-size: 16px;
    font-weight: 700;
}

.neon_underline {
    width: 28px;
    height: 1.5px;
    border-radius: 1px;
    box-shadow: 0 0 6px currentColor;
    margin: 1px 0;
}

.neon_role {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .5px;
}

.neon_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 14px;
}

.neon_contacts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 10px;
}

.neon_contact_row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.neon_contact_row svg {
    width: 12px;
    height: 12px;
}

.neon_qr {
    border: 1px solid;
    border-radius: 7px;
    padding: 3px;
    box-shadow: 0 0 8px currentColor;
}

/* ── QR placeholder ── */
.vcp_qr_placeholder {
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
    border-radius: 4px;
}

/* ── CTA under preview ── */
.vcp_cta {
    text-align: center;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.vcp_cta p {
    color: var(--paragraph-color);
    font-size: .85rem;
    opacity: .7;
    margin: 0;
}

.vcp_cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 50px;
    background: var(--accent-gradient);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s;
}

.vcp_cta a:hover {
    opacity: .85;
    color: #fff;
}

.nfc_icon {
    opacity: .55;
}

.vlp_page {
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

.vlp_page::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, .1) 0%, transparent 70%);
    top: -100px;
    right: 10%;
    pointer-events: none;
}

.vlp_builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 60px;
    align-items: start;
}

@media (max-width: 1100px) {
    .vlp_builder {
        grid-template-columns: 1fr 320px;
        gap: 40px;
    }
}

/* ── Link rows ── */
.vlp_link_rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.vlp_link_row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vlp_link_input {
    flex: 1;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 9px 12px;
    color: var(--main-color);
    font-size: .82rem;
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
}

.vlp_link_input:focus {
    border-color: rgba(99, 102, 241, .5);
}

.vlp_link_input::placeholder {
    color: rgba(255, 255, 255, .25);
}

.vlp_link_rm_btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .35);
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, border-color .2s;
}

.vlp_link_rm_btn:hover {
    background: rgba(239, 68, 68, .12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, .3);
}

.vlp_add_link_btn {
    width: 100%;
    padding: 9px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, .1);
    border-radius: 10px;
    color: rgba(255, 255, 255, .35);
    font-size: .8rem;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: border-color .2s, color .2s;
}

.vlp_add_link_btn:hover:not(:disabled) {
    border-color: rgba(99, 102, 241, .4);
    color: var(--accent);
}

.vlp_add_link_btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ── Form sections ── */
.vlp_form_section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Button shape picker ── */
.vlp_shapes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.vlp_shape_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .4);
    font-size: .68rem;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.vlp_shape_btn svg {
    opacity: .6;
    transition: opacity .2s;
}

.vlp_shape_btn.active {
    background: rgba(99, 102, 241, .12);
    border-color: rgba(99, 102, 241, .4);
    color: var(--accent);
}

.vlp_shape_btn.active svg {
    opacity: 1;
}

.vlp_shape_btn:hover:not(.active) {
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .65);
}

/* ── Template picker ── */
.vlp_tpl_scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scrollbar-width: none;
    max-width: 52rem;
}

.vlp_tpl_scroll::-webkit-scrollbar {
    display: none;
}

.vlp_tpl_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.vlp_tpl_swatch {
    width: 68px;
    height: 46px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    transition: transform .15s, box-shadow .15s;
    border: 2px solid transparent;
}

.vlp_tpl_btn.active .vlp_tpl_swatch {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .3), 0 2px 8px rgba(0, 0, 0, .25);
}

.vlp_tpl_btn:hover .vlp_tpl_swatch {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}

.vlp_tpl_name {
    font-size: .62rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .45);
    white-space: nowrap;
    transition: color .15s;
}

.vlp_tpl_btn.active .vlp_tpl_name {
    color: var(--accent);
}

/* ── Icon picker ── */
.vlp_icon_picker_wrap {
    position: relative;
    flex-shrink: 0;
}

.vlp_icon_btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}

.vlp_icon_btn svg {
    width: 16px;
    height: 16px;
}

.vlp_icon_btn:hover {
    background: rgba(99, 102, 241, .14);
    border-color: rgba(99, 102, 241, .35);
    color: var(--accent);
}

.vlp_icon_picker_wrap.open .vlp_icon_btn {
    background: rgba(99, 102, 241, .18);
    border-color: rgba(99, 102, 241, .45);
    color: var(--accent);
}

.vlp_icon_popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    width: 160px;
}

.vlp_icon_picker_wrap.open .vlp_icon_popup {
    display: grid;
}

.vlp_icon_opt {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid transparent;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

.vlp_icon_opt svg {
    width: 14px;
    height: 14px;
}

.vlp_icon_opt:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.vlp_icon_opt.sel {
    background: rgba(99, 102, 241, .2);
    border-color: rgba(99, 102, 241, .4);
    color: var(--accent);
}

.vlp_phone_wrap {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 110px;
}

.vlp_phone_frame {
    width: 330px;
    height: 680px;
    border-radius: 58px;
    background: linear-gradient(145deg, #1c1c1f, #0c0c0f);
    border: 2px solid #2a2a2e;
    box-shadow: 0 60px 140px rgba(0, 0, 0, .7), 0 20px 40px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .04);
    padding: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.vlp_phone_frame::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50px;
    background: #000;
    z-index: 0;
}

.vlp_phone_screen {
    position: relative;
    flex: 1;
    border-radius: 44px;
    overflow: hidden;
    z-index: 1;
    background: #000;
}

.vlp_phone_notch {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 30px;
    background: #09090d;
    border-radius: 20px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}

.vlp_phone_speaker {
    width: 38px;
    height: 5px;
    background: #111118;
    border-radius: 3px;
}

.vlp_phone_cam {
    width: 8px;
    height: 8px;
    background: #111118;
    border-radius: 50%;
    border: 1px solid #333;
}

.vlp_scroll_area {
    height: 100%;
    overflow-y: auto;
    padding: 60px 18px 80px;
    display: flex;
    flex-direction: column;
}

.vlp_scroll_area::-webkit-scrollbar {
    display: none;
}

.vlp_phone_home_bar {
    position: relative;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.vlp_phone_home_bar::after {
    content: "";
    width: 110px;
    height: 5px;
    background: rgba(255, 255, 255, .25);
    border-radius: 5px;
    position: absolute;
    bottom: 8px;
}

.vlp_profile_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-bottom: 22px;
}

.vlp_avatar_ring {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid;
    margin-bottom: 6px;
    transition: .3s;
}

.vlp_initials {
    font-size: 24px;
    font-weight: 800;
}

.vlp_profile_name {
    font-size: 15px;
    font-weight: 700;
}

.vlp_profile_bio {
    font-size: 11px;
    opacity: .7;
}

.vlp_links_list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.vlp_link_btn {
    width: 100%;
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.vlp_link_icon {
    width: 18px;
    height: 18px;
}

.vlp_link_title {
    flex: 1;
    text-align: center;
}

.vlp_link_arrow {
    width: 11px;
    opacity: .5;
}

.vlp_phone_footer {
    margin-top: auto;
    padding-top: 28px;
    font-size: 10px;
    display: flex;
    justify-content: center;
    gap: 4px;
    opacity: .4;
}

.vlp_status_bar {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    z-index: 20;
}

.vlp_status_right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vlp_icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vlp_svg {
    width: 16px;
    height: 16px;
    color: #fff;
    stroke: #fff;
}

.vlp_signal {
    width: 14px;
    height: 10px;
    background: linear-gradient(to top, #fff 20%, transparent 20%);
    clip-path: polygon(0% 100%,
            15% 60%,
            30% 80%,
            45% 40%,
            60% 60%,
            75% 20%,
            90% 40%,
            100% 0%,
            100% 100%);
}

.vlp_wifi {
    width: 14px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-radius: 0 0 10px 10px;
}

/* battery */

.vlp_battery {
    width: 20px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 2px;
    position: relative;
}

.vlp_battery::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 2px;
    width: 2px;
    height: 4px;
    background: #fff;
}

.vlp_side_btn {
    position: absolute;
    background: #1f1f25;
    border-radius: 2px;
    z-index: 30;
}

/* power */

.vlp_btn_power {
    right: -3px;
    top: 150px;
    width: 4px;
    height: 60px;
}

/* volume up */

.vlp_btn_vol_up {
    left: -3px;
    top: 140px;
    width: 4px;
    height: 40px;
}

/* volume down */

.vlp_btn_vol_down {
    left: -3px;
    top: 190px;
    width: 4px;
    height: 40px;
}

/* silent */

.vlp_btn_silent {
    left: -3px;
    top: 110px;
    width: 4px;
    height: 20px;
}

.vlp_phone_notch {
    width: 110px;
    height: 30px;
    top: 12px;
}

.vlp_scroll_area {
    padding-top: 70px;
}

.vlp_tabs {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, .03);
    padding: 6px;
    border-radius: 12px;
}

.vlp_tab {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, .4);
    font-size: .75rem;
    cursor: pointer;
    transition: .2s;
}

.vlp_tab.active {
    background: var(--accent);
    color: #fff;
}

.vlp_tab:hover {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

[data-content] {
    display: none;
}

[data-content].active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}