@charset "utf-8";
/* CSS Document */
* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: "Estedad", Tahoma, sans-serif;

    background: #fbfaff;

    color: #24202d;

    direction: rtl;

    overflow-x: hidden;

    transition: background-color 0.35s ease, color 0.35s ease;

}

body.menu-open {

    overflow: hidden;

}

a {

    color: inherit;

    text-decoration: none;

}

button,

input,

textarea,

select {

    font-family: inherit;

}

button {

    border: 0;

    cursor: pointer;

}

img {

    display: block;

    max-width: 100%;

}

section {

    position: relative;

}

.section-container {

    width: calc(100% - 80px);

    max-width: 1240px;

    margin: 0 auto;

}

/* ---------------------------------------------------------

   DARK MODE

   --------------------------------------------------------- */

body.dark-mode {

    background: #111019;

    color: #f8f6ff;

}

body.dark-mode .site-header {

    background: rgba(17, 16, 25, 0.82);

    border-color: rgba(255, 255, 255, 0.08);

}

body.dark-mode .desktop-navigation__link {

    color: #d9d4e7;

}

body.dark-mode .desktop-navigation__link:hover,

body.dark-mode .desktop-navigation__link.active {

    color: #b999ff;

}

body.dark-mode .theme-button {

    background: #211e2d;

    border-color: rgba(255, 255, 255, 0.08);

    color: #ffffff;

}

body.dark-mode .hero-section {

    background: #111019;

}

body.dark-mode .hero-section__description,

body.dark-mode .intro-section__text,

body.dark-mode .section-heading__description,

body.dark-mode .service-card p,

body.dark-mode .process-item p,

body.dark-mode .about-section__content p {

    color: #aaa5b7;

}

body.dark-mode .hero-character-card {

    background: linear-gradient(145deg, #252033, #171520);

    border-color: rgba(194, 162, 255, 0.18);

}

body.dark-mode .hero-floating-card {

    background: rgba(35, 31, 48, 0.88);

    border-color: rgba(255, 255, 255, 0.08);

    color: #f5f1ff;

}

body.dark-mode .intro-section {

    background: #15131d;

}

body.dark-mode .services-section {

    background: #111019;

}

body.dark-mode .service-card {

    background: #191721;

    border-color: rgba(255, 255, 255, 0.07);

}

body.dark-mode .service-card:hover {

    background: #201c2b;

    border-color: rgba(184, 150, 255, 0.3);

}

body.dark-mode .portfolio-section {

    background: #15131d;

}

body.dark-mode .portfolio-card {

    background: #1b1824;

    border-color: rgba(255, 255, 255, 0.07);

}

body.dark-mode .portfolio-card__image {

    background: #24202f;

}

body.dark-mode .process-section {

    background: #111019;

}

body.dark-mode .process-item {

    border-color: rgba(255, 255, 255, 0.08);

}

body.dark-mode .about-section {

    background: #15131d;

}

body.dark-mode .about-section__character {

    background: linear-gradient(145deg, #252034, #1a1722);

}

body.dark-mode .consultation-section {

    background: #111019;

}

body.dark-mode .consultation-box {

    background: linear-gradient(135deg, #211c30, #17151f);

    border-color: rgba(184, 150, 255, 0.14);

}

body.dark-mode .consultation-link {

    background: #29233a;

    border-color: rgba(255, 255, 255, 0.07);

}

body.dark-mode .final-cta-section {

    background: #15131d;

}

body.dark-mode .final-cta {

    background: linear-gradient(135deg, #30234d, #201a2d);

}

body.dark-mode .site-footer {

    background: #0c0b10;

    border-color: rgba(255, 255, 255, 0.06);

}

/* ---------------------------------------------------------

   LOADER

   --------------------------------------------------------- */

.page-loader {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fbfaff;

    transition: opacity 0.6s ease, visibility 0.6s ease;

}

.page-loader.is-hidden {

    opacity: 0;

    visibility: hidden;

}

.page-loader__inner {

    width: 220px;

    text-align: center;

}
.page-loader__logo {

    margin-bottom: 18px;

    color: #7650c9;

    font-size: 32px;

    font-weight: 800;

    letter-spacing: 7px;

    direction: ltr;

}

.page-loader__line {

    width: 100%;

    height: 3px;

    overflow: hidden;

    border-radius: 20px;

    background: #eee8fa;

}

.page-loader__line span {

    display: block;

    width: 40%;

    height: 100%;

    border-radius: inherit;

    background: #8a5ee8;

    animation: loaderLine 1.2s ease-in-out infinite;

}

@keyframes loaderLine {

    0% {

        transform: translateX(250%);

    }

    100% {

        transform: translateX(-250%);

    }

}

/* ---------------------------------------------------------

   HEADER

   --------------------------------------------------------- */

.site-header {

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    z-index: 900;

    background: rgba(251, 250, 255, 0.78);

    border-bottom: 1px solid rgba(80, 55, 120, 0.08);

    backdrop-filter: blur(18px);

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

}

.site-header__inner {

    width: calc(100% - 80px);

    max-width: 1380px;

    min-height: 82px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}

.site-logo {

    display: flex;

    align-items: center;

    gap: 9px;

    direction: ltr;

    flex-shrink: 0;

}

.site-logo__symbol {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #7650c9;

    color: #ffffff;

    font-size: 18px;

    font-weight: 800;

    box-shadow: 0 8px 24px rgba(118, 80, 201, 0.22);

}

.site-logo__text {

    color: #33264b;

    font-size: 21px;

    font-weight: 800;

    letter-spacing: 4px;

}

body.dark-mode .site-logo__text {

    color: #ffffff;

}

.desktop-navigation {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 32px;

    margin-right: auto;

    margin-left: auto;

}

.desktop-navigation__link {

    position: relative;

    padding: 10px 0;

    color: #6e6879;

    font-size: 13px;

    font-weight: 600;

    transition: color 0.25s ease;

}

.desktop-navigation__link::after {

    content: "";

    position: absolute;

    right: 50%;

    bottom: 0;

    width: 0;

    height: 2px;

    border-radius: 10px;

    background: #8a5ee8;

    transform: translateX(50%);

    transition: width 0.25s ease;

}

.desktop-navigation__link:hover,

.desktop-navigation__link.active {

    color: #7650c9;

}

.desktop-navigation__link:hover::after,

.desktop-navigation__link.active::after {

    width: 22px;

}

.site-header__actions {

    display: flex;

    align-items: center;

    gap: 10px;

}

.theme-button {

    width: 43px;

    height: 43px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(80, 55, 120, 0.1);

    border-radius: 14px;

    background: #ffffff;

    color: #7650c9;

    overflow: hidden;

}

.theme-button__icon {

    position: absolute;

    font-size: 21px;

    line-height: 1;

    transition: transform 0.3s ease, opacity 0.3s ease;

}

.theme-button__icon--dark {

    opacity: 0;

    transform: translateY(15px) rotate(20deg);

}

body.dark-mode .theme-button__icon--light {

    opacity: 0;

    transform: translateY(-15px) rotate(-20deg);

}

body.dark-mode .theme-button__icon--dark {

    opacity: 1;

    transform: translateY(0) rotate(0);

}

.header-order-button {

    min-height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 20px;

    border-radius: 14px;

    background: #7650c9;

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    box-shadow: 0 10px 24px rgba(118, 80, 201, 0.2);

    transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.header-order-button:hover {

    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(118, 80, 201, 0.28);

}
.menu-toggle {

    width: 46px;

    height: 46px;

    display: none;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    border-radius: 14px;

    background: #ffffff;

    border: 1px solid rgba(80, 55, 120, 0.1);

}

.menu-toggle span {

    width: 19px;

    height: 2px;

    display: block;

    border-radius: 10px;

    background: #7650c9;

    transition: transform 0.3s ease, opacity 0.3s ease;

}

body.menu-open .menu-toggle span:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

}

body.menu-open .menu-toggle span:nth-child(2) {

    opacity: 0;

}

body.menu-open .menu-toggle span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

}

/* ---------------------------------------------------------

   MOBILE NAVIGATION

   --------------------------------------------------------- */

.mobile-navigation {

    position: fixed;

    inset: 0;

    z-index: 950;

    visibility: hidden;

    pointer-events: none;

}

.mobile-navigation__backdrop {

    position: absolute;

    inset: 0;

    background: rgba(20, 14, 31, 0.45);

    opacity: 0;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    transition: opacity 0.3s ease;

}

.mobile-navigation__panel {

    position: absolute;

    top: 15px;

    right: 15px;

    bottom: 15px;

    width: min(390px, calc(100% - 30px));

    padding: 25px;

    overflow-y: auto;

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

    border-radius: 28px;

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

    box-shadow: 0 25px 80px rgba(50, 30, 90, 0.2);

    transform: translateX(35px);

    opacity: 0;

    transition: transform 0.35s ease, opacity 0.35s ease;

}

body.dark-mode .mobile-navigation__panel {

    background: rgba(27, 24, 37, 0.95);

    border-color: rgba(255, 255, 255, 0.08);

}

body.menu-open .mobile-navigation {

    visibility: visible;

    pointer-events: auto;

}

body.menu-open .mobile-navigation__backdrop {

    opacity: 1;

}

body.menu-open .mobile-navigation__panel {

    transform: translateX(0);

    opacity: 1;

}

.mobile-navigation__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    direction: ltr;

}

.mobile-navigation__brand {

    color: #7650c9;

    font-size: 20px;

    font-weight: 800;

    letter-spacing: 4px;

}

.mobile-navigation__close {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: #f2eef9;

    color: #7650c9;

    font-size: 27px;

}

.mobile-navigation__menu {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 40px;

}

.mobile-navigation__item {

    min-height: 72px;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 10px 14px;

    border: 1px solid rgba(90, 60, 140, 0.07);

    border-radius: 20px;

    background: rgba(248, 246, 252, 0.8);

    color: #352b43;

    font-size: 14px;

    font-weight: 700;

    transition: transform 0.25s ease, background 0.25s ease;

}

body.dark-mode .mobile-navigation__item {

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

    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.06);

}

.mobile-navigation__item:active {

    transform: scale(0.97);

}

.mobile-navigation__icon {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 16px;

    background: #eee7fb;

}

.mobile-navigation__icon img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.mobile-navigation__order {

    min-height: 56px;

    margin-top: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: #7650c9;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

}
.hero-section {

    min-height: 860px;

    display: flex;

    align-items: center;

    padding: 145px 0 90px;

    overflow: hidden;

    background:

        radial-gradient(circle at 78% 35%, rgba(183, 145, 255, 0.18), transparent 28%),

        #fbfaff;

}

.hero-section__background {

    position: absolute;

    inset: 0;

    pointer-events: none;

}

.hero-orb {

    position: absolute;

    display: block;

    border-radius: 50%;

    filter: blur(1px);

}

.hero-orb--one {

    top: 22%;

    left: 5%;

    width: 170px;

    height: 170px;

    background: rgba(213, 190, 255, 0.24);

}

.hero-orb--two {

    right: 38%;

    bottom: 8%;

    width: 90px;

    height: 90px;

    background: rgba(232, 216, 255, 0.45);

}

.hero-section__container {

    position: relative;

    z-index: 2;

    width: calc(100% - 80px);

    max-width: 1240px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 55% 45%;

    align-items: center;

    direction: ltr;

}

.hero-section__content {

    direction: rtl;

    padding-left: 45px;

}

.hero-section__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    color: #7650c9;

    font-size: 12px;

    font-weight: 700;

}

.hero-section__eyebrow-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #9c73ed;

    box-shadow: 0 0 0 6px rgba(156, 115, 237, 0.12);

}

.hero-section__title {

    max-width: 690px;

    color: #2d2439;

    font-size: clamp(45px, 5.4vw, 79px);

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -2px;

}

body.dark-mode .hero-section__title {

    color: #ffffff;

}

.hero-section__title span {

    display: block;

    color: #7954ce;

}

.hero-section__description {

    max-width: 600px;

    margin-top: 28px;

    color: #746d7e;

    font-size: 15px;

    font-weight: 400;

    line-height: 2.2;

}

.hero-section__actions {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 32px;

}

.primary-button,

.secondary-button {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 17px;

    font-size: 13px;

    font-weight: 700;

    transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.primary-button {

    gap: 16px;

    padding: 0 24px;

    background: #7650c9;

    color: #ffffff;

    box-shadow: 0 16px 35px rgba(118, 80, 201, 0.22);

}

.primary-button:hover {

    transform: translateY(-3px);

    box-shadow: 0 20px 42px rgba(118, 80, 201, 0.3);

}

.primary-button__arrow {

    font-size: 19px;

}

.secondary-button {

    padding: 0 23px;

    border: 1px solid rgba(90, 60, 140, 0.13);

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

    color: #554b61;

}

body.dark-mode .secondary-button {

    border-color: rgba(255, 255, 255, 0.1);

    background: #1c1925;

    color: #e5e0eb;

}

.secondary-button:hover {

    transform: translateY(-3px);

}

.hero-section__mini-note {

    display: flex;

    align-items: center;


    gap: 9px;

    margin-top: 25px;

    color: #9a94a3;

    font-size: 10px;

}

.hero-section__mini-note-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #9a72e8;

}

.hero-section__visual {

    direction: rtl;

    display: flex;

    justify-content: center;

}

.hero-character-frame {

    position: relative;

    width: min(100%, 470px);

    min-height: 540px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.hero-character-glow {

    position: absolute;

    width: 340px;

    height: 340px;

    border-radius: 50%;

    background: rgba(184, 150, 255, 0.2);

    filter: blur(35px);

}
.hero-character-card {

    position: relative;

    z-index: 2;

    width: 360px;

    height: 470px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    overflow: hidden;

    border: 1px solid rgba(123, 85, 200, 0.1);

    border-radius: 180px 180px 45px 45px;

    background: linear-gradient(145deg, #f3edff, #ffffff);

    box-shadow: 0 30px 80px rgba(89, 59, 135, 0.14);

}

.hero-character {

    width: 94%;

    height: 94%;
bottom: 100px;
    object-fit: contain;

    object-position: center bottom;

    animation: characterFloat 5s ease-in-out infinite;

}

@keyframes characterFloat {

    0%,

    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}

.hero-floating-card {

    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 16px;

    border: 1px solid rgba(123, 85, 200, 0.1);

    border-radius: 16px;

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

    box-shadow: 0 18px 40px rgba(70, 45, 110, 0.12);

    color: #40364c;

    font-size: 10px;

    font-weight: 700;

    backdrop-filter: blur(12px);

}

.hero-floating-card__icon {

    color: #8b61df;

    font-size: 19px;

}

.hero-floating-card--top {

    top: 92px;

    right: 0;

    animation: floatingCardOne 4s ease-in-out infinite;

}

.hero-floating-card--bottom {

    bottom: 85px;

    left: 0;

    animation: floatingCardTwo 4.5s ease-in-out infinite;

}

@keyframes floatingCardOne {

    0%,

    100% {

        transform: translateY(0) rotate(2deg);

    }

    50% {

        transform: translateY(-9px) rotate(0deg);

    }

}

@keyframes floatingCardTwo {

    0%,

    100% {

        transform: translateY(0) rotate(-2deg);

    }

    50% {

        transform: translateY(8px) rotate(0deg);

    }

}

.hero-scroll-indicator {

    position: absolute;

    right: 40px;

    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: #a09aa9;

    font-size: 9px;

}

.hero-scroll-indicator__line {

    width: 55px;

    height: 1px;

    background: #c7bed4;

}

/* ---------------------------------------------------------

   INTRO

   --------------------------------------------------------- */

.intro-section {

    padding: 150px 0;

    background: #f5f1fa;

}

.intro-section__label {

    margin-bottom: 30px;

    color: #9672cf;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    direction: ltr;

}

.intro-section__title {

    max-width: 800px;

    color: #32283e;

    font-size: clamp(36px, 5vw, 67px);

    font-weight: 800;

    line-height: 1.25;

}

body.dark-mode .intro-section__title {

    color: #ffffff;

}

.intro-section__title span {

    color: #8058d1;

}

.intro-section__text {

    max-width: 700px;

    margin-top: 30px;

    color: #777080;

    font-size: 16px;

    line-height: 2.3;

}
.section-heading {

    max-width: 700px;

    margin-bottom: 55px;

}

.section-heading__eyebrow {

    display: inline-block;

    margin-bottom: 14px;

    color: #8b63d7;

    font-size: 11px;

    font-weight: 700;

}

.section-heading__title {

    color: #32283e;

    font-size: clamp(34px, 4.4vw, 58px);

    font-weight: 800;

    line-height: 1.3;

}

body.dark-mode .section-heading__title {

    color: #ffffff;

}

.section-heading__title span {

    color: #8058d1;

}

.section-heading__description {

    max-width: 620px;

    margin-top: 18px;

    color: #817988;

    font-size: 14px;

    line-height: 2.1;

}

/* ---------------------------------------------------------

   SERVICES

   --------------------------------------------------------- */

.services-section {

    padding: 140px 0;

    background: #fbfaff;

}

.services-grid {

    display: grid;

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

    gap: 15px;

}

.service-card {

    position: relative;

    min-height: 365px;

    padding: 28px;

    overflow: hidden;

    border: 1px solid rgba(90, 60, 140, 0.08);

    border-radius: 28px;

    background: #ffffff;

    box-shadow: 0 15px 45px rgba(75, 50, 110, 0.05);

    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;

}

.service-card:hover {

    transform: translateY(-8px);

    border-color: rgba(118, 80, 201, 0.22);

    box-shadow: 0 25px 60px rgba(75, 50, 110, 0.1);

}

.service-card__icon {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 21px;

    background: #f0eafd;

}

.service-card__icon img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.service-card__number {

    position: absolute;

    top: 30px;

    left: 27px;

    color: #d5cce2;

    font-size: 11px;

    font-weight: 700;

    direction: ltr;

}

.service-card h3 {

    margin-top: 55px;

    color: #342b40;

    font-size: 18px;

    font-weight: 800;

}

body.dark-mode .service-card h3 {

    color: #ffffff;

}

.service-card p {

    margin-top: 14px;

    color: #827a8c;

    font-size: 12px;

    line-height: 2;

}

.service-card__arrow {

    position: absolute;

    right: 28px;

    bottom: 25px;

    color: #9a70e8;

    font-size: 21px;

}
.portfolio-section {

    padding: 140px 0;

    overflow: hidden;

    background: #f5f1fa;

}

.section-heading--portfolio {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    max-width: none;

}

.portfolio-track {

    display: grid;

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

    gap: 18px;

}

.portfolio-card {

    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(90, 60, 140, 0.08);

    border-radius: 25px;

    background: #ffffff;

    box-shadow: 0 15px 40px rgba(75, 50, 110, 0.06);

    transition: transform 0.35s ease;

}

.portfolio-card:hover {

    transform: translateY(-7px);

}

.portfolio-card__image {

    height: 300px;

    padding: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f1edf6;

}

.portfolio-card__mockup {

    width: 88%;

    height: 66%;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: #ffffff;

    box-shadow: 0 18px 40px rgba(50, 35, 75, 0.13);

    color: #3d3348;

    font-family: Georgia, serif;

    font-size: 22px;

    letter-spacing: 3px;

}

.portfolio-card__content {

    padding: 21px 23px 24px;

}

.portfolio-card__content span {

    color: #998fa3;

    font-size: 9px;

    direction: ltr;

}

.portfolio-card__content h3 {

    margin-top: 8px;

    color: #382d45;

    font-size: 20px;

    font-weight: 800;

    direction: ltr;

}

body.dark-mode .portfolio-card__content h3 {

    color: #ffffff;

}

/* ---------------------------------------------------------

   PROCESS

   --------------------------------------------------------- */

.process-section {

    padding: 150px 0;

    background: #fbfaff;

}

.process-list {

    border-top: 1px solid rgba(90, 60, 140, 0.12);

}

.process-item {

    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 35px;

    padding: 38px 0;

    border-bottom: 1px solid rgba(90, 60, 140, 0.12);

    transition: padding 0.3s ease;

}

.process-item:hover {

    padding-right: 12px;

    padding-left: 12px;

}

.process-item__number {

    color: #9872d3;

    font-size: 12px;

    font-weight: 800;

    direction: ltr;

}

.process-item h3 {

    color: #352b40;

    font-size: 20px;

    font-weight: 800;

}

body.dark-mode .process-item h3 {

    color: #ffffff;

}

.process-item p {

    max-width: 650px;

    margin-top: 9px;

    color: #807787;

    font-size: 12px;

    line-height: 2;

}
.about-section {

    padding: 140px 0;

    background: #f5f1fa;

}

.about-section .section-container {

    display: grid;

    grid-template-columns: 45% 55%;

    align-items: center;

    direction: ltr;

}

.about-section__visual {

    direction: rtl;

    display: flex;

    justify-content: center;

}

.about-section__character {

    width: 350px;

    height: 430px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    overflow: hidden;

    border-radius: 180px 180px 35px 35px;

    background: linear-gradient(145deg, #eee6fc, #ffffff);

    box-shadow: 0 25px 70px rgba(75, 50, 110, 0.1);

}

.about-section__character img {

    width: 95%;

    height: 95%;

    object-fit: contain;

    object-position: center bottom;

}

.about-section__content {

    direction: rtl;

    padding-right: 60px;

}

.about-section__content h2 {

    max-width: 620px;

    color: #352b40;

    font-size: clamp(34px, 4.2vw, 55px);

    font-weight: 800;

    line-height: 1.35;

}

body.dark-mode .about-section__content h2 {

    color: #ffffff;

}

.about-section__content h2 span {

    color: #8058d1;

}

.about-section__content p {

    max-width: 580px;

    margin-top: 25px;

    color: #7d7487;

    font-size: 14px;

    line-height: 2.2;

}

.text-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 28px;

    color: #7954ce;

    font-size: 13px;

    font-weight: 800;

}

.text-button span {

    font-size: 19px;

    transition: transform 0.25s ease;

}

.text-button:hover span {

    transform: translateX(-5px);

}

/* ---------------------------------------------------------

   CONSULTATION

   --------------------------------------------------------- */

.consultation-section {

    padding: 120px 0;

    background: #fbfaff;

}

.consultation-box {

    display: grid;

    grid-template-columns: 55% 45%;

    align-items: center;

    gap: 40px;

    padding: 65px;

    border: 1px solid rgba(118, 80, 201, 0.1);

    border-radius: 35px;

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

}

.consultation-box h2 {

    max-width: 620px;

    color: #342a40;

    font-size: clamp(32px, 4vw, 51px);

    font-weight: 800;

    line-height: 1.4;

}

body.dark-mode .consultation-box h2 {

    color: #ffffff;

}

.consultation-box h2 span {

    display: block;

    color: #8058d1;

}

.consultation-box p {

    max-width: 550px;

    margin-top: 18px;

    color: #7c7385;

    font-size: 13px;

    line-height: 2.1;

}

.consultation-links {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.consultation-link {

    min-height: 62px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 22px;

    border: 1px solid rgba(90, 60, 140, 0.08);

    border-radius: 19px;

    background: #ffffff;

    color: #43384e;

    font-size: 12px;

    font-weight: 700;

    transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.consultation-link:hover {

    transform: translateX(-5px);

    box-shadow: 0 15px 35px rgba(80, 50, 120, 0.09);

}

body.dark-mode .consultation-link {

    color: #ffffff;

}
.final-cta-section {

    padding: 120px 0;

    background: #f5f1fa;

}

.final-cta {

    position: relative;

    padding: 90px 50px;

    overflow: hidden;

    border-radius: 40px;

    background: linear-gradient(135deg, #eee5ff, #f9f5ff);

    text-align: center;

}

.final-cta::before,

.final-cta::after {

    content: "";

    position: absolute;

    border-radius: 50%;

    background: rgba(145, 103, 224, 0.12);

}

.final-cta::before {

    width: 230px;

    height: 230px;

    top: -110px;

    right: -60px;

}

.final-cta::after {

    width: 170px;

    height: 170px;

    bottom: -80px;

    left: -40px;

}

.final-cta__small {

    position: relative;

    z-index: 2;

    color: #8c65d3;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    direction: ltr;

}

.final-cta h2 {

    position: relative;

    z-index: 2;

    max-width: 750px;

    margin: 20px auto 0;

    color: #32283d;

    font-size: clamp(39px, 5vw, 65px);

    font-weight: 800;

    line-height: 1.35;

}

.final-cta h2 span {

    display: block;

    color: #8058d1;

}

.final-cta__button {

    position: relative;

    z-index: 2;

    min-height: 57px;

    display: inline-flex;

    align-items: center;

    gap: 17px;

    margin-top: 30px;

    padding: 0 25px;

    border-radius: 18px;

    background: #7650c9;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    box-shadow: 0 18px 38px rgba(118, 80, 201, 0.22);

    transition: transform 0.25s ease;

}

.final-cta__button:hover {

    transform: translateY(-4px);

}

/* ---------------------------------------------------------

   FOOTER

   --------------------------------------------------------- */

.site-footer {

    padding: 45px 0;

    background: #ffffff;

    border-top: 1px solid rgba(90, 60, 140, 0.08);

}

.site-footer__inner {

    width: calc(100% - 80px);

    max-width: 1240px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 40% 30% 30%;

    align-items: center;

    gap: 20px;

}

.site-footer__brand strong {

    color: #7650c9;

    font-size: 21px;

    letter-spacing: 4px;

    direction: ltr;

}

.site-footer__brand p {

    max-width: 250px;

    margin-top: 9px;

    color: #918998;

    font-size: 10px;

    line-height: 1.9;

}

.site-footer__links {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

}

.site-footer__links a {

    color: #766d80;

    font-size: 11px;

    font-weight: 600;

    transition: color 0.25s ease;

}

.site-footer__links a:hover {

    color: #7650c9;

}

.site-footer__copyright {

    color: #a29aa9;

    font-size: 9px;

    text-align: left;

    direction: ltr;

}

/* ---------------------------------------------------------

   REVEAL ANIMATION

   --------------------------------------------------------- */

.reveal-element {

    opacity: 0;

    transform: translateY(25px);

    transition: opacity 0.7s ease, transform 0.7s ease;

}

.reveal-element.is-visible {

    opacity: 1;

    transform: translateY(0);

}
@media (max-width: 1100px) {

    .desktop-navigation {

        gap: 20px;

    }

    .services-grid {

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

    }

    .portfolio-track {

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

    }

    .hero-section__container {

        grid-template-columns: 52% 48%;

    }


    .hero-section__content {

        padding-left: 20px;

    }

    .consultation-box {

        padding: 45px;

    }

}

/* ---------------------------------------------------------

   MOBILE

   --------------------------------------------------------- */

@media (max-width: 800px) {

    .section-container {

        width: calc(100% - 34px);

    }

    .site-header__inner {

        width: calc(100% - 30px);

        min-height: 70px;

    }

    .desktop-navigation,

    .header-order-button {

        display: none;

    }

    .site-header__actions {

        margin-right: auto;

    }
/* =========================================
   CAPSULE DESKTOP NAVIGATION
========================================= */

.desktop-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 7px;

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

    border: 1px solid rgba(122, 92, 190, 0.12);

    border-radius: 999px;

    box-shadow:
        0 12px 35px rgba(93, 66, 145, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

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


.desktop-navigation__link {
    position: relative;

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

    gap: 7px;

    min-height: 48px;

    padding: 5px 13px;

    color: #55515e;

    text-decoration: none;

    border-radius: 999px;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.desktop-navigation__icon {
    width: 35px;
    height: 35px;

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

    flex-shrink: 0;

    transition:
        transform 0.35s ease;
}


.desktop-navigation__icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.desktop-navigation__text {
    font-family: "Estedad", sans-serif;

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

    white-space: nowrap;
}


.desktop-navigation__link:hover {
    color: #7755c9;

    background: rgba(132, 94, 205, 0.08);

    transform: translateY(-2px);
}


.desktop-navigation__link:hover .desktop-navigation__icon {
    transform: translateY(-3px) rotate(-3deg) scale(1.08);
}


.desktop-navigation__link.is-active {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #8b68d5,
        #7351bd
    );

    box-shadow:
        0 8px 20px rgba(117, 82, 190, 0.22);
}


.desktop-navigation__link.is-active .desktop-navigation__icon {
    transform: translateY(-2px);
}


/* =========================================
   MOBILE NAVIGATION
========================================= */

.mobile-navigation {
    position: fixed;

    inset: 0;

    z-index: 9999;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


.mobile-navigation.is-open {
    visibility: visible;
    opacity: 1;
}


.mobile-navigation__backdrop {
    position: absolute;

    inset: 0;

    background: rgba(35, 25, 52, 0.25);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: 0;

    transition: opacity 0.35s ease;
}


.mobile-navigation.is-open .mobile-navigation__backdrop {
    opacity: 1;
}


.mobile-navigation__panel {
    position: absolute;

    top: 18px;
    right: 15px;
    left: 15px;

    padding: 16px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97),
            rgba(248, 244, 255, 0.94)
        );

    border: 1px solid rgba(132, 94, 205, 0.15);

    box-shadow:
        0 25px 70px rgba(64, 43, 100, 0.18);

    transform: translateY(-20px) scale(0.97);

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


.mobile-navigation.is-open .mobile-navigation__panel {
    transform: translateY(0) scale(1);
}


.mobile-navigation__top {
    display: flex;

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

    padding: 4px 4px 15px;
}


.mobile-navigation__brand {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #27222f;

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


.mobile-navigation__brand-symbol {
    display: flex;

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

    width: 34px;
    height: 34px;

    color: #ffffff;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #9270dc,
        #704bb7
    );

    box-shadow:
        0 8px 18px rgba(112, 75, 183, 0.22);
}
.mobile-navigation__close {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: rgba(116, 82, 181, 0.08);

    color: #65577a;

    font-size: 25px;

    cursor: pointer;

    transition:

        transform 0.3s ease,

        background-color 0.3s ease;

}

.mobile-navigation__close:hover {

    transform: rotate(90deg);

    background: rgba(116, 82, 181, 0.14);

}

.mobile-navigation__menu {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;

    padding: 4px 0;

}

.mobile-navigation__item {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 64px;

    padding: 8px 10px;

    color: #40384b;

    text-decoration: none;

    border-radius: 20px;

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

    border: 1px solid rgba(123, 91, 185, 0.09);

    transition:

        transform 0.3s ease,

        background-color 0.3s ease,

        box-shadow 0.3s ease;

}

.mobile-navigation__item:hover {

    transform: translateY(-3px);

    background: rgba(133, 96, 205, 0.08);

    box-shadow:

        0 10px 25px rgba(92, 63, 144, 0.08);

}

.mobile-navigation__icon {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.mobile-navigation__icon img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

    transition:

        transform 0.35s ease;

}

.mobile-navigation__item:hover .mobile-navigation__icon img {

    transform: scale(1.1) rotate(-4deg);

}

.mobile-navigation__item-text {

    font-size: 12px;

    font-weight: 600;

}

.mobile-navigation__order {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 55px;

    margin-top: 14px;

    padding: 8px 15px;

    color: #ffffff;

    text-decoration: none;

    border-radius: 999px;

    background: linear-gradient(

        135deg,

        #9270dc,

        #704bb7

    );

    box-shadow:

        0 12px 25px rgba(112, 75, 183, 0.2);

    font-size: 13px;

    font-weight: 700;

    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease;

}

.mobile-navigation__order:hover {

    transform: translateY(-3px);

    box-shadow:

        0 16px 30px rgba(112, 75, 183, 0.27);

}

.mobile-navigation__order-icon {

    width: 35px;

    height: 35px;

}

.mobile-navigation__order-icon img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

/* =========================================

   DARK MODE

========================================= */

body.dark-mode .desktop-navigation {

    background: rgba(30, 25, 40, 0.82);

    border-color: rgba(190, 163, 239, 0.12);

    box-shadow:

        0 12px 35px rgba(0, 0, 0, 0.18);

}

body.dark-mode .desktop-navigation__link {

    color: #d5cde0;

}

body.dark-mode .desktop-navigation__link:hover {

    color: #c7a9ff;

    background: rgba(173, 133, 235, 0.1);

}

body.dark-mode .desktop-navigation__link.is-active {

    color: #ffffff;

    background: linear-gradient(

        135deg,

        #9270dc,

        #704bb7

    );

}

body.dark-mode .mobile-navigation__panel {

    background:

        linear-gradient(

            145deg,

            rgba(38, 31, 50, 0.98),

            rgba(29, 25, 39, 0.98)

        );

    border-color: rgba(190, 163, 239, 0.12);

}

body.dark-mode .mobile-navigation__brand {

    color: #ffffff;

}

body.dark-mode .mobile-navigation__item {

    color: #e1d9eb;

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

    border-color: rgba(190, 163, 239, 0.08);

}

body.dark-mode .mobile-navigation__item:hover {

    background: rgba(160, 120, 225, 0.1);

}

body.dark-mode .mobile-navigation__close {

    color: #d9cee8;

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

}
	
    .theme-button {

        width: 42px;

        height: 42px;

    }

    .menu-toggle {

        display: flex;

    }

    .hero-section {

        min-height: auto;

        padding: 125px 0 75px;

    }

    .hero-section__container {

        width: calc(100% - 34px);

        display: flex;

        flex-direction: column;

    }

    .hero-section__content {

        width: 100%;

        padding-left: 0;

        text-align: center;

    }

    .hero-section__eyebrow {

        justify-content: center;

    }

    .hero-section__title {

        font-size: clamp(39px, 11vw, 58px);

        letter-spacing: -1px;

    }

    .hero-section__description {

        margin-right: auto;

        margin-left: auto;

        font-size: 13px;

        line-height: 2.15;

    }

    .hero-section__actions {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-section__mini-note {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-section__visual {

        width: 100%;

        margin-top: 45px;

    }

    .hero-character-frame {

        min-height: 440px;

    }

    .hero-character-card {

        width: 290px;

        height: 390px;

        border-radius: 150px 150px 35px 35px;

    }

    .hero-floating-card--top {

        top: 55px;

        right: 0;

    }

    .hero-floating-card--bottom {

        bottom: 50px;

        left: 0;

    }

    .hero-scroll-indicator {

        display: none;

    }

    .intro-section,

    .services-section,

    .portfolio-section,

    .process-section,

    .about-section {

        padding: 90px 0;

    }

    .intro-section__title {

        font-size: 38px;

    }

    .intro-section__text {

        font-size: 13px;

    }

    .section-heading {

        margin-bottom: 35px;

    }

    .section-heading__title {

        font-size: 35px;

    }

    .services-grid {

        display: flex;

        gap: 12px;

        overflow-x: auto;

        padding: 5px 2px 25px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

    }

    .services-grid::-webkit-scrollbar {

        display: none;

    }

    .service-card {

        min-width: 275px;

        width: 275px;

        flex: 0 0 275px;

        scroll-snap-align: start;

    }

    .portfolio-section {

        overflow: hidden;

    }

    .section-heading--portfolio {

        display: block;

    }

    .portfolio-track {

        display: flex;

        gap: 14px;

        overflow-x: auto;

        padding: 5px 2px 25px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

    }

    .portfolio-track::-webkit-scrollbar {

        display: none;

    }

    .portfolio-card {

        min-width: 290px;

        width: 290px;

        flex: 0 0 290px;

        scroll-snap-align: start;

    }

    .portfolio-card__image {

        height: 270px;

    }

    .process-item {

        grid-template-columns: 55px 1fr;

        gap: 18px;

        padding: 28px 0;

    }

    .process-item h3 {

        font-size: 17px;

    }
	
	.process-item p {

        font-size: 11px;

    }

    .about-section .section-container {

        display: flex;

        flex-direction: column;

    }

    .about-section__visual {

        width: 100%;

        order: 1;

    }

    .about-section__content {

        width: 100%;

        order: 2;

        padding: 50px 0 0;

    }

    .about-section__character {

        width: 285px;

        height: 360px;

    }

    .about-section__content h2 {

        font-size: 35px;

    }

    .consultation-section {

        padding: 80px 0;

    }

    .consultation-box {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        padding: 35px 25px;

        border-radius: 28px;

    }

    .consultation-box h2 {

        font-size: 34px;

    }

    .final-cta-section {

        padding: 80px 0;

    }

    .final-cta {

        padding: 70px 25px;

        border-radius: 30px;

    }

    .final-cta h2 {

        font-size: 39px;

    }

    .site-footer__inner {

        width: calc(100% - 34px);

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

    .site-footer__brand p {

        margin-right: auto;

        margin-left: auto;

    }

    .site-footer__links {

        flex-wrap: wrap;

    }

    .site-footer__copyright {

        text-align: center;

    }

}

/* ---------------------------------------------------------

   SMALL MOBILE

   --------------------------------------------------------- */

@media (max-width: 420px) {

    .site-logo__text {

        font-size: 18px;

        letter-spacing: 3px;

    }

    .hero-section__title {

        font-size: 38px;

    }

    .hero-section__description {

        font-size: 12px;

    }

    .primary-button,

    .secondary-button {

        width: 100%;

    }

    .hero-section__actions {

        width: 100%;

    }

    .hero-character-frame {

        min-height: 410px;

    }

    .hero-character-card {

        width: 260px;

        height: 350px;

    }

    .hero-floating-card {

        padding: 10px 12px;

        font-size: 9px;

    }

    .hero-floating-card--top {

        right: -4px;

    }

    .hero-floating-card--bottom {

        left: -4px;

    }

    .section-heading__title,

    .about-section__content h2,

    .consultation-box h2 {

        font-size: 32px;

    }

    .final-cta h2 {

        font-size: 35px;

    }

}
.vela-header {

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    z-index: 9000;

    padding: 16px 24px;

    pointer-events: none;

}

.vela-header__inner {

    width: 100%;

    max-width: 1380px;

    min-height: 72px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    pointer-events: auto;

}

/* =========================================

   VELA LOGO

========================================= */

.vela-header__logo {

    display: flex;

    align-items: center;

    gap: 9px;

    flex-shrink: 0;

    color: #28222f;

    text-decoration: none;

}

.vela-header__logo-mark {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    color: #ffffff;

    background: linear-gradient(

        145deg,

        #9a78e4,

        #704bb8

    );

    font-family: "Estedad", sans-serif;

    font-size: 19px;

    font-weight: 800;


    box-shadow:

        0 9px 22px rgba(112, 75, 184, 0.23);

    transition:

        transform 0.3s ease;

}

.vela-header__logo:hover .vela-header__logo-mark {

    transform: rotate(-6deg) translateY(-2px);

}

.vela-header__logo-name {

    font-family: "Estedad", sans-serif;

    font-size: 19px;

    font-weight: 800;

    letter-spacing: 1px;

}

/* =========================================

   DESKTOP CAPSULE

========================================= */

.vela-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    padding: 6px;

    border-radius: 999px;

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

    border: 1px solid rgba(116, 81, 182, 0.13);

    box-shadow:

        0 15px 40px rgba(78, 51, 120, 0.09),

        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(22px);

    -webkit-backdrop-filter: blur(22px);

}

.vela-nav__link {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 51px;

    padding: 5px 14px;

    border-radius: 999px;

    color: #5b5465;

    text-decoration: none;

    white-space: nowrap;

    transition:

        background-color 0.3s ease,

        color 0.3s ease,

        transform 0.3s ease,

        box-shadow 0.3s ease;

}

.vela-nav__icon {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition:

        transform 0.35s ease;

}

.vela-nav__icon img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.vela-nav__label {

    font-family: "Estedad", sans-serif;

    font-size: 12px;

    font-weight: 600;

}

.vela-nav__link:hover {

    color: #7653c1;

    background: rgba(124, 88, 193, 0.08);

    transform: translateY(-2px);

}

.vela-nav__link:hover .vela-nav__icon {

    transform:

        translateY(-3px)

        rotate(-4deg)

        scale(1.08);

}

.vela-nav__link--active {

    color: #ffffff;

    background: linear-gradient(

        135deg,

        #9875df,

        #714db9

    );

    box-shadow:

        0 9px 22px rgba(113, 77, 185, 0.22);

}

.vela-nav__link--active:hover {

    color: #ffffff;

    background: linear-gradient(

        135deg,

        #9e7be5,

        #7652bf

    );

}
.vela-header__actions {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

}

.vela-theme-button {

    width: 47px;

    height: 47px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(116, 81, 182, 0.12);

    border-radius: 50%;

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

    color: #7352b9;

    cursor: pointer;

    box-shadow:

        0 9px 25px rgba(78, 51, 120, 0.08);

    backdrop-filter: blur(18px);

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

    transition:

        transform 0.3s ease,

        background-color 0.3s ease;

}

.vela-theme-button:hover {

    transform: translateY(-2px) rotate(8deg);

    background: rgba(130, 94, 202, 0.1);

}

.vela-theme-button__sun,

.vela-theme-button__moon {

    position: absolute;

    font-size: 21px;

    line-height: 1;

    transition:

        opacity 0.25s ease,

        transform 0.3s ease;

}

.vela-theme-button__sun {

    opacity: 1;

}

.vela-theme-button__moon {

    opacity: 0;

    transform: rotate(-30deg) scale(0.7);

}

body.dark-mode .vela-theme-button__sun {

    opacity: 0;

    transform: rotate(30deg) scale(0.7);

}

body.dark-mode .vela-theme-button__moon {

    opacity: 1;

    transform: rotate(0) scale(1);

}

.vela-order-button {

    min-height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 7px 16px;

    border-radius: 999px;

    color: #ffffff;

    text-decoration: none;

    background: linear-gradient(

        135deg,

        #9270dc,

        #704bb7

    );

    box-shadow:

        0 10px 24px rgba(112, 75, 183, 0.2);

    font-family: "Estedad", sans-serif;

    font-size: 12px;

    font-weight: 700;

    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease;

}

.vela-order-button:hover {

    transform: translateY(-3px);

    box-shadow:

        0 15px 30px rgba(112, 75, 183, 0.27);

}

.vela-order-button__arrow {

    font-size: 17px;

    transition:

        transform 0.3s ease;

}

.vela-order-button:hover .vela-order-button__arrow {

    transform: translateX(-4px);

}

/* =========================================

   THREE LINE MOBILE BUTTON

========================================= */

.vela-menu-button {

    display: none;

    width: 50px;

    height: 50px;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    padding: 0;

    border: 1px solid rgba(116, 81, 182, 0.12);

    border-radius: 17px;

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

    box-shadow:

        0 10px 25px rgba(78, 51, 120, 0.09);

    backdrop-filter: blur(18px);

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

    cursor: pointer;

}

.vela-menu-button__line {

    display: block;

    width: 20px;

    height: 2px;

    border-radius: 10px;

    background: #7250b7;

    transition:

        transform 0.3s ease,

        opacity 0.3s ease;

}

body.menu-is-open .vela-menu-button__line:nth-child(1) {

    transform:

        translateY(7px)

        rotate(45deg);

}

body.menu-is-open .vela-menu-button__line:nth-child(2) {

    opacity: 0;

}

body.menu-is-open .vela-menu-button__line:nth-child(3) {

    transform:

        translateY(-7px)

        rotate(-45deg);

}

/* =========================================

   MOBILE MENU

========================================= */

.vela-mobile-menu {

    position: fixed;

    inset: 0;

    z-index: 10000;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:

        opacity 0.35s ease,

        visibility 0.35s ease;

}

.vela-mobile-menu.is-open {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}

.vela-mobile-menu__backdrop {

    position: absolute;

    inset: 0;

    background: rgba(34, 25, 47, 0.27);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

}
.vela-mobile-menu__panel {

    position: absolute;

    top: 15px;

    right: 14px;

    left: 14px;

    padding: 15px;

    border-radius: 31px;

    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.98),

            rgba(247, 243, 255, 0.97)

        );

    border: 1px solid rgba(117, 83, 183, 0.14);

    box-shadow:

        0 30px 80px rgba(62, 40, 100, 0.2);

    transform:

        translateY(-18px)

        scale(0.96);

    transition:

        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);

}

.vela-mobile-menu.is-open .vela-mobile-menu__panel {

    transform:

        translateY(0)

        scale(1);

}

/* =========================================

   MOBILE MENU TOP

========================================= */

.vela-mobile-menu__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 2px 3px 15px;

}

.vela-mobile-menu__brand {

    display: flex;

    align-items: center;

    gap: 8px;

}

.vela-mobile-menu__brand-mark {

    width: 37px;

    height: 37px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #ffffff;

    background: linear-gradient(

        145deg,

        #9875df,

        #704bb7

    );

    font-size: 16px;

    font-weight: 800;

    box-shadow:

        0 8px 18px rgba(112, 75, 183, 0.2);

}

.vela-mobile-menu__brand-name {

    color: #2d2736;

    font-size: 17px;

    font-weight: 800;

    letter-spacing: 1px;

}

.vela-mobile-menu__close {

    width: 40px;

    height: 40px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: rgba(117, 83, 183, 0.08);

    cursor: pointer;

}

.vela-mobile-menu__close span {

    position: absolute;

    width: 18px;

    height: 2px;

    border-radius: 10px;

    background: #7150b6;

}

.vela-mobile-menu__close span:first-child {

    transform: rotate(45deg);

}

.vela-mobile-menu__close span:last-child {

    transform: rotate(-45deg);

}

/* =========================================

   MOBILE NAV ITEMS

========================================= */

.vela-mobile-nav {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.vela-mobile-nav__item {

    min-height: 69px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 8px 10px;

    border-radius: 22px;

    color: #403849;

    text-decoration: none;

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

    border: 1px solid rgba(116, 81, 182, 0.08);

    transition:

        transform 0.3s ease,

        background-color 0.3s ease,

        box-shadow 0.3s ease;

}

.vela-mobile-nav__item:hover {

    transform: translateX(-3px);

    background: rgba(130, 94, 202, 0.08);

    box-shadow:

        0 10px 25px rgba(78, 51, 120, 0.08);

}

.vela-mobile-nav__item--active {

    background:

        linear-gradient(

            135deg,

            rgba(143, 105, 216, 0.13),

            rgba(112, 75, 183, 0.07)

        );

    border-color: rgba(121, 85, 189, 0.14);

}

.vela-mobile-nav__visual {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.vela-mobile-nav__visual img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    transition:

        transform 0.35s ease;

}

.vela-mobile-nav__item:hover .vela-mobile-nav__visual img {

    transform:

        translateY(-3px)

        rotate(-4deg)

        scale(1.08);

}

.vela-mobile-nav__content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

    flex: 1;

}

.vela-mobile-nav__content strong {

    color: inherit;

    font-size: 13px;

    font-weight: 700;

}

.vela-mobile-nav__content small {

    color: #8b8295;

    font-size: 10px;

    font-weight: 500;

}
.vela-mobile-nav__arrow {

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #7655bd;

    background: rgba(119, 83, 186, 0.08);

    font-size: 16px;

    transition:

        transform 0.3s ease;

}

.vela-mobile-nav__item:hover .vela-mobile-nav__arrow {

    transform: translateX(-3px);

}

/* =========================================

   MOBILE ORDER

========================================= */

.vela-mobile-order {

    min-height: 68px;

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 12px;

    padding: 8px 11px;

    border-radius: 23px;

    color: #ffffff;

    text-decoration: none;

    background: linear-gradient(

        135deg,

        #9875df,

        #704bb7

    );

    box-shadow:

        0 14px 28px rgba(112, 75, 183, 0.21);

    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease;

}

.vela-mobile-order:hover {

    transform: translateY(-3px);

    box-shadow:

        0 18px 34px rgba(112, 75, 183, 0.27);

}

.vela-mobile-order__icon {

    width: 49px;

    height: 49px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.vela-mobile-order__icon img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.vela-mobile-order__content {

    display: flex;

    flex-direction: column;

    gap: 3px;

    flex: 1;

}

.vela-mobile-order__content strong {

    font-size: 12px;

    font-weight: 700;

}

.vela-mobile-order__content small {

    font-size: 9px;

    opacity: 0.78;

}

.vela-mobile-order__arrow {

    font-size: 19px;

    transition:

        transform 0.3s ease;

}

.vela-mobile-order:hover .vela-mobile-order__arrow {

    transform: translateX(-4px);

}

/* =========================================

   DARK MODE

========================================= */

body.dark-mode .vela-header__logo {

    color: #ffffff;

}

body.dark-mode .vela-nav {

    background: rgba(31, 26, 41, 0.86);

    border-color: rgba(194, 165, 240, 0.12);

    box-shadow:

        0 15px 40px rgba(0, 0, 0, 0.2);

}

body.dark-mode .vela-nav__link {

    color: #d9d1e3;

}

body.dark-mode .vela-nav__link:hover {

    color: #c7a7ff;

    background: rgba(166, 128, 228, 0.1);

}

body.dark-mode .vela-nav__link--active {

    color: #ffffff;

}

body.dark-mode .vela-theme-button,

body.dark-mode .vela-menu-button {

    background: rgba(31, 26, 41, 0.86);

    border-color: rgba(194, 165, 240, 0.12);

}

body.dark-mode .vela-mobile-menu__panel {

    background:

        linear-gradient(

            145deg,

            rgba(37, 31, 48, 0.99),

            rgba(27, 24, 36, 0.99)

        );

    border-color: rgba(194, 165, 240, 0.12);

}

body.dark-mode .vela-mobile-menu__brand-name {

    color: #ffffff;

}

body.dark-mode .vela-mobile-menu__close {

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

}

body.dark-mode .vela-mobile-nav__item {

    color: #e5ddeb;

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

    border-color: rgba(194, 165, 240, 0.08);

}

body.dark-mode .vela-mobile-nav__item--active {

    background:

        linear-gradient(

            135deg,

            rgba(145, 105, 216, 0.17),

            rgba(112, 75, 183, 0.08)

        );

}

body.dark-mode .vela-mobile-nav__content small {

    color: #968ca2;

}

/* =========================================

   TABLET

========================================= */

@media (max-width: 1120px) {

    .vela-nav__link {

        padding-left: 9px;

        padding-right: 9px;

    }

    .vela-nav__label {

        font-size: 11px;

    }

    .vela-nav__icon {

        width: 33px;

        height: 33px;

    }

    .vela-order-button__text {

        display: none;

    }

    .vela-order-button {

        width: 47px;

        padding-left: 0;

        padding-right: 0;

    }

}
@media (max-width: 900px) {

    .vela-header {

        padding: 12px 14px;

    }

    .vela-header__inner {

        min-height: 60px;

    }

    .vela-nav {

        display: none;

    }

    .vela-header__actions {

        margin-right: auto;

    }

    .vela-theme-button {

        width: 46px;

        height: 46px;

    }

    .vela-order-button {

        display: none;

    }

    .vela-menu-button {

        display: flex;

    }

}

/* =========================================

   SMALL MOBILE

========================================= */

@media (max-width: 420px) {

    .vela-header__logo-name {

        font-size: 17px;

    }

    .vela-header__logo-mark {

        width: 40px;

        height: 40px;

    }

    .vela-mobile-menu__panel {

        top: 10px;

        right: 10px;

        left: 10px;

        padding: 13px;

        border-radius: 27px;

    }

    .vela-mobile-nav__item {

        min-height: 64px;

        border-radius: 19px;

    }

    .vela-mobile-nav__visual {

        width: 44px;

        height: 44px;

    }

    .vela-mobile-nav__content strong {

        font-size: 12px;

    }

    .vela-mobile-nav__content small {

        font-size: 9px;

    }

}
.vela-portfolio {

    position: relative;

    width: 100%;

    padding: 150px 0 160px;

    overflow: hidden;

}

.vela-portfolio__container {

    width: calc(100% - 48px);

    max-width: 1380px;

    margin: 0 auto;

}

/* =========================================

   HEADING

========================================= */

.vela-portfolio__heading {

    max-width: 760px;

    margin-bottom: 55px;

}

.vela-portfolio__heading-top {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 17px;

}

.vela-portfolio__eyebrow {

    color: #8061c4;

    font-family: "Estedad", sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.4px;

    white-space: nowrap;

}

.vela-portfolio__heading-line {

    width: 55px;

    height: 1px;

    background: linear-gradient(

        90deg,

        #8d6bd2,

        transparent

    );

}

.vela-portfolio__heading-count {

    color: #a39aa9;

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 1px;

    white-space: nowrap;

}

.vela-portfolio__title {

    margin: 0;

    color: #28232f;

    font-family: "Estedad", sans-serif;

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

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -1.5px;

}

.vela-portfolio__title span {

    position: relative;

    color: #805fc5;

}

.vela-portfolio__title span::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: -7px;

    width: 72%;

    height: 3px;

    border-radius: 20px;

    background: linear-gradient(

        90deg,

        #a989e4,

        transparent

    );

    opacity: 0.45;

}

.vela-portfolio__description {

    max-width: 560px;

    margin: 21px 0 0;

    color: #817986;

    font-family: "Estedad", sans-serif;

    font-size: 13px;

    line-height: 2.2;

    font-weight: 400;

}

/* =========================================

   PROJECT TRACK

========================================= */

.vela-portfolio__track {

    display: grid;

    grid-template-columns:

        repeat(4, minmax(0, 1fr));

    gap: 20px;

    width: 100%;

}
.vela-project-card {

    position: relative;

    min-width: 0;

    cursor: default;

}

.vela-project-card__visual {

    position: relative;

    width: 100%;

    aspect-ratio: 0.82;

    overflow: hidden;

    border-radius: 28px;

    background: #f1edf7;

    border: 1px solid rgba(119, 87, 177, 0.1);

    box-shadow:

        0 18px 45px rgba(68, 45, 102, 0.08);

    isolation: isolate;

}

.vela-project-card__image {

    position: absolute;

    inset: 0;

    z-index: 2;

    overflow: hidden;

}

.vela-project-card__image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.001);

    transition:

        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),

        filter 0.6s ease;

}

.vela-project-card:hover

.vela-project-card__image img {

    transform: scale(1.045);

}

.vela-project-card__glow {

    position: absolute;

    z-index: 3;

    right: -25%;

    bottom: -20%;

    width: 75%;

    height: 55%;

    border-radius: 50%;

    background: rgba(143, 104, 218, 0.16);

    filter: blur(45px);

    pointer-events: none;

    opacity: 0;

    transition:

        opacity 0.5s ease;

}

.vela-project-card:hover

.vela-project-card__glow {

    opacity: 1;

}

/* =========================================

   PROJECT NUMBER

========================================= */

.vela-project-card__number {

    position: absolute;

    z-index: 5;

    top: 15px;

    right: 15px;

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background: rgba(38, 31, 47, 0.45);

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

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 0.5px;

    transition:

        transform 0.4s ease,

        background-color 0.4s ease;

}

.vela-project-card:hover

.vela-project-card__number {

    transform: rotate(-8deg) scale(1.08);

    background: rgba(116, 81, 183, 0.72);

}
.vela-project-card__info {

    position: relative;

    padding: 18px 4px 0;

}

.vela-project-card__meta {

    margin-bottom: 5px;

    color: #958b9d;

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}

.vela-project-card__name {

    margin: 0;

    color: #2c2633;

    font-family: Arial, sans-serif;

    font-size: 21px;

    font-weight: 800;

    letter-spacing: 1.2px;

    line-height: 1.3;

}

.vela-project-card__type {

    display: block;

    margin-top: 4px;

    color: #817986;

    font-family: "Estedad", sans-serif;

    font-size: 10px;

    line-height: 1.8;

}

/* =========================================

   MOBILE HINT

========================================= */

.vela-portfolio__mobile-hint {

    display: none;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 22px;

    color: #948a9e;

    font-family: "Estedad", sans-serif;

    font-size: 9px;

}

.vela-portfolio__mobile-hint-line {

    width: 30px;

    height: 1px;

    background: #b9afc4;

}

.vela-portfolio__mobile-hint-arrow {

    color: #8060c4;

    font-size: 15px;

    animation:

        velaPortfolioArrow 1.5s ease-in-out infinite;

}

@keyframes velaPortfolioArrow {

    0%,

    100% {

        transform: translateX(0);

    }

    50% {

        transform: translateX(-5px);

    }

}

/* =========================================

   DARK MODE

========================================= */

body.dark-mode .vela-portfolio__title {

    color: #ffffff;

}

body.dark-mode .vela-portfolio__description {

    color: #a79eaf;

}

body.dark-mode .vela-project-card__visual {

    background: #211c29;

    border-color: rgba(193, 162, 240, 0.1);

    box-shadow:

        0 18px 45px rgba(0, 0, 0, 0.18);

}

body.dark-mode .vela-project-card__name {

    color: #ffffff;

}

body.dark-mode .vela-project-card__type {

    color: #a79eaf;

}

body.dark-mode .vela-project-card__meta {

    color: #918697;

}

/* =========================================

   TABLET

========================================= */

@media (max-width: 1100px) {

    .vela-portfolio {

        padding-top: 125px;

        padding-bottom: 130px;

    }

    .vela-portfolio__track {

        grid-template-columns:

            repeat(2, minmax(0, 1fr));

        gap: 24px;

    }

    .vela-project-card__visual {

        aspect-ratio: 0.95;

    }

}
@media (max-width: 700px) {

    .vela-portfolio {

        padding: 100px 0 110px;

    }

    .vela-portfolio__container {

        width: 100%;

    }

    .vela-portfolio__heading {

        width: calc(100% - 36px);

        margin-right: auto;

        margin-left: auto;

        margin-bottom: 35px;

    }

    .vela-portfolio__heading-top {

        margin-bottom: 14px;

    }

    .vela-portfolio__title {

        font-size: 34px;

        letter-spacing: -0.8px;

    }

    .vela-portfolio__description {

        margin-top: 17px;

        font-size: 11px;

        line-height: 2.1;

    }

    /* Horizontal touch scroll */

    .vela-portfolio__track {

        display: flex;

        width: 100%;

        gap: 15px;

        overflow-x: auto;

        overflow-y: hidden;

        padding:

            5px 18px 20px;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior-x: contain;

        scrollbar-width: none;

        touch-action: pan-x;

    }

    .vela-portfolio__track::-webkit-scrollbar {

        display: none;

    }

    .vela-project-card {

        width: 78vw;

        min-width: 78vw;

        flex: 0 0 78vw;

        scroll-snap-align: start;

    }

    .vela-project-card__visual {

        aspect-ratio: 0.82;

        border-radius: 25px;

    }

    .vela-project-card__info {

        padding-top: 14px;

    }

    .vela-project-card__name {

        font-size: 19px;

    }

    .vela-project-card__meta {

        font-size: 7px;

    }

    .vela-project-card__type {

        font-size: 9px;

    }

    .vela-portfolio__mobile-hint {

        display: flex;

    }

}

/* =========================================

   SMALL MOBILE

========================================= */

@media (max-width: 390px) {

    .vela-project-card {

        width: 82vw;

        min-width: 82vw;

        flex-basis: 82vw;

    }

    .vela-project-card__visual {

        border-radius: 22px;

    }

    .vela-portfolio__title {

        font-size: 30px;

    }

}
.vela-project-invite {

    width: 100%;

    padding: 120px 0 140px;

    position: relative;

    overflow: hidden;

}

.vela-project-invite__container {

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;

    padding: 0 24px;

}

/* =========================================================

   WORKSPACE

   ========================================================= */

.vela-project-invite__workspace {

    width: 100%;

    min-height: 500px;

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(118, 89, 190, 0.16);

    border-radius: 36px;

    background:

        radial-gradient(

            circle at 78% 25%,

            rgba(166, 135, 236, 0.18),

            transparent 28%

        ),

        radial-gradient(

            circle at 15% 85%,

            rgba(207, 187, 255, 0.20),

            transparent 30%

        ),

        #ffffff;

    box-shadow:

        0 30px 80px rgba(91, 70, 140, 0.10);

    padding: 30px 34px 26px;

}

/* =========================================================

   DECORATIONS

   ========================================================= */

.vela-project-invite__decor {

    position: absolute;

    pointer-events: none;

    user-select: none;

    z-index: 1;

    color: #8062c9;

    opacity: 0.28;

    font-family: monospace;

}

.vela-project-invite__decor--one {

    top: 90px;

    right: 7%;

    font-size: 34px;

    animation:

        velaInviteFloatOne 5s ease-in-out infinite;

}

.vela-project-invite__decor--two {

    bottom: 100px;

    left: 7%;

    font-size: 17px;

    letter-spacing: 2px;

    animation:

        velaInviteFloatTwo 6s ease-in-out infinite;

}

@keyframes velaInviteFloatOne {

    0%,

    100% {

        transform: translateY(0) rotate(0deg);

    }

    50% {

        transform: translateY(-12px) rotate(8deg);

    }

}

@keyframes velaInviteFloatTwo {

    0%,

    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(10px);

    }

}

/* =========================================================

   TOP BAR

   ========================================================= */

.vela-project-invite__top {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 24px;

    border-bottom: 1px solid rgba(118, 89, 190, 0.10);

    position: relative;

    z-index: 3;

}

.vela-project-invite__label {

    font-size: 13px;

    font-weight: 600;

    color: #817a91;

}

.vela-project-invite__status {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 13px;

    border-radius: 999px;

    background: rgba(245, 242, 251, 0.9);

    border: 1px solid rgba(118, 89, 190, 0.10);

    font-size: 11px;

    font-weight: 600;

    color: #70677e;

    direction: ltr;

}

.vela-project-invite__status i {

    width: 7px;

    height: 7px;

    display: block;

    border-radius: 50%;

    background: #8f72d4;

    box-shadow:

        0 0 0 4px rgba(143, 114, 212, 0.10);

    animation: velaInvitePulse 2s ease-in-out infinite;

}

@keyframes velaInvitePulse {

    0%,

    100% {

        opacity: 1;

        transform: scale(1);

    }

    50% {

        opacity: 0.55;

        transform: scale(0.8);

    }

}
.vela-project-invite__content {

    min-height: 390px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

    position: relative;

    z-index: 2;

    padding: 45px 20px 35px;

}

/* =========================================================

   CHARACTER

   ========================================================= */

.vela-project-invite__character {

    width: 43%;

    min-width: 300px;

    min-height: 330px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}

.vela-project-invite__character-glow {

    position: absolute;

    width: 270px;

    height: 270px;

    border-radius: 50%;

    background:

        radial-gradient(

            circle,

            rgba(177, 147, 239, 0.28),

            rgba(177, 147, 239, 0)

        );

    filter: blur(5px);

}

.vela-project-invite__character-image {

    width: 290px;

    max-width: 100%;

    height: auto;

    position: relative;

    z-index: 2;

    object-fit: contain;

    filter:

        drop-shadow(

            0 24px 30px rgba(93, 70, 142, 0.14)

        );

    animation:

        velaCharacterFloat 5s ease-in-out infinite;

}

@keyframes velaCharacterFloat {

    0%,

    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}

/* =========================================================

   SPEECH BUBBLE

   ========================================================= */

.vela-project-invite__bubble {

    position: absolute;

    right: 2%;

    top: 23%;

    z-index: 4;

    padding: 10px 15px;

    background: #ffffff;

    border: 1px solid rgba(118, 89, 190, 0.13);

    border-radius: 14px 14px 14px 4px;

    box-shadow:

        0 12px 30px rgba(91, 70, 140, 0.10);

    color: #635b70;

    font-size: 12px;

    font-weight: 600;

    transform: rotate(-3deg);

}

/* =========================================================

   TEXT

   ========================================================= */

.vela-project-invite__text {

    width: 52%;

    max-width: 540px;

}

.vela-project-invite__mini-title {

    display: inline-block;

    margin-bottom: 18px;

    color: #8062c9;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    direction: ltr;

}

.vela-project-invite__text h2 {

    margin: 0;

    color: #29252f;

    font-size: clamp(38px, 4vw, 64px);

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -1.8px;

}

.vela-project-invite__text h2 span {

    display: block;

    color: #8062c9;

}

.vela-project-invite__text p {

    max-width: 500px;

    margin: 24px 0 30px;

    color: #817a8b;

    font-size: 15px;

    line-height: 2.1;

    font-weight: 400;

}

/* =========================================================

   BUTTON

   ========================================================= */

.vela-project-invite__button {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    min-height: 56px;

    padding: 7px 9px 7px 22px;

    border-radius: 17px;

    background: #29252f;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease,

        background 0.3s ease;

}

.vela-project-invite__button-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #9173d5;

    color: #ffffff;

    font-size: 19px;

    transition:

        transform 0.3s ease,

        background 0.3s ease;

}

.vela-project-invite__button:hover {

    transform: translateY(-4px);

    background: #8062c9;

    box-shadow:

        0 18px 35px rgba(93, 70, 142, 0.20);

}

.vela-project-invite__button:hover

.vela-project-invite__button-icon {

    background: #ffffff;

    color: #8062c9;

    transform: rotate(8deg);

}
.vela-project-invite__bottom {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding-top: 22px;

    border-top: 1px solid rgba(118, 89, 190, 0.10);

    position: relative;

    z-index: 3;

    color: #9891a2;

    font-size: 11px;

    font-weight: 500;

}

.vela-project-invite__bottom-dot {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #b6a4dd;

}

/* =========================================================

   DARK MODE

   ========================================================= */

body.dark-mode .vela-project-invite__workspace {

    background:

        radial-gradient(

            circle at 78% 25%,

            rgba(145, 115, 213, 0.14),

            transparent 28%

        ),

        radial-gradient(

            circle at 15% 85%,

            rgba(126, 100, 180, 0.10),

            transparent 30%

        ),

        #17151c;

    border-color: rgba(176, 151, 229, 0.13);

    box-shadow:

        0 30px 80px rgba(0, 0, 0, 0.25);

}

body.dark-mode .vela-project-invite__top,

body.dark-mode .vela-project-invite__bottom {

    border-color: rgba(176, 151, 229, 0.10);

}

body.dark-mode .vela-project-invite__label {

    color: #aaa2b8;

}

body.dark-mode .vela-project-invite__status {

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

    border-color: rgba(255, 255, 255, 0.07);

    color: #aaa2b8;

}

body.dark-mode .vela-project-invite__text h2 {

    color: #f4f0fa;

}

body.dark-mode .vela-project-invite__text h2 span {

    color: #aa8be8;

}

body.dark-mode .vela-project-invite__text p {

    color: #a9a1b2;

}

body.dark-mode .vela-project-invite__bubble {

    background: #211e27;

    border-color: rgba(176, 151, 229, 0.12);

    color: #c0b7cc;

    box-shadow:

        0 14px 30px rgba(0, 0, 0, 0.25);

}

body.dark-mode .vela-project-invite__bottom {

    color: #81798d;

}

body.dark-mode .vela-project-invite__button {

    background: #f4f0fa;

    color: #27232c;

}

body.dark-mode .vela-project-invite__button:hover {

    background: #aa8be8;

    color: #ffffff;

}

body.dark-mode .vela-project-invite__button-icon {

    background: #8c6dcc;

}

/* =========================================================

   TABLET

   ========================================================= */

@media (max-width: 900px) {

    .vela-project-invite {

        padding: 90px 0 100px;

    }

    .vela-project-invite__container {

        padding: 0 18px;

    }

    .vela-project-invite__workspace {

        padding: 24px;

        border-radius: 30px;

    }

    .vela-project-invite__content {

        gap: 25px;

        padding: 35px 5px;

    }

    .vela-project-invite__character {

        width: 42%;

        min-width: 240px;

    }

    .vela-project-invite__character-image {

        width: 240px;

    }

    .vela-project-invite__text {

        width: 58%;

    }

    .vela-project-invite__text h2 {

        font-size: 42px;

    }

}

/* =========================================================

   MOBILE

   ========================================================= */
@media (max-width: 680px) {

    .vela-project-invite {

        padding: 70px 0 80px;

    }

    .vela-project-invite__container {

        padding: 0 14px;

    }

    .vela-project-invite__workspace {

        min-height: auto;

        padding: 20px 17px 22px;

        border-radius: 25px;

    }

    .vela-project-invite__top {

        padding-bottom: 17px;

    }

    .vela-project-invite__label {

        font-size: 11px;

    }

    .vela-project-invite__status {

        padding: 7px 10px;

        font-size: 9px;

    }

    .vela-project-invite__content {

        display: flex;

        flex-direction: column;

        gap: 5px;

        padding: 30px 0 28px;

    }

    .vela-project-invite__character {

        width: 100%;

        min-width: 0;

        min-height: 230px;

        order: 1;

    }

    .vela-project-invite__character-glow {

        width: 210px;

        height: 210px;

    }

    .vela-project-invite__character-image {

        width: 210px;

    }

    .vela-project-invite__bubble {

        right: 9%;

        top: 13%;

        padding: 8px 11px;

        font-size: 10px;

    }

    .vela-project-invite__text {

        width: 100%;

        max-width: none;

        text-align: center;

        order: 2;

    }

    .vela-project-invite__mini-title {

        margin-bottom: 13px;

        font-size: 9px;

        letter-spacing: 1.5px;

    }

    .vela-project-invite__text h2 {

        font-size: 34px;

        line-height: 1.3;

        letter-spacing: -1px;

    }

    .vela-project-invite__text p {

        margin: 17px auto 23px;

        max-width: 390px;

        font-size: 12px;

        line-height: 2;

    }

    .vela-project-invite__button {

        min-height: 51px;

        padding: 6px 8px 6px 17px;

        border-radius: 15px;

        font-size: 11px;

    }

    .vela-project-invite__button-icon {

        width: 37px;

        height: 37px;

        border-radius: 11px;

        font-size: 17px;

    }

    .vela-project-invite__bottom {

        flex-wrap: wrap;

        gap: 7px 10px;

        padding-top: 18px;

        font-size: 9px;

        line-height: 1.8;

    }

    .vela-project-invite__decor--one {

        top: 70px;

        right: 7%;

        font-size: 23px;

    }

    .vela-project-invite__decor--two {

        bottom: 100px;

        left: 5%;

        font-size: 13px;

    }

}

/* =========================================================

   SMALL MOBILE

   ========================================================= */

@media (max-width: 390px) {

    .vela-project-invite__workspace {

        padding-left: 14px;

        padding-right: 14px;

    }

    .vela-project-invite__text h2 {

        font-size: 30px;

    }

    .vela-project-invite__character {

        min-height: 210px;

    }

    .vela-project-invite__character-image {

        width: 190px;

    }

    .vela-project-invite__bubble {

        right: 4%;

    }

}
.vela-quick-access {

    display: none;

}

/* =========================================================

   VELA FREE CONSULTATION BUTTON

   ========================================================= */

.vela-consult-button {

    display: none;

}

.vela-consultation {

    display: none;

}

/* =========================================================

   MOBILE

   ========================================================= */

@media (max-width: 680px) {

    /* =====================================================

       QUICK ACCESS

       ===================================================== */

    .vela-quick-access {

        position: fixed;

        left: 12px;

        right: 12px;

        bottom: 12px;

        height: 72px;

        display: flex;

        align-items: center;

        justify-content: space-around;

        padding: 7px 8px;

        z-index: 9000;

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

        border: 1px solid rgba(125, 98, 187, 0.14);

        border-radius: 24px;

        box-shadow:

            0 15px 45px rgba(74, 53, 113, 0.16);

        backdrop-filter: blur(22px);

        -webkit-backdrop-filter: blur(22px);

    }

    .vela-quick-access__item {

        width: 25%;

        height: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        gap: 2px;

        position: relative;

        color: #777080;

        text-decoration: none;

        -webkit-tap-highlight-color: transparent;

    }

    .vela-quick-access__icon {

        width: 40px;

        height: 40px;

        display: flex;

        align-items: center;

        justify-content: center;

        position: relative;

        transition:

            transform 0.3s ease;

    }

    .vela-quick-access__icon img {

        width: 100%;

        height: 100%;

        object-fit: contain;

        display: block;

        filter:

            drop-shadow(

                0 6px 7px rgba(91, 70, 140, 0.14)

            );

        transition:

            transform 0.3s ease;

    }

    .vela-quick-access__label {

        font-size: 9px;

        line-height: 1.2;

        font-weight: 600;

        white-space: nowrap;

    }

    .vela-quick-access__item:active

    .vela-quick-access__icon {

        transform: translateY(-5px) scale(0.94);

    }

    .vela-quick-access__item:active

    .vela-quick-access__icon img {

        transform: scale(0.9);

    }

    /* =====================================================

       WATER DROP

       ===================================================== */

    .vela-water-drop {

        position: fixed;

        width: 18px;

        height: 18px;

        border-radius: 50%;

        pointer-events: none;

        z-index: 99999;

        background: rgba(151, 119, 216, 0.28);

        border: 1px solid rgba(132, 101, 197, 0.35);

        transform:

            translate(-50%, -50%)

            scale(0.2);

        animation:

            velaWaterDrop 0.7s ease-out forwards;

    }

    .vela-water-drop::after {

        content: "";

        position: absolute;

        width: 100%;

        height: 100%;

        left: 50%;

        top: 50%;

        border-radius: 50%;

        border: 1px solid rgba(132, 101, 197, 0.35);

        transform:

            translate(-50%, -50%)

            scale(1);

    }

    @keyframes velaWaterDrop {

        0% {

            opacity: 0.8;

            transform:

                translate(-50%, -50%)

                scale(0.2);

        }

        55% {

            opacity: 0.45;

        }

        100% {

            opacity: 0;

            transform:

                translate(-50%, -50%)

                scale(3.8);

        }

    }

    /* =====================================================

       CONSULTATION BUTTON

       ===================================================== */
.vela-consult-button {

        position: fixed;

        right: 16px;

        bottom: 99px;

        height: 48px;

        display: flex;

        align-items: center;

        gap: 8px;

        padding: 5px 8px 5px 14px;

        z-index: 8999;

        border: 0;

        border-radius: 999px;

        background: #29252f;

        color: #ffffff;

        box-shadow:

            0 12px 30px rgba(57, 43, 85, 0.22);

        cursor: pointer;

        font-family: inherit;

        -webkit-tap-highlight-color: transparent;

        animation:

            velaConsultFloat 4s ease-in-out infinite;

    }

    .vela-consult-button__icon {

        width: 36px;

        height: 36px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        background: #9475d8;

        font-size: 16px;

        box-shadow:

            0 5px 14px rgba(130, 98, 194, 0.25);

    }

    .vela-consult-button__text {

        font-size: 10px;

        font-weight: 700;

        white-space: nowrap;

    }

    @keyframes velaConsultFloat {

        0%,

        100% {

            transform: translateY(0);

        }

        50% {

            transform: translateY(-4px);

        }

    }

    .vela-consult-button:active {

        transform: scale(0.94);

        animation: none;

    }

    /* =====================================================

       CONSULTATION OVERLAY

       ===================================================== */

    .vela-consultation {

        position: fixed;

        inset: 0;

        z-index: 20000;

        display: flex;

        align-items: flex-end;

        justify-content: center;

        padding: 15px;

        visibility: hidden;

        opacity: 0;

        pointer-events: none;

        transition:

            opacity 0.3s ease,

            visibility 0.3s ease;

    }

    .vela-consultation.is-open {

        visibility: visible;

        opacity: 1;

        pointer-events: auto;

    }

    .vela-consultation__backdrop {

        position: absolute;

        inset: 0;

        background: rgba(30, 25, 38, 0.38);

        backdrop-filter: blur(7px);

        -webkit-backdrop-filter: blur(7px);

    }

    /* =====================================================

       CONSULTATION BOX

       ===================================================== */

    .vela-consultation__box {

        width: 100%;

        max-width: 480px;

        position: relative;

        padding: 22px 18px 20px;

        border-radius: 30px;

        background:

            radial-gradient(

                circle at 80% 5%,

                rgba(176, 145, 238, 0.17),

                transparent 30%

            ),

            #ffffff;

        border: 1px solid rgba(125, 98, 187, 0.13);

        box-shadow:

            0 -10px 50px rgba(50, 37, 76, 0.18);

        transform: translateY(35px);

        transition:

            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);

    }

    .vela-consultation.is-open

    .vela-consultation__box {

        transform: translateY(0);

    }

    /* =====================================================

       CLOSE

       ===================================================== */

    .vela-consultation__close {

        position: absolute;

        top: 14px;

        left: 14px;

        width: 32px;

        height: 32px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: 0;

        border-radius: 50%;

        background: rgba(118, 92, 172, 0.08);

        color: #716879;

        font-family: inherit;

        font-size: 21px;

        line-height: 1;

        cursor: pointer;

        z-index: 5;

    }

    /* =====================================================

       CHARACTER

       ===================================================== */
.vela-consultation__character {

        width: 100%;

        height: 115px;

        display: flex;

        align-items: center;

        justify-content: center;

        position: relative;

        margin-bottom: 4px;

    }

    .vela-consultation__glow {

        position: absolute;

        width: 105px;

        height: 105px;

        border-radius: 50%;

        background:

            radial-gradient(

                circle,

                rgba(170, 137, 235, 0.25),

                transparent 70%

            );

    }

    .vela-consultation__character img {

        width: 115px;

        height: 115px;

        object-fit: contain;

        position: relative;

        z-index: 2;

        filter:

            drop-shadow(

                0 10px 15px rgba(84, 63, 126, 0.12)

            );

        animation:

            velaConsultCharacter 4s ease-in-out infinite;

    }

    @keyframes velaConsultCharacter {

        0%,

        100% {

            transform: translateY(0) rotate(0deg);

        }

        50% {

            transform: translateY(-5px) rotate(1deg);

        }

    }

    /* =====================================================

       CONTENT

       ===================================================== */

    .vela-consultation__content {

        text-align: center;

    }

    .vela-consultation__eyebrow {

        display: block;

        margin-bottom: 8px;

        color: #8062c9;

        font-size: 9px;

        font-weight: 700;

        letter-spacing: 1.7px;

        direction: ltr;

    }

    .vela-consultation__content h3 {

        margin: 0;

        color: #29252f;

        font-size: 27px;

        line-height: 1.35;

        font-weight: 800;

    }

    .vela-consultation__content h3 span {

        color: #8062c9;

    }

    .vela-consultation__content p {

        max-width: 330px;

        margin: 10px auto 17px;

        color: #87808f;

        font-size: 11px;

        line-height: 1.9;

    }

    /* =====================================================

       SOCIAL LINKS

       ===================================================== */

    .vela-consultation__links {

        display: flex;

        flex-direction: column;

        gap: 8px;

    }

    .vela-consultation__link {

        min-height: 59px;

        display: flex;

        align-items: center;

        gap: 11px;

        padding: 7px 10px;

        border-radius: 17px;

        background: #faf9fc;

        border: 1px solid rgba(118, 92, 174, 0.09);

        color: #302b37;

        text-decoration: none;

        text-align: right;

        transition:

            transform 0.25s ease,

            background 0.25s ease,

            border-color 0.25s ease;

    }

    .vela-consultation__link:active {

        transform: scale(0.98);

    }

    .vela-consultation__link-icon {

        width: 45px;

        height: 45px;

        flex: 0 0 45px;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .vela-consultation__link-icon img {

        width: 100%;

        height: 100%;

        object-fit: contain;

        filter:

            drop-shadow(

                0 5px 6px rgba(70, 51, 108, 0.10)

            );

    }

    .vela-consultation__link-info {

        flex: 1;

        display: flex;

        flex-direction: column;

        gap: 2px;

    }

    .vela-consultation__link-info strong {

        font-size: 12px;

        font-weight: 750;

    }

    .vela-consultation__link-info small {

        color: #938b9d;

        font-size: 9px;

    }

    .vela-consultation__link-arrow {

        width: 29px;

        height: 29px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 9px;

        background: rgba(126, 98, 192, 0.08);

        color: #8062c9;

        font-size: 15px;

    }
body.dark-mode .vela-quick-access {

        background: rgba(28, 25, 34, 0.86);

        border-color: rgba(177, 151, 229, 0.12);

        box-shadow:

            0 15px 45px rgba(0, 0, 0, 0.35);

    }

    body.dark-mode .vela-quick-access__label {

        color: #aaa1b6;

    }

    body.dark-mode .vela-consult-button {

        background: #f2edf9;

        color: #29242f;

    }

    body.dark-mode .vela-consult-button__icon {

        background: #9678d8;

        color: #ffffff;

    }

    body.dark-mode .vela-consultation__box {

        background:

            radial-gradient(

                circle at 80% 5%,

                rgba(151, 119, 216, 0.13),

                transparent 30%

            ),

            #1b1821;

        border-color: rgba(177, 151, 229, 0.12);

    }

    body.dark-mode .vela-consultation__close {

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

        color: #c2bacb;

    }

    body.dark-mode .vela-consultation__content h3 {

        color: #f3eef8;

    }

    body.dark-mode .vela-consultation__content p {

        color: #aaa1b3;

    }

    body.dark-mode .vela-consultation__link {

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

        border-color: rgba(255, 255, 255, 0.06);

        color: #eee8f3;

    }

    body.dark-mode .vela-consultation__link-info small {

        color: #89818f;

    }

    body.dark-mode .vela-consultation__link-arrow {

        background: rgba(151, 119, 216, 0.10);

        color: #ad91e6;

    }

}

/* =========================================================

   VERY SMALL MOBILE

   ========================================================= */

@media (max-width: 360px) {

    .vela-quick-access {

        left: 8px;

        right: 8px;

        bottom: 8px;

        height: 67px;

        border-radius: 21px;

    }

    .vela-quick-access__icon {

        width: 36px;

        height: 36px;

    }

    .vela-quick-access__label {

        font-size: 8px;

    }

    .vela-consult-button {

        right: 12px;

        bottom: 88px;

    }

    .vela-consult-button__text {

        font-size: 9px;

    }

}
.vela-design-mind {

    width: 100%;

    position: relative;

    padding: 130px 0 150px;

    overflow: hidden;

}

.vela-design-mind__container {

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;

    padding: 0 24px;

}

/* =========================================================

   INTRO

   ========================================================= */

.vela-design-mind__intro {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    margin-bottom: 75px;

}

.vela-design-mind__eyebrow {

    display: inline-flex;

    align-items: center;

    margin-bottom: 22px;

    color: #8062c9;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;

    direction: ltr;

}

.vela-design-mind__title {

    max-width: 760px;

    margin: 0;

    color: #29252f;

    font-size: clamp(40px, 5vw, 68px);

    line-height: 1.22;

    letter-spacing: -2px;

    font-weight: 800;

}

.vela-design-mind__title span {

    color: #8062c9;

}

.vela-design-mind__description {

    max-width: 590px;

    margin: 25px auto 0;

    color: #898290;

    font-size: 14px;

    line-height: 2.1;

}

/* =========================================================

   STAGE

   ========================================================= */

.vela-design-mind__stage {

    width: 100%;

    height: 570px;

    position: relative;

    border: 1px solid rgba(126, 97, 190, 0.12);

    border-radius: 40px;

    background:

        radial-gradient(

            circle at center,

            rgba(165, 135, 229, 0.13),

            transparent 32%

        ),

        radial-gradient(

            circle at 10% 90%,

            rgba(220, 207, 247, 0.22),

            transparent 30%

        ),

        #fbfaff;

    box-shadow:

        0 30px 80px rgba(82, 62, 125, 0.07);

    overflow: hidden;

}

/* =========================================================

   DECORATIVE LINES

   ========================================================= */

.vela-design-mind__line {

    position: absolute;

    display: block;

    border: 1px dashed rgba(126, 97, 190, 0.13);

    border-radius: 50%;

    pointer-events: none;

}

.vela-design-mind__line--one {

    width: 560px;

    height: 560px;

    left: 50%;

    top: 50%;

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

}

.vela-design-mind__line--two {

    width: 410px;

    height: 410px;

    left: 50%;

    top: 50%;

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

    border-color: rgba(126, 97, 190, 0.09);

}
.vela-design-mind__character {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 260px;

    height: 300px;

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

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 4;

}

.vela-design-mind__character-glow {

    position: absolute;

    width: 260px;

    height: 260px;

    top: 10px;

    border-radius: 50%;

    background:

        radial-gradient(

            circle,

            rgba(157, 124, 220, 0.22),

            transparent 68%

        );

    filter: blur(8px);

}

.vela-design-mind__character-circle {

    width: 220px;

    height: 220px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    position: relative;

    border-radius: 50%;

    background:

        radial-gradient(

            circle at 50% 35%,

            #ffffff,

            #f1ebfc

        );

    border: 1px solid rgba(126, 97, 190, 0.12);

    box-shadow:

        0 25px 60px rgba(87, 66, 132, 0.13);

    overflow: hidden;

    animation:

        velaMindCharacterFloat 5s ease-in-out infinite;

}

.vela-design-mind__character-circle img {

    width: 205px;

    height: 205px;

    object-fit: contain;

    display: block;

    filter:

        drop-shadow(

            0 15px 20px rgba(78, 58, 120, 0.13)

        );

}

@keyframes velaMindCharacterFloat {

    0%,

    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-9px);

    }

}

.vela-design-mind__character-label {

    position: relative;

    margin-top: 18px;

    padding: 8px 15px;

    border-radius: 999px;

    background: #ffffff;

    border: 1px solid rgba(126, 97, 190, 0.12);

    box-shadow:

        0 10px 25px rgba(82, 62, 125, 0.08);

    color: #71687d;

    font-size: 10px;

    font-weight: 700;

}

/* =========================================================

   MIND CARDS

   ========================================================= */

.vela-mind-card {

    position: absolute;

    width: 235px;

    min-height: 92px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 15px;

    border-radius: 20px;

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

    border: 1px solid rgba(126, 97, 190, 0.11);

    box-shadow:

        0 18px 40px rgba(83, 63, 126, 0.08);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    z-index: 5;

    transition:

        transform 0.35s ease,

        box-shadow 0.35s ease;

}

.vela-mind-card:hover {

    box-shadow:

        0 25px 50px rgba(83, 63, 126, 0.13);

}

.vela-mind-card--identity {

    top: 70px;

    right: 8%;

    transform: rotate(2deg);

}

.vela-mind-card--experience {

    bottom: 70px;

    right: 8%;

    transform: rotate(-2deg);

}

.vela-mind-card--detail {

    top: 70px;

    left: 8%;

    transform: rotate(-2deg);

}

.vela-mind-card--code {

    bottom: 70px;

    left: 8%;

    transform: rotate(2deg);

}

.vela-mind-card:hover {

    transform:

        translateY(-6px)

        rotate(0deg);

}

.vela-mind-card__number {

    position: absolute;

    top: 10px;

    left: 13px;

    color: #b7a9cd;

    font-size: 8px;

    font-weight: 700;

    direction: ltr;

}

.vela-mind-card__icon {

    width: 45px;

    height: 45px;

    flex: 0 0 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:

        linear-gradient(

            145deg,

            #f0eafd,

            #ffffff

        );

    color: #8062c9;

    font-size: 19px;

    font-weight: 700;

    box-shadow:

        inset 0 0 0 1px rgba(126, 97, 190, 0.06),

        0 7px 15px rgba(89, 66, 136, 0.08);

}

.vela-mind-card--code .vela-mind-card__icon {

    font-family: monospace;

    font-size: 13px;

}

.vela-mind-card > div {

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding-top: 5px;

}

.vela-mind-card strong {

    color: #342f3b;

    font-size: 13px;

    font-weight: 800;

}
.vela-mind-card small {

    color: #918a99;

    font-size: 9px;

    line-height: 1.7;

}

/* =========================================================

   CENTER NOTE

   ========================================================= */

.vela-design-mind__center-note {

    position: absolute;

    left: 50%;

    bottom: 24px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 8px;

    color: #9a92a5;

    font-size: 9px;

    white-space: nowrap;

}

.vela-design-mind__center-note span {

    width: 5px;

    height: 5px;

    display: block;

    border-radius: 50%;

    background: #a68adf;

    box-shadow:

        0 0 0 5px rgba(166, 138, 223, 0.08);

}

/* =========================================================

   DARK MODE

   ========================================================= */

body.dark-mode .vela-design-mind__title {

    color: #f3eff8;

}

body.dark-mode .vela-design-mind__description {

    color: #aaa2b1;

}

body.dark-mode .vela-design-mind__stage {

    background:

        radial-gradient(

            circle at center,

            rgba(157, 124, 220, 0.12),

            transparent 32%

        ),

        #19161f;

    border-color: rgba(176, 149, 227, 0.11);

    box-shadow:

        0 30px 80px rgba(0, 0, 0, 0.20);

}

body.dark-mode .vela-design-mind__line {

    border-color: rgba(176, 149, 227, 0.10);

}

body.dark-mode .vela-design-mind__character-circle {

    background:

        radial-gradient(

            circle at 50% 35%,

            #29242f,

            #211d27

        );

    border-color: rgba(176, 149, 227, 0.11);

}

body.dark-mode .vela-design-mind__character-label {

    background: #211d27;

    border-color: rgba(176, 149, 227, 0.10);

    color: #b8afc1;

}

body.dark-mode .vela-mind-card {

    background: rgba(34, 30, 42, 0.84);

    border-color: rgba(176, 149, 227, 0.10);

    box-shadow:

        0 18px 40px rgba(0, 0, 0, 0.20);

}

body.dark-mode .vela-mind-card__icon {

    background:

        linear-gradient(

            145deg,

            #302943,

            #211d27

        );

    color: #ac91e3;

}

body.dark-mode .vela-mind-card strong {

    color: #eee8f3;

}

body.dark-mode .vela-mind-card small {

    color: #948b9e;

}

body.dark-mode .vela-design-mind__center-note {

    color: #817889;

}

/* =========================================================

   TABLET

   ========================================================= */

@media (max-width: 900px) {

    .vela-design-mind {

        padding: 100px 0 110px;

    }

    .vela-design-mind__stage {

        height: 530px;

    }

    .vela-mind-card {

        width: 205px;

    }

    .vela-mind-card--identity,

    .vela-mind-card--experience {

        right: 4%;

    }

    .vela-mind-card--detail,

    .vela-mind-card--code {

        left: 4%;

    }

}
@media (max-width: 680px) {

    .vela-design-mind {

        padding: 80px 0 90px;

    }

    .vela-design-mind__container {

        padding: 0 14px;

    }

    .vela-design-mind__intro {

        margin-bottom: 35px;

    }

    .vela-design-mind__eyebrow {

        margin-bottom: 16px;

        font-size: 8px;

        letter-spacing: 1.8px;

    }

    .vela-design-mind__title {

        max-width: 390px;

        font-size: 34px;

        line-height: 1.35;

        letter-spacing: -1px;

    }

    .vela-design-mind__description {

        max-width: 360px;

        margin-top: 17px;

        font-size: 11px;

        line-height: 2;

    }

    .vela-design-mind__stage {

        height: 650px;

        border-radius: 28px;

    }

    /* central character */

    .vela-design-mind__character {

        top: 47%;

        width: 220px;

        height: 260px;

    }

    .vela-design-mind__character-circle {

        width: 180px;

        height: 180px;

    }

    .vela-design-mind__character-circle img {

        width: 170px;

        height: 170px;

    }

    .vela-design-mind__character-glow {

        width: 220px;

        height: 220px;

    }

    .vela-design-mind__character-label {

        margin-top: 13px;

        padding: 7px 12px;

        font-size: 9px;

    }

    /* cards */

    .vela-mind-card {

        width: calc(50% - 27px);

        min-height: 78px;

        gap: 8px;

        padding: 10px;

        border-radius: 16px;

    }

    .vela-mind-card--identity {

        top: 28px;

        right: 14px;

    }

    .vela-mind-card--experience {

        top: 28px;

        bottom: auto;

        left: 14px;

        right: auto;

    }

    .vela-mind-card--detail {

        top: auto;

        bottom: 62px;

        left: 14px;

    }

    .vela-mind-card--code {

        top: auto;

        bottom: 62px;

        right: 14px;

        left: auto;

    }

    .vela-mind-card__number {

        top: 7px;

        left: 9px;

        font-size: 7px;

    }

    .vela-mind-card__icon {

        width: 34px;

        height: 34px;

        flex: 0 0 34px;

        border-radius: 10px;

        font-size: 15px;

    }

    .vela-mind-card--code .vela-mind-card__icon {

        font-size: 10px;

    }

    .vela-mind-card > div {

        gap: 3px;

        padding-top: 3px;

    }

    .vela-mind-card strong {

        font-size: 10px;

    }

    .vela-mind-card small {

        font-size: 7px;

        line-height: 1.55;

    }

    .vela-design-mind__line--one {

        width: 360px;

        height: 360px;

    }

    .vela-design-mind__line--two {

        width: 275px;

        height: 275px;

    }

    .vela-design-mind__center-note {

        bottom: 22px;

        font-size: 8px;

    }

}

/* =========================================================

   SMALL MOBILE

   ========================================================= */

@media (max-width: 390px) {

    .vela-design-mind__title {

        font-size: 30px;

    }

    .vela-design-mind__stage {

        height: 610px;

    }

    .vela-mind-card {

        width: calc(50% - 22px);

        padding: 8px;

    }

    .vela-mind-card--identity,

    .vela-mind-card--experience {

        top: 22px;

    }

    .vela-mind-card--detail,

    .vela-mind-card--code {

        bottom: 57px;

    }

    .vela-mind-card__icon {

        width: 30px;

        height: 30px;

        flex-basis: 30px;

    }

    .vela-mind-card strong {

        font-size: 9px;

    }

    .vela-mind-card small {

        font-size: 6.5px;

    }

}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Estedad", sans-serif;
    background: #faf9ff;
    color: #292438;
    line-height: 1.8;
    overflow-x: hidden;
    transition: background-color 0.35s ease, color 0.35s ease;
}

body.dark-mode {
    background: #111019;
    color: #f4f1fb;
}

button,
input,
textarea {
    font-family: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

fieldset {
    border: 0;
    min-width: 0;
}

textarea {
    resize: vertical;
}


/* =========================================================
   LOADER
   ========================================================= */

.order-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #faf9ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.order-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.order-loader__mark {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8b6fe8;
    color: #ffffff;
    font-size: 25px;
    font-weight: 800;
    box-shadow: 0 18px 45px rgba(139, 111, 232, 0.28);
    animation: orderLoaderFloat 1.5s ease-in-out infinite;
}

.order-loader__line {
    width: 90px;
    height: 3px;
    overflow: hidden;
    border-radius: 20px;
    background: #e8e1fa;
    position: relative;
}

.order-loader__line:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    border-radius: 20px;
    background: #8b6fe8;
    animation: orderLoaderLine 1.1s ease-in-out infinite;
}

@keyframes orderLoaderFloat {

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

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

@keyframes orderLoaderLine {

    0% {
        right: 100%;
    }

    100% {
        right: -50%;
    }
}
.order-main {
    position: relative;
}

.order-intro {
    position: relative;
    overflow: hidden;
    padding: 60px 30px 25px;
}

.order-intro:before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    top: -190px;
    right: -130px;
    background: rgba(178, 155, 255, 0.12);
    filter: blur(5px);
    pointer-events: none;
}

.order-intro:after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    left: -120px;
    bottom: -140px;
    background: rgba(226, 215, 255, 0.45);
    filter: blur(10px);
    pointer-events: none;
}

.order-intro__container {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    min-height: 510px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 430px;
    align-items: center;
    gap: 70px;
}

.order-intro__content {
    padding: 25px 0;
}

.order-intro__eyebrow {
    display: inline-flex;
    direction: ltr;
    padding: 7px 12px;
    border-radius: 10px;
    color: #7c62d5;
    background: #eee9fc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.order-intro__title {
    max-width: 680px;
    margin-top: 23px;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.25;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.order-intro__title span {
    position: relative;
    color: #8b6fe8;
}

.order-intro__title span:after {
    content: "";
    position: absolute;
    height: 7px;
    border-radius: 20px;
    background: rgba(139, 111, 232, 0.17);
    right: 0;
    left: 0;
    bottom: 3px;
    z-index: -1;
}

.order-intro__description {
    max-width: 630px;
    margin-top: 25px;
    color: #777086;
    font-size: 15px;
    line-height: 2.25;
}

.order-intro__note {
    width: max-content;
    max-width: 100%;
    margin-top: 24px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(139, 111, 232, 0.1);
    color: #6f6680;
    font-size: 11px;
}

.order-intro__note-icon {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b6fe8;
    background: #eee9fc;
}

.order-intro__character {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-intro__character-glow {
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: rgba(164, 135, 245, 0.16);
    filter: blur(12px);
}

.order-intro__character-image {
    position: relative;
    z-index: 2;
    width: min(390px, 100%);
    max-height: 490px;
    object-fit: contain;
    animation: characterFloat 5s ease-in-out infinite;
}

.order-intro__bubble {
    position: absolute;
    z-index: 4;
    top: 45px;
    right: 0;
    max-width: 185px;
    padding: 15px 17px;
    border-radius: 18px 18px 5px 18px;
    background: #ffffff;
    border: 1px solid rgba(139, 111, 232, 0.12);
    color: #50466a;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.9;
    box-shadow: 0 18px 45px rgba(68, 49, 115, 0.11);
    animation: bubbleFloat 4s ease-in-out infinite;
}

.order-intro__bubble:after {
    content: "";
    position: absolute;
    right: 17px;
    bottom: -8px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-left: 1px solid rgba(139, 111, 232, 0.12);
    border-bottom: 1px solid rgba(139, 111, 232, 0.12);
    transform: rotate(-45deg);
}

@keyframes characterFloat {

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

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

@keyframes bubbleFloat {

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

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

body.dark-mode .order-intro__eyebrow {
    color: #b9a5fa;
    background: #29233d;
}

body.dark-mode .order-intro__description {
    color: #a59eb5;
}
body.dark-mode .order-intro__note {
    color: #aaa2b7;
    background: rgba(34, 31, 45, 0.8);
    border-color: rgba(181, 157, 250, 0.12);
}

body.dark-mode .order-intro__note-icon {
    background: #302946;
    color: #b9a5fa;
}

body.dark-mode .order-intro__bubble {
    background: #282433;
    color: #e5dff1;
    border-color: rgba(181, 157, 250, 0.13);
}

body.dark-mode .order-intro__bubble:after {
    background: #282433;
    border-color: rgba(181, 157, 250, 0.13);
}


/* =========================================================
   PROGRESS
   ========================================================= */

.order-progress {
    padding: 15px 30px 40px;
}

.order-progress__container {
    position: relative;
    width: min(920px, 100%);
    margin: 0 auto;
}

.order-progress__line {
    position: absolute;
    top: 17px;
    right: 8%;
    left: 8%;
    height: 2px;
    background: #e6e0f2;
}

.order-progress__active-line {
    display: block;
    width: 0;
    height: 100%;
    background: #8b6fe8;
    transition: width 0.45s ease;
}

.order-progress__steps {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, calc(100% / 6));
}

.order-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #9a92a8;
    transition: color 0.3s ease;
}

.order-progress__number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0edf7;
    border: 4px solid #faf9ff;
    font-size: 9px;
    font-weight: 800;
    direction: ltr;
    transition: all 0.35s ease;
}

.order-progress__label {
    font-size: 10px;
    font-weight: 600;
}

.order-progress__step--active,
.order-progress__step.is-complete {
    color: #7e63d6;
}

.order-progress__step--active .order-progress__number,
.order-progress__step.is-complete .order-progress__number {
    color: #ffffff;
    background: #8b6fe8;
    box-shadow: 0 8px 22px rgba(139, 111, 232, 0.24);
}

body.dark-mode .order-progress__line {
    background: #312c3c;
}

body.dark-mode .order-progress__number {
    background: #2b2735;
    border-color: #111019;
}

body.dark-mode .order-progress__step {
    color: #81798d;
}

body.dark-mode .order-progress__step--active,
body.dark-mode .order-progress__step.is-complete {
    color: #b9a5fa;
}
.order-form-section {
    padding: 20px 30px 90px;
}

.order-form-section__container {
    width: min(980px, 100%);
    margin: 0 auto;
}

.vela-order-form {
    position: relative;
}


/* =========================================================
   STEPS
   ========================================================= */

.order-step {
    display: none;
    padding: 45px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.83);
    border: 1px solid rgba(139, 111, 232, 0.11);
    box-shadow: 0 25px 75px rgba(70, 51, 120, 0.07);
}

.order-step--active {
    display: block;
    animation: stepIn 0.45s ease both;
}

@keyframes stepIn {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

.order-step__heading {
    padding-bottom: 30px;
    border-bottom: 1px solid #eeeaf4;
}

.order-step__eyebrow {
    direction: ltr;
    color: #8b6fe8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.order-step__title {
    margin-top: 7px;
    font-size: clamp(25px, 3vw, 35px);
    line-height: 1.45;
    font-weight: 800;
}

.order-step__description {
    margin-top: 4px;
    color: #938b9d;
    font-size: 12px;
}

body.dark-mode .order-step {
    background: rgba(29, 26, 38, 0.88);
    border-color: rgba(181, 157, 250, 0.1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.18);
}

body.dark-mode .order-step__heading {
    border-color: #302b3a;
}

body.dark-mode .order-step__description {
    color: #91899e;
}
.order-field-group {
    margin-top: 35px;
}

.order-field {
    margin-top: 25px;
}

.order-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, calc((100% - 22px) / 2));
    gap: 22px;
    margin-top: 25px;
}

.order-fields-grid .order-field {
    margin-top: 0;
}

.order-field-label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 9px;
    color: #41394e;
    font-size: 12px;
    font-weight: 700;
}

.order-field-label > span {
    color: #d15d91;
}

.order-field-label small {
    margin-right: 4px;
    padding: 2px 7px;
    border-radius: 7px;
    color: #968ea0;
    background: #f2eff6;
    font-size: 8px;
    font-weight: 600;
}

.order-field-hint {
    margin-top: -3px;
    margin-bottom: 13px;
    color: #a098aa;
    font-size: 10px;
}

.order-input,
.order-textarea {
    width: 100%;
    border: 1px solid #e8e2f0;
    border-radius: 16px;
    outline: none;
    color: #322b3c;
    background: #fbfaff;
    font-size: 12px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.order-input {
    min-height: 54px;
    padding: 0 17px;
}

.order-textarea {
    min-height: 145px;
    padding: 15px 17px;
    line-height: 2;
}

.order-input::placeholder,
.order-textarea::placeholder {
    color: #b3acba;
}

.order-input:focus,
.order-textarea:focus {
    border-color: #a28ae8;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(139, 111, 232, 0.09);
}

.order-field-counter {
    display: block;
    margin-top: 5px;
    color: #a29aa9;
    font-size: 9px;
}

.order-field-error {
    display: none;
    margin-top: 7px;
    color: #c4537e;
    font-size: 9px;
    font-weight: 600;
}

.order-field.is-error .order-field-error,
.order-field-group.is-error > .order-field-error,
.order-consent.is-error .order-field-error {
    display: block;
}

.order-field.is-error .order-input,
.order-field.is-error .order-textarea {
    border-color: #d9789b;
    box-shadow: 0 0 0 4px rgba(217, 120, 155, 0.07);
}

body.dark-mode .order-field-label {
    color: #e2ddec;
}

body.dark-mode .order-field-label small {
    color: #92899e;
    background: #2a2633;
}

body.dark-mode .order-input,
body.dark-mode .order-textarea {
    color: #f0ebf7;
    background: #211e29;
    border-color: #37313f;
}

body.dark-mode .order-input:focus,
body.dark-mode .order-textarea:focus {
    background: #25212e;
}

body.dark-mode .order-input::placeholder,
body.dark-mode .order-textarea::placeholder {
    color: #756d80;
}
.order-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, calc((100% - 18px) / 2));
    gap: 14px;
}

.order-choice {
    position: relative;
    min-height: 100px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #e9e4f1;
    border-radius: 21px;
    background: #fcfbff;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.order-choice:hover {
    transform: translateY(-3px);
    border-color: #cfc1f5;
    box-shadow: 0 14px 35px rgba(91, 68, 148, 0.07);
}

.order-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-choice__visual {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: #f0ebfd;
    color: #8469dd;
    font-size: 22px;
}

.order-choice__content {
    display: flex;
    flex-direction: column;
}

.order-choice__content strong {
    font-size: 12px;
    font-weight: 800;
}

.order-choice__content small {
    margin-top: 2px;
    color: #9991a4;
    font-size: 9px;
}

.order-choice:has(input:checked) {
    border-color: #9d85e7;
    background: #f8f5ff;
    box-shadow: 0 15px 38px rgba(117, 91, 185, 0.11);
}

.order-choice:has(input:checked) .order-choice__visual {
    background: #8b6fe8;
    color: #ffffff;
}

.order-choice:has(input:checked):after {
    content: "✓";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #8b6fe8;
    font-size: 10px;
    font-weight: 800;
}

body.dark-mode .order-choice {
    background: #211e29;
    border-color: #37313f;
}

body.dark-mode .order-choice:hover {
    border-color: #554a69;
}

body.dark-mode .order-choice__visual {
    background: #2d2740;
    color: #b8a4f6;
}

body.dark-mode .order-choice:has(input:checked) {
    background: #282237;
    border-color: #7661b4;
}
.order-style-grid {
    display: grid;
    grid-template-columns: repeat(3, calc((100% - 28px) / 3));
    gap: 14px;
}

.order-style-choice {
    position: relative;
    min-height: 150px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid #e8e2f0;
    border-radius: 22px;
    background: #fcfbff;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.order-style-choice:hover {
    transform: translateY(-4px);
    border-color: #c9b9f2;
    box-shadow: 0 18px 38px rgba(82, 61, 137, 0.08);
}

.order-style-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-style-choice__sample {
    position: absolute;
    inset: 0 0 auto;
    height: 83px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    color: #62567e;
}

.order-style-choice__sample--minimal {
    background: #f0eff3;
}

.order-style-choice__sample--luxury {
    background: #272332;
    color: #d9bf82;
}

.order-style-choice__sample--editorial {
    background: #ece5dc;
    font-family: Georgia, serif;
}

.order-style-choice__sample--creative {
    background: #ded5f8;
    color: #7558cb;
}

.order-style-choice__sample--soft {
    background: #f7e8f1;
    color: #cc8aa9;
}

.order-style-choice__sample--professional {
    background: #dfe5ea;
    color: #53616b;
}

.order-style-choice strong {
    font-size: 12px;
    font-weight: 800;
}

.order-style-choice small {
    margin-top: 1px;
    color: #9b92a5;
    font-size: 9px;
}

.order-style-choice:has(input:checked) {
    border-color: #9d85e7;
    box-shadow: 0 14px 36px rgba(117, 91, 185, 0.11);
}

.order-style-choice:has(input:checked):after {
    content: "✓";
    position: absolute;
    top: 9px;
    left: 9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #8b6fe8;
    font-size: 10px;
}

body.dark-mode .order-style-choice {
    background: #211e29;
    border-color: #37313f;
}

body.dark-mode .order-style-choice__sample--minimal {
    background: #34313a;
    color: #eee9f2;
}

body.dark-mode .order-style-choice__sample--editorial {
    background: #3c352f;
    color: #eee6dc;
}

body.dark-mode .order-style-choice__sample--soft {
    background: #392d36;
}
.order-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.order-tag {
    position: relative;
    cursor: pointer;
}

.order-tag input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-tag span {
    display: block;
    padding: 9px 16px;
    border-radius: 13px;
    color: #756c82;
    background: #f7f4fa;
    border: 1px solid #e8e2ef;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.order-tag:hover span {
    border-color: #cbbcf0;
}

.order-tag input:checked + span {
    color: #7056c6;
    background: #eee9fc;
    border-color: #a992e8;
    box-shadow: 0 7px 20px rgba(139, 111, 232, 0.08);
}

body.dark-mode .order-tag span {
    color: #a29aaf;
    background: #211e29;
    border-color: #37313f;
}

body.dark-mode .order-tag input:checked + span {
    color: #c0aff8;
    background: #302846;
    border-color: #68549e;
}


/* =========================================================
   FEATURE GRID
   ========================================================= */

.order-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, calc((100% - 28px) / 3));
    gap: 12px;
}

.order-feature {
    position: relative;
    min-height: 95px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #e8e2ef;
    border-radius: 19px;
    background: #fcfbff;
    cursor: pointer;
    transition: all 0.25s ease;
}

.order-feature:hover {
    transform: translateY(-3px);
    border-color: #cfc0f2;
}

.order-feature input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-feature__icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #856add;
    background: #f0ebfd;
    font-size: 14px;
}

.order-feature > span:last-child {
    font-size: 10px;
    font-weight: 700;
}

.order-feature:has(input:checked) {
    border-color: #9f87e8;
    background: #f8f5ff;
}

.order-feature:has(input:checked) .order-feature__icon {
    color: #ffffff;
    background: #8b6fe8;
}

body.dark-mode .order-feature {
    background: #211e29;
    border-color: #37313f;
}

body.dark-mode .order-feature__icon {
    background: #2d2740;
    color: #b9a5fa;
}

body.dark-mode .order-feature:has(input:checked) {
    background: #282237;
    border-color: #7661b4;
}
.order-question-list {
    margin-top: 30px;
    border-top: 1px solid #eeeaf4;
}

.order-question {
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-bottom: 1px solid #eeeaf4;
}

.order-question__content {
    display: flex;
    flex-direction: column;
}

.order-question__content strong {
    font-size: 12px;
}

.order-question__content span {
    margin-top: 2px;
    color: #9991a4;
    font-size: 9px;
}

.order-toggle-group {
    flex: 0 0 auto;
    display: flex;
    gap: 7px;
}

.order-toggle-group label {
    position: relative;
    cursor: pointer;
}

.order-toggle-group input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-toggle-group span {
    display: block;
    min-width: 67px;
    padding: 7px 12px;
    text-align: center;
    border: 1px solid #e5dfec;
    border-radius: 11px;
    color: #81798c;
    background: #faf8fc;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.order-toggle-group label:hover span {
    border-color: #c8b8ef;
}

.order-toggle-group input:checked + span {
    color: #ffffff;
    background: #8b6fe8;
    border-color: #8b6fe8;
    box-shadow: 0 7px 18px rgba(139, 111, 232, 0.18);
}

body.dark-mode .order-question,
body.dark-mode .order-question-list {
    border-color: #302b3a;
}

body.dark-mode .order-toggle-group span {
    color: #aaa2b5;
    background: #211e29;
    border-color: #393340;
}


/* =========================================================
   TIME / BUDGET
   ========================================================= */

.order-time-grid {
    display: grid;
    grid-template-columns: repeat(2, calc((100% - 14px) / 2));
    gap: 12px;
}

.order-time-choice,
.order-budget-choice {
    position: relative;
    cursor: pointer;
}

.order-time-choice input,
.order-budget-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-time-choice {
    min-height: 105px;
    padding: 17px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #e8e2ef;
    border-radius: 19px;
    background: #fcfbff;
    transition: all 0.25s ease;
}

.order-time-choice strong {
    font-size: 12px;
}

.order-time-choice span {
    margin-top: 3px;
    color: #9c94a5;
    font-size: 9px;
}

.order-time-choice:hover {
    transform: translateY(-3px);
    border-color: #cbbbef;
}

.order-time-choice:has(input:checked) {
    border-color: #9e86e8;
    background: #f7f4ff;
    box-shadow: 0 13px 30px rgba(117, 91, 185, 0.09);
}

.order-budget-grid {
    display: grid;
    grid-template-columns: repeat(2, calc((100% - 12px) / 2));
    gap: 9px;
}

.order-budget-choice span {
    display: block;
    padding: 13px 15px;
    text-align: center;
    border: 1px solid #e8e2ef;
    border-radius: 13px;
    color: #756d80;
    background: #fcfbff;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.order-budget-choice:hover span {
    border-color: #cbbbef;
}

.order-budget-choice input:checked + span {
    color: #7056c6;
    border-color: #9f87e8;
    background: #eee9fc;
}

body.dark-mode .order-time-choice,
body.dark-mode .order-budget-choice span {
    background: #211e29;
    border-color: #37313f;
}

body.dark-mode .order-time-choice:has(input:checked) {
    background: #282237;
    border-color: #7661b4;
}

body.dark-mode .order-budget-choice input:checked + span {
    color: #c0aff8;
    background: #302846;
    border-color: #68549e;
}
.order-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, calc((100% - 18px) / 3));
    gap: 9px;
}

.order-contact-choice {
    position: relative;
    min-height: 75px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #e8e2ef;
    border-radius: 16px;
    background: #fcfbff;
    cursor: pointer;
    transition: all 0.25s ease;
}

.order-contact-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-contact-choice span:last-child {
    font-size: 10px;
    font-weight: 700;
}

.order-contact-choice__icon {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #856add;
    background: #f0ebfd;
    font-size: 11px;
    font-weight: 800;
}

.order-contact-choice:has(input:checked) {
    border-color: #9e86e8;
    background: #f7f4ff;
}

.order-contact-choice:has(input:checked) .order-contact-choice__icon {
    color: #ffffff;
    background: #8b6fe8;
}

body.dark-mode .order-contact-choice {
    background: #211e29;
    border-color: #37313f;
}

body.dark-mode .order-contact-choice__icon {
    background: #2d2740;
    color: #b9a5fa;
}

body.dark-mode .order-contact-choice:has(input:checked) {
    background: #282237;
    border-color: #7661b4;
}


/* =========================================================
   CONSENT
   ========================================================= */

.order-consent {
    margin-top: 30px;
    padding: 17px;
    border-radius: 18px;
    border: 1px solid #e8e2ef;
    background: #faf8fd;
}

.order-consent label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.order-consent input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-consent__check {
    position: relative;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    border: 1px solid #d9d1e3;
    border-radius: 7px;
    background: #ffffff;
    transition: all 0.25s ease;
}

.order-consent__text {
    color: #81798c;
    font-size: 9px;
    line-height: 1.9;
}

.order-consent input:checked + .order-consent__check {
    border-color: #8b6fe8;
    background: #8b6fe8;
}

.order-consent input:checked + .order-consent__check:after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

body.dark-mode .order-consent {
    background: #211e29;
    border-color: #37313f;
}

body.dark-mode .order-consent__check {
    background: #292530;
    border-color: #46404d;
}

body.dark-mode .order-consent__text {
    color: #9991a4;
}
.order-summary {
    display: none;
    padding: 38px;
    border-radius: 34px;
    background: #252031;
    color: #ffffff;
    box-shadow: 0 30px 80px rgba(40, 28, 67, 0.18);
    animation: stepIn 0.45s ease both;
}

.order-summary.is-active {
    display: block;
}

.order-summary__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.order-summary__eyebrow {
    direction: ltr;
    color: #b9a4fa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.order-summary__title {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 800;
}

.order-summary__mark {
    padding: 7px 11px;
    border-radius: 10px;
    color: #c9b8fa;
    background: rgba(139, 111, 232, 0.12);
    direction: ltr;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.order-summary__body {
    display: grid;
    grid-template-columns: repeat(2, calc((100% - 14px) / 2));
    gap: 10px;
    margin-top: 25px;
}

.order-summary-card {
    min-height: 78px;
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.035);
}

.order-summary-card span {
    color: #93899f;
    font-size: 9px;
}

.order-summary-card strong {
    margin-top: 3px;
    color: #eee8f8;
    font-size: 11px;
}

.order-summary__message {
    margin-top: 20px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 15px;
    background: rgba(139, 111, 232, 0.09);
}

.order-summary__message-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(139, 111, 232, 0.18);
    color: #c2b0f7;
}

.order-summary__message p {
    color: #bdb4c9;
    font-size: 10px;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.order-navigation {
    margin-top: 25px;
    min-height: 65px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}

.order-navigation__back,
.order-navigation__next,
.order-navigation__submit {
    min-height: 52px;
    padding: 0 19px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 10px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.order-navigation__back {
    color: #7e758b;
    background: transparent;
}

.order-navigation__back:hover {
    color: #6d56bd;
    background: #f0ebfa;
}

.order-navigation__next {
    color: #ffffff;
    background: #8b6fe8;
    box-shadow: 0 12px 28px rgba(139, 111, 232, 0.2);
}

.order-navigation__next:hover {
    transform: translateY(-2px);
    background: #7e62db;
    box-shadow: 0 16px 32px rgba(139, 111, 232, 0.27);
}

.order-navigation__submit {
    display: none;
    color: #ffffff;
    background: #8b6fe8;
    box-shadow: 0 14px 30px rgba(139, 111, 232, 0.22);
}

.order-navigation__submit:hover {
    transform: translateY(-2px);
    background: #7e62db;
}

.order-navigation__progress {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #aaa2b1;
    font-size: 9px;
}
.order-navigation__progress strong {
    color: #7459ca;
    font-size: 12px;
}

body.dark-mode .order-navigation__back {
    color: #9a92a4;
}

body.dark-mode .order-navigation__back:hover {
    color: #c0aff7;
    background: #29243a;
}

body.dark-mode .order-navigation__progress strong {
    color: #bba7f7;
}


/* =========================================================
   TRUST
   ========================================================= */

.order-trust {
    padding: 0 30px 70px;
}

.order-trust__container {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(3, calc((100% - 24px) / 3));
    gap: 12px;
    border: 1px solid rgba(139, 111, 232, 0.09);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.55);
}

.order-trust__item {
    padding: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.order-trust__icon {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #8065d8;
    background: #eee9fc;
    font-size: 13px;
}

.order-trust__item strong {
    display: block;
    font-size: 10px;
}

.order-trust__item p {
    margin-top: 2px;
    color: #9991a2;
    font-size: 8px;
    line-height: 1.8;
}

body.dark-mode .order-trust__container {
    background: rgba(29, 26, 38, 0.75);
    border-color: rgba(181, 157, 250, 0.08);
}

body.dark-mode .order-trust__icon {
    color: #b9a5fa;
    background: #2e2840;
}
.order-footer {
    padding: 30px;
    border-top: 1px solid rgba(139, 111, 232, 0.08);
}

.order-footer__inner {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 25px;
}

.order-footer__logo {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.15em;
    direction: ltr;
}

.order-footer__inner p {
    color: #9b93a5;
    font-size: 9px;
}

.order-footer__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8065d8;
    font-size: 9px;
    font-weight: 700;
}

.order-footer__back span {
    font-size: 14px;
}

body.dark-mode .order-footer {
    border-color: rgba(181, 157, 250, 0.08);
}

body.dark-mode .order-footer__inner p {
    color: #827a8d;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .order-header {
        padding: 15px 18px;
    }

    .order-header__inner {
        grid-template-columns: auto 1fr auto;
    }

    .order-intro {
        padding: 35px 22px 10px;
    }

    .order-intro__container {
        grid-template-columns: 1fr 330px;
        gap: 30px;
    }

    .order-intro__character {
        min-height: 400px;
    }

    .order-intro__character-image {
        width: 310px;
    }

    .order-intro__bubble {
        right: -5px;
        top: 30px;
    }

    .order-form-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .order-step {
        padding: 32px;
    }

    .order-choice-grid {
        grid-template-columns: repeat(2, calc((100% - 12px) / 2));
    }

    .order-style-grid {
        grid-template-columns: repeat(3, calc((100% - 20px) / 3));
    }

    .order-feature-grid {
        grid-template-columns: repeat(3, calc((100% - 20px) / 3));
    }

}
@media (max-width: 680px) {

    body {
        font-size: 14px;
    }


    /* HEADER */

    .order-header {
        padding: 10px 12px;
    }

    .order-header__inner {
        min-height: 63px;
        padding: 9px 10px;
        border-radius: 20px;
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }

    .order-header__logo-mark {
        width: 37px;
        height: 37px;
        border-radius: 12px;
        font-size: 16px;
    }

    .order-header__logo-name {
        font-size: 14px;
    }

    .order-header__center {
        align-items: flex-start;
        padding-right: 5px;
    }

    .order-header__eyebrow {
        font-size: 7px;
    }

    .order-header__title {
        font-size: 9px;
    }

    .order-theme-button {
        width: 39px;
        height: 39px;
        border-radius: 12px;
    }

    .order-theme-button__sun,
    .order-theme-button__moon {
        font-size: 15px;
    }


    /* INTRO */

    .order-intro {
        padding: 30px 17px 0;
    }

    .order-intro__container {
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .order-intro__content {
        padding-top: 10px;
    }

    .order-intro__eyebrow {
        padding: 6px 9px;
        font-size: 8px;
    }

    .order-intro__title {
        margin-top: 17px;
        font-size: 39px;
        line-height: 1.3;
    }

    .order-intro__description {
        margin-top: 16px;
        font-size: 11px;
        line-height: 2.15;
    }

    .order-intro__note {
        width: auto;
        margin-top: 17px;
        padding: 8px 10px;
        font-size: 9px;
    }

    .order-intro__note-icon {
        width: 23px;
        height: 23px;
    }

    .order-intro__character {
        min-height: 330px;
        margin-top: -4px;
    }

    .order-intro__character-glow {
        width: 240px;
        height: 240px;
    }

    .order-intro__character-image {
        width: 275px;
        max-height: 340px;
    }

    .order-intro__bubble {
        top: 18px;
        right: 5px;
        max-width: 145px;
        padding: 10px 12px;
        border-radius: 14px 14px 4px 14px;
        font-size: 8px;
        line-height: 1.8;
    }


    /* PROGRESS */

    .order-progress {
        padding: 5px 15px 27px;
        overflow: hidden;
    }

    .order-progress__container {
        min-width: 580px;
    }

    .order-progress__line {
        right: 5%;
        left: 5%;
        top: 15px;
    }
	.order-progress__number {
        width: 31px;
        height: 31px;
        border-width: 3px;
        font-size: 8px;
    }

    .order-progress__label {
        font-size: 8px;
    }


    /* FORM */

    .order-form-section {
        padding: 0 12px 55px;
    }

    .order-step {
        padding: 23px 16px;
        border-radius: 27px;
    }

    .order-step__heading {
        padding-bottom: 21px;
    }

    .order-step__eyebrow {
        font-size: 8px;
    }

    .order-step__title {
        margin-top: 5px;
        font-size: 23px;
        line-height: 1.55;
    }

    .order-step__description {
        font-size: 9px;
    }


    /* FIELDS */

    .order-field-group {
        margin-top: 24px;
    }

    .order-fields-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 19px;
    }

    .order-fields-grid .order-field {
        margin-top: 19px;
    }

    .order-field {
        margin-top: 19px;
    }

    .order-field-label {
        font-size: 10px;
        margin-bottom: 7px;
    }

    .order-field-label small {
        font-size: 7px;
    }

    .order-input {
        min-height: 49px;
        border-radius: 14px;
        padding: 0 13px;
        font-size: 10px;
    }

    .order-textarea {
        min-height: 125px;
        border-radius: 14px;
        padding: 12px 13px;
        font-size: 10px;
    }

    .order-field-hint {
        font-size: 8px;
    }

    .order-field-error {
        font-size: 8px;
    }


    /* PROJECT CHOICES */

    .order-choice-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .order-choice {
        min-height: 78px;
        padding: 10px;
        border-radius: 17px;
        gap: 11px;
    }

    .order-choice__visual {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 13px;
        font-size: 18px;
    }

    .order-choice__content strong {
        font-size: 10px;
    }

    .order-choice__content small {
        font-size: 8px;
    }


    /* STYLE */

    .order-style-grid {
        grid-template-columns: repeat(2, calc((100% - 8px) / 2));
        gap: 8px;
    }

    .order-style-choice {
        min-height: 130px;
        padding: 12px;
        border-radius: 16px;
    }

    .order-style-choice__sample {
        height: 68px;
        font-size: 24px;
    }

    .order-style-choice strong {
        font-size: 10px;
    }

    .order-style-choice small {
        font-size: 8px;
    }


    /* TAGS */

    .order-tag-grid {
        gap: 6px;
    }

    .order-tag span {
        padding: 7px 11px;
        border-radius: 10px;
        font-size: 8px;
    }


    /* FEATURES */

    .order-feature-grid {
        grid-template-columns: repeat(2, calc((100% - 8px) / 2));
        gap: 8px;
    }

    .order-feature {
        min-height: 82px;
        padding: 11px;
        border-radius: 15px;
    }

    .order-feature__icon {
        width: 27px;
        height: 27px;
        border-radius: 8px;
        font-size: 11px;
    }

    .order-feature > span:last-child {
        font-size: 8px;
    }
	/* QUESTIONS */

    .order-question {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
        padding: 17px 0;
    }

    .order-question__content strong {
        font-size: 10px;
    }

    .order-question__content span {
        font-size: 8px;
    }

    .order-toggle-group {
        width: 100%;
    }

    .order-toggle-group label {
        flex: 1;
    }

    .order-toggle-group span {
        min-width: 0;
        width: 100%;
        padding: 7px 10px;
        font-size: 9px;
    }


    /* TIME */

    .order-time-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .order-time-choice {
        min-height: 78px;
        padding: 13px;
        border-radius: 15px;
    }

    .order-time-choice strong {
        font-size: 10px;
    }

    .order-time-choice span {
        font-size: 8px;
    }


    /* BUDGET */

    .order-budget-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .order-budget-choice span {
        padding: 10px;
        border-radius: 11px;
        font-size: 8px;
    }


    /* CONTACT */

    .order-contact-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .order-contact-choice {
        min-height: 53px;
        border-radius: 13px;
        justify-content: flex-start;
        padding-right: 13px;
    }

    .order-contact-choice__icon {
        width: 26px;
        height: 26px;
    }

    .order-contact-choice span:last-child {
        font-size: 9px;
    }


    /* CONSENT */

    .order-consent {
        margin-top: 22px;
        padding: 12px;
        border-radius: 14px;
    }

    .order-consent__check {
        flex-basis: 20px;
        width: 20px;
        height: 20px;
        border-radius: 6px;
    }

    .order-consent__text {
        font-size: 8px;
        line-height: 1.85;
    }


    /* SUMMARY */

    .order-summary {
        padding: 22px 15px;
        border-radius: 26px;
    }

    .order-summary__header {
        padding-bottom: 17px;
    }

    .order-summary__title {
        font-size: 20px;
        line-height: 1.5;
    }

    .order-summary__eyebrow {
        font-size: 7px;
    }

    .order-summary__mark {
        padding: 5px 7px;
        font-size: 7px;
    }

    .order-summary__body {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: 17px;
    }

    .order-summary-card {
        min-height: 62px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .order-summary-card span {
        font-size: 7px;
    }

    .order-summary-card strong {
        font-size: 9px;
    }

    .order-summary__message {
        margin-top: 13px;
        padding: 10px;
        border-radius: 12px;
    }

    .order-summary__message p {
        font-size: 8px;
    }
	.order-navigation {
        margin-top: 14px;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .order-navigation__progress {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 3px;
    }

    .order-navigation__back,
    .order-navigation__next,
    .order-navigation__submit {
        min-height: 48px;
        border-radius: 14px;
        padding: 0 11px;
        font-size: 8px;
    }

    .order-navigation__submit {
        grid-column: 1 / -1;
    }


    /* TRUST */

    .order-trust {
        padding: 0 12px 45px;
    }

    .order-trust__container {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 9px;
        border-radius: 19px;
    }

    .order-trust__item {
        padding: 9px;
    }

    .order-trust__item strong {
        font-size: 9px;
    }

    .order-trust__item p {
        font-size: 7px;
    }


    /* FOOTER */

    .order-footer {
        padding: 25px 15px;
    }

    .order-footer__inner {
        grid-template-columns: 1fr auto;
        gap: 12px;
    }

    .order-footer__inner p {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 7px;
    }

    .order-footer__logo {
        font-size: 15px;
    }

    .order-footer__back {
        font-size: 8px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *:before,
    *:after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
	}}
.vela-footer {

    position: relative;

    overflow: hidden;

    padding: 90px 24px 28px;

    background: #f4f0ff;

    border-top: 1px solid rgba(112, 82, 190, 0.12);

}

.vela-footer__glow {

    position: absolute;

    width: 420px;

    height: 420px;

    top: -220px;

    right: 8%;

    border-radius: 50%;

    background: rgba(178, 143, 255, 0.16);

    filter: blur(80px);

    pointer-events: none;

}

.vela-footer__inner {

    position: relative;

    z-index: 2;

    max-width: 1180px;

    margin: 0 auto;

}

/* TOP */

.vela-footer__top {

    display: grid;

    grid-template-columns: 1fr 420px;

    gap: 80px;

    align-items: end;

    padding-bottom: 70px;

}

.vela-footer__brand {

    max-width: 390px;

}

.vela-footer__logo {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #211b2d;

    text-decoration: none;

}

.vela-footer__logo-mark {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    border-radius: 15px;

    background: #211b2d;

    color: #ffffff;

    font-size: 21px;

    font-weight: 800;

}

.vela-footer__logo-name {

    font-size: 25px;

    font-weight: 800;

    letter-spacing: 4px;

}

.vela-footer__description {

    margin: 24px 0 0;

    color: #716a7d;

    font-size: 14px;

    line-height: 2.2;

}

/* CTA */

.vela-footer__cta {

    padding: 28px;

    border: 1px solid rgba(112, 82, 190, 0.15);

    border-radius: 28px;

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

    box-shadow: 0 20px 60px rgba(71, 45, 126, 0.08);

    backdrop-filter: blur(16px);

}

.vela-footer__cta-label {

    display: block;

    margin-bottom: 14px;

    color: #9575d4;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    direction: ltr;

}

.vela-footer__cta h2 {

    margin: 0 0 22px;

    color: #211b2d;

    font-size: 25px;

    line-height: 1.5;

}

.vela-footer__cta-button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 17px;

    border-radius: 16px;

    background: #211b2d;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    transition: transform 0.3s ease,

                box-shadow 0.3s ease;

}

.vela-footer__cta-button:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(33, 27, 45, 0.2);

}

.vela-footer__cta-arrow {

    font-size: 19px;

}

/* MIDDLE */

.vela-footer__middle {

    display: grid;

    grid-template-columns: 180px 180px 1fr;

    gap: 70px;

    padding: 45px 0;

    border-top: 1px solid rgba(112, 82, 190, 0.12);

    border-bottom: 1px solid rgba(112, 82, 190, 0.12);

}

.vela-footer__column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 14px;

}

.vela-footer__column-title {

    margin-bottom: 8px;

    color: #a094b4;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.vela-footer__column a {

    color: #514a5d;

    font-size: 13px;

    text-decoration: none;

    transition: color 0.25s ease,

                transform 0.25s ease;

}

.vela-footer__column a:hover {

    color: #7954bd;

    transform: translateX(-4px);

}

.vela-footer__note {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 18px;

}

.vela-footer__note-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    border-radius: 18px;

    background: #ffffff;

    color: #8d69cb;

    font-size: 21px;

    box-shadow: 0 12px 30px rgba(71, 45, 126, 0.08);

}

.vela-footer__note p {

    max-width: 190px;

    margin: 0;

    color: #514a5d;

    font-size: 14px;

    line-height: 1.9;

}

/* BOTTOM */
.vela-footer__bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 25px;

    color: #958da0;

    font-size: 10px;

}

.vela-footer__code {

    direction: ltr;

}

.vela-footer__code b {

    color: #7954bd;

    font-weight: 700;

}

.vela-footer__back {

    color: #514a5d;

    text-decoration: none;

    transition: color 0.25s ease;

}

.vela-footer__back:hover {

    color: #7954bd;

}

/* DARK MODE */

body.dark-mode .vela-footer {

    background: #15121c;

    border-top-color: rgba(255, 255, 255, 0.08);

}

body.dark-mode .vela-footer__logo {

    color: #ffffff;

}

body.dark-mode .vela-footer__logo-mark {

    background: #ffffff;

    color: #211b2d;

}

body.dark-mode .vela-footer__description,

body.dark-mode .vela-footer__column a,

body.dark-mode .vela-footer__note p {

    color: #aaa3b5;

}

body.dark-mode .vela-footer__cta {

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

    border-color: rgba(255, 255, 255, 0.09);

}

body.dark-mode .vela-footer__cta h2 {

    color: #ffffff;

}

body.dark-mode .vela-footer__cta-button {

    background: #ffffff;

    color: #211b2d;

}

body.dark-mode .vela-footer__middle {

    border-color: rgba(255, 255, 255, 0.08);

}

body.dark-mode .vela-footer__note-icon {

    background: #211d28;

}

body.dark-mode .vela-footer__back {

    color: #aaa3b5;

}

/* MOBILE */

@media (max-width: 760px) {

    .vela-footer {

        padding: 65px 18px 24px;

    }

    .vela-footer__top {

        grid-template-columns: 1fr;

        gap: 38px;

        padding-bottom: 45px;

    }

    .vela-footer__brand {

        max-width: 100%;

    }

    .vela-footer__middle {

        grid-template-columns: 1fr 1fr;

        gap: 40px 25px;

        padding: 35px 0;

    }

    .vela-footer__note {

        grid-column: 1 / -1;

        justify-content: flex-start;

        padding-top: 8px;

    }

    .vela-footer__bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 13px;

    }

}