/* ============================================================
   SKAITE TECHNOLOGIES
   SECTIONS.CSS — POLISHED VERSION
   ------------------------------------------------------------
   Shared section foundations and section-specific styling.
   Existing selectors and responsive behavior are preserved.
   ============================================================ */

/* ============================================================
 * SKAITE TECHNOLOGIES
 * SECTIONS.CSS — FILE 04
 * ------------------------------------------------------------
 * Contains:
 * - Shared section styling
 * - Section containers
 * - Section headings
 * - Section labels
 * - Shared cards
 * - Shared buttons
 * - About
 * - Services
 * - How We Work
 * - Solutions
 * - Why Choose SKAITE
 * - Team
 * - Contact
 * - Footer foundation
 * NOTE:
 * Detailed content styling can be expanded section-by-section.
 * ============================================================ */

/* ============================================================
 * 01. SHARED SECTION VARIABLES
 * ============================================================ */

:root {
    --section-padding: 110px 0;
    --section-padding-small: 80px 0;
    --container-width: 1280px;
    --section-bg: #ffffff;
    --section-bg-soft: #f7f9ff;
    --section-bg-blue: #f3f7ff;
}

/* ============================================================
 * 02. SHARED SECTION CONTAINER
 * ============================================================ */

.section-container {
    width: min(
            var(--container-width),
            calc(100% - 60px)
        );
    margin: 0 auto;
}

/* ============================================================
 * 03. SHARED SECTION
 * ============================================================ */

.section {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
}

/* ============================================================
 * 04. LIGHT SECTION
 * ============================================================ */

.section-light {
    background: var(--white);
}

/* ============================================================
 * 05. SOFT SECTION
 * ============================================================ */

.section-soft {
    background: var(--section-bg-soft);
}

/* ============================================================
 * 06. BLUE SECTION
 * ============================================================ */

.section-blue {
    background: var(--section-bg-blue);
}

/* ============================================================
 * 07. SECTION HEADER
 * ============================================================ */

.section-header {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

/* ============================================================
 * 08. SECTION EYEBROW
 * ============================================================ */

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 31px;
    padding: 0 14px;
    margin-bottom: 16px;
    border: 1px solid
        #dce6ff;
    border-radius: 50px;
    color: #3153b3;
    background: #f2f6ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* ============================================================
 * 09. SECTION EYEBROW DOT
 * ============================================================ */

.section-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );
}

/* ============================================================
 * 10. SECTION TITLE
 * ============================================================ */

.section-title {
    margin-bottom: 18px;
    color: var(--navy);
    font-size: clamp(
            34px,
            4vw,
            52px
        );
    line-height: 1.12;
    letter-spacing: -1.5px;
    font-weight: 800;
}

/* ============================================================
 * 11. SECTION TITLE GRADIENT
 * ============================================================ */

.section-title-gradient {
    background: linear-gradient(
            90deg,
            var(--blue),
            var(--purple)
        );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
 * 12. SECTION DESCRIPTION
 * ============================================================ */

.section-description {
    max-width: 680px;
    margin: 0 auto;
    color: var(--text);
    font-size: 15px;
    line-height: 1.8;
}

/* ============================================================
 * 13. SECTION DECORATIVE GLOW
 * ============================================================ */

.section-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .22;
    pointer-events: none;
}

.section-glow-blue {
    background: rgba(8, 124, 255, .25);
}

.section-glow-purple {
    background: rgba(112, 55, 239, .25);
}

/* ============================================================
 * 14. SHARED GRID
 * ============================================================ */

.section-grid {
    display: grid;
    gap: 25px;
}

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

.section-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.section-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ============================================================
 * 15. SHARED CARD
 * ============================================================ */

.section-card {
    position: relative;
    padding: 30px;
    border: 1px solid
        rgba(57, 78, 151, .09);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-soft);
    transition: transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.section-card:hover {
    transform: translateY(-6px);
    border-color: rgba(8, 124, 255, .15);
    box-shadow: var(--shadow);
}

/* ============================================================
 * 16. CARD ICON
 * ============================================================ */

.card-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #573ff0;
    background: linear-gradient(
            135deg,
            #eef4ff,
            #f3edff
        );
    font-size: 23px;
}

/* ============================================================
 * 17. CARD TITLE
 * ============================================================ */

.card-title {
    margin-bottom: 10px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
}

/* ============================================================
 * 18. CARD DESCRIPTION
 * ============================================================ */

.card-description {
    color: var(--text);
    font-size: 13px;
    line-height: 1.75;
}

/* ============================================================
 * 19. SHARED SECTION BUTTON AREA
 * ============================================================ */

.section-actions {
    margin-top: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* ============================================================
 * 20. ABOUT SECTION FOUNDATION
 * ============================================================ */

.about-section {
    background: var(--white);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.about-visual {
    position: relative;
}

.about-content-text {
    max-width: 600px;
}

.about-content-text .section-description {
    margin: 0;
}

/* ============================================================
 * 21. ABOUT IMAGE
 * ============================================================ */

.about-image {
    width: 100%;
    border-radius: var(--radius-xl);
    object-fit: cover;
    box-shadow: var(--shadow);
}

/* ============================================================
 * 22. SERVICES FOUNDATION
 * ============================================================ */

.services-section {
    background: var(--section-bg-soft);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* ============================================================
 * 23. SERVICE CARD
 * ============================================================ */

.service-card {
    padding: 30px 25px;
}

.service-card .card-icon {
    margin-bottom: 18px;
}

/* ============================================================
 * 24. HOW WE WORK FOUNDATION
 * ============================================================ */

.how-we-work-section {
    background: var(--white);
}

.workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.workflow-card {
    position: relative;
    text-align: center;
}

.workflow-number {
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white);
    background: linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );
    font-size: 13px;
    font-weight: 700;
}

/* ============================================================
 * 25. SOLUTIONS FOUNDATION
 * ============================================================ */

.solutions-section {
    background: var(--section-bg-soft);
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* ============================================================
 * 26. SOLUTION CARD
 * ============================================================ */

.solution-card {
    overflow: hidden;
    padding: 0;
}

.solution-image {
    width: 100%;
    height: 210px;
    object-fit: cover;
    background: #eef3ff;
}

.solution-content {
    padding: 25px;
}

.solution-badge {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    margin-bottom: 12px;
    border-radius: 50px;
    color: #4f40c7;
    background: #f0edff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ============================================================
 * 27. COMING SOON
 * ============================================================ */

.coming-soon {
    position: relative;
}

.coming-soon::after {
    content: "COMING SOON";
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 6px 10px;
    border-radius: 50px;
    color: var(--white);
    background: linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* ============================================================
 * 28. WHY CHOOSE FOUNDATION
 * ============================================================ */

.why-choose-section {
    background: var(--white);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* ============================================================
 * 29. TEAM FOUNDATION
 * ============================================================ */

.team-section {
    background: var(--section-bg-soft);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.team-card {
    text-align: center;
}

.team-photo {
    width: 110px;
    height: 110px;
    margin: 0 auto 20px;
    border-radius: 50%;
    object-fit: cover;
    background: #edf2ff;
}

/* ============================================================
 * 30. CONTACT FOUNDATION
 * ============================================================ */

.contact-section {
    background: linear-gradient(
            135deg,
            #071642,
            #162b70
        );
    color: var(--white);
}

.contact-section .section-title {
    color: var(--white);
}

.contact-section .section-description {
    color: rgba(255, 255, 255, .75);
}

.contact-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
 * 31. CONTACT INFO
 * ============================================================ */

.contact-info {
    display: grid;
    gap: 16px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contact-info-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--white);
    background: rgba(255, 255, 255, .10);
}

.contact-info-text strong {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
}

.contact-info-text span {
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
}

/* ============================================================
 * 32. CONTACT FORM
 * ============================================================ */

.contact-form {
    padding: 30px;
    border: 1px solid
        rgba(255, 255, 255, .10);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.form-group {
    margin-bottom: 17px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .85);
    font-size: 11px;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    border: 1px solid
        rgba(255, 255, 255, .14);
    border-radius: 10px;
    outline: none;
    color: var(--white);
    background: rgba(255, 255, 255, .07);
    font-size: 13px;
    transition: border-color .25s ease,
        background .25s ease;
}

.form-group input {
    height: 48px;
    padding: 0 14px;
}

.form-group textarea {
    min-height: 125px;
    padding: 13px 14px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, .42);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: rgba(16, 201, 255, .65);
    background: rgba(255, 255, 255, .10);
}

/* ============================================================
 * 33. FOOTER FOUNDATION
 * ============================================================ */

.site-footer {
    position: relative;
    padding: 35px 0;
    color: rgba(255, 255, 255, .65);
    background: #04102f;
}

.footer-container {
    width: min(
            var(--container-width),
            calc(100% - 60px)
        );
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-logo img {
    object-fit: contain;
}

.footer-logo .brand-symbol {
    width: 32px;
    height: 32px;
}

.footer-logo .brand-text {
    width: 95px;
}

.footer-copy {
    font-size: 10px;
}

/* ============================================================
 * 34. SOCIAL LINKS
 * ============================================================ */

.social-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid
        rgba(255, 255, 255, .10);
    border-radius: 10px;
    color: rgba(255, 255, 255, .70);
    background: rgba(255, 255, 255, .05);
    font-size: 12px;
    transition: background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.social-link:hover {
    color: var(--white);
    background: linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );
    transform: translateY(-2px);
}

/* ============================================================
 * 35. RESPONSIVE SECTION FOUNDATION
 * ============================================================ */

@media (max-width: 1024px) {
    .section {
        padding: 90px 0;
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .workflow-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-content {
        gap: 40px;
    }
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-grid {
        gap: 30px;
    }
}

/* ============================================================
 * 36. MOBILE SECTION FOUNDATION
 * ============================================================ */

@media (max-width: 768px) {
    .section {
        padding: 75px 0;
    }
    .section-container {
        width: calc(100% - 30px);
    }
    .section-header {
        margin-bottom: 40px;
    }
    .section-title {
        font-size: 34px;
        letter-spacing: -1px;
    }
    .section-description {
        font-size: 13px;
        line-height: 1.7;
    }
    .section-grid-2,
    .section-grid-3,
    .section-grid-4 {
        grid-template-columns: 1fr;
    }
    .about-content {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .workflow-grid {
        grid-template-columns: 1fr;
    }
    .solutions-grid {
        grid-template-columns: 1fr;
    }
    .why-grid {
        grid-template-columns: 1fr;
    }
    .team-grid {
        grid-template-columns: 1fr;
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .footer-container {
        width: calc(100% - 30px);
        flex-direction: column;
        text-align: center;
    }
    .section-card {
        padding: 25px;
    }
}

/* ============================================================
 * 37. SMALL MOBILE
 * ============================================================ */

@media (max-width: 480px) {
    .section {
        padding: 65px 0;
    }
    .section-container {
        width: calc(100% - 24px);
    }
    .section-title {
        font-size: 30px;
    }
    .section-eyebrow {
        font-size: 8px;
    }
    .section-card {
        padding: 22px;
    }
    .contact-form {
        padding: 22px;
    }
    .footer-container {
        width: calc(100% - 24px);
    }
}

/* ============================================================
 * SKAITE TECHNOLOGIES
 * ABOUT SECTION — UPDATED CSS
 * ------------------------------------------------------------
 * Layout:
 * Desktop  : IMAGE LEFT / TEXT RIGHT
 * Mobile   : IMAGE TOP / TEXT BELOW
 * ============================================================ */

/* ============================================================
 * 01. ABOUT SECTION
 * ============================================================ */

.about-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
            180deg,
            #ffffff 0%,
            #f8faff 100%
        );
}

/* ============================================================
 * 02. ABOUT CONTAINER
 * ============================================================ */

.about-container {
    position: relative;
    z-index: 2;
}

/* ============================================================
 * 03. BACKGROUND GLOWS
 * ============================================================ */

.about-glow-one {
    top: 80px;
    left: -180px;
}

.about-glow-two {
    right: -180px;
    bottom: 100px;
}

/* ============================================================
 * 04. MAIN ABOUT GRID
 * ============================================================ */

.about-content {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr)
        minmax(0, 1fr);
    align-items: center;
    gap: 75px;
}

/* ============================================================
 * 05. LEFT — VISUAL
 * ============================================================ */

.about-visual {
    position: relative;
    min-width: 0;
    width: 100%;
}

/* ============================================================
 * 06. VISUAL CARD
 * ============================================================ */

.about-visual-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 440px;
    border-radius: 30px;
    overflow: visible;
}

/* ============================================================
 * 07. ABOUT IMAGE
 * ============================================================ */

.about-main-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 650px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(
            0 25px 40px
            rgba(25, 67, 150, 0.16)
        );
    transition: transform 0.45s ease;
}

/* ============================================================
 * 08. IMAGE HOVER
 * ============================================================ */

.about-visual-card:hover
.about-main-image {
    transform: translateY(-6px);
}

/* ============================================================
 * 09. IMAGE GLOW
 * ============================================================ */

.about-image-glow {
    position: absolute;
    z-index: 1;
    width: 75%;
    height: 75%;
    top: 12.5%;
    left: 12.5%;
    border-radius: 50%;
    background: radial-gradient(
            circle,
            rgba(20, 129, 255, 0.20) 0%,
            rgba(100, 48, 255, 0.12) 45%,
            transparent 72%
        );
    filter: blur(30px);
    pointer-events: none;
}

/* ============================================================
 * 10. RIGHT — TEXT CONTENT
 * ============================================================ */

.about-content-text {
    position: relative;
    max-width: 650px;
}

/* ============================================================
 * 11. ABOUT EYEBROW
 * ============================================================ */

.about-content-text .section-eyebrow {
    margin-left: 0;
    margin-right: 0;
}

/* ============================================================
 * 12. ABOUT TITLE
 * ============================================================ */

.about-title {
    margin-top: 8px;
    margin-bottom: 14px;
    font-size: clamp(
            40px,
            4.2vw,
            58px
        );
    line-height: 1.05;
}

/* ============================================================
 * 13. TITLE DECORATIVE LINE
 * ============================================================ */

.about-title-line {
    width: 72px;
    height: 4px;
    margin-bottom: 28px;
    border-radius: 50px;
    background: linear-gradient(
            90deg,
            #08c8ff,
            #176dff,
            #7a22ff
        );
}

/* ============================================================
 * 14. DESCRIPTION
 * ============================================================ */

.about-description {
    max-width: 620px;
    margin: 0 0 17px;
    color: #5b6b8d;
    font-size: 14px;
    line-height: 1.85;
}

/* ============================================================
 * 15. VISION & MISSION
 * ============================================================ */

.about-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 26px;
}

/* ============================================================
 * 16. VALUE CARD
 * ============================================================ */

.about-value-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 150px;
    padding: 19px;
    border: 1px solid
        rgba(31, 71, 153, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 10px 30px
        rgba(32, 64, 125, 0.06);
    transition: transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* ============================================================
 * 17. VALUE CARD HOVER
 * ============================================================ */

.about-value-card:hover {
    transform: translateY(-4px);
    border-color: rgba(55, 92, 232, 0.18);
    box-shadow: 0 15px 35px
        rgba(32, 64, 125, 0.10);
}

/* ============================================================
 * 18. VALUE ICON
 * ============================================================ */

.about-value-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(
            135deg,
            #167eff,
            #7025ff
        );
    font-size: 14px;
    font-weight: 700;
}

/* ============================================================
 * 19. VALUE TITLE
 * ============================================================ */

.about-value-card h3 {
    margin: 2px 0 7px;
    color: #10245a;
    font-size: 14px;
    line-height: 1.3;
}

/* ============================================================
 * 20. VALUE DESCRIPTION
 * ============================================================ */

.about-value-card p {
    margin: 0;
    color: #687896;
    font-size: 10px;
    line-height: 1.65;
}

/* ============================================================
 * 30. TABLET
 * ============================================================ */

@media (max-width: 1024px) {
    .about-content {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .about-visual-card {
        min-height: 360px;
    }
    .about-main-image {
        max-width: 560px;
    }
    .about-title {
        font-size: 42px;
    }
    .about-description {
        font-size: 13px;
    }
    .about-values {
        grid-template-columns: 1fr;
    }
    .about-value-card {
        min-height: auto;
    }
}

/* ============================================================
 * 31. MOBILE
 * ============================================================ */

@media (max-width: 768px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    /* * Image appears ABOVE text */
    .about-visual {
        order: 1;
    }
    .about-content-text {
        order: 2;
        max-width: 100%;
    }
    .about-visual-card {
        min-height: 300px;
    }
    .about-main-image {
        max-width: 600px;
    }
    .about-title {
        font-size: 38px;
    }
    .about-description {
        font-size: 13px;
        line-height: 1.75;
    }
    .about-values {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * 32. SMALL MOBILE
 * ============================================================ */

@media (max-width: 480px) {
    .about-title {
        font-size: 32px;
    }
    .about-title-line {
        margin-bottom: 22px;
    }
    .about-visual-card {
        min-height: 250px;
    }
    .about-main-image {
        width: 105%;
        max-width: none;
    }
    .about-value-card {
        padding: 16px;
    }
    .about-value-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}

/* ============================================================
 * SKAITE TECHNOLOGIES
 * SERVICES SECTION
 * ============================================================ */

/* ============================================================
 * 01. SERVICES SECTION
 * ============================================================ */

.services-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 105px 0
        100px;
    background: linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcff 55%,
            #f7f9ff 100%
        );
}

/* ============================================================
 * 02. SERVICES CONTAINER
 * ============================================================ */

.services-container {
    position: relative;
    z-index: 2;
    width: min(
            1240px,
            calc(100% - 40px)
        );
    margin: 0 auto;
}

/* ============================================================
 * 03. BACKGROUND GLOW
 * ============================================================ */

.services-glow {
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    opacity: 0.20;
}

.services-glow-left {
    left: -300px;
    top: 350px;
    background: rgba(
            35,
            122,
            255,
            0.25
        );
}

.services-glow-right {
    right: -300px;
    top: 450px;
    background: rgba(
            116,
            42,
            255,
            0.22
        );
}

/* ============================================================
 * 04. SERVICES HEADER
 * ============================================================ */

.services-header {
    max-width: 800px;
    margin: 0 auto 70px;
    text-align: center;
}

/* ============================================================
 * 05. SERVICES BADGE
 * ============================================================ */

.services-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid
        rgba(
            47,
            94,
            255,
            0.28
        );
    border-radius: 50px;
    color: #3158d9;
    background: rgba(
            255,
            255,
            255,
            0.92
        );
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.35px;
}

/* ============================================================
 * 06. BADGE DOT
 * ============================================================ */

.services-badge-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(
            135deg,
            #167dff,
            #6626ff
        );
    box-shadow: 0 0 0 4px
        rgba(
            47,
            91,
            255,
            0.08
        );
}

/* ============================================================
 * 07. SERVICES TITLE
 * ============================================================ */

.services-title {
    margin: 20px 0 14px;
    color: #0d2052;
    font-size: clamp(
            40px,
            4.7vw,
            58px
        );
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.8px;
}

/* ============================================================
 * 08. TITLE GRADIENT
 * ============================================================ */

.services-title span {
    background: linear-gradient(
            90deg,
            #147eff 0%,
            #3159ff 45%,
            #8d20ff 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
 * 09. TITLE LINE
 * ============================================================ */

.services-heading-line {
    width: 70px;
    height: 4px;
    margin: 0 auto 20px;
    border-radius: 50px;
    background: linear-gradient(
            90deg,
            #167dff,
            #4c40ff,
            #a31cff
        );
}

/* ============================================================
 * 10. SERVICES DESCRIPTION
 * ============================================================ */

.services-subtitle {
    max-width: 600px;
    margin: 0 auto;
    color: #71809f;
    font-size: 13px;
    line-height: 1.75;
}

/* ============================================================
 * 11. SERVICES NETWORK
 * ============================================================ */

.services-network {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr)
        350px
        minmax(0, 1fr);
    grid-template-rows: 230px
        230px;
    column-gap: 70px;
    row-gap: 40px;
    align-items: center;
    max-width: 1120px;
    min-height: 500px;
    margin: 0 auto;
}

/* ============================================================
 * 12. SERVICE CARD
 * ============================================================ */

.service-card {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    min-height: 176px;
    padding: 27px 28px;
    border: 1px solid
        rgba(
            38,
            78,
            163,
            0.08
        );
    border-radius: 18px;
    background: rgba(
            255,
            255,
            255,
            0.96
        );
    box-shadow: 0 15px 40px
        rgba(
            41,
            75,
            142,
            0.08
        );
    transition: transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* ============================================================
 * 13. CARD HOVER
 * ============================================================ */

.service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(
            48,
            91,
            240,
            0.16
        );
    box-shadow: 0 20px 45px
        rgba(
            42,
            76,
            145,
            0.12
        );
}

/* ============================================================
 * 14. CARD POSITIONS
 * ============================================================ */

.service-card-left {
    grid-column: 1;
}

.service-card-right {
    grid-column: 3;
}

.service-card-top {
    grid-row: 1;
}

.service-card-bottom {
    grid-row: 2;
}

/* ============================================================
 * 15. SERVICE ICON
 * ============================================================ */

.service-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
    box-shadow: 0 10px 22px
        rgba(
            45,
            83,
            210,
            0.18
        );
}

/* ============================================================
 * 16. BLUE ICON
 * ============================================================ */

.service-icon-blue {
    background: linear-gradient(
            145deg,
            #087dff,
            #3150f4
        );
}

/* ============================================================
 * 17. PURPLE ICON
 * ============================================================ */

.service-icon-purple {
    background: linear-gradient(
            145deg,
            #6632f5,
            #9017eb
        );
}

/* ============================================================
 * 18. SERVICE CONTENT
 * ============================================================ */

.service-content {
    flex: 1;
    min-width: 0;
}

/* ============================================================
 * 19. SERVICE TITLE
 * ============================================================ */

.service-content h3 {
    margin: 2px 0 10px;
    color: #102454;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -0.25px;
}

/* ============================================================
 * 20. SERVICE LINE
 * ============================================================ */

.service-line {
    width: 27px;
    height: 3px;
    margin-bottom: 10px;
    border-radius: 50px;
    background: linear-gradient(
            90deg,
            #167dff,
            #6b24ff
        );
}

/* ============================================================
 * 21. SERVICE DESCRIPTION
 * ============================================================ */

.service-content p {
    margin: 0;
    color: #71809f;
    font-size: 10px;
    line-height: 1.75;
}

/* ============================================================
 * 22. CENTER LOGO
 * ============================================================ */

.services-center {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(
            -50%,
            -50%
        );
}

/* ============================================================
 * 23. CENTER OUTER CIRCLE
 * ============================================================ */

.services-center-outer {
    position: relative;
    width: 205px;
    height: 205px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid
        rgba(
            65,
            104,
            255,
            0.13
        );
    border-radius: 50%;
    background: rgba(
            255,
            255,
            255,
            0.78
        );
    box-shadow: 0 20px 55px
        rgba(
            45,
            80,
            170,
            0.10
        );
}

/* ============================================================
 * 24. CENTER GLOW
 * ============================================================ */

.services-center-outer::before {
    content: "";
    position: absolute;
    inset: -25px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(
            circle,
            rgba(
                52,
                111,
                255,
                0.14
            ),
            rgba(
                122,
                43,
                255,
                0.08
            ),
            transparent 70%
        );
    filter: blur(12px);
}

/* ============================================================
 * 25. CENTER INNER CIRCLE
 * ============================================================ */

.services-center-inner {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid
        rgba(
            67,
            103,
            255,
            0.12
        );
    border-radius: 50%;
    background: linear-gradient(
            145deg,
            #ffffff,
            #f8faff
        );
    box-shadow: 0 10px 30px
        rgba(
            40,
            72,
            145,
            0.07
        );
}

/* ============================================================
 * 26. CENTER LOGO
 * ============================================================ */

.services-center-logo {
    display: block;
    width: 92px;
    height: 92px;
    object-fit: contain;
    object-position: center;
    transition: transform 0.35s ease;
}

/* ============================================================
 * 27. LOGO HOVER
 * ============================================================ */

.services-center:hover
.services-center-logo {
    transform: scale(1.07);
}

/* ============================================================
 * 28. CONNECTOR LINES
 * ------------------------------------------------------------
 * IMPORTANT:
 * Lines are attached directly to each card.
 * No connector dots are used.
 * ============================================================ */

.service-card-left::after,
.service-card-right::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 92px;
    height: 0;
    border-top: 1px dashed
        rgba(
            73,
            105,
            235,
            0.72
        );
    pointer-events: none;
}

/* ============================================================
 * 29. LEFT CONNECTOR
 * ============================================================ */

.service-card-left::after {
    right: -92px;
    transform-origin: left center;
}

/* ============================================================
 * 30. LEFT TOP LINE
 * ============================================================ */

.service-card-left.service-card-top::after {
    transform: rotate(
            14deg
        );
}

/* ============================================================
 * 31. LEFT BOTTOM LINE
 * ============================================================ */

.service-card-left.service-card-bottom::after {
    transform: rotate(
            -14deg
        );
}

/* ============================================================
 * 32. RIGHT CONNECTOR
 * ============================================================ */

.service-card-right::after {
    left: -92px;
    transform-origin: right center;
}

/* ============================================================
 * 33. RIGHT TOP LINE
 * ============================================================ */

.service-card-right.service-card-top::after {
    transform: rotate(
            -14deg
        );
}

/* ============================================================
 * 34. RIGHT BOTTOM LINE
 * ============================================================ */

.service-card-right.service-card-bottom::after {
    transform: rotate(
            14deg
        );
}

/* ============================================================
 * 35. TABLET
 * ============================================================ */

@media (max-width: 1100px) {
    .services-network {
        grid-template-columns: minmax(0, 1fr)
            300px
            minmax(0, 1fr);
        column-gap: 35px;
    }
    .service-card {
        padding: 23px 22px;
        gap: 14px;
    }
    .service-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        font-size: 19px;
    }
    .service-content h3 {
        font-size: 14px;
    }
    .service-content p {
        font-size: 9px;
    }
    .services-center {
        width: 220px;
        height: 220px;
    }
    .services-center-outer {
        width: 180px;
        height: 180px;
    }
    .services-center-inner {
        width: 132px;
        height: 132px;
    }
    .services-center-logo {
        width: 80px;
        height: 80px;
    }
    .service-card-left::after {
        right: -45px;
        width: 45px;
    }
    .service-card-right::after {
        left: -45px;
        width: 45px;
    }
}

/* ============================================================
 * 36. TABLET / SMALL LAPTOP
 * ============================================================ */

@media (max-width: 850px) {
    .services-section {
        padding: 80px 0;
    }
    .services-network {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto
            auto
            auto;
        min-height: auto;
        gap: 25px;
    }
    .service-card-left.service-card-top {
        grid-column: 1;
        grid-row: 1;
    }
    .service-card-right.service-card-top {
        grid-column: 2;
        grid-row: 1;
    }
    .services-center {
        position: relative;
        top: auto;
        left: auto;
        grid-column: 1 / 3;
        grid-row: 2;
        width: 230px;
        height: 230px;
        margin: 10px auto;
        transform: none;
    }
    .service-card-left.service-card-bottom {
        grid-column: 1;
        grid-row: 3;
    }
    .service-card-right.service-card-bottom {
        grid-column: 2;
        grid-row: 3;
    }
    /* Hide desktop connector lines */
    .service-card-left::after,
    .service-card-right::after {
        display: none;
    }
}

/* ============================================================
 * 37. MOBILE
 * ============================================================ */

@media (max-width: 620px) {
    .services-section {
        padding: 70px 0;
    }
    .services-container {
        width: calc(
                100% - 30px
            );
    }
    .services-header {
        margin-bottom: 40px;
    }
    .services-title {
        font-size: 36px;
        letter-spacing: -1px;
    }
    .services-subtitle {
        padding: 0 10px;
        font-size: 12px;
    }
    .services-network {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    /* Android */
    .service-card-left.service-card-top {
        order: 1;
    }
    /* Management */
    .service-card-right.service-card-top {
        order: 2;
    }
    /* Logo */
    .services-center {
        order: 3;
        width: 210px;
        height: 210px;
        margin: 15px auto;
    }
    /* Automation */
    .service-card-left.service-card-bottom {
        order: 4;
    }
    /* Support */
    .service-card-right.service-card-bottom {
        order: 5;
    }
    .service-card {
        width: 100%;
        min-height: auto;
        padding: 22px 20px;
        border-radius: 17px;
    }
    .service-card-left::after,
    .service-card-right::after {
        display: none;
    }
    .services-center-outer {
        width: 175px;
        height: 175px;
    }
    .services-center-inner {
        width: 125px;
        height: 125px;
    }
    .services-center-logo {
        width: 76px;
        height: 76px;
    }
}

/* ============================================================
 * 38. SMALL MOBILE
 * ============================================================ */

@media (max-width: 420px) {
    .services-title {
        font-size: 31px;
    }
    .services-badge {
        padding: 7px 13px;
        font-size: 9px;
    }
    .service-card {
        padding: 19px 16px;
        gap: 13px;
    }
    .service-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 17px;
    }
    .service-content h3 {
        font-size: 13px;
    }
    .service-content p {
        font-size: 9px;
    }
    .services-center {
        width: 190px;
        height: 190px;
    }
    .services-center-outer {
        width: 160px;
        height: 160px;
    }
    .services-center-inner {
        width: 115px;
        height: 115px;
    }
    .services-center-logo {
        width: 68px;
        height: 68px;
    }
}

/* ============================================================
 * END SERVICES SECTION
 * ============================================================ */

/* =========================================================
 * HOW WE WORK — COMPACT CARDS
 * ========================================================= */

.how-we-work-section {
    width: 100%;
    padding: 55px 0 60px;
    background: #ffffff;
}

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

.how-we-work-header {
    width: min(760px, calc(100% - 40px));
    margin: 0 auto 36px;
    text-align: center;
}

.how-we-work-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid #d7e1ff;
    border-radius: 50px;
    background: #f5f8ff;
    color: #155eef;
    font-size: 10px;
    font-weight: 700;
}

.how-we-work-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #08cfff,
        #245cff
    );
}

.how-we-work-title {
    margin: 15px 0 0;
    color: #071642;
    font-size: clamp(32px, 3.5vw, 44px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.how-we-work-title span {
    background: linear-gradient(
        90deg,
        #087cff,
        #304eff,
        #8b28ff
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.how-we-work-title-line {
    width: 70px;
    height: 3px;
    margin: 13px auto;
    border-radius: 50px;
    background: linear-gradient(
        90deg,
        #087cff,
        #5c35ff,
        #b52cff
    );
}

.how-we-work-description {
    margin: 0 auto;
    color: #52658d;
    font-size: 13px;
    line-height: 1.6;
}

/* =========================================================
 * CARDS CONTAINER
 * ========================================================= */

.how-we-work-process {
    width: min(1240px, calc(100% - 50px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

/* =========================================================
 * CARD
 * ========================================================= */

.process-card {
    position: relative;
    min-height: 158px;
    padding: 20px 18px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(30, 55, 120, 0.10);
    transition: transform 0.3s ease,
        box-shadow 0.3s ease;
}

.process-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(30, 55, 120, 0.15);
}

/* =========================================================
 * GRADIENTS
 * ========================================================= */

.process-card-blue {
    background: linear-gradient(
        135deg,
        #2764f5,
        #1554ed,
        #286eff
    );
}

.process-card-purple {
    background: linear-gradient(
        135deg,
        #7041f2,
        #6730ec,
        #7f45f5
    );
}

.process-card-cyan {
    background: linear-gradient(
        135deg,
        #1598ef,
        #079fe9,
        #13b4dc
    );
}

.process-card-pink {
    background: linear-gradient(
        135deg,
        #a03dde,
        #9135df,
        #a84ae8
    );
}

/* =========================================================
 * ANGLED EDGE
 * ========================================================= */

.process-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -13px;
    width: 27px;
    height: 100%;
    background: inherit;
    clip-path: polygon(
        0 0,
        50% 0,
        100% 50%,
        50% 100%,
        0 100%,
        45% 50%
    );
    z-index: 1;
}

/* =========================================================
 * ICON
 * ========================================================= */

.process-icon {
    position: relative;
    z-index: 3;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    color: #145fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.07);
}

.process-card-purple .process-icon,
.process-card-pink .process-icon {
    color: #7434ef;
}

.process-card-cyan .process-icon {
    color: #1267ef;
}

.process-icon span {
    font-size: 19px;
    line-height: 1;
    font-weight: 700;
}

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

.process-content {
    position: relative;
    z-index: 3;
    min-width: 0;
}

.process-number {
    display: block;
    margin-bottom: 3px;
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
}

.process-content h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
}

.process-line {
    width: 25px;
    height: 2px;
    margin: 7px 0;
    border-radius: 50px;
    background: #ffffff;
}

.process-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    line-height: 1.45;
}

/* =========================================================
 * RIGHT ARROWS
 * ========================================================= */

.process-arrow {
    position: absolute;
    top: 50%;
    right: -12px;
    width: 27px;
    height: 27px;
    transform: translateY(-50%);
    border: 3px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #2862f5;
    font-size: 14px;
    box-shadow: 0 5px 12px rgba(35, 70, 150, 0.12);
    z-index: 10;
}

.process-card-purple .process-arrow {
    color: #7133ed;
}

.process-card-cyan .process-arrow {
    color: #1175ef;
}

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

@media (max-width: 1100px) {
    .how-we-work-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .process-card::after,
    .process-arrow {
        display: none;
    }
}

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

@media (max-width: 650px) {
    .how-we-work-section {
        padding: 45px 0 50px;
    }
    .how-we-work-header {
        margin-bottom: 28px;
    }
    .how-we-work-title {
        font-size: 30px;
    }
    .how-we-work-description {
        font-size: 12px;
    }
    .how-we-work-process {
        width: calc(100% - 28px);
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .process-card {
        min-height: 125px;
        padding: 17px;
        border-radius: 15px;
        gap: 12px;
    }
    .process-icon {
        flex-basis: 45px;
        width: 45px;
        height: 45px;
    }
    .process-icon span {
        font-size: 17px;
    }
    .process-number {
        font-size: 19px;
    }
    .process-content h3 {
        font-size: 15px;
    }
    .process-content p {
        font-size: 10.5px;
    }
}

/* =========================================================
 * REDUCED MOTION
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .process-card {
        transition: none;
    }
    .process-card:hover {
        transform: none;
    }
}

/* =========================================================
 * SOLUTIONS SECTION
 * ========================================================= */

.solutions-section {
    position: relative;
    width: 100%;
    padding: 65px 0 65px;
    overflow: hidden;
    background: linear-gradient(
            180deg,
            #ffffff 0%,
            #fafbff 55%,
            #f5f7ff 100%
        );
}

/* =========================================================
 * BACKGROUND
 * ========================================================= */

.solutions-bg-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.16;
    pointer-events: none;
}

.solutions-bg-glow-left {
    top: 120px;
    left: -240px;
    background: #ff8a35;
}

.solutions-bg-glow-right {
    top: 80px;
    right: -240px;
    background: #3977ff;
}

.solutions-dots {
    position: absolute;
    top: 55px;
    right: 55px;
    width: 95px;
    height: 85px;
    opacity: 0.35;
    background-image: radial-gradient(
            #6485e8 1.4px,
            transparent 1.4px
        );
    background-size: 16px 16px;
    pointer-events: none;
}

/* =========================================================
 * CONTAINER
 * ========================================================= */

.solutions-container {
    position: relative;
    z-index: 2;
    width: min(
            1400px,
            calc(100% - 56px)
        );
    margin: 0 auto;
}

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

.solutions-header {
    max-width: 700px;
    margin: 0 auto 38px;
    text-align: center;
}

.solutions-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 29px;
    padding: 0 14px;
    border: 1px solid #dce3ff;
    border-radius: 50px;
    background: #f8faff;
    color: #172b67;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.solutions-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(
            135deg,
            #147eff,
            #713cff
        );
    box-shadow: 0 0 0 4px
        rgba(76, 64, 255, 0.08);
}

.solutions-title {
    margin: 14px 0 0;
    color: #071642;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.solutions-title span {
    display: block;
    background: linear-gradient(
            90deg,
            #087cff 0%,
            #3650ff 50%,
            #8b2cff 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.solutions-title-line {
    width: 68px;
    height: 3px;
    margin: 13px auto 12px;
    border-radius: 50px;
    background: linear-gradient(
            90deg,
            #087cff,
            #5638ff,
            #a52cff
        );
}

.solutions-description {
    max-width: 600px;
    margin: 0 auto;
    color: #607093;
    font-size: 12px;
    line-height: 1.65;
}

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

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* =========================================================
 * CARD
 * ========================================================= */

.solution-card {
    --theme: #2166f3;
    --theme-dark: #1556d8;
    --theme-soft: rgba(33, 102, 243, 0.10);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid
        rgba(25, 48, 100, 0.08);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 28px
        rgba(32, 55, 110, 0.09);
    transition: transform 0.3s ease,
        box-shadow 0.3s ease;
}

.solution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px
        rgba(32, 55, 110, 0.14);
}

/* =========================================================
 * APP THEMES
 * ========================================================= */

/* Food Desk */

.solution-card-food {
    --theme: #ff6a00;
    --theme-dark: #f45100;
    --theme-soft: rgba(255, 106, 0, 0.10);
}

/* Mini Mart */

.solution-card-mini {
    --theme: #00a94f;
    --theme-dark: #008f43;
    --theme-soft: rgba(0, 169, 79, 0.10);
}

/* Quick Queue */

.solution-card-queue {
    --theme: #2166f3;
    --theme-dark: #1455d5;
    --theme-soft: rgba(33, 102, 243, 0.10);
}

/* MyPG */

.solution-card-mypg {
    --theme: #1557e8;
    --theme-dark: #1046bf;
    --theme-soft: rgba(21, 87, 232, 0.10);
}

/* My Salon */

.solution-card-salon {
    --theme: #245ce8;
    --theme-dark: #1749c4;
    --theme-soft: rgba(36, 92, 232, 0.10);
}

/* =========================================================
 * IMAGE AREA
 * ========================================================= */

.solution-card-visual {
    position: relative;
    width: 100%;
    height: 190px;
    overflow: hidden;
    background: #f5f6fa;
}

/* =========================================================
 * APP IMAGE
 * ========================================================= */

.solution-app-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.35s ease;
}

.solution-card:hover .solution-app-image {
    transform: scale(1.025);
}

/* =========================================================
 * NUMBER
 * ========================================================= */

.solution-number {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ffffff;
    color: var(--theme);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 6px 16px
        rgba(20, 30, 60, 0.10);
}

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

.solution-card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 38px
        18px
        18px;
    background: #ffffff;
}

/* =========================================================
 * FLOATING ICON
 * ========================================================= */

.solution-icon {
    position: absolute;
    top: -28px;
    left: 18px;
    z-index: 15;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: var(--theme);
    font-size: 19px;
    box-shadow: 0 7px 18px
        rgba(30, 45, 80, 0.13);
}

/* =========================================================
 * TITLE
 * ========================================================= */

.solution-card-content h3 {
    margin: 0;
    color: #071642;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
}

/* =========================================================
 * CATEGORY
 * ========================================================= */

.solution-category {
    margin-top: 5px;
    color: var(--theme);
    font-size: 10.5px;
    line-height: 1.4;
    font-weight: 600;
}

/* =========================================================
 * FEATURES
 * ========================================================= */

.solution-features {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px
        0
        15px;
    padding: 0;
    list-style: none;
}

.solution-features li {
    position: relative;
    padding-left: 15px;
    color: #596987;
    font-size: 10px;
    line-height: 1.45;
}

.solution-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--theme);
    font-size: 10px;
    font-weight: 700;
}

/* =========================================================
 * PLATFORM
 * ========================================================= */

.solution-platform {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid
        var(--theme);
    border-radius: 50px;
    background: #ffffff;
    color: var(--theme);
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
}

/* =========================================================
 * BUTTON
 * ========================================================= */

.solution-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    margin-top: 11px;
    padding: 0 13px;
    border-radius: 9px;
    background: linear-gradient(
            90deg,
            var(--theme-dark),
            var(--theme)
        );
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.25s ease,
        box-shadow 0.25s ease;
}

.solution-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px
        var(--theme-soft);
}

.solution-button > span:last-child {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.solution-button:hover > span:last-child {
    transform: translateX(3px);
}

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

.solutions-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
    padding: 18px 22px;
    border: 1px solid
        rgba(81, 87, 230, 0.12);
    border-radius: 17px;
    background: linear-gradient(
            100deg,
            #f7f8ff,
            #f0edff
        );
    box-shadow: 0 10px 28px
        rgba(50, 70, 150, 0.05);
}

.solutions-cta-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
            135deg,
            #2869ff,
            #762cf0
        );
    color: #ffffff;
    font-size: 20px;
}

.solutions-cta-content {
    flex: 1;
}

.solutions-cta-content h3 {
    margin: 0 0 4px;
    color: #071642;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 800;
}

.solutions-cta-content p {
    margin: 0;
    max-width: 680px;
    color: #647394;
    font-size: 10.5px;
    line-height: 1.55;
}

.solutions-cta-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 20px;
    border-radius: 9px;
    background: linear-gradient(
            90deg,
            #176cff,
            #742cf0
        );
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px
        rgba(53, 74, 230, 0.18);
    transition: transform 0.25s ease,
        box-shadow 0.25s ease;
}

.solutions-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 23px
        rgba(53, 74, 230, 0.24);
}

.solutions-cta-button > span:last-child {
    font-size: 15px;
    transition: transform 0.25s ease;
}

.solutions-cta-button:hover > span:last-child {
    transform: translateX(3px);
}

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

@media (max-width: 1200px) {
    .solutions-container {
        width: min(
                1080px,
                calc(100% - 40px)
            );
    }
    .solutions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .solution-card-visual {
        height: 195px;
    }
}

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

@media (max-width: 850px) {
    .solutions-section {
        padding: 58px 0;
    }
    .solutions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .solution-card-visual {
        height: 190px;
    }
    .solutions-cta {
        flex-wrap: wrap;
    }
    .solutions-cta-button {
        margin-left: 68px;
    }
}

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

@media (max-width: 620px) {
    .solutions-section {
        padding: 50px 0 55px;
    }
    .solutions-container {
        width: calc(100% - 28px);
    }
    .solutions-header {
        margin-bottom: 28px;
    }
    .solutions-title {
        font-size: 30px;
        letter-spacing: -0.7px;
    }
    .solutions-description {
        font-size: 11px;
    }
    .solutions-dots {
        display: none;
    }
    .solutions-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .solution-card-visual {
        height: 210px;
    }
    .solution-card-content {
        padding: 38px
            18px
            18px;
    }
    .solution-card-content h3 {
        font-size: 18px;
    }
    .solution-features li {
        font-size: 10.5px;
    }
    .solutions-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
    }
    .solutions-cta-content {
        width: 100%;
    }
    .solutions-cta-button {
        width: 100%;
        margin-left: 0;
    }
}

/* =========================================================
 * SMALL MOBILE
 * ========================================================= */

@media (max-width: 420px) {
    .solutions-title {
        font-size: 28px;
    }
    .solution-card-visual {
        height: 200px;
    }
    .solution-number {
        width: 43px;
        height: 43px;
        top: 12px;
        left: 12px;
    }
    .solution-icon {
        width: 54px;
        height: 54px;
        top: -27px;
        left: 16px;
    }
    .solution-card-content {
        padding: 37px
            16px
            16px;
    }
}

/* =========================================================
 * ACCESSIBILITY
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .solution-card,
    .solution-app-image,
    .solution-button,
    .solutions-cta-button,
    .solution-button > span:last-child,
    .solutions-cta-button > span:last-child {
        transition: none;
    }
    .solution-card:hover {
        transform: none;
    }
    .solution-card:hover .solution-app-image {
        transform: none;
    }
    .solution-button:hover,
    .solutions-cta-button:hover {
        transform: none;
    }
}

/* =========================================================
 * WHY CHOOSE SKAITE
 * ========================================================= */

.why-choose-section {
    position: relative;
    width: 100%;
    padding: 70px 0;
    overflow: hidden;
    background: linear-gradient(
            135deg,
            #ffffff 0%,
            #f8faff 55%,
            #f2f5ff 100%
        );
}

/* =========================================================
 * CONTAINER
 * ========================================================= */

.why-choose-container {
    position: relative;
    z-index: 2;
    width: min(
            1180px,
            calc(100% - 50px)
        );
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.78fr 1.55fr;
    gap: 55px;
    align-items: center;
}

/* =========================================================
 * LEFT INTRO
 * ========================================================= */

.why-choose-intro {
    max-width: 360px;
}

.why-choose-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #182b64;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.why-choose-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(
            135deg,
            #176cff,
            #6635ef
        );
    box-shadow: 0 0 0 5px
        rgba(46, 91, 245, 0.08);
}

/* =========================================================
 * TITLE
 * ========================================================= */

.why-choose-intro h2 {
    margin: 0;
    color: #081642;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.why-choose-intro h2 span {
    display: block;
    background: linear-gradient(
            90deg,
            #176cff,
            #5b35ee
        );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================================
 * TITLE LINE
 * ========================================================= */

.why-choose-line {
    width: 62px;
    height: 3px;
    margin: 18px 0 20px;
    border-radius: 50px;
    background: linear-gradient(
            90deg,
            #176cff,
            #6331ef
        );
}

/* =========================================================
 * DESCRIPTION
 * ========================================================= */

.why-choose-intro p {
    max-width: 340px;
    margin: 0;
    color: #64718f;
    font-size: 13px;
    line-height: 1.75;
}

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

.why-choose-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
    min-height: 43px;
    padding: 0 19px;
    border-radius: 8px;
    background: linear-gradient(
            90deg,
            #176cff,
            #6730ee
        );
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 9px 20px
        rgba(49, 77, 225, 0.18);
    transition: transform 0.25s ease,
        box-shadow 0.25s ease;
}

.why-choose-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 25px
        rgba(49, 77, 225, 0.25);
}

.why-choose-cta span:last-child {
    font-size: 16px;
    transition: transform 0.25s ease;
}

.why-choose-cta:hover span:last-child {
    transform: translateX(3px);
}

/* =========================================================
 * FEATURES GRID
 * ========================================================= */

.why-choose-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* =========================================================
 * FEATURE CARD
 * ========================================================= */

.why-feature-card {
    position: relative;
    min-height: 150px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px;
    border: 1px solid
        rgba(36, 78, 180, 0.08);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 24px
        rgba(38, 65, 120, 0.06);
    transition: transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.why-feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(38, 91, 238, 0.20);
    box-shadow: 0 14px 30px
        rgba(38, 65, 120, 0.10);
}

/* =========================================================
 * FEATURE ICON
 * ========================================================= */

.why-feature-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
            145deg,
            #eef4ff,
            #f5f7ff
        );
    color: #1f5cf0;
    font-size: 22px;
    box-shadow: inset 0 0 0 1px
        rgba(45, 91, 220, 0.05);
}

.why-feature-icon span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

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

.why-feature-content {
    flex: 1;
    min-width: 0;
}

.why-feature-content h3 {
    margin: 3px 0 9px;
    color: #071642;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
}

.why-feature-content p {
    margin: 0;
    color: #667391;
    font-size: 10.5px;
    line-height: 1.65;
}

/* =========================================================
 * BACKGROUND DECORATION
 * ========================================================= */

.why-choose-section::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -150px;
    bottom: -150px;
    border-radius: 50%;
    border: 25px solid
        rgba(39, 100, 245, 0.035);
    box-sizing: border-box;
}

.why-choose-section::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -100px;
    top: -80px;
    border-radius: 50%;
    border: 22px solid
        rgba(91, 54, 238, 0.035);
    box-sizing: border-box;
}

/* =========================================================
 * RESPONSIVE — TABLET
 * ========================================================= */

@media (max-width: 950px) {
    .why-choose-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .why-choose-intro {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }
    .why-choose-line {
        margin-left: auto;
        margin-right: auto;
    }
    .why-choose-intro p {
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================================
 * RESPONSIVE — MOBILE
 * ========================================================= */

@media (max-width: 620px) {
    .why-choose-section {
        padding: 55px 0;
    }
    .why-choose-container {
        width: calc(100% - 28px);
        gap: 30px;
    }
    .why-choose-intro h2 {
        font-size: 32px;
    }
    .why-choose-intro p {
        font-size: 12px;
    }
    .why-choose-features {
        grid-template-columns: 1fr;
        gap: 13px;
    }
    .why-feature-card {
        min-height: auto;
        padding: 20px;
    }
    .why-feature-icon {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        font-size: 20px;
    }
    .why-feature-content h3 {
        font-size: 14px;
    }
    .why-feature-content p {
        font-size: 10.5px;
    }
}

/* =========================================================
 * REDUCED MOTION
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .why-feature-card,
    .why-choose-cta,
    .why-choose-cta span:last-child {
        transition: none;
    }
    .why-feature-card:hover,
    .why-choose-cta:hover {
        transform: none;
    }
}

/* =========================================================
 * TEAM SECTION
 * ========================================================= */

.team-section {
    position: relative;
    width: 100%;
    padding: 70px 0;
    overflow: hidden;
    background: linear-gradient(
            135deg,
            #ffffff 0%,
            #fafbff 55%,
            #f5f7ff 100%
        );
}

/* =========================================================
 * TEAM CONTAINER
 * ========================================================= */

.team-container {
    width: min(
            1120px,
            calc(100% - 40px)
        );
    margin: 0 auto;
}

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

.team-header {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

/* =========================================================
 * TEAM BADGE
 * ========================================================= */

.team-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: #566481;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.team-badge-dot {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(
            135deg,
            #176cff,
            #6730ee
        );
}

/* =========================================================
 * TEAM TITLE
 * ========================================================= */

.team-header h2 {
    margin: 0;
    color: #071642;
    font-size: clamp(
            34px,
            4vw,
            52px
        );
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.team-header h2 span {
    color: #176cff;
}

/* =========================================================
 * TITLE LINE
 * ========================================================= */

.team-title-line {
    width: 64px;
    height: 4px;
    margin: 18px auto 25px;
    border-radius: 50px;
    background: linear-gradient(
            90deg,
            #176cff,
            #6730ee
        );
}

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

.team-header p {
    max-width: 650px;
    margin: 0 auto;
    color: #596783;
    font-size: 15px;
    line-height: 1.7;
}

/* =========================================================
 * TEAM GRID
 * ========================================================= */

.team-grid {
    display: grid;
    grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 28px;
    max-width: 1040px;
    margin: 0 auto;
}

/* =========================================================
 * TEAM CARD
 * ========================================================= */

.team-card {
    position: relative;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 48px 50px 45px;
    text-align: center;
    border: 1px solid
        rgba(
            34,
            86,
            190,
            0.10
        );
    border-radius: 22px;
    background: rgba(
            255,
            255,
            255,
            0.96
        );
    box-shadow: 0 14px 38px
        rgba(
            38,
            69,
            130,
            0.07
        );
    transition: transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px
        rgba(
            38,
            69,
            130,
            0.11
        );
}

/* =========================================================
 * PERSON ICON CIRCLE
 * ========================================================= */

.team-person-icon {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 28px;
    border-radius: 50%;
    background: linear-gradient(
            145deg,
            #176cff,
            #2864ec
        );
    box-shadow: 0 14px 28px
        rgba(
            31,
            94,
            239,
            0.18
        );
}

/* Purple person icon */

.team-card-purple .team-person-icon {
    background: linear-gradient(
            145deg,
            #6930ee,
            #8630e9
        );
    box-shadow: 0 14px 28px
        rgba(
            106,
            48,
            238,
            0.18
        );
}

/* =========================================================
 * PERSON ICON
 * ========================================================= */

.person-icon {
    position: relative;
    display: block;
    width: 52px;
    height: 58px;
}

/* Person head */

.person-icon::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translateX(-50%);
    border: 3px solid
        #ffffff;
    border-radius: 50%;
}

/* Person body */

.person-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 48px;
    height: 29px;
    transform: translateX(-50%);
    border: 3px solid
        #ffffff;
    border-radius: 28px
        28px
        14px
        14px;
}

/* =========================================================
 * CARD DIVIDER
 * ========================================================= */

.team-card-line {
    width: 62px;
    height: 4px;
    margin-bottom: 22px;
    border-radius: 50px;
    background: #176cff;
}

.team-card-purple .team-card-line {
    background: #6930ee;
}

/* =========================================================
 * PERSON NAME
 * ========================================================= */

.team-card h3 {
    margin: 0 0 5px;
    color: #1764e9;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 800;
}

.team-card-purple h3 {
    color: #6930ee;
}

/* =========================================================
 * PERSON ROLE
 * ========================================================= */

.team-role {
    display: block;
    margin-bottom: 18px;
    color: #64718f;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}

/* =========================================================
 * PERSON DESCRIPTION
 * ========================================================= */

.team-card p {
    max-width: 420px;
    margin: 0;
    color: #596783;
    font-size: 14px;
    line-height: 1.8;
}

/* =========================================================
 * SUBTLE BLUE CARD GLOW
 * ========================================================= */

.team-card-blue::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -100px;
    left: -100px;
    border-radius: 50%;
    background: rgba(
            23,
            108,
            255,
            0.035
        );
    pointer-events: none;
}

/* =========================================================
 * SUBTLE PURPLE CARD GLOW
 * ========================================================= */

.team-card-purple::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -100px;
    bottom: -100px;
    border-radius: 50%;
    background: rgba(
            105,
            48,
            238,
            0.035
        );
    pointer-events: none;
}

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

@media (max-width: 850px) {
    .team-section {
        padding: 60px 0;
    }
    .team-grid {
        gap: 20px;
    }
    .team-card {
        min-height: 350px;
        padding: 38px
            30px
            36px;
    }
    .team-person-icon {
        width: 100px;
        height: 100px;
        margin-bottom: 24px;
    }
    .person-icon {
        transform: scale(0.85);
    }
    .team-card h3 {
        font-size: 19px;
    }
    .team-card p {
        font-size: 13px;
    }
}

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

@media (max-width: 650px) {
    .team-section {
        padding: 55px 0;
    }
    .team-container {
        width: calc(100% - 28px);
    }
    .team-header {
        margin-bottom: 30px;
    }
    .team-header h2 {
        font-size: 32px;
    }
    .team-header p {
        font-size: 13px;
    }
    .team-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .team-card {
        min-height: 320px;
        padding: 35px
            25px;
    }
    .team-person-icon {
        width: 92px;
        height: 92px;
        margin-bottom: 22px;
    }
    .person-icon {
        transform: scale(0.78);
    }
    .team-card-line {
        width: 50px;
        height: 3px;
        margin-bottom: 18px;
    }
    .team-card h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }
    .team-role {
        font-size: 11px;
        margin-bottom: 14px;
    }
    .team-card p {
        font-size: 12px;
        line-height: 1.7;
    }
}

/* =========================================================
 * SMALL MOBILE
 * ========================================================= */

@media (max-width: 400px) {
    .team-header h2 {
        font-size: 29px;
    }
    .team-card {
        min-height: 290px;
        padding: 30px
            20px;
    }
    .team-person-icon {
        width: 82px;
        height: 82px;
    }
    .team-card h3 {
        font-size: 17px;
    }
    .team-role {
        font-size: 10px;
    }
    .team-card p {
        font-size: 11px;
    }
}

/* =========================================================
 * REDUCED MOTION
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .team-card {
        transition: none;
    }
    .team-card:hover {
        transform: none;
    }
}

/* =========================================================
 * CONTACT SECTION
 * ========================================================= */

.contact-section {
    position: relative;
    width: 100%;
    padding: 75px 0;
    overflow: hidden;
    background: linear-gradient(
            135deg,
            #ffffff 0%,
            #f9fbff 55%,
            #f3f6ff 100%
        );
}

/* =========================================================
 * CONTAINER
 * ========================================================= */

.contact-container {
    width: min(
            1120px,
            calc(100% - 40px)
        );
    margin: 0 auto;
}

/* =========================================================
 * MAIN WRAPPER
 * ========================================================= */

.contact-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr)
        minmax(400px, 1.1fr);
    gap: 65px;
    align-items: center;
    padding: 52px;
    overflow: hidden;
    border: 1px solid
        rgba(42, 91, 190, 0.10);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 55px
        rgba(36, 71, 135, 0.08);
}

/* =========================================================
 * BACKGROUND DECORATION
 * ========================================================= */

.contact-wrapper::before {
    content: "";
    position: absolute;
    width: 270px;
    height: 270px;
    left: -150px;
    bottom: -160px;
    border-radius: 50%;
    background: rgba(23, 108, 255, 0.035);
    pointer-events: none;
}

.contact-wrapper::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -100px;
    top: -90px;
    border-radius: 50%;
    background: rgba(105, 48, 238, 0.035);
    pointer-events: none;
}

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

.contact-content {
    position: relative;
    z-index: 1;
    max-width: 400px;
}

/* =========================================================
 * BADGE
 * ========================================================= */

.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #1764e9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.contact-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(
            135deg,
            #176cff,
            #6930ee
        );
}

/* =========================================================
 * HEADING
 * ========================================================= */

.contact-content h2 {
    margin: 0;
    color: #071642;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.4px;
}

.contact-content h2 span {
    display: block;
    color: #176cff;
}

/* =========================================================
 * TITLE LINE
 * ========================================================= */

.contact-title-line {
    width: 56px;
    height: 4px;
    margin: 18px 0 22px;
    border-radius: 50px;
    background: linear-gradient(
            90deg,
            #176cff,
            #6930ee
        );
}

/* =========================================================
 * DESCRIPTION
 * ========================================================= */

.contact-description {
    max-width: 390px;
    margin: 0;
    color: #596783;
    font-size: 14px;
    line-height: 1.75;
}

/* =========================================================
 * CONTACT ACTIONS
 * ========================================================= */

.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 25px;
}

/* =========================================================
 * CONTACT ACTION
 * ========================================================= */

.contact-action {
    display: flex;
    align-items: center;
    gap: 13px;
    width: fit-content;
    min-width: 210px;
    padding: 8px 14px 8px 8px;
    border: 1px solid
        rgba(35, 80, 170, 0.08);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    box-shadow: 0 5px 18px
        rgba(40, 70, 130, 0.05);
    transition: transform 0.2s ease,
        box-shadow 0.2s ease;
}

.contact-action:hover {
    transform: translateX(4px);
    box-shadow: 0 9px 25px
        rgba(40, 70, 130, 0.10);
}

/* =========================================================
 * ACTION ICON
 * ========================================================= */

.contact-action-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
}

.contact-action-icon svg {
    width: 19px;
    height: 19px;
    fill: #ffffff;
}

/* =========================================================
 * ACTION COLORS
 * ========================================================= */

.contact-action-blue .contact-action-icon {
    background: linear-gradient(
            135deg,
            #176cff,
            #2877ff
        );
}

.contact-action-green .contact-action-icon {
    background: linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );
}

.contact-action-purple .contact-action-icon {
    background: linear-gradient(
            135deg,
            #6930ee,
            #8630e9
        );
}

/* =========================================================
 * ACTION TEXT
 * ========================================================= */

.contact-action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-action-text strong {
    color: #071642;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 800;
}

.contact-action-text small {
    color: #78849d;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 500;
}

/* =========================================================
 * FORM CARD
 * ========================================================= */

.contact-form-card {
    position: relative;
    z-index: 1;
    padding: 30px 32px;
    border: 1px solid
        rgba(34, 86, 190, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 35px
        rgba(38, 69, 130, 0.08);
}

/* =========================================================
 * FORM TITLE
 * ========================================================= */

.contact-form-card h3 {
    margin: 0 0 22px;
    color: #071642;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 800;
}

/* =========================================================
 * FORM
 * ========================================================= */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* =========================================================
 * FORM GROUP
 * ========================================================= */

.contact-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-form-group label {
    color: #273553;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
}

/* =========================================================
 * INPUTS
 * ========================================================= */

.contact-form-group input,
.contact-form-group textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid
        #dfe5f0;
    border-radius: 7px;
    outline: none;
    background: #ffffff;
    color: #17213b;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.5;
    transition: border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.contact-form-group input {
    height: 38px;
    padding: 0 12px;
}

.contact-form-group textarea {
    min-height: 88px;
    padding: 10px 12px;
    resize: vertical;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color: #a2abc0;
}

/* =========================================================
 * INPUT FOCUS
 * ========================================================= */

.contact-form-group input:focus,
.contact-form-group textarea:focus {
    border-color: #176cff;
    box-shadow: 0 0 0 3px
        rgba(23, 108, 255, 0.08);
}

/* =========================================================
 * SUBMIT BUTTON
 * ========================================================= */

.contact-submit {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
    padding: 10px 18px;
    border: 0;
    border-radius: 7px;
    outline: none;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(
            90deg,
            #176cff 0%,
            #6930ee 100%
        );
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 8px 18px
        rgba(76, 73, 234, 0.18);
    transition: transform 0.2s ease,
        box-shadow 0.2s ease;
}

.contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px
        rgba(76, 73, 234, 0.24);
}

.contact-submit:active {
    transform: translateY(0);
}

.contact-submit-arrow {
    font-size: 16px;
    line-height: 1;
}

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

@media (max-width: 900px) {
    .contact-section {
        padding: 60px 0;
    }
    .contact-wrapper {
        grid-template-columns: minmax(0, 0.85fr)
            minmax(350px, 1.15fr);
        gap: 40px;
        padding: 40px;
    }
    .contact-content h2 {
        font-size: 38px;
    }
    .contact-form-card {
        padding: 27px;
    }
}

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

@media (max-width: 700px) {
    .contact-section {
        padding: 50px 0;
    }
    .contact-container {
        width: calc(100% - 28px);
    }
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 32px 24px;
        border-radius: 20px;
    }
    .contact-content {
        max-width: none;
        text-align: left;
    }
    .contact-content h2 {
        font-size: 34px;
    }
    .contact-description {
        font-size: 13px;
        margin-bottom: 0;
    }
    .contact-actions {
        gap: 10px;
        margin-top: 22px;
    }
    .contact-action {
        width: 100%;
        min-width: 0;
        padding: 8px 12px 8px 8px;
    }
    .contact-detail-icon {
        width: 40px;
        height: 40px;
    }
    .contact-form-card {
        padding: 24px 20px;
        border-radius: 16px;
    }
    .contact-form-card h3 {
        font-size: 17px;
    }
}

/* =========================================================
 * SMALL MOBILE
 * ========================================================= */

@media (max-width: 400px) {
    .contact-section {
        padding: 42px 0;
    }
    .contact-wrapper {
        gap: 28px;
        padding: 27px
            18px;
    }
    .contact-content h2 {
        font-size: 30px;
        letter-spacing: -0.8px;
    }
    .contact-description {
        font-size: 12px;
        line-height: 1.7;
    }
    .contact-action-text strong {
        font-size: 11px;
    }
    .contact-action-text small {
        font-size: 9px;
    }
    .contact-form-card {
        padding: 21px
            16px;
    }
    .contact-form {
        gap: 12px;
    }
    .contact-form-group input {
        height: 37px;
    }
    .contact-form-group textarea {
        min-height: 82px;
    }
}

/* =========================================================
 * REDUCED MOTION
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .contact-action,
    .contact-submit,
    .contact-form-group input,
    .contact-form-group textarea {
        transition: none;
    }
    .contact-action:hover,
    .contact-submit:hover {
        transform: none;
    }
}

/* =========================================================
 * SKAITE TECHNOLOGIES
 * PREMIUM FOOTER
 * ========================================================= */

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

.site-footer {
    position: relative;
    overflow: hidden;
    width: 100%;
    color: #ffffff;
    background: linear-gradient(
            120deg,
            #06152f 0%,
            #0b2d68 52%,
            #24104f 100%
        );
}

/* =========================================================
 * CONTAINER
 * IMPORTANT:
 * display:block prevents footer-main and footer-bottom
 * from appearing beside each other.
 * ========================================================= */

.site-footer .footer-container {
    position: relative;
    z-index: 2;
    display: block !important;
    width: min(
            calc(100% - 60px),
            1280px
        );
    margin: 0 auto;
    padding: 58px 0 0;
}

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

.site-footer .footer-main {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(190px, 1.35fr)
        minmax(120px, 0.80fr)
        minmax(140px, 0.95fr)
        minmax(130px, 0.85fr)
        minmax(250px, 1.55fr);
    gap: 36px;
    align-items: start;
}

/* =========================================================
 * BRAND
 * ========================================================= */

.site-footer .footer-brand {
    position: relative;
    min-width: 0;
    padding-right: 30px;
}

.site-footer .footer-brand::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
            to bottom,
            transparent,
            rgba(75, 183, 255, 0.45),
            rgba(139, 92, 246, 0.08),
            transparent
        );
}

/* =========================================================
 * LOGO
 * ========================================================= */

.site-footer .footer-logo {
    display: block;
    width: 150px;
    max-width: 100%;
    height: auto;
    margin: 0 0 17px;
}

/* =========================================================
 * TAGLINE
 * ========================================================= */

.site-footer .footer-tagline {
    margin: 0 0 11px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

/* =========================================================
 * DESCRIPTION
 * ========================================================= */

.site-footer .footer-description {
    max-width: 280px;
    margin: 0;
    color: rgba(235, 243, 255, 0.72);
    font-size: 0.84rem;
    line-height: 1.7;
}

/* =========================================================
 * COLUMNS
 * ========================================================= */

.site-footer .footer-column {
    min-width: 0;
}

/* =========================================================
 * HEADINGS
 * ========================================================= */

.site-footer .footer-heading-line {
    position: relative;
    display: inline-block;
    margin: 0 0 20px;
    padding-bottom: 8px;
    color: #4db7ff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.site-footer .footer-heading-line::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
            90deg,
            #29a9ff,
            #8b5cf6
        );
}

/* =========================================================
 * LISTS
 * ========================================================= */

.site-footer .footer-column ul,
.site-footer .footer-contact ul,
.site-footer .footer-legal ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.site-footer .footer-column li {
    margin: 0;
    padding: 0;
}

.site-footer .footer-column li + li {
    margin-top: 10px;
}

.site-footer .footer-column li a {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    max-width: 100%;
    color: rgba(244, 248, 255, 0.78);
    font-size: 0.83rem;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.25s ease,
        transform 0.25s ease;
}

.site-footer .footer-column li a::before {
    content: "›";
    flex: 0 0 auto;
    color: #4db7ff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    transition: transform 0.25s ease;
}

.site-footer .footer-column li a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.site-footer .footer-column li a:hover::before {
    transform: translateX(2px);
}

/* =========================================================
 * NEW BADGE
 * ========================================================= */

.site-footer .footer-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: 4px;
    padding: 2px 6px;
    border: 1px solid
        rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(
            135deg,
            #087cff,
            #7037ef
        );
    font-size: 7px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.03em;
}

/* =========================================================
 * CONTACT
 * ========================================================= */

.site-footer .footer-contact {
    min-width: 0;
}

.site-footer .footer-contact ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-footer .footer-contact-item {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    color: rgba(244, 248, 255, 0.82);
    font-size: 0.82rem;
    line-height: 1.45;
}

.site-footer .footer-contact-item a {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 10px;
    color: rgba(244, 248, 255, 0.82);
    text-decoration: none;
    transition: color 0.25s ease,
        transform 0.25s ease;
}

.site-footer .footer-contact-item a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

/* =========================================================
 * CONTACT ICONS
 * ========================================================= */

.site-footer .footer-contact-icon {
    display: block;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 7px;
    border-radius: 10px;
    color: #2460df;
    background: #ffffff;
    box-shadow: 0 5px 18px
        rgba(0, 0, 0, 0.12);
}

/* =========================================================
 * CONTACT TEXT
 * ========================================================= */

.site-footer .footer-contact-item span {
    display: block;
    min-width: 0;
    padding-top: 5px;
    overflow-wrap: anywhere;
}

/* =========================================================
 * BOTTOM LEGAL BAR
 * ========================================================= */

.site-footer .footer-bottom {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 42px;
    padding: 18px 0 20px;
    border-top: 1px solid
        rgba(255, 255, 255, 0.12);
}

/* =========================================================
 * COPYRIGHT
 * ========================================================= */

.site-footer .footer-copyright {
    min-width: 0;
    flex: 1 1 auto;
}

.site-footer .footer-copyright p {
    margin: 0;
    color: rgba(235, 243, 255, 0.58);
    font-size: 0.72rem;
    line-height: 1.5;
}

/* =========================================================
 * LEGAL
 * ========================================================= */

.site-footer .footer-legal {
    flex: 0 0 auto;
}

.site-footer .footer-legal ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
}

.site-footer .footer-legal li {
    margin: 0;
    padding: 0;
}

.site-footer .footer-legal a {
    color: rgba(235, 243, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.site-footer .footer-legal a:hover {
    color: #ffffff;
}

/* =========================================================
 * ACCESSIBILITY
 * ========================================================= */

.site-footer .footer-column a:focus-visible,
.site-footer .footer-contact a:focus-visible,
.site-footer .footer-legal a:focus-visible {
    outline: 2px solid
        #62c4ff;
    outline-offset: 5px;
    border-radius: 3px;
}

/* =========================================================
 * BACKGROUND DECORATION
 * ========================================================= */

.site-footer::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -100px;
    width: 430px;
    height: 430px;
    border: 1px solid
        rgba(91, 184, 255, 0.07);
    border-radius: 50%;
    box-shadow: 0 0 0 34px
        rgba(116, 94, 246, 0.025),

        0 0 0 68px
        rgba(116, 94, 246, 0.018);
    pointer-events: none;
}

.site-footer::after {
    content: "";
    position: absolute;
    right: 80px;
    bottom: -240px;
    width: 390px;
    height: 390px;
    border: 1px solid
        rgba(67, 174, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

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

@media (max-width: 1100px) {
    .site-footer .footer-container {
        width: min(
                calc(100% - 50px),
                960px
            );
        padding-top: 50px;
    }
    .site-footer .footer-main {
        grid-template-columns: repeat(
                3,
                minmax(0, 1fr)
            );
        gap: 34px 28px;
    }
    .site-footer .footer-brand {
        padding-right: 25px;
    }
    .site-footer .footer-contact {
        grid-column: 2 / 4;
    }
    .site-footer .footer-bottom {
        margin-top: 38px;
    }
}

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

@media (max-width: 800px) {
    .site-footer .footer-main {
        grid-template-columns: repeat(
                2,
                minmax(0, 1fr)
            );
        gap: 32px 28px;
    }
    .site-footer .footer-brand {
        grid-column: 1 / -1;
        padding-right: 0;
        padding-bottom: 25px;
        border-bottom: 1px solid
            rgba(255, 255, 255, 0.10);
    }
    .site-footer .footer-brand::after {
        display: none;
    }
    .site-footer .footer-contact {
        grid-column: auto;
    }
}

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

@media (max-width: 600px) {
    .site-footer .footer-container {
        width: calc(100% - 32px);
        padding-top: 42px;
    }
    .site-footer .footer-main {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }
    .site-footer .footer-brand {
        width: 100%;
        padding-bottom: 24px;
    }
    .site-footer .footer-logo {
        width: 145px;
        margin-bottom: 16px;
    }
    .site-footer .footer-tagline {
        font-size: 1rem;
    }
    .site-footer .footer-description {
        max-width: 100%;
        font-size: 0.84rem;
        line-height: 1.7;
    }
    .site-footer .footer-column,
    .site-footer .footer-contact {
        width: 100%;
    }
    .site-footer .footer-heading-line {
        margin-bottom: 17px;
    }
    .site-footer .footer-column li + li {
        margin-top: 9px;
    }
    .site-footer .footer-column li a {
        font-size: 0.84rem;
    }
    .site-footer .footer-contact ul {
        gap: 12px;
    }
    .site-footer .footer-contact-item {
        font-size: 0.81rem;
    }
    .site-footer .footer-bottom {
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        margin-top: 34px;
        padding: 19px 0 23px;
        text-align: center;
        gap: 12px;
    }
    .site-footer .footer-copyright {
        width: 100%;
        flex: none;
    }
    .site-footer .footer-copyright p {
        font-size: 0.71rem;
    }
    .site-footer .footer-legal {
        width: 100%;
        flex: none;
    }
    .site-footer .footer-legal ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 9px 20px;
    }
    .site-footer .footer-legal a {
        font-size: 0.71rem;
    }
    .site-footer::before {
        top: 20%;
        right: -250px;
        width: 420px;
        height: 420px;
    }
    .site-footer::after {
        right: -180px;
        bottom: -180px;
        width: 320px;
        height: 320px;
    }
}

/* =========================================================
 * SMALL MOBILE
 * ========================================================= */

@media (max-width: 380px) {
    .site-footer .footer-container {
        width: calc(100% - 28px);
    }
    .site-footer .footer-contact-item a {
        gap: 9px;
    }
    .site-footer .footer-contact-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        padding: 6px;
    }
    .site-footer .footer-contact-item span {
        padding-top: 4px;
    }
    .site-footer .footer-legal ul {
        gap: 8px 16px;
    }
}

/* =========================================================
 * REDUCED MOTION
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .site-footer *,
    .site-footer *::before,
    .site-footer *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   CONTACT FORM MESSAGE
   ========================================================= */

.contact-form-message {
    margin-top: 16px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    animation: contactMessageIn 0.3s ease;
}

.contact-form-message.success {
    background: #ecfdf3;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.contact-form-message.error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.contact-submit:disabled {
    pointer-events: none;
}


@keyframes contactMessageIn {

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

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

}