/* =========================================================
   VESTA UI SYSTEM
========================================================= */


/* =========================================================
   HEADER
========================================================= */

.vesta-header {
    position: relative;
    z-index: 1000;

    background: rgba(255, 255, 255, 0.92);

    border-bottom: 1px solid rgba(226, 232, 240, 0.8);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.vesta-header-inner {
    position: relative;

    min-height: 82px;

    display: flex;
    align-items: center;

    gap: 32px;
}


/* Brand */

.vesta-brand {
    flex-shrink: 0;
}

.vesta-brand .custom-logo-link {
    display: block;
}

.vesta-brand .custom-logo {
    width: auto;
    max-width: 180px;
    max-height: 58px;
}

.vesta-logo-text {
    display: flex;
    flex-direction: column;

    line-height: 1.05;
}

.vesta-logo-text span {
    color: var(--vesta-dark);

    font-size: 29px;
    font-weight: 950;

    letter-spacing: -1px;
}

.vesta-logo-text small {
    margin-top: 5px;

    color: var(--vesta-text-soft);

    font-size: 8px;
    font-weight: 700;
}


/* Navigation */

.vesta-nav {
    flex: 1;
}

.vesta-menu {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.vesta-menu-item {
    position: static;
}

.vesta-menu-item > a {
    position: relative;

    display: flex;
    align-items: center;
    gap: 6px;

    min-height: 82px;

    padding: 0 12px;

    color: var(--vesta-dark-soft);

    font-size: 13px;
    font-weight: 750;

    transition:
        color .2s ease;
}

.vesta-menu-item > a::after {
    content: "";

    position: absolute;

    right: 12px;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius: 10px;

    background: var(--vesta-primary);

    transition: width .25s ease;
}

.vesta-menu-item > a:hover {
    color: var(--vesta-primary);
}

.vesta-menu-item > a:hover::after {
    width: calc(100% - 24px);
}

.vesta-menu-chevron {
    font-size: 14px;
    line-height: 1;
}


/* Header Actions */

.vesta-header-actions {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}

.vesta-header-icon {
    position: relative;

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

    width: 42px;
    height: 42px;

    border: 1px solid var(--vesta-border);
    border-radius: 13px;

    background: rgba(255,255,255,.85);

    color: var(--vesta-dark);

    transition:
        transform .2s ease,
        border-color .2s ease,
        color .2s ease,
        background .2s ease;
}

.vesta-header-icon:hover {
    transform: translateY(-2px);

    border-color: rgba(79,70,229,.25);

    background: rgba(79,70,229,.05);

    color: var(--vesta-primary);
}

.vesta-cart-count {
    position: absolute;

    top: -5px;
    right: -5px;

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

    min-width: 18px;
    height: 18px;

    padding: 0 4px;

    border-radius: 50px;

    background: var(--vesta-primary);

    color: #fff;

    font-size: 9px;
    font-weight: 900;

    line-height: 1;
}


/* =========================================================
   MEGA MENU
========================================================= */

.vesta-mega-menu {
    position: absolute;

    top: calc(100% + 1px);
    right: 0;
    left: 0;

    visibility: hidden;
    opacity: 0;

    transform: translateY(-8px);

    pointer-events: none;

    padding: 18px;

    background: rgba(255,255,255,.98);

    border-bottom:
        1px solid var(--vesta-border);

    box-shadow:
        0 25px 60px rgba(15,23,42,.12);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}

.vesta-menu-item-mega:hover .vesta-mega-menu,
.vesta-menu-item-mega:focus-within .vesta-mega-menu {
    visibility: visible;
    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;
}

.vesta-mega-inner {
    width: min(1180px, calc(100% - 30px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.25fr
        1fr
        1fr
        1.1fr;

    gap: 30px;

    padding: 25px;

    border:
        1px solid var(--vesta-border);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );
}

.vesta-mega-intro {
    padding-left: 15px;

    border-left:
        1px solid var(--vesta-border);
}

.vesta-mega-kicker {
    display: block;

    margin-bottom: 10px;

    color: var(--vesta-primary);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .5px;
}

.vesta-mega-intro h3 {
    margin: 0;

    color: var(--vesta-dark);

    font-size: 22px;
    font-weight: 900;
}

.vesta-mega-intro p {
    margin: 12px 0 18px;

    color: var(--vesta-text-soft);

    font-size: 12px;

    line-height: 1.9;
}

.vesta-mega-more {
    color: var(--vesta-primary);

    font-size: 12px;
    font-weight: 800;
}

.vesta-mega-column {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.vesta-mega-column h4 {
    margin: 0 0 9px;

    color: var(--vesta-dark);

    font-size: 13px;
    font-weight: 900;
}

.vesta-mega-column a {
    display: block;

    padding: 7px 0;

    color: var(--vesta-text-soft);

    font-size: 12px;

    transition:
        color .2s ease,
        transform .2s ease;
}

.vesta-mega-column a:hover {
    color: var(--vesta-primary);

    transform: translateX(-4px);
}

.vesta-mega-feature {
    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: flex-end;

    min-height: 210px;

    padding: 25px;

    overflow: hidden;

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(6,182,212,.25),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #312e81,
            #4f46e5
        );

    color: #fff;
}

.vesta-mega-feature::before {
    content: "AI";

    position: absolute;

    top: -30px;
    left: -10px;

    color: rgba(255,255,255,.06);

    font-size: 150px;
    font-weight: 950;
}

.vesta-mega-feature span {
    position: relative;

    color: rgba(255,255,255,.65);

    font-size: 10px;
    font-weight: 700;
}

.vesta-mega-feature strong {
    position: relative;

    margin-top: 8px;

    font-size: 18px;
    font-weight: 900;
}

.vesta-mega-feature small {
    position: relative;

    margin-top: 7px;

    color: rgba(255,255,255,.7);

    font-size: 10px;

    line-height: 1.8;
}

.vesta-mega-feature a {
    position: relative;

    margin-top: 16px;

    color: #fff;

    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   SEARCH OVERLAY
========================================================= */

.vesta-search-overlay {
    position: fixed;

    top: 0;
    right: 0;
    left: 0;

    z-index: 2000;

    visibility: hidden;
    opacity: 0;

    transform: translateY(-15px);

    pointer-events: none;

    padding: 35px 0 45px;

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 25px 60px rgba(15,23,42,.15);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
}

body.vesta-search-open .vesta-search-overlay {
    visibility: visible;
    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;
}

.vesta-search-inner {
    max-width: 900px;
}

.vesta-search-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.vesta-search-top span {
    color: var(--vesta-dark);

    font-size: 14px;
    font-weight: 900;
}

.vesta-search-close {
    width: 40px;
    height: 40px;

    border: 0;
    border-radius: 12px;

    background: var(--vesta-bg);

    color: var(--vesta-dark);

    font-size: 25px;

    cursor: pointer;
}

.vesta-search-form {
    display: flex;

    gap: 10px;
}

.vesta-search-form input {
    flex: 1;

    height: 58px;

    padding: 0 20px;

    border:
        1px solid var(--vesta-border);

    border-radius: 16px;

    outline: none;

    background: #fff;

    color: var(--vesta-dark);

    font-size: 14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.vesta-search-form input:focus {
    border-color: rgba(79,70,229,.4);

    box-shadow:
        0 0 0 4px rgba(79,70,229,.07);
}

.vesta-search-form button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-width: 125px;

    padding: 0 20px;

    border: 0;

    border-radius: 16px;

    background: var(--vesta-primary);

    color: #fff;

    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.vesta-mobile-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 9px;

    border:
        1px solid var(--vesta-border);

    border-radius: 13px;

    background: #fff;
}

.vesta-mobile-toggle span {
    display: block;

    height: 2px;

    margin: 5px 0;

    border-radius: 5px;

    background: var(--vesta-dark);
}


/* =========================================================
   BUTTONS
========================================================= */

.vesta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 26px;

    border-radius: 14px;

    font-size: 14px;
    font-weight: 800;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.vesta-btn:hover {
    transform: translateY(-2px);
}

.vesta-btn-primary {
    background: var(--vesta-primary);

    color: #fff;

    box-shadow:
        0 12px 30px rgba(79,70,229,.25);
}

.vesta-btn-primary:hover {
    background: var(--vesta-primary-dark);
}

.vesta-btn-outline {
    border:
        1px solid var(--vesta-border);

    background: #fff;

    color: var(--vesta-dark);
}

.vesta-btn-light {
    background: #fff;

    color: var(--vesta-primary);
}


/* =========================================================
   HERO
========================================================= */

.vesta-hero {
    position: relative;

    overflow: hidden;

    min-height: 720px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(79,70,229,.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 25% 80%,
            rgba(6,182,212,.08),
            transparent 28%
        ),
        #f8fafc;
}

.vesta-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.05fr
        .95fr;

    align-items: center;

    gap: 60px;
}

.vesta-hero-content {
    max-width: 650px;
}

.vesta-hero-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 25px;

    padding: 8px 14px;

    border:
        1px solid rgba(79,70,229,.12);

    border-radius: 999px;

    background:
        rgba(255,255,255,.7);

    color: var(--vesta-primary);

    font-size: 13px;
    font-weight: 800;
}

.vesta-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 5px rgba(34,197,94,.12);
}

.vesta-hero h1 {
    margin: 0;

    color: var(--vesta-dark);

    font-size: clamp(42px,5.2vw,72px);

    line-height: 1.2;

    font-weight: 950;

    letter-spacing: -2.5px;
}

.vesta-hero h1 strong {
    display: inline-block;

    background:
        linear-gradient(
            135deg,
            var(--vesta-primary),
            var(--vesta-secondary)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.vesta-hero-content > p {
    max-width: 590px;

    margin: 25px 0 0;

    color: var(--vesta-text-soft);

    font-size: 18px;

    line-height: 2;
}

.vesta-hero-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}

.vesta-hero-trust {
    display: flex;

    gap: 35px;

    margin-top: 48px;
}

.vesta-hero-trust div {
    display: flex;
    flex-direction: column;
}

.vesta-hero-trust strong {
    color: var(--vesta-dark);

    font-size: 24px;
    font-weight: 900;
}

.vesta-hero-trust span {
    color: var(--vesta-text-soft);

    font-size: 12px;
}

.vesta-hero-visual {
    position: relative;

    min-height: 500px;
}

.vesta-hero-card {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(430px,80%);

    aspect-ratio: 1.2;

    padding: 32px;

    transform:
        translate(-50%,-50%)
        rotate(-5deg);

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(79,70,229,.95),
            rgba(15,23,42,.98)
        );

    box-shadow:
        0 40px 100px rgba(15,23,42,.25);

    color: #fff;
}

.vesta-card-top,
.vesta-card-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;
}

.vesta-card-top {
    color: rgba(255,255,255,.75);

    font-size: 13px;
    font-weight: 800;
}

.vesta-card-dot {
    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #22d3ee;

    box-shadow:
        0 0 25px rgba(34,211,238,.7);
}

.vesta-card-title {
    margin-top: 100px;

    font-size: 32px;
    font-weight: 900;
}

.vesta-card-lines {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-top: 18px;
}

.vesta-card-lines span {
    display: block;

    height: 5px;

    border-radius: 10px;

    background: rgba(255,255,255,.16);
}

.vesta-card-lines span:nth-child(1) {
    width: 70%;
}

.vesta-card-lines span:nth-child(2) {
    width: 50%;
}

.vesta-card-lines span:nth-child(3) {
    width: 35%;
}

.vesta-card-bottom {
    position: absolute;

    right: 32px;
    bottom: 28px;
    left: 32px;

    color: rgba(255,255,255,.5);

    font-size: 10px;
    font-weight: 700;
}

.vesta-floating-card {
    position: absolute;

    z-index: 3;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 15px 18px;

    border:
        1px solid rgba(226,232,240,.8);

    border-radius: 18px;

    background:
        rgba(255,255,255,.9);

    box-shadow:
        var(--vesta-shadow-lg);

    backdrop-filter: blur(15px);
}

.vesta-floating-card strong,
.vesta-floating-card small {
    display: block;
}

.vesta-floating-card strong {
    color: var(--vesta-dark);

    font-size: 12px;
}

.vesta-floating-card small {
    margin-top: 2px;

    color: var(--vesta-text-soft);

    font-size: 10px;
}

.vesta-floating-icon {
    display: flex;

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

    width: 42px;
    height: 42px;

    border-radius: 13px;

    background:
        rgba(79,70,229,.1);

    color: var(--vesta-primary);

    font-size: 11px;
    font-weight: 900;
}

.vesta-floating-card-ai {
    top: 70px;
    right: 15px;
}

.vesta-floating-card-web {
    bottom: 65px;
    left: 5px;
}


/* =========================================================
   SERVICES
========================================================= */

.vesta-services {
    background: #fff;
}

.vesta-services-grid {
    display: grid;

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

    gap: 18px;
}

.vesta-service-card {
    position: relative;

    min-height: 280px;

    padding: 28px;

    border:
        1px solid var(--vesta-border);

    border-radius: 24px;

    background: #fff;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.vesta-service-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(79,70,229,.18);

    box-shadow:
        var(--vesta-shadow-md);
}

.vesta-service-featured {
    grid-column: span 2;

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 20px;

    min-height: 280px;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(124,58,237,.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8f7ff,
            #fff
        );
}

.vesta-service-icon {
    display: flex;

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

    width: 58px;
    height: 58px;

    margin-bottom: 25px;

    border-radius: 17px;

    background:
        rgba(79,70,229,.09);

    color: var(--vesta-primary);

    font-size: 11px;
    font-weight: 900;
}

.vesta-service-featured .vesta-service-icon {
    grid-row: span 2;
}

.vesta-service-label {
    display: block;

    margin-bottom: 8px;

    color: var(--vesta-primary);

    font-size: 11px;
    font-weight: 800;
}

.vesta-service-card h3 {
    margin: 0;

    color: var(--vesta-dark);

    font-size: 21px;

    line-height: 1.5;

    font-weight: 900;
}

.vesta-service-card p {
    margin: 12px 0 0;

    color: var(--vesta-text-soft);

    font-size: 13px;

    line-height: 1.9;
}

.vesta-service-arrow {
    position: absolute;

    left: 25px;
    bottom: 23px;

    color: var(--vesta-primary);

    font-size: 22px;
    font-weight: 800;
}


/* =========================================================
   ACADEMY
========================================================= */

.vesta-academy {
    background: var(--vesta-bg);
}

.vesta-academy-box {
    position: relative;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        1fr
        .8fr;

    align-items: center;

    min-height: 500px;

    padding: 70px;

    border-radius: 35px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(124,58,237,.35),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #111827,
            #312e81
        );

    color: #fff;
}

.vesta-academy-content {
    position: relative;

    z-index: 2;

    max-width: 600px;
}

.vesta-academy-content .vesta-section-eyebrow {
    background:
        rgba(255,255,255,.1);

    color: #c4b5fd;
}

.vesta-academy h2 {
    margin: 0;

    font-size: clamp(34px,4vw,52px);

    line-height: 1.35;

    font-weight: 900;
}

.vesta-academy p {
    max-width: 540px;

    margin: 20px 0 0;

    color: rgba(255,255,255,.7);

    font-size: 16px;
}

.vesta-academy-actions {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 32px;
}

.vesta-academy-link {
    color: #fff;

    font-size: 13px;
    font-weight: 700;
}

.vesta-academy-visual {
    position: relative;

    min-height: 350px;
}

.vesta-academy-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 290px;
    height: 290px;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius: 50%;

    transform:
        translate(-50%,-50%);
}

.vesta-academy-center {
    position: absolute;

    top: 50%;
    left: 50%;

    display: flex;

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

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #fff,
            #c4b5fd
        );

    color: #312e81;

    font-size: 24px;
    font-weight: 950;

    transform:
        translate(-50%,-50%);

    box-shadow:
        0 0 80px rgba(196,181,253,.35);
}

.vesta-orbit-item {
    position: absolute;

    display: flex;

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

    width: 58px;
    height: 58px;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius: 18px;

    background:
        rgba(255,255,255,.08);

    color: #fff;

    font-size: 10px;
    font-weight: 900;

    backdrop-filter: blur(10px);
}

.orbit-one {
    top: 5px;
    left: 50%;

    transform:
        translateX(-50%);
}

.orbit-two {
    top: 50%;
    right: 0;

    transform:
        translateY(-50%);
}

.orbit-three {
    bottom: 5px;
    left: 50%;

    transform:
        translateX(-50%);
}

.orbit-four {
    top: 50%;
    left: 0;

    transform:
        translateY(-50%);
}


/* =========================================================
   BUSINESS
========================================================= */

.vesta-business {
    background: #fff;
}

.vesta-business-grid {
    display: grid;

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

    gap: 15px;
}

.vesta-business-item {
    padding: 30px;

    border:
        1px solid var(--vesta-border);

    border-radius: 20px;

    background: #fff;
}

.vesta-business-item strong {
    color: var(--vesta-primary);

    font-size: 12px;
}

.vesta-business-item h3 {
    margin: 35px 0 10px;

    color: var(--vesta-dark);

    font-size: 17px;
}

.vesta-business-item p {
    margin: 0;

    color: var(--vesta-text-soft);

    font-size: 12px;

    line-height: 1.9;
}


/* =========================================================
   CTA
========================================================= */

.vesta-cta-section {
    padding: 0 0 100px;

    background: #fff;
}

.vesta-cta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 55px 65px;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(6,182,212,.18),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed
        );

    color: #fff;
}

.vesta-cta span {
    color: rgba(255,255,255,.7);

    font-size: 12px;
    font-weight: 700;
}

.vesta-cta h2 {
    margin: 8px 0;

    font-size: 32px;

    line-height: 1.4;
}

.vesta-cta p {
    margin: 0;

    color: rgba(255,255,255,.7);

    font-size: 13px;
}


/* =========================================================
   FOOTER
========================================================= */

.vesta-footer {
    padding: 70px 0 0;

    background:
        #0f172a;

    color: #fff;
}

.vesta-footer-grid {
    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap: 50px;

    padding-bottom: 60px;
}

.vesta-footer-logo {
    font-size: 34px;

    font-weight: 950;
}

.vesta-footer-brand p {
    max-width: 380px;

    margin: 15px 0 0;

    color: rgba(255,255,255,.55);

    font-size: 13px;
}

.vesta-footer-column {
    display: flex;

    flex-direction: column;

    gap: 9px;
}

.vesta-footer-column h3 {
    margin: 0 0 12px;

    font-size: 14px;
}

.vesta-footer-column a {
    color: rgba(255,255,255,.55);

    font-size: 12px;

    transition:
        color .2s ease;
}

.vesta-footer-column a:hover {
    color: #fff;
}

.vesta-footer-bottom {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 22px 0;

    border-top:
        1px solid rgba(255,255,255,.08);

    color: rgba(255,255,255,.4);

    font-size: 10px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .vesta-menu {
        gap: 0;
    }

    .vesta-menu-item > a {
        padding: 0 8px;

        font-size: 12px;
    }

    .vesta-mega-inner {
        width: calc(100% - 10px);

        grid-template-columns:
            1fr
            1fr;

        gap: 20px;
    }

    .vesta-mega-intro {
        border-left: 0;
        border-bottom:
            1px solid var(--vesta-border);

        padding-left: 0;
        padding-bottom: 20px;
    }

    .vesta-mega-feature {
        min-height: 180px;
    }

    .vesta-hero-grid {
        grid-template-columns:
            1fr;
    }

    .vesta-hero-content {
        max-width: 800px;
    }

    .vesta-hero-visual {
        min-height: 450px;
    }

    .vesta-services-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .vesta-service-featured {
        grid-column: span 2;
    }

    .vesta-academy-box {
        grid-template-columns:
            1fr;

        padding: 55px;
    }

    .vesta-business-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .vesta-footer-grid {
        grid-template-columns:
            repeat(2,1fr);
    }
}


@media (max-width: 760px) {

    .vesta-header-inner {
        min-height: 70px;
    }

    .vesta-nav {
        position: absolute;

        top: 100%;
        right: 0;
        left: 0;

        display: none;

        padding: 12px;

        background: #fff;

        border-bottom:
            1px solid var(--vesta-border);

        box-shadow:
            var(--vesta-shadow-md);
    }

    .vesta-nav.is-open {
        display: block;
    }

    .vesta-menu {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;
    }

    .vesta-menu-item {
        position: relative;
    }

    .vesta-menu-item > a {
        min-height: 48px;

        padding: 0 13px;

        border-radius: 12px;
    }

    .vesta-menu-item > a::after {
        display: none;
    }

    .vesta-mega-menu {
        position: static;

        display: none;

        visibility: visible;
        opacity: 1;

        transform: none;

        pointer-events: auto;

        padding: 8px 0;

        border: 0;

        box-shadow: none;

        background: transparent;
    }

    .vesta-menu-item-mega:hover .vesta-mega-menu {
        display: none;
    }

    .vesta-mega-inner {
        width: 100%;

        grid-template-columns: 1fr;

        padding: 15px;

        border-radius: 18px;
    }

    .vesta-mega-feature {
        display: none;
    }

    .vesta-mobile-toggle {
        display: block;
    }

    .vesta-header-actions {
        gap: 5px;
    }

    .vesta-header-icon {
        width: 39px;
        height: 39px;
    }

    .vesta-brand .custom-logo {
        max-width: 140px;
        max-height: 48px;
    }

    .vesta-logo-text span {
        font-size: 25px;
    }

    .vesta-logo-text small {
        font-size: 7px;
    }

    .vesta-search-form {
        flex-direction: column;
    }

    .vesta-search-form button {
        min-height: 52px;
    }

    .vesta-hero {
        min-height: auto;
    }

    .vesta-hero-grid {
        padding: 65px 0;
    }

    .vesta-hero h1 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }

    .vesta-hero-content > p {
        font-size: 15px;
    }

    .vesta-hero-trust {
        gap: 20px;

        margin-top: 35px;
    }

    .vesta-hero-visual {
        min-height: 360px;
    }

    .vesta-hero-card {
        width: 75%;

        padding: 22px;
    }

    .vesta-card-title {
        margin-top: 70px;

        font-size: 24px;
    }

    .vesta-floating-card {
        padding: 10px;
    }

    .vesta-floating-card-ai {
        top: 30px;
        right: 0;
    }

    .vesta-floating-card-web {
        bottom: 30px;
        left: 0;
    }

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

    .vesta-service-featured {
        grid-column: span 1;

        display: block;
    }

    .vesta-academy-box {
        padding: 40px 25px;
    }

    .vesta-academy-visual {
        min-height: 300px;
    }

    .vesta-business-grid {
        grid-template-columns:
            1fr;
    }

    .vesta-cta {
        align-items: flex-start;

        flex-direction: column;

        padding: 40px 25px;
    }

    .vesta-cta h2 {
        font-size: 26px;
    }

    .vesta-footer-grid {
        grid-template-columns:
            1fr 1fr;

        gap: 35px 20px;
    }

    .vesta-footer-brand {
        grid-column: span 2;
    }

    .vesta-footer-bottom {
        flex-direction: column;
    }
}


/* =========================================================
   HOMEPAGE EXTENSIONS
========================================================= */

.vesta-ai-store {
    background: #f8fafc;
}

.vesta-products-placeholder {
    display: grid;

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

    gap: 18px;
}

.vesta-product-placeholder {
    min-height: 240px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 30px;

    border:
        1px solid var(--vesta-border);

    border-radius: 25px;

    background: #fff;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.vesta-product-placeholder:hover {
    transform: translateY(-5px);

    box-shadow:
        var(--vesta-shadow-md);
}

.vesta-product-placeholder span {
    display: flex;

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

    width: 55px;
    height: 55px;

    margin-bottom: 25px;

    border-radius: 16px;

    background:
        rgba(79,70,229,.08);

    color: var(--vesta-primary);

    font-size: 10px;
    font-weight: 900;
}

.vesta-product-placeholder strong {
    color: var(--vesta-dark);

    font-size: 18px;
    font-weight: 900;
}

.vesta-product-placeholder small {
    margin-top: 8px;

    color: var(--vesta-text-soft);

    font-size: 11px;
}


.vesta-projects {
    background: #fff;
}

.vesta-projects-grid {
    display: grid;

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

    gap: 18px;
}

.vesta-project-card {
    overflow: hidden;

    border:
        1px solid var(--vesta-border);

    border-radius: 25px;

    background: #fff;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.vesta-project-card:hover {
    transform: translateY(-6px);

    box-shadow:
        var(--vesta-shadow-md);
}

.vesta-project-image {
    position: relative;

    display: flex;
    align-items: flex-end;

    min-height: 260px;

    padding: 25px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(6,182,212,.3),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #1e1b4b,
            #4f46e5
        );

    color: rgba(255,255,255,.55);
}

.vesta-project-image span {
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}

.vesta-project-content {
    padding: 22px 25px 25px;
}

.vesta-project-content > span {
    color: var(--vesta-primary);

    font-size: 10px;
    font-weight: 800;
}

.vesta-project-content h3 {
    margin: 7px 0 0;

    color: var(--vesta-dark);

    font-size: 17px;
    font-weight: 900;
}


.vesta-text-link {
    color: var(--vesta-primary);

    font-size: 12px;
    font-weight: 800;
}


@media (max-width: 760px) {

    .vesta-products-placeholder {
        grid-template-columns: 1fr;
    }

    .vesta-projects-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   FOOTER
========================================================= */

.vesta-footer {
    background: #0b1020;
    color: #fff;
}


/* CTA */

.vesta-footer-cta {
    padding: 30px 0;
}

.vesta-footer-cta-box {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding: 55px;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(6,182,212,.25),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #312e81,
            #4f46e5
        );
}

.vesta-footer-cta-box h2 {
    margin: 8px 0 12px;

    color: #fff;

    font-size: clamp(26px, 3vw, 42px);

    font-weight: 950;

    letter-spacing: -1px;
}

.vesta-footer-cta-box p {
    margin: 0;

    max-width: 550px;

    color: rgba(255,255,255,.72);

    font-size: 14px;

    line-height: 2;
}


/* Main */

.vesta-footer-main {
    padding: 75px 0 55px;
}

.vesta-footer-grid {
    display: grid;

    grid-template-columns:
        1.6fr
        1fr
        1fr
        1fr;

    gap: 50px;
}


.vesta-footer-brand {
    max-width: 300px;
}

.vesta-footer-logo {
    display: inline-flex;

    color: #fff;

    font-size: 26px;

    font-weight: 950;

    letter-spacing: 2px;
}

.vesta-footer-brand p {
    margin: 20px 0 25px;

    color: rgba(255,255,255,.55);

    font-size: 13px;

    line-height: 2.2;
}


/* Columns */

.vesta-footer-column h3 {
    margin: 0 0 20px;

    color: #fff;

    font-size: 14px;

    font-weight: 900;
}

.vesta-footer-column ul {
    display: flex;

    flex-direction: column;

    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.vesta-footer-column a {
    color: rgba(255,255,255,.5);

    font-size: 12px;

    transition:
        color .2s ease,
        transform .2s ease;
}

.vesta-footer-column a:hover {
    color: #fff;

    transform: translateX(-3px);
}


/* Social */

.vesta-footer-socials {
    display: flex;

    gap: 8px;
}

.vesta-footer-socials a {
    display: flex;

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

    width: 38px;
    height: 38px;

    border:
        1px solid rgba(255,255,255,.1);

    border-radius: 12px;

    color: rgba(255,255,255,.65);

    font-size: 9px;
    font-weight: 900;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.vesta-footer-socials a:hover {
    background: #fff;

    color: #111827;

    transform: translateY(-3px);
}


/* Bottom */

.vesta-footer-bottom {
    border-top:
        1px solid rgba(255,255,255,.07);

    padding: 20px 0;
}

.vesta-footer-bottom .container {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.vesta-footer-bottom div {
    color: rgba(255,255,255,.35);

    font-size: 10px;
}


@media (max-width: 850px) {

    .vesta-footer-cta-box {
        flex-direction: column;

        align-items: flex-start;

        padding: 35px;
    }

    .vesta-footer-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 40px;
    }

}


@media (max-width: 520px) {

    .vesta-footer-main {
        padding: 55px 0 40px;
    }

    .vesta-footer-grid {
        grid-template-columns: 1fr;
    }

    .vesta-footer-brand {
        max-width: none;
    }

    .vesta-footer-bottom .container {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================================
   VESTA HEADER
========================================================= */

.vesta-header {
    position: relative;

    z-index:
        var(--vesta-header);

    width: 100%;

    background:
        rgba(255,255,255,.92);

    border-bottom:
        1px solid var(--vesta-border-light);

    backdrop-filter:
        blur(18px);
}


.vesta-header-inner {
    display: flex;

    align-items: center;

    height: 78px;
}


.vesta-header-logo {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


.vesta-logo-mark {
    display: flex;

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

    width: 38px;
    height: 38px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--vesta-primary),
            var(--vesta-accent)
        );

    color: #fff;

    font-size: 17px;

    font-weight: 950;
}


.vesta-logo-text {
    color:
        var(--vesta-dark);

    font-size: 18px;

    font-weight: 950;

    letter-spacing: 1.5px;

    direction: ltr;
}


/* Navigation */

.vesta-main-nav {
    display: flex;

    align-items: center;

    gap: 4px;

    margin-inline:
        auto;
}


.vesta-nav-item {
    position: relative;
}


.vesta-nav-link {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    min-height: 44px;

    padding:
        0 11px;

    border: 0;

    background: transparent;

    color:
        var(--vesta-text);

    font-size: 12px;

    font-weight: 750;

    white-space: nowrap;

    transition:
        color var(--vesta-transition);
}


.vesta-nav-link:hover {
    color:
        var(--vesta-primary);
}


.vesta-nav-button {
    cursor: pointer;
}


.vesta-nav-chevron {
    font-size: 9px;

    transition:
        transform var(--vesta-transition);
}


.has-mega-menu:hover
.vesta-nav-chevron {
    transform:
        rotate(180deg);
}


/* Mega Menu */

.vesta-mega-menu {
    position: absolute;

    top: calc(100% + 8px);

    right: 50%;

    width: 760px;

    transform:
        translateX(50%)
        translateY(8px);

    padding-top: 8px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity var(--vesta-transition),
        transform var(--vesta-transition),
        visibility var(--vesta-transition);
}


.has-mega-menu:hover
.vesta-mega-menu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(50%)
        translateY(0);
}


.vesta-mega-inner {
    display: grid;

    grid-template-columns:
        1.35fr
        1fr
        1fr;

    gap: 35px;

    padding: 30px;

    border:
        1px solid var(--vesta-border);

    border-radius:
        var(--vesta-radius-lg);

    background:
        rgba(255,255,255,.98);

    box-shadow:
        var(--vesta-shadow-lg);
}


.vesta-mega-intro {
    padding-left: 20px;

    border-left:
        1px solid var(--vesta-border);
}


.vesta-mega-intro > span {
    color:
        var(--vesta-primary);

    font-size: 9px;

    font-weight: 950;

    letter-spacing: 1.5px;
}


.vesta-mega-intro h3 {
    margin:
        10px 0;

    color:
        var(--vesta-dark);

    font-size: 20px;

    line-height: 1.5;

    font-weight: 950;
}


.vesta-mega-intro p {
    margin:
        0 0 15px;

    color:
        var(--vesta-text-soft);

    font-size: 11px;
}


.vesta-mega-intro > a {
    color:
        var(--vesta-primary);

    font-size: 11px;

    font-weight: 900;
}


.vesta-mega-column {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.vesta-mega-column h4 {
    margin:
        0 0 8px;

    color:
        var(--vesta-dark);

    font-size: 12px;

    font-weight: 950;
}


.vesta-mega-column a {
    color:
        var(--vesta-text-soft);

    font-size: 11px;

    transition:
        color var(--vesta-transition),
        transform var(--vesta-transition);
}


.vesta-mega-column a:hover {
    color:
        var(--vesta-primary);

    transform:
        translateX(-3px);
}


/* Actions */

.vesta-header-actions {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


.vesta-header-consult {
    display: inline-flex;

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

    min-height: 40px;

    padding:
        0 17px;

    border-radius:
        var(--vesta-radius-pill);

    background:
        var(--vesta-primary);

    color:
        #fff;

    font-size: 11px;

    font-weight: 900;

    box-shadow:
        0 7px 20px
        rgba(79,70,229,.18);
}


.vesta-account-button {
    display: flex;

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

    width: 40px;
    height: 40px;

    border:
        1px solid var(--vesta-border);

    border-radius:
        50%;

    color:
        var(--vesta-text);

    font-size: 15px;
}


.vesta-mobile-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 10px;

    border:
        1px solid var(--vesta-border);

    border-radius: 12px;

    background:
        #fff;
}


.vesta-mobile-toggle span {
    display: block;

    height: 2px;

    margin:
        4px 0;

    border-radius: 10px;

    background:
        var(--vesta-dark);
}


/* Mobile */

.vesta-mobile-menu {
    display: none;
}


@media (max-width: 1050px) {

    .vesta-main-nav {
        gap: 0;
    }

    .vesta-nav-link {
        padding-inline: 7px;

        font-size: 11px;
    }

    .vesta-header-consult {
        display: none;
    }

}


@media (max-width: 850px) {

    .vesta-main-nav {
        display: none;
    }

    .vesta-account-button {
        display: none;
    }

    .vesta-mobile-toggle {
        display: block;
    }

    .vesta-mobile-menu {
        display: none;

        padding:
            15px 0 25px;

        border-top:
            1px solid var(--vesta-border-light);

        background:
            #fff;
    }

    .vesta-mobile-menu.is-open {
        display: block;
    }

    .vesta-mobile-menu .container {
        display: flex;

        flex-direction: column;

        gap: 4px;
    }

    .vesta-mobile-menu a {
        padding:
            13px 5px;

        border-bottom:
            1px solid var(--vesta-border-light);

        color:
            var(--vesta-dark);

        font-size: 13px;

        font-weight: 800;
    }

    .vesta-mobile-menu .mobile-consult {
        margin-top: 10px;

        border: 0;

        border-radius:
            var(--vesta-radius-pill);

        background:
            var(--vesta-primary);

        color:
            #fff;

        text-align: center;
    }

}


@media (max-width: 420px) {

    .vesta-header-inner {
        height: 70px;
    }

    .vesta-logo-text {
        font-size: 16px;
    }

    .vesta-logo-mark {
        width: 35px;
        height: 35px;
    }

}

/* =========================================================
   VESTA HERO — NEW DESIGN
========================================================= */

.vesta-hero {
    position: relative;

    overflow: hidden;

    min-height: 720px;

    display: flex;

    align-items: center;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(124,58,237,.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(6,182,212,.08),
            transparent 28%
        ),
        #ffffff;
}


.vesta-hero-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    gap: 70px;

    min-height: 720px;

    padding:
        80px 0;
}


/* =========================================================
   CONTENT
========================================================= */

.vesta-hero-content {
    position: relative;

    z-index: 3;

    max-width: 650px;
}


.vesta-hero-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 25px;

    padding:
        8px 14px;

    border:
        1px solid rgba(79,70,229,.12);

    border-radius:
        var(--vesta-radius-pill);

    background:
        rgba(79,70,229,.055);

    color:
        var(--vesta-primary);

    font-size: 11px;

    font-weight: 900;
}


.vesta-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #22c55e;

    box-shadow:
        0 0 0 4px rgba(34,197,94,.12);
}


.vesta-hero h1 {
    max-width: 650px;

    margin: 0;

    color:
        var(--vesta-dark);

    font-size:
        clamp(43px, 5vw, 72px);

    line-height:
        1.28;

    letter-spacing:
        -2.5px;

    font-weight:
        950;
}


.vesta-hero h1 strong {
    display: inline;

    color:
        var(--vesta-primary);

    font-weight:
        950;
}


.vesta-hero-content > p {
    max-width: 590px;

    margin:
        25px 0 0;

    color:
        var(--vesta-text-soft);

    font-size:
        15px;

    line-height:
        2.15;
}


.vesta-hero-buttons {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top:
        35px;
}


.vesta-hero-buttons .vesta-btn {
    min-height: 52px;

    padding:
        0 22px;
}


.vesta-hero-buttons .vesta-btn-primary span {
    margin-right: 8px;

    font-size: 17px;
}


.vesta-hero-note {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 32px;

    color:
        #94a3b8;

    font-size: 10px;

    font-weight: 700;
}


.vesta-hero-note-line {
    width: 32px;
    height: 1px;

    background:
        #cbd5e1;
}


/* =========================================================
   VISUAL
========================================================= */

.vesta-hero-visual {
    position: relative;

    min-height: 550px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.vesta-hero-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(99,102,241,.22),
            rgba(124,58,237,.08) 45%,
            transparent 70%
        );

    filter:
        blur(10px);
}


.vesta-hero-main-card {
    position: relative;

    z-index: 2;

    width: min(470px, 85%);

    min-height: 430px;

    padding: 30px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            #111827,
            #1e1b4b 55%,
            #312e81
        );

    color: #fff;

    box-shadow:
        0 35px 90px
        rgba(49,46,129,.25);
}


.vesta-hero-main-card::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    top: -100px;
    left: -80px;

    border-radius: 50%;

    background:
        rgba(6,182,212,.16);

    filter:
        blur(10px);
}


.vesta-hero-main-card::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -130px;
    bottom: -150px;

    border-radius: 50%;

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

    filter:
        blur(15px);
}


.vesta-hero-card-header {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    color:
        rgba(255,255,255,.5);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.vesta-hero-live {
    display: flex;

    align-items: center;

    gap: 6px;

    color:
        #a5f3fc;

    font-size: 8px;
}


.vesta-hero-live::before {
    content: "";

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #22d3ee;

    box-shadow:
        0 0 10px
        rgba(34,211,238,.8);
}


.vesta-hero-card-title {
    position: relative;

    z-index: 2;

    margin-top:
        65px;

    color:
        rgba(255,255,255,.92);

    font-size:
        clamp(36px, 4vw, 55px);

    line-height:
        .98;

    letter-spacing:
        -2px;

    font-weight:
        300;
}


.vesta-hero-card-title strong {
    color:
        #c4b5fd;

    font-weight:
        900;
}


.vesta-hero-card-description {
    position: relative;

    z-index: 2;

    max-width: 280px;

    margin-top: 22px;

    color:
        rgba(255,255,255,.55);

    font-size: 11px;

    line-height: 1.9;
}


.vesta-hero-card-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 35px;
}


.vesta-hero-mini-card {
    padding: 14px;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 16px;

    background:
        rgba(255,255,255,.055);

    backdrop-filter:
        blur(10px);
}


.vesta-mini-icon {
    display: flex;

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

    width: 32px;
    height: 32px;

    margin-bottom: 12px;

    border-radius: 10px;

    background:
        rgba(255,255,255,.09);

    color:
        #c4b5fd;

    font-size: 7px;

    font-weight: 900;
}


.vesta-hero-mini-card strong {
    display: block;

    color:
        #fff;

    font-size: 10px;

    font-weight: 800;
}


.vesta-hero-mini-card small {
    display: block;

    margin-top: 4px;

    color:
        rgba(255,255,255,.35);

    font-size: 7px;
}


.vesta-hero-progress {
    position: relative;

    z-index: 2;

    margin-top: 28px;
}


.vesta-progress-label {
    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

    color:
        rgba(255,255,255,.35);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}


.vesta-progress-bar {
    overflow: hidden;

    height: 3px;

    border-radius: 10px;

    background:
        rgba(255,255,255,.08);
}


.vesta-progress-bar span {
    display: block;

    width: 72%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #6366f1,
            #22d3ee
        );
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.vesta-hero-float {
    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    border:
        1px solid rgba(255,255,255,.65);

    border-radius: 16px;

    background:
        rgba(255,255,255,.88);

    box-shadow:
        0 18px 50px
        rgba(15,23,42,.12);

    backdrop-filter:
        blur(16px);
}


.vesta-hero-float strong {
    display: block;

    color:
        var(--vesta-dark);

    font-size: 10px;
}


.vesta-hero-float small {
    display: block;

    margin-top: 2px;

    color:
        var(--vesta-text-soft);

    font-size: 8px;
}


.vesta-float-symbol {
    display: flex;

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

    width: 34px;
    height: 34px;

    border-radius: 10px;

    background:
        rgba(79,70,229,.09);

    color:
        var(--vesta-primary);

    font-size: 8px;

    font-weight: 950;
}


.vesta-hero-float-ai {
    top: 85px;

    right: 0;
}


.vesta-hero-float-web {
    bottom: 80px;

    left: 0;
}


.vesta-hero-orbit {
    position: absolute;

    border:
        1px solid rgba(99,102,241,.10);

    border-radius: 50%;
}


.orbit-a {
    width: 480px;
    height: 480px;
}


.orbit-b {
    width: 570px;
    height: 570px;

    opacity: .5;
}


/* =========================================================
   HERO RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .vesta-hero-grid {
        gap: 30px;
    }

    .vesta-hero h1 {
        font-size: 52px;
    }

    .vesta-hero-visual {
        min-height: 500px;
    }

}


@media (max-width: 850px) {

    .vesta-hero {
        min-height: auto;
    }

    .vesta-hero-grid {
        grid-template-columns: 1fr;

        min-height: auto;

        padding:
            70px 0 80px;
    }

    .vesta-hero-content {
        max-width: 700px;
    }

    .vesta-hero h1 {
        font-size:
            clamp(40px, 9vw, 58px);
    }

    .vesta-hero-visual {
        min-height: 520px;

        margin-top: 10px;
    }

    .vesta-hero-main-card {
        width: min(470px, 88%);
    }

}


@media (max-width: 520px) {

    .vesta-hero-grid {
        padding:
            55px 0 65px;
    }

    .vesta-hero h1 {
        font-size: 38px;

        letter-spacing: -1.3px;
    }

    .vesta-hero-content > p {
        font-size: 14px;
    }

    .vesta-hero-buttons {
        align-items: stretch;

        flex-direction: column;
    }

    .vesta-hero-buttons .vesta-btn {
        width: 100%;
    }

    .vesta-hero-visual {
        min-height: 430px;
    }

    .vesta-hero-main-card {
        width: 92%;

        min-height: 390px;

        padding: 23px;
    }

    .vesta-hero-card-title {
        margin-top: 48px;

        font-size: 38px;
    }

    .vesta-hero-float {
        padding: 9px 11px;
    }

    .vesta-hero-float-ai {
        top: 35px;

        right: 0;
    }

    .vesta-hero-float-web {
        bottom: 35px;

        left: 0;
    }

    .orbit-a {
        width: 390px;
        height: 390px;
    }

    .orbit-b {
        width: 440px;
        height: 440px;
    }

}

/* =========================================================
   FOOTER TRUST / ENAMAD
========================================================= */

.vesta-footer-trust {
    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    margin-top: 25px;

    padding: 14px 16px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 16px;

    background:
        rgba(255,255,255,.035);
}


.vesta-footer-trust-title {
    color:
        rgba(255,255,255,.4);

    font-size: 9px;

    font-weight: 800;
}


.vesta-enamad {
    display: flex;

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

    min-width: 100px;
    min-height: 100px;

    padding: 8px;

    border-radius: 12px;

    background:
        #fff;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.vesta-enamad:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.15);
}


.vesta-enamad img {
    width: 90px;
    height: auto;

    max-width: 90px;
}

/* =========================================================
   SERVICES — MODERN CARDS
========================================================= */

.vesta-services-cards {
    background: #fff;
}


.vesta-services-cards-grid {
    display: grid;

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

    gap: 16px;
}


.vesta-service-modern {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 390px;

    padding: 25px;

    overflow: hidden;

    border:
        1px solid var(--vesta-border);

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.vesta-service-modern::before {
    content: "";

    position: absolute;

    top: -90px;
    right: -90px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(79,70,229,.12),
            transparent 70%
        );

    pointer-events: none;
}


.vesta-service-modern:hover {
    transform: translateY(-8px);

    border-color:
        rgba(79,70,229,.18);

    box-shadow:
        0 25px 60px
        rgba(15,23,42,.10);
}


/* Featured AI */

.vesta-service-modern-featured {
    background:
        linear-gradient(
            145deg,
            #312e81 0%,
            #4f46e5 55%,
            #6366f1 100%
        );

    border-color:
        transparent;

    color: #fff;

    box-shadow:
        0 20px 50px
        rgba(79,70,229,.18);
}


.vesta-service-modern-featured::before {
    background:
        radial-gradient(
            circle,
            rgba(6,182,212,.28),
            transparent 70%
        );
}


.vesta-service-modern-featured:hover {
    border-color: transparent;

    box-shadow:
        0 30px 70px
        rgba(79,70,229,.28);
}


/* Top */

.vesta-service-modern-top {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: space-between;

    z-index: 1;
}


.vesta-service-modern-number {
    color: #cbd5e1;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;
}


.vesta-service-modern-featured
.vesta-service-modern-number {
    color: rgba(255,255,255,.45);
}


.vesta-service-modern-icon {
    display: flex;

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

    min-width: 58px;
    height: 58px;

    padding: 0 10px;

    border:
        1px solid rgba(79,70,229,.12);

    border-radius: 17px;

    background:
        rgba(79,70,229,.07);

    color: var(--vesta-primary);

    font-size: 9px;

    font-weight: 950;

    letter-spacing: .5px;
}


.vesta-service-modern-featured
.vesta-service-modern-icon {
    border-color:
        rgba(255,255,255,.16);

    background:
        rgba(255,255,255,.10);

    color: #fff;
}


/* Content */

.vesta-service-modern-content {
    position: relative;

    z-index: 1;

    margin-top: auto;

    padding-top: 45px;
}


.vesta-service-modern-label {
    display: block;

    margin-bottom: 10px;

    color: var(--vesta-primary);

    font-size: 8px;

    font-weight: 950;

    letter-spacing: 1.3px;
}


.vesta-service-modern-featured
.vesta-service-modern-label {
    color:
        rgba(255,255,255,.65);
}


.vesta-service-modern h3 {
    margin: 0 0 12px;

    color: var(--vesta-dark);

    font-size: 21px;

    line-height: 1.5;

    font-weight: 950;
}


.vesta-service-modern-featured h3 {
    color: #fff;
}


.vesta-service-modern p {
    margin: 0;

    color: var(--vesta-text-soft);

    font-size: 11px;

    line-height: 2;
}


.vesta-service-modern-featured p {
    color:
        rgba(255,255,255,.68);
}


/* Link */

.vesta-service-modern-link {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 25px;

    padding-top: 18px;

    border-top:
        1px solid var(--vesta-border);

    color: var(--vesta-dark);

    font-size: 10px;

    font-weight: 900;
}


.vesta-service-modern-featured
.vesta-service-modern-link {
    border-color:
        rgba(255,255,255,.15);

    color: #fff;
}


.vesta-service-modern-link b {
    display: flex;

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

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background:
        rgba(79,70,229,.08);

    color: var(--vesta-primary);

    font-size: 14px;

    transition:
        transform .25s ease,
        background .25s ease;
}


.vesta-service-modern-featured
.vesta-service-modern-link b {
    background:
        rgba(255,255,255,.12);

    color: #fff;
}


.vesta-service-modern-link:hover b {
    transform: translateX(-4px);

    background:
        var(--vesta-primary);

    color: #fff;
}


/* Responsive */

@media (max-width: 1100px) {

    .vesta-services-cards-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

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

        gap: 14px;
    }


    .vesta-service-modern {
        min-height: 340px;

        padding: 22px;
    }


    .vesta-service-modern-content {
        padding-top: 35px;
    }

}


@media (max-width: 600px) {

    .vesta-services-v2-head h2 {
        font-size: 34px;

        letter-spacing: -1px;
    }


    .vesta-service-v2 {
        grid-template-columns:
            35px
            1fr;

        gap: 12px;

        padding: 28px 0;
    }


    .vesta-service-v2-arrow {
        grid-column: 2;

        width: 44px;
        height: 44px;

        margin-top: 5px;
    }


    .vesta-service-v2-featured::before {
        top: 20px;
        bottom: 20px;

        height: auto;
    }


    .vesta-service-v2 h3 {
        font-size: 23px;
    }


    .vesta-service-v2 p {
        font-size: 12px;
    }


    .vesta-services-v2-bottom {
        flex-direction: column;

        align-items: flex-start;
    }

}