/* (c) SMMViking - smmviking.com - All rights reserved. Unauthorized copying or reuse of this theme is prohibited. جميع الحقوق محفوظة لموقع SMMViking */
:root {
    --main-color: #8049eb;
    --main-glow: rgba(128, 73, 235, 0.35);
    --main-opacity: rgba(128, 73, 235, 0.1);
    --bg-color: #0b0e13;
    --card-bg: #11151c;
    --header-bg: rgba(11, 14, 19, 0.85);
    --border-color: rgba(255, 255, 255, 0.08);
    --text-main: #ffffff;
    --text-light: #a0aec0;
    --shadow-color: rgba(0, 0, 0, 0.6);
    --section-bg: #0f131a;
    --light-bg: #151a23;
    --text-muted: #6b7280;
    --card-hover-shadow: rgba(0, 0, 0, 0.85);
    --secondary-color: rgba(255, 255, 255, 0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Alexandria', sans-serif;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    transition: 0.3s;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- header --- */
header {
    background: radial-gradient(circle at 10% 20%, var(--main-opacity), transparent 40%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .navbar .logo {
    font-size: 24px;
    font-weight: 800;
}

header .navbar .logo span,
header .navbar .logo i {
    color: var(--main-color);
}

header .navbar .nav-links {
    display: flex;
    gap: 30px;
}

header .navbar .nav-links a {
    color: var(--text-light);
}

header .navbar .nav-links a:hover,
header .navbar .nav-links a.active {
    color: var(--main-color);
}

header .navbar .menu-toggle {
    display: none;
    font-size: 24px;
}

/* --- hero --- */
.hero {
    position: relative;
    padding: 40px 0;
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 10% 20%, var(--main-opacity), transparent 40%);
}

.hero .content {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    flex-wrap: wrap;
    width: 100%;
}

.hero .text {
    flex: 1;
    min-width: 300px;
}

.hero .text h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.hero .text>p {
    color: var(--text-light);
    max-width: 500px;
    margin-bottom: 30px;
}

.hero .badge {
    background: var(--main-opacity);
    color: var(--main-color);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 14px;
    margin-bottom: 15px;
    display: inline-block;
}

.hero .stats {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
    border-right: 3px solid var(--main-color);
    padding-right: 20px;
}

.hero .stats .item h3 {
    font-size: 24px;
    font-weight: 800;
}

.hero .stats .item p {
    color: var(--text-light);
    font-size: 14px;
}

.hero .card {
    flex: 0 0 400px;
    height: fit-content;
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 50px var(--shadow-color);
    border: 1px solid var(--border-color);
    position: relative;
    top: 0;
    transition: top 0.3s;
}

.hero .card:hover {
    top: -5px;
}

.hero .card .form-header {
    text-align: center;
    margin-bottom: 30px;
}

.hero .card .form-header h3 {
    font-size: 24px;
}

.hero .card .form-header p {
    color: var(--text-light);
}

@media (max-width: 768px) {
    .hero {
        padding: 20px 0;
    }

    .nav-links {
        display: none;
    }

    .hero .text h1 {
        font-size: 2.5rem;
    }

    .hero .content {
        flex-direction: column;
        text-align: center;
    }

    .hero .stats {
        justify-content: center;
        border: none;
        padding: 0;
    }

    .hero .card {
        width: 100%;
        flex: auto;
        padding: 30px 25px;
    }

    .hero .card .form-header {
        margin-bottom: 20px;
    }

    .hero .card .form-header h3 {
        font-size: 19px;
    }

    .hero .card .form-header p {
        font-size: 14px;
    }

    .input-group input,
    form button[type='submit'] {
        height: 45px;
        font-size: 14px;
    }

    .menu-toggle {
        display: flex !important;
        align-items: center;
        cursor: pointer;
        justify-content: center;
    }
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #999;
    font-size: 14px;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.divider span {
    padding: 0 12px;
}

/* ---  platforms --- */
.platforms {
    position: relative;
    margin-top: clamp(24px, 3vw, 34px);
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .02);
}

.platforms__track {
    display: flex;
    gap: 10px;
    cursor: pointer;
    padding: 14px 0;
    width: max-content;
    animation: marquee 28s linear infinite;
}

.platforms .pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    font-weight: 800;
    font-size: 13px;
    color: rgba(255, 255, 255, .9);
    transition: .3s ease;
}

.platforms .pill i {
    font-size: 15px;
}

.pill:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .08);
    border-color: currentColor;
}

.platforms .pill.ig {
    color: #e1306c;
}

.platforms .pill.tt {
    color: #ffffff;
}

.platforms .pill.yt {
    color: #ff0000;
}

.platforms .pill.tg {
    color: #229ED9;
}

.platforms .pill.x {
    color: #ffffff;
}

.platforms .pill.fb {
    color: #1877f2;
}

.platforms .pill.sp {
    color: #1db954;
}

.platforms .pill.dc {
    color: #5865f2;
}

.platforms .pill.ig:hover {
    box-shadow: 0 0 20px #e1306c33;
}

.platforms .pill.yt:hover {
    box-shadow: 0 0 20px #ff000033;
}

.platforms .pill.tg:hover {
    box-shadow: 0 0 20px #229ED933;
}

.platforms .pill.fb:hover {
    box-shadow: 0 0 20px #1877f233;
}

.platforms .pill.sp:hover {
    box-shadow: 0 0 20px #1db95433;
}

.platforms .pill.dc:hover {
    box-shadow: 0 0 20px #5865f233;
}

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

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

@media (max-width: 768px) {
    @keyframes marquee {
        0% {
            transform: translateX(50%);
        }

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

/* ---  services --- */
.services {
    padding: 100px 0;
}

.services .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.services .card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px var(--shadow-color);
    transition: 0.4s;
    text-align: center;
}

.services .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px var(--card-hover-shadow);
    border-color: var(--main-color);
}

.services .card .icon-box {
    width: 70px;
    height: 70px;
    background: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 30px;
    transition: 0.3s;
}

.services .card h3 {
    margin-bottom: 10px;
}

.services .card p {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 14px;
}

.services .card .link-arrow {
    color: var(--main-color);
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    transition: 0.3s;
}

/* --- features --- */
.features {
    background: radial-gradient(circle at 10% 20%, var(--main-opacity), transparent 40%);
    padding: 80px 0;
}

.features .wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.features .wrapper .box {
    flex: 1;
    min-width: 280px;
    background: var(--card-bg);
    padding: 40px 20px;
    border-radius: 15px;
    text-align: center;
}

.features .wrapper .box i {
    font-size: 40px;
    color: var(--main-color);
    margin-bottom: 20px;
}

/* --- works --- */
.works {
    padding: 100px 0;
    background: var(--section-bg);
}

.works .steps-wrapper {
    display: flex;
    gap: 30px;
    margin-top: 50px;
}

.works .step-item {
    flex: 1;
    padding: 40px;
    border-radius: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    position: relative;
    text-align: center;
}

.works .step-number {
    width: 60px;
    height: 60px;
    background: var(--main-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    margin: 0 auto 20px;
    box-shadow: 0 5px 10px var(--main-opacity);
}

/* --- pricing --- */
.pricing {
    padding: 100px 0;
    background: radial-gradient(circle at 10% 20%, var(--main-opacity), transparent 40%);
}

.pricing .table-responsive {
    overflow-x: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px var(--shadow-color);
}

.pricing .services-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
}

.pricing .services-table th {
    background: var(--main-color);
    color: #fff;
    padding: 20px;
}

.services-table td {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.pricing .text-main {
    color: var(--main-color);
    margin-left: 10px;
}

.pricing .btn-sm {
    padding: 5px 15px;
    background: var(--main-color);
    color: #fff;
    border-radius: 5px;
    font-size: 13px;
}

/* --- counters --- */
.counters {
    padding: 100px 0;
    background: var(--section-bg);
}

.counters .cards {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 30px;
}

.counters .item {
    flex: 1;
    min-width: 200px;
}

.counter .item h2 {
    font-size: 48px;
    font-weight: 800;
    color: var(--main-color);
    margin-bottom: 10px;
    font-family: 'Tajawal', sans-serif;
}

.counters .item p {
    font-size: 18px;
    color: var(--text-light);
    font-weight: 500;
}

.counters .item::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--main-opacity);
    margin: 15px auto 0;
    border-radius: 2px;
}

@media (max-width: 768px) {
    .counters .item h2 {
        font-size: 36px;
    }
}

/* --- testimonials --- */
.testimonials {
    background: radial-gradient(circle at 10% 20%, var(--main-opacity), transparent 40%);
    padding: 70px 0;
}

.testimonials-swiper {
    padding-bottom: 60px;
}

.testimonials-swiper .swiper-wrapper {
    align-items: stretch;
}

.testimonials-swiper .swiper-slide {
    display: flex;
    height: auto;
}

.testimonials .card {
    width: 100%;
    min-height: 220px;
    padding: 30px;
    border-radius: 20px;
    border-right: 5px solid var(--main-color);
    box-shadow: 0 10px 25px var(--shadow-color);
    background: var(--card-bg);
    height: auto;
}

.testimonials .stars {
    color: #f59e0b;
    margin-bottom: 15px;
}

.testimonials .user-info {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

.testimonials .user-info strong {
    color: var(--text-main);
}

.testimonials .user-info span {
    color: var(--text-light);
    font-size: 13px;
}


/* --- faq --- */
.faq {
    background: var(--section-bg);
    padding: 100px 0;
}

.faq .accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq .accordion-item {
    background: var(--card-bg);
    margin-bottom: 15px;
    transition: 0.4s;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.faq .accordion-header {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    transition: 0.3s;
}

.accordion-header:hover {
    background: var(--secondary-color);
}

.faq .accordion-body {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    background: var(--light-bg);
    color: var(--text-light);
    transition: max-height 0.3s ease-out, padding 0.3s;
}

.faq .accordion-item.active .accordion-header {
    color: var(--main-color);
}

.faq .accordion-item.active .accordion-header i {
    transform: rotate(45deg);
}

.faq .accordion-item.active .accordion-body {
    padding: 20px;
    max-height: 150px;
}

/* --- footer --- */
footer {
    background: var(--bg-color);
    padding: 60px 0 20px;
}

footer .content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

footer .footer-logo p,
footer .footer-links a,
footer .copyright {
    color: var(--text-muted);
}

footer .footer-logo h2 span {
    color: var(--main-color);
}

footer .footer-logo p {
    color: #888;
    margin-top: 10px;
}

footer .footer-links ul li {
    margin-bottom: 10px;
}

footer .footer-links a {
    color: #ccc;
}

footer .footer-links a:hover {
    color: var(--main-color);
}

footer .copyright {
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 20px;
    font-size: 14px;
}

footer .social-icons a {
    color: #fff;
    margin-left: 15px;
    font-size: 20px;
}

footer .social-icons a:hover {
    color: var(--main-color);
}



/* --- utils --- */
.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 36px;
    margin-bottom: 10px;
}

.section-title p {
    color: var(--text-light);
}

.highlight {
    color: var(--main-color);
    display: inline-block;
    animation: pulse-name 2s infinite;
}

@keyframes pulse-name {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
        text-shadow: 0 0 15px var(--main-opacity);
    }

    100% {
        transform: scale(1);
    }
}


.input-group {
    position: relative;
}

.input-group i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.input-group input {
    width: 100%;
    padding: 15px 45px 15px 15px;
    border-radius: 10px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.input-group input:focus {
    outline: none;
    border-color: var(--main-color);
    box-shadow: 0 0 0 4px var(--main-opacity);
    /* updated */
}

.form-options {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text-light);
}

.form-options a {
    color: var(--main-color);
    font-weight: bold;
}

.google_login {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn {
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--main-color);
    color: #fff;
    box-shadow: 0 4px 15px var(--main-opacity);
}

.btn-primary:hover {
    background-color: #6d28d9;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    margin-left: 10px;
}

.btn-secondary:hover {
    background-color: var(--secondary-color);
}

.btn-block {
    width: 100%;
    text-align: center;
}

@media (max-width: 768px) {
    header {
        padding: 10px 0;
    }

    header .navbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    header .navbar .auth-buttons {
        display: none;
    }

    header .navbar .nav-links {
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        background: var(--header-bg);
        flex-direction: column;
        gap: 15px;
        border-top: 1px solid var(--border-color);
        height: 0;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
    }

    header .navbar .nav-links.show {
        display: flex;
        padding: 20px;
        height: auto;

    }

    .btn,
    .btn-lg {
        width: 100%;
        text-align: center;
    }

    .services .cards {
        grid-template-columns: 1fr;
    }

    .service .card {
        padding: 25px;
    }

    .features .wrapper {
        flex-direction: column;
    }

    .features .wrapper .box {
        padding: 30px 20px;
    }

    .works .steps-wrapper {
        flex-direction: column;
    }

    .works .step-item {
        padding: 30px 20px;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .pricing .services-table th,
    .pricing .services-table td {
        font-size: 14px;
        padding: 15px;
        white-space: nowrap;
    }

    .counters .cards {
        flex-direction: column;
    }

    .counter .item h2 {
        font-size: 34px;
    }

    .testimonials-swiper .card {
        min-height: 200px;
    }

    .faq .accordion-header {
        font-size: 15px;
    }

    .faq .accordion-body {
        font-size: 14px;
    }

    footer .content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    footer .social-icons a {
        margin: 0 10px;
    }

    .platforms__track {
        width: auto;
    }

    .section-title {
        margin-bottom: 20px;
    }

    .section-title h2 {
        font-size: 25px;
    }

    .section-title p {
        font-size: 14px;
    }

    .services,
    .features,
    .works,
    .pricing,
    .counters,
    .testimonials,
    .faq {
        padding: 30px 0;
    }

    footer {
        padding: 40px 0 20px;
    }
}

.hero form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

header img,
footer img {
    max-height: 58px;
    max-width: 200px;
    vertical-align: middle;
    border-style: none;
}

/* === Sign-in page overrides extracted from signin.twig === */
/* =========================================================
   Home V2 - Layout Redesign Only
   نفس ألوان الثيم الحالية، التغيير في الهيكل والمسافات فقط
========================================================= */

.home-v2 {
    overflow: hidden;
}

/* HERO: شكل مختلف فعليًا */
.home-v2 .hero .content {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    align-items: center;
    gap: 56px;
}

.home-v2 .hero .text {
    max-width: 760px;
}

.home-v2 .hero .text h1 {
    max-width: 760px;
}

.home-v2 .hero .site-brand-name {
    font-family: 'Tajawal', sans-serif;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: inherit;
}

.home-v2 .hero .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 180px));
    gap: 14px;
}

.home-v2 .hero .stats .item {
    width: 100%;
}

.home-v2 .hero > .container > .card,
.home-v2 .hero .content > .card {
    width: 100%;
    margin: 0;
}

/* شريط منصات التواصل */
.home-v2 .login-social-strip {
    overflow: hidden;
    padding-block: 18px;
    border-block: 1px solid var(--border-color);
    background: transparent;
    direction: ltr !important;
    text-align: left;
}

.home-v2 .social-slider {
    display: flex;
    width: max-content;
    margin-left: 0;
    margin-right: auto;
    direction: ltr !important;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.home-v2 .social-slider__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    padding-inline: 7px;
    direction: rtl !important;
}

.home-v2 .social-item {
    --social-brand: var(--main-color);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--social-brand) 38%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--social-brand) 10%, transparent);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 800;
}

.home-v2 .social-item > i:not(.absolute-icon) {
    color: var(--social-brand);
    font-size: 20px;
}

.home-v2 .social-item .absolute-icon {
    position: absolute;
    z-index: -1;
    inset-inline-start: 8px;
    top: 50%;
    color: var(--social-brand);
    font-size: 50px;
    opacity: .08;
    transform: translateY(-50%) rotate(-8deg);
}

/* أول جزء بعد الهيرو: Bento */
.home-v2 .home-bento {
    padding-block: 80px;
}

.home-v2 .home-bento__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 18px;
    align-items: stretch;
}

.home-v2 .home-bento__main {
    min-width: 0;
}

.home-v2 .home-bento__main .card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
    min-height: 430px;
    padding: clamp(30px, 5vw, 52px);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background:
        radial-gradient(circle at 18% 14%, var(--main-opacity), transparent 42%),
        var(--card-bg);
    box-shadow: 0 18px 44px var(--shadow-color);
    text-align: start;
    transition: transform .25s cubic-bezier(.25, 1, .5, 1), border-color .25s cubic-bezier(.25, 1, .5, 1);
}

.home-v2 .home-bento__main .card:hover {
    border-color: var(--main-color);
}

.home-v2 .home-bento__main .icon-box,
.home-v2 .home-bento__side .box > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin: 0 0 22px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background: var(--main-opacity);
    color: var(--main-color);
    font-size: 21px;
}

.home-v2 .home-bento__main h3 {
    margin-bottom: 12px;
    color: var(--text-main);
    font-size: clamp(22px, 3vw, 30px);
}

.home-v2 .home-bento__main p {
    max-width: 48ch;
    margin-bottom: 22px;
    color: var(--text-light);
    line-height: 1.9;
}

.home-v2 .home-bento :is(.card, .box) .link-arrow {
    color: var(--main-color);
    font-size: 14px;
    font-weight: 800;
}

.home-v2 .home-bento__side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
}

.home-v2 .home-bento__side .box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    height: 100%;
    min-height: 206px;
    padding: 26px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: 0 12px 30px var(--shadow-color);
    text-align: start;
    transition: transform .25s cubic-bezier(.25, 1, .5, 1), border-color .25s cubic-bezier(.25, 1, .5, 1);
}

.home-v2 .home-bento__side .box:hover {
    transform: translateY(-4px);
    border-color: var(--main-color);
}

.home-v2 .home-bento__side .box > i {
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 13px;
    font-size: 18px;
}

.home-v2 .home-bento__side .box h3 {
    margin-bottom: 8px;
    color: var(--text-main);
    font-size: 17px;
}

.home-v2 .home-bento__side .box p {
    margin: 0;
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.75;
}

.home-v2 .home-bento__side .box:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    min-height: 0;
}

.home-v2 .home-bento__side .box:last-child > i {
    margin: 0;
}


/* الخدمات: صف علوي كبير + صف سفلي */
.home-v2 .goal-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
}

.home-v2 .goal-grid .card {
    min-width: 0;
}

.home-v2 .goal-grid .card:nth-child(1),
.home-v2 .goal-grid .card:nth-child(2) {
    grid-column: span 6;
}

.home-v2 .goal-grid .card:nth-child(3),
.home-v2 .goal-grid .card:nth-child(4) {
    grid-column: span 6;
}


/* خطوات التنفيذ: Timeline */
.home-v2 .timeline-section {
    padding-block: 80px;
}

.home-v2 .timeline {
    position: relative;
    display: grid;
    gap: 24px;
    max-width: 980px;
    margin-inline: auto;
}

.home-v2 .timeline-item {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.home-v2 .timeline-item:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 90px;
}

.home-v2 .timeline-item:nth-child(even) .timeline-number {
    order: 2;
}

.home-v2 .timeline-item:nth-child(even) .step-item {
    order: 1;
}

.home-v2 .timeline-number {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.home-v2 .timeline-number .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0;
    border: 1px solid var(--main-color);
    border-radius: 50%;
    background: var(--main-color);
    color: var(--text-main);
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 12px 30px var(--main-opacity);
}

.home-v2 .timeline .step-item {
    width: 100%;
    min-height: 150px;
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    text-align: start;
}

.home-v2 .timeline .step-item h3 {
    margin-bottom: 10px;
    color: var(--text-main);
    font-size: 20px;
}

.home-v2 .timeline .step-item p {
    max-width: 62ch;
    color: var(--text-light);
    line-height: 1.9;
}


/* لمن المنصة: 2x2 بشكل مختلف */
.home-v2 .audience-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-block: 1px solid var(--border-color);
}

.home-v2 .audience-grid .card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 250px;
    padding: 30px 24px;
    border: 0;
    border-inline-start: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: start;
}

.home-v2 .audience-grid .card:first-child { border-inline-start: 0; }

.home-v2 .audience-grid .card:hover {
    transform: none;
    background: var(--secondary-color);
    box-shadow: none;
}

.home-v2 .audience-grid .icon-box {
    margin: 0 0 24px;
}

.home-v2 .audience-grid h3 {
    margin-top: 0;
}

.home-v2 .audience-grid p {
    flex: 1;
}

.home-v2 .audience-grid .link-arrow {
    margin-top: auto;
}


/* CTA وسط الصفحة */
.home-v2 .home-cta {
    padding-block: 70px;
}

.home-v2 .home-cta .wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
}

.home-v2 .home-cta .box {
    width: 100%;
    text-align: start;
}

.home-v2 .home-cta__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}


/* FAQ عمودين */
.home-v2 .faq .accordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.home-v2 :is(a, button, input):focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 3px;
}


/* Footer توزيع مختلف */
.home-v2 footer .content {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr) auto;
    align-items: start;
    gap: 36px;
}


/* Mobile */
@media (max-width: 991px) {
    .home-v2 .hero .content,
    .home-v2 .home-bento__grid,
    .home-v2 .home-cta .wrapper,
    .home-v2 footer .content {
        grid-template-columns: 1fr;
    }

    .home-v2 .home-bento__side,
    .home-v2 .faq .accordion {
        grid-template-columns: 1fr;
    }

    .home-v2 .audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-v2 .audience-grid .card:nth-child(odd) { border-inline-start: 0; }
    .home-v2 .audience-grid .card:nth-child(n + 3) { border-top: 1px solid var(--border-color); }

    .home-v2 .home-bento__side .box:last-child {
        grid-column: auto;
    }

    .home-v2 .goal-grid {
        grid-template-columns: 1fr;
    }

    .home-v2 .goal-grid .card:nth-child(n) {
        grid-column: auto;
    }

    .home-v2 .timeline-item,
    .home-v2 .timeline-item:nth-child(even) {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .home-v2 .timeline-item:nth-child(even) .timeline-number,
    .home-v2 .timeline-item:nth-child(even) .step-item {
        order: initial;
    }

    .home-v2 .audience-grid .card {
        min-height: 220px;
    }
}

@media (max-width: 600px) {
    .home-v2 .login-social-strip {
        padding-block: 14px;
    }

    .home-v2 .social-item {
        min-height: 44px;
        padding: 8px 14px;
        font-size: 13px;
    }

    .home-v2 .hero .stats {
        grid-template-columns: 1fr 1fr;
    }

    .home-v2 .home-bento {
        padding-block: 56px;
    }

    .home-v2 .home-bento__main .card {
        min-height: 330px;
        padding: 28px 24px;
    }

    .home-v2 .home-bento__side .box,
    .home-v2 .home-bento__side .box:last-child {
        min-height: auto;
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .home-v2 .home-bento__side .box:last-child > i {
        margin-bottom: 16px;
    }

    .home-v2 .timeline-item,
    .home-v2 .timeline-item:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .home-v2 .timeline-number {
        justify-content: flex-start;
    }

    .home-v2 .audience-grid {
        grid-template-columns: 1fr;
    }

    .home-v2 .audience-grid .card,
    .home-v2 .audience-grid .card:nth-child(odd) {
        min-height: auto;
        border-inline-start: 0;
        border-top: 1px solid var(--border-color);
    }

    .home-v2 .audience-grid .card:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .home-v2 *,
    .home-v2 *::before,
    .home-v2 *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}


/* =========================================================
   Login layout fix
   Desktop = horizontal strip
   Mobile/tablet = original vertical layout
========================================================= */

/* Smoothly fade out particles background animation after login section without altering page background color */
#particles {
    pointer-events: none !important;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 500px, rgba(0,0,0,0) 800px) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 500px, rgba(0,0,0,0) 800px) !important;
}

/* Login card must never animate/move */
.home-v2 .hero .login-card-horizontal,
.home-v2 .hero .login-card-horizontal:hover {
    top: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
}

.home-v2 .hero .login-forgot-desktop,
.home-v2 .hero .login-register-desktop {
    display: none;
}

@media (min-width: 992px) {

    /* Center the hero content and place the login strip under it */
    .home-v2 .hero .content {
        display: block !important;
    }

    .home-v2 .hero .text {
        max-width: 900px;
        margin-inline: auto !important;
        text-align: center !important;
    }

    .home-v2 .hero .text h1,
    .home-v2 .hero .text > p {
        margin-inline: auto !important;
    }

    .home-v2 .hero .stats {
        justify-content: center !important;
        margin-inline: auto !important;
    }

    /* Main login strip */
    .home-v2 .hero .login-card-horizontal {
        display: block !important;
        width: calc(100% - 32px) !important;
        max-width: 1140px !important;
        min-width: 0 !important;
        margin: 34px auto 0 !important;
        padding: 20px 18px 16px !important;
        box-sizing: border-box !important;
        border-radius: 20px !important;
        overflow: visible !important;
    }

    .home-v2 .hero .login-card-horizontal > .form-header {
        display: none !important;
    }

    .home-v2 .hero .login-main-form {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
       Physical desktop order (left -> right), matching the reference:
       Sign in | Google | Remember | Password | Username
    */
    .home-v2 .hero .login-main-fields {
        display: grid !important;
        grid-template-columns:
            minmax(150px, 160px)
            56px
            minmax(280px, 1.15fr)
            minmax(300px, 1.25fr);
        grid-template-areas: "submit remember password username";
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        direction: ltr !important;
    }

    .home-v2 .hero .login-main-form.has-google .login-main-fields {
        grid-template-columns:
            minmax(150px, 160px)
            56px
            56px
            minmax(280px, 1.15fr)
            minmax(300px, 1.25fr);
        grid-template-areas: "submit google remember password username";
    }

    .home-v2 .hero .login-row-username {
        grid-area: username;
    }

    .home-v2 .hero .login-row-password {
        grid-area: password;
        position: relative !important;
    }

    .home-v2 .hero .login-row-username,
    .home-v2 .hero .login-row-password {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        direction: rtl !important;
    }

    .home-v2 .hero .login-row-username input,
    .home-v2 .hero .login-row-password input {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 56px !important;
        min-height: 56px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Forgot password sits inside the password field area */
    .home-v2 .hero .login-row-password input {
        padding-left: 150px !important;
    }

    .home-v2 .hero .login-forgot-desktop {
        display: block !important;
        position: absolute !important;
        z-index: 5 !important;
        top: 50% !important;
        left: 16px !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
        color: var(--main-color) !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* Remember button */
    .home-v2 .hero .form-options {
        grid-area: remember;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 56px !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .home-v2 .hero .form-options > a {
        display: none !important;
    }

    .home-v2 .hero .login-row-remember {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 56px !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        background: var(--card-bg) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    .home-v2 .hero .login-row-remember input {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .home-v2 .hero .login-row-remember i {
        display: block !important;
        margin: 0 !important;
        color: var(--text-main) !important;
        font-size: 19px !important;
        line-height: 1 !important;
    }

    .home-v2 .hero .login-row-remember span {
        display: none !important;
    }

    .home-v2 .hero .login-row-remember:has(input:checked) {
        border-color: var(--main-color) !important;
        background: var(--main-opacity) !important;
    }

    .home-v2 .hero .login-row-remember:has(input:checked) i {
        color: var(--main-color) !important;
    }

    /* Google icon */
    .home-v2 .hero .google_login {
        grid-area: google;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 56px !important;
        min-width: 56px !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .home-v2 .hero .login-google-desktop {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 56px !important;
        min-width: 56px !important;
        height: 56px !important;
    }

    .home-v2 .hero .login-google-mobile,
    .home-v2 .hero .divider {
        display: none !important;
    }

    /* Sign-in button */
    .home-v2 .hero .login-submit-btn {
        grid-area: submit;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding-inline: 18px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    /* Captcha keeps a full row if enabled */
    .home-v2 .hero .login-captcha {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        direction: rtl !important;
    }

    /* Register text below the strip */
    .home-v2 .hero .login-register-desktop {
        display: block !important;
        margin: 14px 0 0 !important;
        text-align: center !important;
        color: var(--text-light) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
    }

    .home-v2 .hero .login-register-desktop a {
        margin-inline-start: 5px !important;
        color: var(--main-color) !important;
        font-weight: 800 !important;
    }
}

@media (max-width: 991px) {
    /* Let the original theme control the mobile form */
    .home-v2 .hero .login-main-fields {
        display: block !important;
        direction: inherit !important;
    }

    .home-v2 .hero .login-forgot-desktop,
    .home-v2 .hero .login-register-desktop,
    .home-v2 .hero .login-google-desktop {
        display: none !important;
    }

    .home-v2 .hero .login-google-mobile {
        display: block !important;
    }

    .home-v2 .hero .login-row-remember i {
        display: none !important;
    }

    .home-v2 .hero .login-row-remember span {
        display: inline !important;
    }

    .home-v2 .hero .login-captcha {
        margin-bottom: 15px !important;
    }
}



/* =========================================================
   Login final polish
   - no hover movement on the login card
   - no purple double focus ring on login inputs
   - clean mobile layout
========================================================= */
.home-v2 .hero .login-card-horizontal,
.home-v2 .hero .login-card-horizontal:hover {
    top: 0 !important;
    transform: none !important;
}

.home-v2 .hero .login-card-horizontal:hover {
    border-color: var(--border-color) !important;
}

.home-v2 .hero .login-card-horizontal .input-group,
.home-v2 .hero .login-card-horizontal .input-group:hover {
    transform: none !important;
}

.home-v2 .hero .login-card-horizontal input:focus,
.home-v2 .hero .login-card-horizontal input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 991px) {
    .home-v2 .hero .login-card-horizontal,
    .home-v2 .hero .login-card-horizontal:hover {
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 24px 0 0 !important;
        padding: 26px 20px 24px !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    .home-v2 .hero .login-card-horizontal > .form-header {
        display: block !important;
        margin: 0 0 20px !important;
        text-align: center !important;
    }

    .home-v2 .hero .login-card-horizontal > .form-header h3 {
        margin: 0 0 6px !important;
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    .home-v2 .hero .login-card-horizontal > .form-header p {
        margin: 0 !important;
        line-height: 1.6 !important;
    }

    .home-v2 .hero .login-main-form,
    .home-v2 .hero .login-main-fields {
        width: 100% !important;
        min-width: 0 !important;
    }

    .home-v2 .hero .login-card-horizontal {
        box-shadow: 0 0 35px var(--main-color) !important;
        border: 1px solid var(--main-color) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 12px 30px var(--shadow-color) !important; /* Default soft shadow */
    }

    .home-v2 .hero .login-main-fields {
        display: grid !important;
        grid-template-columns: 1fr 52px 52px !important;
        grid-template-rows: auto auto auto auto !important;
        grid-template-areas: 
            "username username username"
            "password password password"
            "captcha captcha captcha"
            "submit google options" !important;
        gap: 12px !important;
    }

    .home-v2 .hero .login-row-username { grid-area: username !important; position: relative !important; width: 100% !important; margin: 0 !important; }
    .home-v2 .hero .login-row-password { grid-area: password !important; position: relative !important; width: 100% !important; margin: 0 !important; }
    .home-v2 .hero .login-captcha { grid-area: captcha !important; width: 100% !important; margin: 0 !important; }
    .home-v2 .hero .login-submit-btn { grid-area: submit !important; width: 100% !important; height: 52px !important; min-height: 52px !important; margin: 0 !important; transform: none !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 800 !important; }
    .home-v2 .hero .google_login { grid-area: google !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; margin: 0 !important; padding: 0 !important; }
    .home-v2 .hero .form-options { grid-area: options !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; margin: 0 !important; padding: 0 !important; direction: rtl !important; }

    .home-v2 .hero .login-row-username input,
    .home-v2 .hero .login-row-password input {
        display: block !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .home-v2 .hero .login-row-username input:focus,
    .home-v2 .hero .login-row-password input:focus,
    .home-v2 .hero .login-row-username input:focus-visible,
    .home-v2 .hero .login-row-password input:focus-visible {
        outline: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Move forgot password inside the password input */
    .home-v2 .hero .login-forgot-desktop {
        display: block !important;
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--main-color) !important;
        text-decoration: none !important;
        z-index: 5 !important;
    }
    
    .home-v2.home-v2--ltr .hero .login-forgot-desktop {
        left: auto !important;
        right: 15px !important;
    }

    /* Show Create Account at bottom */
    .home-v2 .hero .login-register-desktop {
        display: block !important;
        text-align: center !important;
        margin-top: 20px !important;
        font-size: 14px !important;
    }
    .home-v2 .hero .login-register-desktop a {
        color: var(--main-color) !important;
        font-weight: bold !important;
        margin-right: 5px !important;
    }

    /* Format Remember Me button as a square */
    .home-v2 .hero .login-row-remember {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        background: var(--card-bg) !important;
        cursor: pointer !important;
        transition: 0.3s !important;
    }
    .home-v2 .hero .login-row-remember input {
        position: absolute !important;
        opacity: 0 !important;
        width: 100% !important;
        height: 100% !important;
        cursor: pointer !important;
        margin: 0 !important;
        z-index: 2;
    }
    .home-v2 .hero .login-row-remember i {
        display: block !important;
        font-size: 18px !important;
        color: var(--text-light) !important;
        z-index: 1;
    }
    .home-v2 .hero .login-row-remember:has(input:checked) {
        border-color: var(--main-color) !important;
        background: var(--main-opacity) !important;
    }
    .home-v2 .hero .login-row-remember:has(input:checked) i {
        color: var(--main-color) !important;
    }
    .home-v2 .hero .login-row-remember span,
    .home-v2 .hero .form-options > a {
        display: none !important;
    }

    /* Google button formatting */
    .home-v2 .hero .login-google-mobile { display: none !important; }
    .home-v2 .hero .login-google-desktop { display: block !important; width: 100% !important; }

    /* Hide divider */
    .home-v2 .hero .divider {
        display: none !important;
    }
}

/* === Direction-safe login form (RTL / LTR) === */
.home-v2 .hero .login-main-form,
.home-v2 .hero .login-main-fields,
.home-v2 .hero .login-row-username,
.home-v2 .hero .login-row-password,
.home-v2 .hero .login-captcha {
    direction: inherit !important;
}

.home-v2 .hero .login-row-username input,
.home-v2 .hero .login-row-password input {
    direction: inherit !important;
    text-align: start !important;
}

.home-v2.home-v2--rtl .hero .input-group > i {
    right: 15px !important;
    left: auto !important;
}

.home-v2.home-v2--ltr .hero .input-group > i {
    right: auto !important;
    left: 15px !important;
}

.home-v2.home-v2--rtl .hero .login-row-username input,
.home-v2.home-v2--rtl .hero .login-row-password input {
    padding: 15px 45px 15px 15px !important;
}

.home-v2.home-v2--ltr .hero .login-row-username input,
.home-v2.home-v2--ltr .hero .login-row-password input {
    padding: 15px 15px 15px 45px !important;
}

.home-v2.home-v2--rtl .hero .login-row-password input {
    padding-left: 150px !important;
}

.home-v2.home-v2--ltr .hero .login-row-password input {
    padding-right: 150px !important;
}

.home-v2.home-v2--rtl .hero .login-forgot-desktop {
    right: auto !important;
    left: 16px !important;
}

.home-v2.home-v2--ltr .hero .login-forgot-desktop {
    right: 16px !important;
    left: auto !important;
}

.home-v2 .hero .login-register-desktop a {
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-inline-start: 5px !important;
}

@media (min-width: 992px) {
    .home-v2.home-v2--rtl .hero .login-main-fields {
        direction: ltr !important;
        grid-template-columns: minmax(150px, 160px) 56px minmax(280px, 1.15fr) minmax(300px, 1.25fr) !important;
        grid-template-areas: "submit remember password username" !important;
    }

    .home-v2.home-v2--rtl .hero .login-main-form.has-google .login-main-fields {
        grid-template-columns: minmax(150px, 160px) 56px 56px minmax(280px, 1.15fr) minmax(300px, 1.25fr) !important;
        grid-template-areas: "submit google remember password username" !important;
    }

    .home-v2.home-v2--ltr .hero .login-main-fields {
        direction: ltr !important;
        grid-template-columns: minmax(300px, 1.25fr) minmax(280px, 1.15fr) 56px minmax(150px, 160px) !important;
        grid-template-areas: "username password remember submit" !important;
    }

    .home-v2.home-v2--ltr .hero .login-main-form.has-google .login-main-fields {
        grid-template-columns: minmax(300px, 1.25fr) minmax(280px, 1.15fr) 56px 56px minmax(150px, 160px) !important;
        grid-template-areas: "username password remember google submit" !important;
    }
}

@media (max-width: 991px) {
    .home-v2 .hero .login-main-fields {
        direction: ltr !important;
    }

    .home-v2.home-v2--rtl .hero .login-main-fields {
        grid-template-columns: 1fr 52px 52px !important;
        grid-template-areas:
            "username username username"
            "password password password"
            "captcha captcha captcha"
            "submit google options" !important;
    }

    .home-v2.home-v2--ltr .hero .login-main-fields {
        grid-template-columns: 52px 52px 1fr !important;
        grid-template-areas:
            "username username username"
            "password password password"
            "captcha captcha captcha"
            "options google submit" !important;
    }
}


/* =====================================================================
   NOVA THEME  ·  landing / sign-in layer
===================================================================== */
:root{
  --nv-accent:var(--nv-v);
  --nv-motion:var(--nv-m);
  --nv-violet:var(--nv-v); --nv-flame:var(--nv-f);
  --nv-grad:linear-gradient(135deg,var(--nv-v) 0%,var(--nv-v2) 55%,var(--nv-v2) 100%);
  --nv-grad-hot:linear-gradient(135deg,var(--nv-v) 0%,var(--nv-v2) 48%,var(--nv-f) 125%);
  --main-color:var(--nv-v); --main-glow:color-mix(in srgb,var(--nv-v) 35%,transparent); --main-opacity:color-mix(in srgb,var(--nv-v) 10%,transparent);
  --bg-color:#ffffff; --card-bg:#ffffff; --card-solid:#ffffff;
  --header-bg:rgba(255,255,255,.78);
  --border-color:color-mix(in srgb,var(--nv-v) 36%,transparent);
  --text-main:#0B0A1F; --text-light:#58557a; --text-muted:#8a87a8;
  --shadow-color:rgba(60,30,180,.12);
  --section-bg:color-mix(in srgb,var(--nv-v) 4%,transparent); --light-bg:color-mix(in srgb,var(--nv-v) 5%,transparent);
  --card-hover-shadow:color-mix(in srgb,var(--nv-v) 25%,transparent);
  --secondary-color:color-mix(in srgb,var(--nv-v) 6%,transparent);
  --nv-edge:linear-gradient(color-mix(in srgb,var(--nv-v) 60%,transparent),color-mix(in srgb,var(--nv-v) 60%,transparent));
  --nv-edge-hover:linear-gradient(var(--nv-v),var(--nv-v));
  --nv-shadow:0 1px 2px rgba(20,10,80,.04),0 14px 36px -10px rgba(70,35,200,.16);
  --nv-shadow-hover:0 2px 4px rgba(20,10,80,.05),0 30px 56px -14px color-mix(in srgb,var(--nv-v) 38%,transparent);
}
html.dark{
  --nv-accent:var(--nv-v);
  --nv-motion:var(--nv-m);
  --main-color:var(--nv-v); --main-glow:color-mix(in srgb,var(--nv-v) 30%,transparent); --main-opacity:color-mix(in srgb,var(--nv-v) 18%,transparent);
  --bg-color:#050407; --card-bg:#0d0818; --card-solid:#0d0818; --header-bg:rgba(5,4,7,.82);
  --border-color:color-mix(in srgb,var(--nv-v) 30%,transparent); --text-main:#f4f4f6; --text-light:#a8a8b3; --text-muted:#80808c;
  --shadow-color:rgba(0,0,0,.5); --section-bg:color-mix(in srgb,var(--nv-v) 5%,transparent); --light-bg:color-mix(in srgb,var(--nv-v) 8%,transparent);
  --secondary-color:color-mix(in srgb,var(--nv-v) 9%,transparent);
  --nv-edge:linear-gradient(color-mix(in srgb,var(--nv-v) 62%,transparent),color-mix(in srgb,var(--nv-v) 62%,transparent));
  --nv-edge-hover:linear-gradient(var(--nv-v),var(--nv-v));
}
html{background:var(--bg-color)}
body{background:transparent;-webkit-font-smoothing:antialiased}
::selection{background:var(--nv-violet);color:#fff}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:linear-gradient(var(--nv-violet),var(--nv-flame));border-radius:99px}

body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--nv-v) 11%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--nv-v) 11%,transparent) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 20%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse 85% 75% at 50% 20%,#000 20%,transparent 78%)}

/* ---------------------------------------------------------------- header */
header{background:var(--header-bg)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--border-color)!important;position:sticky}
header::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--nv-grad-hot);opacity:.8;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
header .navbar .logo{font-weight:900;letter-spacing:-.03em;background:var(--nv-grad-hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
header .navbar .logo span,header .navbar .logo i{-webkit-text-fill-color:currentColor;background:none}
header .navbar .nav-links a{position:relative;color:var(--text-light)!important;font-weight:700;padding:6px 2px}
header .navbar .nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;border-radius:2px;background:var(--nv-grad-hot);transform:scaleX(0);transform-origin:center;transition:transform .3s}
header .navbar .nav-links a:hover,header .navbar .nav-links a.active{color:var(--nv-violet)!important}
header .navbar .nav-links a:hover::after,header .navbar .nav-links a.active::after{transform:scaleX(1)}
header .navbar .menu-toggle{color:var(--nv-violet)}

/* ------------------------------------------------------------------ hero */
.hero{background:transparent!important}
.hero .text h1{font-weight:900;letter-spacing:-.035em;line-height:1.12;color:var(--text-main)}
.hero .text h1 .highlight,.hero .text h1 span,.hero .site-brand-name,.highlight{
  background:var(--nv-grad-hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:none!important;text-shadow:none!important}
.hero .text>p{color:var(--text-light)}
.hero .badge{
  display:inline-flex!important;align-items:center;gap:8px;background:var(--card-solid)!important;color:var(--nv-violet)!important;font-weight:800;
  border:1px solid color-mix(in srgb,var(--nv-v) 25%,transparent);box-shadow:0 8px 22px -10px color-mix(in srgb,var(--nv-v) 55%,transparent);padding:7px 18px!important}
.hero .badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--nv-flame)}
.hero .stats{border-inline-start:3px solid transparent!important;border-right:0!important;border-image:linear-gradient(var(--nv-violet),var(--nv-flame)) 1;padding-right:0!important;padding-inline-start:20px}
.hero .stats .item{background:var(--card-solid);border:1px solid var(--border-color);border-radius:18px;padding:14px 18px;box-shadow:var(--nv-shadow);transition:transform .3s,box-shadow .3s}
.hero .stats .item:hover{transform:translateY(-4px);box-shadow:var(--nv-shadow-hover)}
.hero .stats .item h3{font-weight:900;background:var(--nv-grad-hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero .card{
  background:linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.86)) padding-box,var(--nv-edge) border-box!important;
  border:1.5px solid transparent!important;border-radius:26px!important;
  box-shadow:0 40px 80px -30px rgba(70,35,200,.45)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html.dark .hero .card{background:linear-gradient(rgba(13,8,24,.9),rgba(13,8,24,.9)) padding-box,var(--nv-edge) border-box!important}
.hero .card .form-header h3{font-weight:900;letter-spacing:-.02em}

/* --------------------------------------------------------- form controls */
.input-group input{background:var(--card-solid)!important;border:1.5px solid var(--border-color)!important;border-radius:14px!important;color:var(--text-main)!important;transition:.25s}
.input-group input:hover{border-color:color-mix(in srgb,var(--nv-v) 40%,transparent)!important}
.input-group input:focus{border-color:var(--nv-violet)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--nv-v) 14%,transparent),0 12px 26px -12px color-mix(in srgb,var(--nv-v) 55%,transparent)!important}
.input-group i{color:var(--nv-violet)}
.form-options a,.login-forgot-desktop,.login-register-desktop a{color:var(--nv-violet)!important}
.divider::before,.divider::after{border-bottom-color:var(--border-color)!important}
.btn,.login-submit-btn{border-radius:14px!important}
.btn-primary,.login-submit-btn,form button[type=submit],.btn-sm,.pricing .btn-sm{
  position:relative;overflow:hidden;isolation:isolate;background:var(--nv-grad-hot)!important;background-size:140% 100%;color:#fff!important;border:0!important;font-weight:800;
  box-shadow:0 16px 28px -12px color-mix(in srgb,var(--nv-v) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.35)!important;transition:transform .25s cubic-bezier(.2,.9,.3,1.3),box-shadow .25s,background-position .5s!important}
.btn-primary::after,.login-submit-btn::after,form button[type=submit]::after{content:"";position:absolute;top:0;bottom:0;width:60%;inset-inline-start:-80%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:inset-inline-start .6s}
.btn-primary:hover,.login-submit-btn:hover,form button[type=submit]:hover,.pricing .btn-sm:hover{
  background-color:transparent!important;background-position:100% 0!important;transform:translateY(-3px) scale(1.02);box-shadow:0 24px 36px -14px color-mix(in srgb,var(--nv-f) 55%,transparent)!important}
.btn-primary:hover::after,.login-submit-btn:hover::after,form button[type=submit]:hover::after{inset-inline-start:130%}
.btn-secondary{background:var(--card-solid)!important;color:var(--nv-violet)!important;border:1.5px solid color-mix(in srgb,var(--nv-v) 30%,transparent)!important}
.btn-secondary:hover{background:var(--main-opacity)!important;transform:translateY(-2px)}
.home-v2 .hero .login-row-remember{background:var(--card-solid)!important;border-radius:14px!important}

/* ------------------------------------------------------------- platforms */
.platforms,.home-v2 .login-social-strip{border-color:var(--border-color)!important;background:rgba(255,255,255,.55)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.dark .platforms,html.dark .home-v2 .login-social-strip{background:rgba(13,8,24,.6)!important}
.platforms .pill{background:var(--card-solid)!important;border:1px solid var(--border-color)!important;color:var(--text-main)!important;box-shadow:0 6px 16px -8px rgba(70,35,200,.3)}
.platforms .pill.tt,.platforms .pill.x{color:var(--text-main)!important}
.home-v2 .social-item{background:var(--card-solid)!important;box-shadow:0 8px 18px -10px rgba(70,35,200,.35);transition:transform .3s,box-shadow .3s}

/* -------------------------------------------------------------- sections */
.section-title h2{font-weight:900;letter-spacing:-.03em;font-size:clamp(28px,4vw,42px)}
.section-title h2::after{content:"";display:block;width:64px;height:5px;border-radius:5px;margin:14px auto 0;background:var(--nv-grad-hot);box-shadow:0 8px 16px -4px color-mix(in srgb,var(--nv-f) 50%,transparent)}
.section-title p{color:var(--text-light)}
.services,.features,.works,.pricing,.counters,.testimonials,.faq{background:transparent!important;position:relative}
.works,.counters,.faq{background:linear-gradient(180deg,transparent,var(--section-bg) 18%,var(--section-bg) 82%,transparent)!important}

.services .card,.features .wrapper .box,.works .step-item,.testimonials .card,.faq .accordion-item,
.home-v2 .home-bento__main .card,.home-v2 .home-bento__side .box,.home-v2 .timeline .step-item{
  background:linear-gradient(var(--card-solid),var(--card-solid)) padding-box,var(--nv-edge) border-box!important;
  border:1px solid transparent!important;border-radius:24px!important;box-shadow:var(--nv-shadow)!important;
  transition:transform .4s cubic-bezier(.2,.9,.3,1.2),box-shadow .4s,background .4s}
.services .card:hover,.features .wrapper .box:hover,.works .step-item:hover,.testimonials .card:hover,
.home-v2 .home-bento__main .card:hover,.home-v2 .home-bento__side .box:hover,.home-v2 .timeline .step-item:hover{
  transform:translateY(-8px);box-shadow:var(--nv-shadow-hover)!important;
  background:linear-gradient(var(--card-solid),var(--card-solid)) padding-box,var(--nv-edge-hover) border-box!important}
.home-v2 .home-bento__main .card{background:radial-gradient(circle at 18% 14%,color-mix(in srgb,var(--nv-v) 12%,transparent),transparent 46%),radial-gradient(circle at 90% 95%,color-mix(in srgb,var(--nv-f) 12%,transparent),transparent 45%),linear-gradient(var(--card-solid),var(--card-solid)) padding-box,var(--nv-edge) border-box!important}
.services .card .icon-box,.home-v2 .home-bento__main .icon-box,.home-v2 .home-bento__side .box>i,.features .wrapper .box i{
  background:var(--nv-grad-hot)!important;color:#fff!important;border:0!important;border-radius:18px!important;
  box-shadow:0 16px 28px -12px color-mix(in srgb,var(--nv-v) 70%,transparent);transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.features .wrapper .box i{display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;font-size:28px}
.services .card:hover .icon-box,.home-v2 .home-bento__side .box:hover>i,.features .wrapper .box:hover i{transform:rotate(-8deg) scale(1.12)}
.services .card .link-arrow,.home-v2 .home-bento :is(.card,.box) .link-arrow{color:var(--nv-violet)!important;background:var(--main-opacity);border-radius:999px!important;padding:8px 16px!important;display:inline-block}
.services .card:hover .link-arrow{background:var(--nv-violet);color:#fff!important}
.works .step-number,.home-v2 .timeline-number .step-number{background:var(--nv-grad-hot)!important;color:#fff!important;border:0!important;box-shadow:0 16px 28px -10px color-mix(in srgb,var(--nv-v) 70%,transparent)!important;border-radius:20px!important}
.home-v2 .timeline-number .step-number{border-radius:50%!important}
.home-v2 .timeline-item .step-item{position:relative}
.home-v2 .timeline-item:hover .step-number{transform:scale(1.1) rotate(-6deg)}
.home-v2 .timeline-number .step-number{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.home-v2 .home-cta .box i{background:rgba(255,255,255,.2)!important;box-shadow:none!important}
.icon-box.instagram,.icon-box.facebook,.icon-box.fb,.icon-box.tiktok,.icon-box.youtube{background:var(--nv-grad-hot)!important;color:#fff!important}
header img{filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--nv-v) 25%,transparent))}
.home-v2 .audience-grid{border-color:var(--border-color)!important}
.home-v2 .audience-grid .card{background:transparent!important;border-radius:0!important;box-shadow:none!important}
.home-v2 .audience-grid .card:hover{background:var(--main-opacity)!important;transform:none!important}
.home-v2 .home-cta .box{background:var(--nv-grad-hot)!important;border:0!important;border-radius:30px!important;color:#fff;padding:44px;position:relative;overflow:hidden;box-shadow:0 40px 70px -26px color-mix(in srgb,var(--nv-v) 70%,transparent)!important}
.home-v2 .home-cta .box *{color:#fff}
.home-v2 .home-cta__actions .btn-default{background:var(--card-solid)!important;color:var(--nv-violet)!important;border:1.5px solid color-mix(in srgb,var(--nv-v) 35%,transparent)!important;box-shadow:0 10px 22px -12px color-mix(in srgb,var(--nv-v) 50%,transparent)}
.home-v2 .home-cta__actions .btn-default:hover{background:var(--main-opacity)!important;transform:translateY(-3px)}

/* pricing table */
.pricing .table-responsive{background:linear-gradient(var(--card-solid),var(--card-solid)) padding-box,var(--nv-edge) border-box;border:1px solid transparent;border-radius:24px!important;box-shadow:var(--nv-shadow)!important;overflow:hidden}
.pricing .services-table th{background:var(--nv-grad-hot)!important;color:#fff!important;font-weight:800;letter-spacing:.03em}
.services-table td{border-bottom-color:var(--border-color)!important;transition:background .2s}
.services-table tr:hover td{background:var(--main-opacity)}
.pricing .text-main{color:var(--nv-flame)!important}

/* counters */
.counters .item,.counter .item{background:var(--card-solid);border:1px solid var(--border-color);border-radius:24px;padding:30px 16px;box-shadow:var(--nv-shadow);transition:.35s}
.counters .item:hover{transform:translateY(-6px);box-shadow:var(--nv-shadow-hover)}
.counters .item h2,.counter .item h2,.counters .value{background:var(--nv-grad-hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:900}
.counters .item::after{background:var(--nv-grad-hot);width:48px}

/* testimonials */
.testimonials .card{border-right:0!important;position:relative}
.testimonials .card::before{content:"\201D";position:absolute;inset-inline-end:22px;top:4px;font-size:90px;line-height:1;font-family:Georgia,serif;font-weight:900;background:var(--nv-grad-hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.28}
.testimonials .stars{color:var(--nv-flame)!important}
.swiper-pagination-bullet-active{background:var(--nv-violet)!important}

/* faq */
.faq .accordion-item{border-radius:20px!important}
.faq .accordion-header:hover{background:var(--main-opacity)!important}
.faq .accordion-body{background:transparent!important;color:var(--text-light)}
.faq .accordion-item.active{background:linear-gradient(var(--card-solid),var(--card-solid)) padding-box,var(--nv-grad-hot) border-box!important}
.faq .accordion-item.active .accordion-header{color:var(--nv-violet)!important}
.faq .accordion-item.active .accordion-body{max-height:420px!important}
.faq .accordion-header i{transition:transform .35s cubic-bezier(.3,1.6,.5,1);color:var(--nv-flame)}

/* footer = ink band */
footer{background:#0B0A1F!important;position:relative;overflow:hidden;margin-top:40px}
footer>*{position:relative}
footer::after{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--nv-v)}
footer h1,footer h2,footer h3,footer h4,footer h5,footer strong{color:#fff!important}
footer .footer-logo h2{color:#fff}
footer .footer-logo h2 span{background:var(--nv-grad-hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
footer .footer-links a{color:#c9c6e6!important}
footer .footer-links a:hover{color:#fff!important;padding-inline-start:6px}
footer .social-icons a{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.08);color:#fff!important;transition:.3s}
footer .social-icons a:hover{background:var(--nv-grad-hot);transform:translateY(-4px) rotate(-6deg);box-shadow:0 14px 24px -10px color-mix(in srgb,var(--nv-f) 70%,transparent)}
footer .copyright{border-top-color:rgba(255,255,255,.12)!important;color:#9a96c0!important}

/* chat bot accent */
html body .sv-bot4{--sv-accent:var(--nv-v);--sv-accent2:var(--nv-f)}

@keyframes novaShine{to{background-position:200% 0}}
@keyframes novaGlow{from{transform:translate(-3%,0) scale(1)}to{transform:translate(3%,4%) scale(1.12)}}
@keyframes novaPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--nv-f) 60%,transparent)}70%{box-shadow:0 0 0 10px color-mix(in srgb,var(--nv-f) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--nv-f) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (max-width:768px){
  .home-v2 .home-cta .box{padding:28px 22px}
  .hero .stats .item{padding:10px 14px}
}

/* header breathing room */
header .navbar{gap:14px}
header .navbar .nav-links{gap:22px}
header .navbar .nav-links a,header .auth-buttons .btn{white-space:nowrap}
@media (max-width:1180px){header .navbar .nav-links{gap:14px}header .auth-buttons .btn{padding:10px 16px}}
/* Google sign-in sits right before the Sign in button */
@media (max-width:991px){
  .home-v2.home-v2--ltr .hero .login-main-fields,
  .home-v2.home-v2--rtl .hero .login-main-fields{
    grid-template-columns:52px 1fr!important;
    grid-template-areas:"username username" "password password" "captcha captcha" "google google" "options submit"!important}
  .home-v2 .hero .google_login{grid-area:google!important;display:block!important;width:100%!important;height:auto!important;min-height:44px;margin:0!important}
  .home-v2 .hero .login-google-mobile{display:block!important;width:100%!important}
  .home-v2 .hero .login-google-desktop{display:none!important}
  .home-v2 .hero .login-submit-btn{grid-area:submit!important}
  .home-v2 .hero .form-options{grid-area:options!important}
  .home-v2 .hero .login-main-fields .divider{display:none!important}
}
/* Google sign-in button: dark glass in the theme colours instead of a white box */
html body :is(iframe[src*="accounts.google"],iframe[id*="gsi"],.g_id_signin,#g_id_signin,.google-btn,.btn-google,[class*="google-login"]){border-radius:14px!important}
html body iframe[src*="accounts.google"],html body .g_id_signin iframe{filter:invert(1) hue-rotate(180deg) saturate(1.15);color-scheme:dark;border-radius:14px;background:transparent}
html body :is(.g_id_signin,#g_id_signin,.google-btn,.btn-google,[class*="google-login"],div:has(>iframe[src*="accounts.google"])){background:var(--card-solid)!important;border:1.5px solid color-mix(in srgb,var(--nv-v) 55%,transparent)!important;border-radius:14px!important;overflow:hidden;box-shadow:0 10px 24px -14px var(--nv-glow-v)}
/* ============ landing page on phones: ONE tidy header row + a proper menu sheet ============ */
@media (max-width:991px){
  html body header .container.navbar,html body header .navbar{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important;min-height:64px!important;height:auto!important;padding:8px 12px!important;position:relative}
  html body header .navbar .logo{flex:1 1 auto!important;min-width:0;display:flex;align-items:center;order:0}
  html body header .navbar .logo img{height:40px!important;width:auto!important;max-width:100%!important;object-fit:contain}
  html body header .navbar .nv-actions{order:2;display:flex!important;align-items:center;gap:6px!important;flex:none;margin:0!important}
  html body header .navbar .nv-actions .nv-tools{display:flex;gap:6px;align-items:center}
  html body header .navbar .nv-actions .nv-tb{width:38px!important;height:38px!important;padding:0!important;min-width:0}
  html body header .navbar .nv-actions .nv-tb>svg:last-child,html body header .navbar .nv-actions .nv-tb .lbl{display:none!important}
  html body header .navbar .auth-buttons{display:flex!important;margin:0!important}
  html body header .navbar .auth-buttons .btn{height:38px!important;padding:0 12px!important;font-size:12px!important;white-space:nowrap;border-radius:13px 13px 13px 5px!important}
  html body header .navbar .menu-toggle{order:3;flex:none;display:grid!important;place-items:center;width:40px;height:40px;border-radius:14px 14px 14px 5px;border:1.5px solid color-mix(in srgb,var(--nv-v) 55%,transparent);background:var(--main-opacity);color:var(--nv-v);cursor:pointer;margin:0!important}
  html body header .navbar nav{position:absolute!important;top:calc(100% + 8px);inset-inline:12px;z-index:500;display:block!important;width:auto!important;margin:0!important;padding:0!important;background:none!important}
  html body header .navbar .nav-links{display:none!important;flex-direction:column;gap:6px;padding:12px;margin:0;list-style:none;border-radius:24px 24px 24px 8px;background:var(--card-solid)!important;border:1.5px solid color-mix(in srgb,var(--nv-v) 55%,transparent);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 26px -6px var(--nv-glow-v)}
  html body header .navbar .nav-links.show{display:flex!important}
  html body header .navbar .nav-links li{width:100%;margin:0!important}
  html body header .navbar .nav-links a{display:block!important;padding:13px 16px!important;border-radius:16px 16px 16px 6px;font-weight:800;font-size:15px;background:var(--main-opacity);color:var(--text-main)!important;text-decoration:none!important;border:0!important}
  html body header .navbar .nav-links a.active{background:var(--nv-mix)!important;color:#fff!important}
}
@media (max-width:991px){html body header .navbar .auth-buttons .btn{display:inline-flex!important;align-items:center;justify-content:center;line-height:1!important;min-width:84px;height:38px!important;padding:0 14px!important;font-size:12.5px!important;letter-spacing:0!important}}

/* sheen of the header buttons stays INSIDE them (it was leaking over the theme / language icons) */
html body header .navbar .btn,html body header .navbar .auth-buttons .btn,html body .page-header .btn{position:relative;overflow:hidden!important;isolation:isolate}
html body header .navbar .btn::after,html body header .navbar .btn::before{max-width:100%;clip-path:inset(0 round inherit)}
html body header .navbar .nv-actions .nv-tb{position:relative;z-index:2;background:var(--card-solid)!important}

/* chat button width: identical to Telegram / WhatsApp */
html body button.sv-bot4-button{width:56px!important;min-width:56px!important;max-width:56px!important;height:56px!important;padding:0!important;box-sizing:border-box!important}
@media (max-width:991px){html body button.sv-bot4-button{width:46px!important;min-width:46px!important;max-width:46px!important;height:46px!important;border-radius:16px 16px 16px 6px!important}html body .telegram-button,html body .whatsapp-button{width:46px!important;height:46px!important;min-width:46px;max-width:46px;border-radius:16px 16px 16px 6px!important}}

/* floating support buttons (landing page too): same size, same look, same hover */
html body .sv-bot4-button,html body .telegram-button,html body .whatsapp-button{position:relative!important;width:56px!important;height:56px!important;min-width:56px!important;max-width:56px!important;border-radius:20px 20px 20px 7px!important;border:1.5px solid rgba(255,255,255,.35)!important;display:grid!important;place-items:center;padding:0!important;color:#fff!important;transform:none!important;box-sizing:border-box!important;box-shadow:0 14px 28px -10px var(--c,#7C3AED),0 0 0 4px color-mix(in srgb,var(--c,#7C3AED) 22%,transparent)!important;transition:transform .3s cubic-bezier(.2,.9,.3,1.4),box-shadow .3s!important}
html body .sv-bot4-button{--c:var(--nv-v);background:linear-gradient(135deg,var(--nv-v2),var(--nv-v) 55%,var(--nv-f))!important}
html body .telegram-button{--c:#229ED9;background:linear-gradient(135deg,#43C0F4,#229ED9 60%,#1678b4)!important}
html body .whatsapp-button{--c:#25D366;background:linear-gradient(135deg,#5BE88F,#25D366 55%,#128C7E)!important}
html body .telegram-button::after,html body .whatsapp-button::after{display:none!important}
html body .telegram-button svg,html body .whatsapp-button svg{width:34px!important;height:34px!important;fill:#fff!important}
html body .sv-bot4-button svg{width:27px!important;height:27px!important;stroke:#fff!important;fill:none!important}
html body .sv-bot4-button:hover,html body .telegram-button:hover,html body .whatsapp-button:hover{transform:translateY(-4px) scale(1.06)!important}
@media (max-width:991px){html body .sv-bot4-button,html body .telegram-button,html body .whatsapp-button{width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;border-radius:16px 16px 16px 6px!important}html body .telegram-button svg,html body .whatsapp-button svg{width:28px!important;height:28px!important}html body .sv-bot4-button svg{width:23px!important;height:23px!important}}
html body button.sv-bot4-button,html body .sv-bot4-button{width:56px!important;height:56px!important;min-width:56px!important;max-width:56px!important;min-height:56px!important;max-height:56px!important;padding:0!important;box-sizing:border-box!important;aspect-ratio:1/1!important;flex:none!important}
@media (max-width:991px){html body button.sv-bot4-button,html body .sv-bot4-button{width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;min-height:46px!important;max-height:46px!important}}

/* the chat button lives OUTSIDE <body>, so these selectors start at html */
html button.sv-bot4-button{width:56px!important;height:56px!important;min-width:56px!important;max-width:56px!important;min-height:56px!important;max-height:56px!important;padding:0!important;box-sizing:border-box!important;aspect-ratio:1/1!important;border-radius:20px 20px 20px 7px!important;border:1.5px solid rgba(255,255,255,.35)!important;display:grid!important;place-items:center;color:#fff!important;background:linear-gradient(135deg,var(--nv-v2),var(--nv-v) 55%,var(--nv-f))!important;box-shadow:0 14px 28px -10px var(--nv-v),0 0 0 4px color-mix(in srgb,var(--nv-v) 22%,transparent)!important;transition:transform .3s cubic-bezier(.2,.9,.3,1.4),box-shadow .3s!important}
html button.sv-bot4-button:hover{transform:translateY(-4px) scale(1.06)!important}
html button.sv-bot4-button svg{width:27px!important;height:27px!important;stroke:#fff!important;fill:none!important}
@media (max-width:991px){html button.sv-bot4-button{width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;min-height:46px!important;max-height:46px!important;border-radius:16px 16px 16px 6px!important}html button.sv-bot4-button svg{width:23px!important;height:23px!important}}
/* NOVA colour tokens - every theme = mauve + one 3rd colour
   white        : white + mauve + orange (first palette)
   black pink   : black + dark mauve + pink
   black orange : black + dark mauve + dark orange                           */
:root{
  --nv-v:#5B2EFF;      /* mauve / violet */
  --nv-v2:#9A45FF;     /* mid violet (gradients) */
  --nv-f:#FF5A36;      /* orange (first one) */
  --nv-f2:#FF8A3D;
  --nv-m:var(--nv-v);  /* colour of moving things */
}
html.dark{
  --nv-v:#6D28D9;      /* dark mauve */
  --nv-v2:#8B4DE8;
  --nv-f:#EC4899;      /* pink */
  --nv-f2:#F472B6;
  --nv-m:var(--nv-f);
}
html.dark.nv-orange{--nv-f:#F97316;--nv-f2:#FB923C}   /* black + mauve + orange (default) */
html.dark.nv-amber{--nv-v:#F97316;--nv-v2:#FB923C;--nv-f:#7C2DDA;--nv-f2:#A855F7}   /* orange first */
html.dark.nv-xm{--nv-v:#D42A3C;--nv-v2:#F0525F;--nv-f:#1FB463;--nv-f2:#FFD166;--bg-color:#03080c;--card-bg:#08131a;--card-solid:#08131a;--border-color:rgba(240,82,95,.45)}   /* christmas */
html.dark.nv-hw{--nv-v:#7C2DDA;--nv-v2:#A855F7;--nv-f:#FF7A00;--nv-f2:#FFB347;--bg-color:#06030a;--card-bg:#0e0714;--card-solid:#0e0714;--border-color:rgba(168,85,247,.5)}


/* =====================================================================
   NOVA · colour tokens (the only place colours are decided)
   white theme : white + violet only (no orange)
   black theme : black + dark mauve + light orange
===================================================================== */
/* skin for the notifications popup (#cp-overlay) already in the template */
html body #cp-overlay{
  --cp-bg:#ffffff;--cp-card:#f6f3ff;--cp-border:color-mix(in srgb,var(--nv-v) 22%,transparent);--cp-text:#0B0A1F;--cp-muted:#58557a;
  --cp-grad:linear-gradient(135deg,var(--nv-v) 0%,var(--nv-v2) 100%);
  background:rgba(11,10,31,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.dark body #cp-overlay{--cp-bg:#0d0818;--cp-card:#150f26;--cp-border:rgba(255,255,255,.14);--cp-text:#f4f4f6;--cp-muted:#a8a8b3}
html body #cp-box{
  background:linear-gradient(var(--cp-bg),var(--cp-bg)) padding-box,linear-gradient(var(--nv-v),var(--nv-v)) border-box;
  border:1.5px solid transparent;border-radius:28px;box-shadow:0 60px 100px -30px rgba(60,30,180,.65);color:var(--cp-text)}
html body #cp-bell{border-radius:19px;animation:cpBellN 3s ease-in-out infinite}
@keyframes cpBellN{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-14deg)}94%{transform:rotate(12deg)}97%{transform:rotate(-8deg)}}
html body #cp-box h3{color:var(--cp-text);font-weight:900;letter-spacing:-.02em}
html body #cp-close{background:var(--cp-card);color:var(--cp-text);border:1px solid var(--cp-border);transition:.25s}
html body #cp-close:hover{background:#4A1FE0;color:#fff;border-color:transparent;transform:rotate(90deg)}
html body .cp-tabs{background:var(--cp-card);border-radius:16px}
html body .cp-tab{border-radius:12px;font-weight:800}
html body .cp-card,html body .cp-row,html body .cp-offer{background:var(--cp-card);border-radius:18px;color:var(--cp-text)}
html body .cp-row:hover{border-color:var(--nv-v)}
html body .cp-btn{border-radius:14px}
html body .cp-btn.dl{color:var(--nv-v);border:1.5px solid color-mix(in srgb,var(--nv-v) 40%,transparent);box-shadow:none}
html body .cp-btn.dl:hover{background:color-mix(in srgb,var(--nv-v) 8%,transparent);box-shadow:none}
html body .cp-offer .badge{border-radius:20px}

/* chat bot accent */
html .sv-bot4{--sv-accent:var(--nv-v);--sv-accent2:var(--nv-v2)}

/* every card gets a clear violet / mauve frame so all cards show (white and black themes) */
html :is(.card,.store-form,.massorder-card,.bonus-card,.table-responsive,.modal-box,.stat-card,.order-card,.refill-card,.refund-card,.subscription-card,.drip-feed-card,.levels-mini-card,.method-card,.feat-card,.category-box,.step-item,.accordion-item,.welcome-box,
  .services .card,.features .wrapper .box,.works .step-item,.testimonials .card,.home-v2 .home-bento__main .card,.home-v2 .home-bento__side .box,.home-v2 .timeline .step-item,.hero .stats .item,.counters .item,.pricing .table-responsive,.nv-foot__card,.nv-card,.nv-chip,.nv-tb,.nv-cur,.nv-menu){
  border-width:1.5px!important;border-style:solid!important}
html :is(.hero .stats .item,.nv-card,.nv-chip,.nv-tb,.nv-cur,.nv-menu,.nv-foot__card,.accordion-item){border-color:color-mix(in srgb,var(--nv-v) 45%,transparent)!important}
html :is(.form-control,.form-select,textarea,select,.input-group input){border-color:color-mix(in srgb,var(--nv-v) 40%,transparent)!important}

/* ============ phone: Google sign-in button centred in its row (was stuck to one side with an empty box) ============ */
@media (max-width:991px){
  html body .home-v2 .hero .google_login{display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;min-height:46px!important;height:auto!important;margin:0!important;padding:0!important}
  html body .home-v2 .hero .google_login>#g_id_onload{display:none!important}
  html body .home-v2 .hero .login-google-mobile{display:flex!important;justify-content:center!important;width:100%!important;background:none!important;border:0!important;box-shadow:none!important}
  html body .home-v2 .hero .login-google-mobile>div{width:100%!important;max-width:100%!important;height:46px!important;display:flex!important;justify-content:center!important;align-items:center!important;box-sizing:border-box!important;overflow:hidden!important}
  html body .home-v2 .hero .login-google-mobile iframe{margin:0 auto!important;max-width:100%!important;flex:none}
}
/* ===== NOVA colour control: every old fixed-mauve value now follows YOUR colours ===== */
:root,html.dark,html.dark.nv-orange{
  --nv-violet:var(--nv-v);--nv-violet-2:var(--nv-v2);--nv-flame:var(--nv-f);--nv-flame-2:var(--nv-f2);--nv-accent:var(--nv-v);
  --main-color:var(--nv-v);--main-glow:color-mix(in srgb,var(--nv-v) 35%,transparent);
  --nv-grad:linear-gradient(135deg,var(--nv-v) 0%,var(--nv-v2) 100%);
  --nv-grad-hot:linear-gradient(135deg,var(--nv-v) 0%,var(--nv-v2) 48%,var(--nv-f) 125%);
  --nv-flame-grad:linear-gradient(135deg,var(--nv-f),var(--nv-f2));
  --nv-edge:linear-gradient(color-mix(in srgb,var(--nv-v) 60%,transparent),color-mix(in srgb,var(--nv-v) 60%,transparent));
  --nv-edge-hover:linear-gradient(var(--nv-v),var(--nv-v));
  --card-hover-shadow:color-mix(in srgb,var(--nv-v) 22%,transparent)}
:root{--main-opacity:color-mix(in srgb,var(--nv-v) 10%,transparent);--secondary-color:color-mix(in srgb,var(--nv-v) 5%,transparent);--td-color:color-mix(in srgb,var(--nv-v) 4%,transparent);--section-bg:color-mix(in srgb,var(--nv-v) 4%,transparent);--light-bg:color-mix(in srgb,var(--nv-v) 5%,transparent);--border-color:color-mix(in srgb,var(--nv-v) 36%,transparent)}
html.dark{--main-opacity:color-mix(in srgb,var(--nv-v) 18%,transparent);--secondary-color:color-mix(in srgb,var(--nv-v) 9%,transparent);--td-color:color-mix(in srgb,var(--nv-v) 7%,transparent);--section-bg:color-mix(in srgb,var(--nv-v) 5%,transparent);--light-bg:color-mix(in srgb,var(--nv-v) 8%,transparent);--border-color:color-mix(in srgb,var(--nv-v) 30%,transparent)}
::selection{background:var(--nv-v)}
*{scrollbar-color:color-mix(in srgb,var(--nv-v) 40%,transparent) transparent}

/* ===== 4th colour: sidebar + top bar background ===== */
html.nv-sbc body .sidebar .sidebar-header,html.nv-sbc body .sidebar .sidebar-body,html.nv-sbc body .page-header,html.nv-sbc body .nav-mob{background:var(--nv-s)!important}
html.nv-sbc body .sidebar-body .user-box,html.nv-sbc body .sidebar-music-player{background:color-mix(in srgb,var(--nv-v) 14%,var(--nv-s))!important}
/* ===== left-to-right languages: the dashboard flips (sidebar on the left, floating buttons on the right) ===== */
@media (min-width:992px){html:is(.nv-ltr-dash,.nv-ltr-pre) body .sidebar{right:auto!important;left:0!important}}
@media (max-width:991px){html:is(.nv-ltr-dash,.nv-ltr-pre) body .sidebar{right:auto!important;left:0!important;margin-right:0!important;margin-left:calc(min(300px,86vw) * -1)!important}html:is(.nv-ltr-dash,.nv-ltr-pre) body.sidebar-open .sidebar{margin-left:0!important}}
html:is(.nv-ltr-dash,.nv-ltr-pre) body .integration-fixed.integration-fixed__bottom-left,html:is(.nv-ltr-dash,.nv-ltr-pre) button.sv-bot4-button{left:auto!important;right:24px!important}
@media (max-width:991px){html:is(.nv-ltr-dash,.nv-ltr-pre) body .integration-fixed.integration-fixed__bottom-left,html:is(.nv-ltr-dash,.nv-ltr-pre) button.sv-bot4-button{right:14px!important}}
html:is(.nv-ltr-dash,.nv-ltr-pre) body .sidebar-menu-flat>.nav-menu>li>a:hover{transform:translateX(5px)}