/* =========================================
   XAQIL — GLOBAL STYLES
========================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    background: #080b10;
    color: #ffffff;
    line-height: 1.6;
}

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

.container {
    width: min(1120px, 90%);
    margin: 0 auto;
}


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

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(8, 11, 16, 0.92);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(12px);
}

.navbar .container {
    min-height: 76px;

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

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    display: block;
    width: 150px;
    height: auto;
}

.nav-links {
    display: flex;
    gap: 28px;
}

.nav-links a {
    color: #b7bec9;
    font-size: 14px;

    transition: 0.3s ease;
}

.nav-links a:hover {
    color: #ffffff;
}

.nav-button {
    padding: 11px 18px;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;

    font-size: 14px;

    transition: 0.3s ease;
}

.nav-button:hover {
    background: #ffffff;
    color: #080b10;
}


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

.hero {
    min-height: 85vh;

    display: flex;
    align-items: center;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(143, 169, 255, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(80, 120, 255, 0.08),
            transparent 30%
        ),
        #080b10;
}
.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image: linear-gradient(
        to bottom,
        black,
        transparent
    );

    pointer-events: none;
}
.hero-content {
    padding: 100px 0;

    position: relative;

    z-index: 1;
}

.hero-text {
    max-width: 780px;
}

.eyebrow {
    display: inline-block;

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

    letter-spacing: 2px;

    color: #b8c0cc;

    margin-bottom: 20px;
}

.hero h1 {
    font-size: clamp(48px, 8vw, 88px);

    line-height: 0.98;

    letter-spacing: -4px;

    margin-bottom: 30px;
}

.hero h1 span {
    display: block;

    color: #b8c0cc;
}

.hero p {
    max-width: 650px;

    font-size: 18px;

    color: #aeb6c2;

    margin-bottom: 35px;
}

.hero-buttons {
    display: flex;
    gap: 14px;

    flex-wrap: wrap;
}

.primary-button,
.secondary-button {
    display: inline-flex;

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

    padding: 14px 22px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 700;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;

    cursor: pointer;
}

.primary-button {
    background: #ffffff;
    color: #080b10;
}

.primary-button:hover {
    transform: translateY(-3px);

    background: #b8c0cc;
}
.secondary-button {
    border: 1px solid rgba(255, 255, 255, 0.2);

    color: #ffffff;
}

.secondary-button:hover {
    transform: translateY(-3px);

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

    border-color: rgba(255, 255, 255, 0.35);
}


/* =========================================
   SECTIONS
========================================= */

.section {
    padding: 110px 0;
}

.section-heading {
    max-width: 700px;

    margin-bottom: 55px;
}

.section-heading h2 {
    font-size: clamp(32px, 5vw, 52px);

    line-height: 1.1;

    letter-spacing: -2px;

    margin-bottom: 18px;
}

.section-heading p {
    color: #9ea7b4;

    font-size: 16px;
}


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

.services-grid {
    display: grid;

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

    gap: 18px;
}

.service-card {
    padding: 30px;

    min-height: 280px;

    background: #0d1118;

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

    border-radius: 14px;

    transition: 0.3s ease;
}

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

    border-color: rgba(143, 169, 255, 0.5);
}

.service-icon {
    font-size: 12px;

    color: #b8c0cc;

    margin-bottom: 45px;

    letter-spacing: 2px;
}

.service-card h3 {
    font-size: 22px;

    margin-bottom: 12px;
}

.service-card p {
    color: #929aa7;

    font-size: 14px;

    margin-bottom: 25px;
}

.service-card a {
    font-size: 13px;

    color: #b8c0cc;
}


/* =========================================
   PRICING
========================================= */

.pricing-section {
    background: #0b0f15;
}

.pricing-grid {
    display: grid;

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

    gap: 20px;
}

.price-card {
    position: relative;

    padding: 35px;

    background: #10151d;

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

    border-radius: 14px;
}

.price-card.featured {
    border-color: #b8c0cc;

    transform: translateY(-8px);
}

.price-card h3 {
    font-size: 22px;

    margin-bottom: 15px;
}

.price {
    font-size: 36px;

    font-weight: 800;

    margin-bottom: 15px;
}

.price-card p {
    color: #969fab;

    font-size: 14px;

    margin-bottom: 25px;
}

.price-card ul {
    list-style: none;
}

.price-card li {
    padding: 8px 0;

    color: #c4cad3;

    font-size: 14px;
}

.price-card li::before {
    content: "✓";

    color: #b8c0cc;

    margin-right: 8px;
}

.popular {
    position: absolute;

    top: 18px;
    right: 18px;

    padding: 5px 8px;

    border-radius: 5px;

    background: #b8c0cc;

    color: #080b10;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================
   PORTFOLIO
========================================= */

.portfolio-grid {
    display: grid;

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

    gap: 20px;
}

.portfolio-card {
    background: #0d1118;

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

    border-radius: 14px;

    overflow: hidden;
}

.portfolio-placeholder {
    height: 230px;

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

    background:
        linear-gradient(
            135deg,
            #121925,
            #080b10
        );

    color: #596477;

    letter-spacing: 3px;

    font-size: 12px;
}

.portfolio-card h3 {
    padding: 20px 20px 5px;

    font-size: 18px;
}

.portfolio-card p {
    padding: 0 20px 22px;

    color: #8f98a6;

    font-size: 13px;
}


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

.contact-section {
    padding-bottom: 130px;
}

.contact-box {
    padding: 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background: #10151d;

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

    border-radius: 18px;
}

.contact-box h2 {
    font-size: clamp(30px, 5vw, 48px);

    line-height: 1.1;

    margin-bottom: 15px;
}

.contact-box p {
    color: #969fab;
}


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

footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);

    padding-top: 45px;

    background: #06080c;
}

.footer-content {
    display: flex;

    justify-content: space-between;

    gap: 30px;
}

.footer-content p {
    color: #777f8b;

    margin-top: 8px;

    font-size: 13px;
}

.footer-links {
    display: flex;

    gap: 25px;

    align-items: center;
}

.footer-links a {
    color: #858d99;

    font-size: 13px;

    transition: 0.3s ease;
}

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

.copyright {
    margin-top: 45px;

    padding: 20px;

    text-align: center;

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

    color: #59616d;

    font-size: 12px;
}


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

@media (max-width: 900px) {

    .nav-links {
        display: none;
    }

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

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .price-card.featured {
        transform: none;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .contact-box {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .hero h1 {
        letter-spacing: -2px;
    }

    .hero p {
        font-size: 16px;
    }

    .section {
        padding: 75px 0;
    }

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

    .contact-box {
        padding: 35px;
    }

    .footer-content {
        flex-direction: column;
    }

    .footer-links {
        flex-wrap: wrap;
    }

}

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

.menu-button {
    display: none;

    background: transparent;

    border: none;

    color: #ffffff;

    font-size: 26px;

    cursor: pointer;
}


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

@media (max-width: 900px) {

    .menu-button {
        display: block;
    }

}

@media (max-width: 900px) {

    .nav-links.mobile-open {

        display: flex;

        position: absolute;

        top: 76px;

        left: 0;

        right: 0;

        padding: 25px;

        flex-direction: column;

        gap: 18px;

        background: #080b10;

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    }

}

/* =========================================
   WHY XAQIL
========================================= */

.why-section {
    background: #080b10;
}

.why-grid {
    display: grid;

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

    gap: 18px;
}

.why-card {
    padding: 30px;

    background: #0d1118;

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

    border-radius: 14px;

    transition: 0.3s ease;
}

.why-card:hover {
    transform: translateY(-5px);

    border-color: rgba(143, 169, 255, 0.5);
}

.why-card span {
    color: #b8c0cc;

    font-size: 12px;

    letter-spacing: 2px;
}

.why-card h3 {
    margin-top: 35px;

    margin-bottom: 12px;

    font-size: 21px;
}

.why-card p {
    color: #929aa7;

    font-size: 14px;
}


/* =========================================
   WHY XAQIL — MOBILE
========================================= */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

    .why-grid {
        grid-template-columns: 1fr;
    }

}

@keyframes pageFadeIn {

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

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

}

body {
    animation: pageFadeIn 0.6s ease-out;
}
/* =========================================
   INTERNAL PAGE HERO
========================================= */

.page-hero {
    padding: 150px 0 100px;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(143, 169, 255, 0.15),
            transparent 30%
        ),
        #080b10;
}

.page-hero h1 {
    max-width: 850px;

    font-size: clamp(48px, 7vw, 78px);

    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 25px;
}

.page-hero h1 span {
    display: block;

    color: #b8c0cc;
}

.page-hero p {
    max-width: 650px;

    color: #9ea7b4;

    font-size: 18px;
}

/* =========================================
   WEB DEVELOPMENT PAGE
========================================= */

.webdev-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.webdev-feature {
    padding: 30px;

    background: #0d1118;

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

    border-radius: 14px;

    transition: 0.3s ease;
}

.webdev-feature:hover {
    transform: translateY(-5px);

    border-color: rgba(143, 169, 255, 0.5);
}

.feature-number {
    display: block;

    color: #b8c0cc;

    font-size: 12px;

    letter-spacing: 2px;

    margin-bottom: 35px;
}

.webdev-feature h3 {
    font-size: 20px;

    margin-bottom: 12px;
}

.webdev-feature p {
    color: #929aa7;

    font-size: 14px;
}


/* =========================================
   WEBSITE TYPES
========================================= */

.webdev-dark-section {
    background: #0b0f15;
}

.website-types-grid {
    display: grid;

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

    gap: 20px;
}

.website-type-card {
    display: block;

    padding: 35px;

    background: #10151d;

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

    border-radius: 14px;

    transition: 0.3s ease;
}

.website-type-card:hover {
    transform: translateY(-6px);

    border-color: rgba(143, 169, 255, 0.55);
}

.website-type-card h3 {
    font-size: 24px;

    margin-bottom: 12px;
}

.website-type-card p {
    color: #929aa7;

    font-size: 14px;

    max-width: 500px;

    margin-bottom: 25px;
}

.card-link {
    color: #b8c0cc;

    font-size: 13px;

    font-weight: 600;
}


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

.included-grid {
    display: grid;

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

    gap: 12px;
}

.included-item {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 18px 20px;

    background: #0d1118;

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

    border-radius: 10px;

    color: #c4cad3;

    font-size: 14px;
}

.included-item span {
    color: #b8c0cc;

    font-weight: 700;
}


/* =========================================
   DEVELOPMENT PROCESS
========================================= */

.webdev-process-section {
    background: #0b0f15;
}

.process-grid {
    display: grid;

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

    gap: 18px;
}

.process-card {
    padding: 30px;

    background: #10151d;

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

    border-radius: 14px;
}

.process-card > span {
    color: #b8c0cc;

    font-size: 12px;

    letter-spacing: 2px;
}

.process-card h3 {
    margin-top: 30px;

    margin-bottom: 12px;

    font-size: 20px;
}

.process-card p {
    color: #929aa7;

    font-size: 14px;
}


/* =========================================
   WEB DEVELOPMENT PRICE BOX
========================================= */

.webdev-price-box {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 45px;

    background: #10151d;

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

    border-radius: 16px;
}

.webdev-price-box h2 {
    font-size: clamp(30px, 5vw, 45px);

    line-height: 1.1;

    margin-bottom: 12px;
}

.webdev-price-box p {
    color: #929aa7;

    max-width: 600px;
}


/* =========================================
   WEB DEVELOPMENT RESPONSIVENESS
========================================= */

@media (max-width: 900px) {

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

    .website-types-grid {
        grid-template-columns: 1fr;
    }

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

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

    .webdev-price-box {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .webdev-feature-grid {
        grid-template-columns: 1fr;
    }

    .included-grid {
        grid-template-columns: 1fr;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .website-type-card {
        padding: 25px;
    }

    .webdev-price-box {
        padding: 30px;
    }

}

/* =========================================
   CLICKABLE SERVICE CARDS
========================================= */

.service-card {
    display: block;

    text-decoration: none;

    color: inherit;

    cursor: pointer;
}

.service-card h3 {
    color: #ffffff;
}

.service-card p {
    color: #929aa7;
}

.service-card .card-link {
    display: inline-block;

    margin-top: 20px;

    color: #b8c0cc;

    font-size: 13px;

    font-weight: 600;
}

.service-card:hover .card-link {
    transform: translateX(4px);
}

/* =========================================
   WEB HOSTING PAGE
========================================= */

.hosting-explanation-grid {
    display: grid;

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

    gap: 18px;
}

.hosting-explanation {
    padding: 30px;

    background: #0d1118;

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

    border-radius: 14px;

    transition: 0.3s ease;
}

.hosting-explanation:hover {
    transform: translateY(-5px);

    border-color: rgba(143, 169, 255, 0.5);
}

.hosting-number {
    display: block;

    color: #b8c0cc;

    font-size: 12px;

    letter-spacing: 2px;

    margin-bottom: 35px;
}

.hosting-explanation h3 {
    font-size: 21px;

    margin-bottom: 12px;
}

.hosting-explanation p {
    color: #929aa7;

    font-size: 14px;
}


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

.hosting-dark-section {
    background: #0b0f15;
}

.hosting-services-grid {
    display: grid;

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

    gap: 20px;
}

.hosting-service-card {
    padding: 35px;

    background: #10151d;

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

    border-radius: 14px;

    transition: 0.3s ease;
}

.hosting-service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(143, 169, 255, 0.5);
}

.hosting-service-card h3 {
    font-size: 23px;

    margin-bottom: 12px;
}

.hosting-service-card p {
    color: #929aa7;

    font-size: 14px;
}


/* =========================================
   HOSTING RETAINER
========================================= */

.hosting-retainer-box {
    padding: 55px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(143, 169, 255, 0.12),
            transparent 35%
        ),
        #10151d;

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

    border-radius: 18px;
}

.hosting-retainer-content {
    max-width: 850px;
}

.hosting-retainer-box h2 {
    font-size: clamp(32px, 5vw, 52px);

    line-height: 1.1;

    margin-bottom: 18px;
}

.hosting-retainer-box p {
    color: #929aa7;

    max-width: 700px;

    line-height: 1.8;
}

.hosting-benefits {
    display: grid;

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

    gap: 12px;

    margin-top: 30px;
}

.hosting-benefits div {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #c4cad3;

    font-size: 14px;
}

.hosting-benefits span {
    color: #b8c0cc;

    font-weight: 700;
}


/* =========================================
   HOSTING PROCESS
========================================= */

.hosting-process-section {
    background: #0b0f15;
}

.hosting-process-grid {
    display: grid;

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

    gap: 18px;
}

.hosting-process-card {
    padding: 30px;

    background: #10151d;

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

    border-radius: 14px;
}

.hosting-process-card > span {
    color: #b8c0cc;

    font-size: 12px;

    letter-spacing: 2px;
}

.hosting-process-card h3 {
    margin-top: 28px;

    margin-bottom: 12px;

    font-size: 19px;
}

.hosting-process-card p {
    color: #929aa7;

    font-size: 14px;
}


/* =========================================
   HOSTING RESPONSIVENESS
========================================= */

@media (max-width: 900px) {

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

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

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

}


@media (max-width: 600px) {

    .hosting-explanation-grid {
        grid-template-columns: 1fr;
    }

    .hosting-process-grid {
        grid-template-columns: 1fr;
    }

    .hosting-benefits {
        grid-template-columns: 1fr;
    }

    .hosting-retainer-box {
        padding: 30px;
    }

}

/* =========================================
   WEBSITE CARE PAGE
========================================= */

.care-feature-grid {
    display: grid;

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

    gap: 18px;
}

.care-feature {
    padding: 30px;

    background: #0d1118;

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

    border-radius: 14px;

    transition: 0.3s ease;
}

.care-feature:hover {
    transform: translateY(-5px);

    border-color: rgba(143, 169, 255, 0.5);
}

.care-number {
    display: block;

    color: #b8c0cc;

    font-size: 12px;

    letter-spacing: 2px;

    margin-bottom: 35px;
}

.care-feature h3 {
    font-size: 21px;

    margin-bottom: 12px;
}

.care-feature p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}


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

.care-dark-section {
    background: #0b0f15;
}

.care-services-grid {
    display: grid;

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

    gap: 18px;
}

.care-service-card {
    padding: 30px;

    background: #10151d;

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

    border-radius: 14px;

    transition: 0.3s ease;
}

.care-service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(143, 169, 255, 0.5);
}

.care-service-card h3 {
    font-size: 20px;

    margin-bottom: 12px;
}

.care-service-card p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   CARE PLAN
========================================= */

.care-plan-box {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    padding: 50px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(143, 169, 255, 0.12),
            transparent 35%
        ),
        #10151d;

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

    border-radius: 18px;
}

.care-plan-box h2 {
    font-size: clamp(32px, 5vw, 50px);

    line-height: 1.1;

    margin-bottom: 15px;
}

.care-plan-box p {
    max-width: 700px;

    color: #929aa7;

    line-height: 1.8;
}


/* =========================================
   CARE NOTES
========================================= */

.care-note-grid {
    display: grid;

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

    gap: 18px;
}

.care-note {
    padding: 30px;

    background: #10151d;

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

    border-radius: 14px;
}

.care-note h3 {
    font-size: 20px;

    margin-bottom: 12px;
}

.care-note p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   CARE PROCESS
========================================= */

.care-process-grid {
    display: grid;

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

    gap: 18px;
}

.care-process-card {
    padding: 30px;

    background: #0d1118;

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

    border-radius: 14px;
}

.care-process-card > span {
    color: #b8c0cc;

    font-size: 12px;

    letter-spacing: 2px;
}

.care-process-card h3 {
    margin-top: 28px;

    margin-bottom: 12px;

    font-size: 19px;
}

.care-process-card p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   WEBSITE CARE RESPONSIVENESS
========================================= */

@media (max-width: 900px) {

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

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

    .care-note-grid {
        grid-template-columns: 1fr;
    }

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

    .care-plan-box {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .care-feature-grid {
        grid-template-columns: 1fr;
    }

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

    .care-process-grid {
        grid-template-columns: 1fr;
    }

    .care-plan-box {
        padding: 30px;
    }

}

/* =========================================
   Digital Solutions PAGE
========================================= */

.digital-feature-grid {
    display: grid;

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

    gap: 18px;
}

.digital-feature {
    padding: 30px;

    background: #0d1118;

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

    border-radius: 14px;

    transition: 0.3s ease;
}

.digital-feature:hover {
    transform: translateY(-5px);

    border-color: rgba(143, 169, 255, 0.5);
}

.digital-number {
    display: block;

    color: #b8c0cc;

    font-size: 12px;

    letter-spacing: 2px;

    margin-bottom: 35px;
}

.digital-feature h3 {
    font-size: 21px;

    margin-bottom: 12px;
}

.digital-feature p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   Digital Solutions
========================================= */

.digital-dark-section {
    background: #0b0f15;
}

.digital-solutions-grid {
    display: grid;

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

    gap: 18px;
}

.digital-solution-card {
    padding: 30px;

    background: #10151d;

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

    border-radius: 14px;

    transition: 0.3s ease;
}

.digital-solution-card:hover {
    transform: translateY(-5px);

    border-color: rgba(143, 169, 255, 0.5);
}

.digital-solution-card h3 {
    font-size: 20px;

    margin-bottom: 12px;
}

.digital-solution-card p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   PROBLEMS
========================================= */

.problem-grid {
    display: grid;

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

    gap: 18px;
}

.problem-card {
    padding: 32px;

    background: #0d1118;

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

    border-radius: 14px;
}

.problem-card > span {
    color: #b8c0cc;

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 600;
}

.problem-card h3 {
    font-size: 20px;

    line-height: 1.4;

    margin: 20px 0 12px;
}

.problem-card p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   DIGITAL PROCESS
========================================= */

.digital-process-section {
    background: #0b0f15;
}

.digital-process-grid {
    display: grid;

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

    gap: 18px;
}

.digital-process-card {
    padding: 30px;

    background: #10151d;

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

    border-radius: 14px;
}

.digital-process-card > span {
    color: #b8c0cc;

    font-size: 12px;

    letter-spacing: 2px;
}

.digital-process-card h3 {
    margin-top: 28px;

    margin-bottom: 12px;

    font-size: 19px;
}

.digital-process-card p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   DIGITAL RESPONSIVENESS
========================================= */

@media (max-width: 900px) {

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

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

    .problem-grid {
        grid-template-columns: 1fr;
    }

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

}


@media (max-width: 600px) {

    .digital-feature-grid {
        grid-template-columns: 1fr;
    }

    .digital-solutions-grid {
        grid-template-columns: 1fr;
    }

    .digital-process-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   XAQIL SERVICE ICONS
========================================= */

.service-card-icon {
    width: 52px;
    height: 52px;

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

    margin-bottom: 35px;

    border-radius: 12px;

    background: rgba(143, 169, 255, 0.08);

    border: 1px solid rgba(143, 169, 255, 0.18);

    color: #b8c0cc;
}

.service-card-icon svg {
    width: 24px;
    height: 24px;

    stroke-width: 1.8;
}

.service-card:hover .service-card-icon {
    background: rgba(143, 169, 255, 0.14);

    border-color: rgba(143, 169, 255, 0.45);

    transform: scale(1.05);
}

.service-card-icon {
    transition: 0.3s ease;
}

/* =========================================
   WEBSITE CARE DASHBOARD DESIGN
========================================= */

.care-dashboard-hero {
    min-height: 82vh;

    display: flex;
    align-items: center;

    padding: 120px 0 90px;

    background:
        radial-gradient(
            circle at 80% 35%,
            rgba(143, 169, 255, 0.14),
            transparent 30%
        ),
        #080b10;
}

.care-dashboard-layout {
    display: grid;

    grid-template-columns: 1fr 0.9fr;

    align-items: center;

    gap: 70px;
}

.care-dashboard-copy h1 {
    font-size: clamp(48px, 7vw, 78px);

    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 25px;
}

.care-dashboard-copy h1 span {
    display: block;

    color: #b8c0cc;
}

.care-dashboard-copy p {
    max-width: 620px;

    color: #9ea7b4;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 30px;
}


/* =========================================
   HEALTH PANEL
========================================= */

.website-health-panel {
    padding: 26px;

    background: rgba(16, 21, 29, 0.92);

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

    border-radius: 18px;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.35);
}

.health-panel-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding-bottom: 22px;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

.health-label {
    color: #6f7885;

    font-size: 10px;

    letter-spacing: 2px;
}

.health-panel-header h3 {
    margin-top: 5px;

    font-size: 21px;
}

.health-status {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 12px;

    border-radius: 20px;

    background: rgba(80, 200, 120, 0.08);

    border:
        1px solid rgba(80, 200, 120, 0.18);

    font-size: 12px;
}

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

    border-radius: 50%;

    background: #65d88a;

    box-shadow:
        0 0 10px rgba(101,216,138,0.6);
}


/* =========================================
   HEALTH ROWS
========================================= */

.health-list {
    margin-top: 12px;
}

.health-row {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 18px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.06);
}

.health-row:last-child {
    border-bottom: none;
}

.health-row-left {
    display: flex;

    align-items: center;

    gap: 13px;
}

.health-icon {
    width: 36px;
    height: 36px;

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

    border-radius: 9px;

    color: #b8c0cc;

    background: rgba(184,192,204,0.08);

    border:
        1px solid rgba(184,192,204,0.15);
}

.health-row strong {
    display: block;

    font-size: 14px;
}

.health-row small {
    display: block;

    margin-top: 2px;

    color: #737d8a;
}

.health-good {
    color: #65d88a;

    font-size: 12px;
}


/* =========================================
   CARE DASHBOARD CARDS
========================================= */

.care-service-section {
    background: #0b0f15;
}

.care-dashboard-grid {
    display: grid;

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

    gap: 18px;
}

.care-dashboard-card {
    padding: 30px;

    background: #10151d;

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

    border-radius: 14px;

    transition: 0.3s ease;
}

.care-dashboard-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(184,192,204,0.45);
}

.care-card-icon {
    width: 46px;
    height: 46px;

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

    margin-bottom: 28px;

    border-radius: 11px;

    background:
        rgba(184,192,204,0.08);

    border:
        1px solid rgba(184,192,204,0.16);

    color: #b8c0cc;

    font-size: 20px;
}

.care-dashboard-card h3 {
    margin-bottom: 10px;

    font-size: 20px;
}

.care-dashboard-card p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   CARE SCOPE
========================================= */

.care-scope-grid {
    display: grid;

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

    gap: 20px;
}

.care-scope-box {
    padding: 35px;

    background: #0d1118;

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

    border-radius: 15px;
}

.scope-type {
    color: #b8c0cc;

    font-size: 10px;

    letter-spacing: 1.8px;
}

.care-scope-box h3 {
    margin: 18px 0 20px;

    font-size: 23px;
}

.care-scope-box ul {
    list-style: none;
}

.care-scope-box li {
    padding: 9px 0;

    color: #adb5c0;

    font-size: 14px;
}

.care-scope-box li::before {
    content: "✓";

    margin-right: 10px;

    color: #b8c0cc;
}


/* =========================================
   CARE WORKFLOW
========================================= */

.care-workflow-section {
    background: #0b0f15;
}

.care-workflow {
    max-width: 850px;
}

.care-workflow-step {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 20px;

    align-items: start;
}

.care-workflow-step > span {
    width: 44px;
    height: 44px;

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

    border-radius: 50%;

    color: #b8c0cc;

    border:
        1px solid rgba(184,192,204,0.35);

    background:
        rgba(184,192,204,0.06);

    font-size: 11px;
}

.care-workflow-step h3 {
    margin-bottom: 7px;

    font-size: 20px;
}

.care-workflow-step p {
    color: #929aa7;

    line-height: 1.7;

    font-size: 14px;
}

.workflow-line {
    width: 1px;
    height: 45px;

    margin-left: 22px;

    background:
        rgba(184,192,204,0.25);
}


/* =========================================
   FINAL CARE CTA
========================================= */

.care-final-cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    padding: 50px;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(184,192,204,0.14),
            transparent 35%
        ),
        #10151d;

    border:
        1px solid rgba(255,255,255,0.08);
}

.care-final-cta h2 {
    font-size: clamp(30px,5vw,46px);

    line-height: 1.1;

    margin-bottom: 12px;
}

.care-final-cta p {
    color: #929aa7;
}


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

@media (max-width: 900px) {

    .care-dashboard-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .website-health-panel {
        max-width: 650px;
    }

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

    .care-scope-grid {
        grid-template-columns: 1fr;
    }

    .care-final-cta {
        flex-direction: column;

        align-items: flex-start;
    }

}


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

@media (max-width: 600px) {

    .care-dashboard-hero {
        min-height: auto;

        padding: 110px 0 70px;
    }

    .care-dashboard-copy h1 {
        letter-spacing: -2px;
    }

    .care-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .website-health-panel {
        padding: 20px;
    }

    .health-row {
        gap: 10px;
    }

    .health-good {
        font-size: 10px;
    }

    .care-final-cta {
        padding: 30px;
    }

}

/* =========================================
   HOSTING TECH HERO
========================================= */

.hosting-tech-hero {
    min-height: 82vh;

    display: flex;
    align-items: center;

    padding: 120px 0 90px;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(143, 169, 255, 0.16),
            transparent 32%
        ),
        #080b10;
}

.hosting-tech-layout {
    display: grid;

    grid-template-columns: 1fr 0.9fr;

    align-items: center;

    gap: 70px;
}

.hosting-tech-copy h1 {
    font-size: clamp(48px, 7vw, 78px);

    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 25px;
}

.hosting-tech-copy h1 span {
    display: block;

    color: #b8c0cc;
}

.hosting-tech-copy p {
    max-width: 620px;

    color: #9ea7b4;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 30px;
}


/* =========================================
   SERVER PANEL
========================================= */

.hosting-server-panel {
    padding: 28px;

    background: #10151d;

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

    border-radius: 18px;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.35);
}

.server-panel-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding-bottom: 22px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}

.server-small-label {
    color: #6e7886;

    font-size: 10px;

    letter-spacing: 2px;
}

.server-panel-top h3 {
    margin-top: 5px;

    font-size: 21px;
}

.server-online {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 12px;

    background:
        rgba(101,216,138,0.08);

    border:
        1px solid rgba(101,216,138,0.18);

    border-radius: 30px;

    font-size: 12px;
}

.server-dot {
    width: 7px;
    height: 7px;

    background: #65d88a;

    border-radius: 50%;

    box-shadow:
        0 0 10px rgba(101,216,138,0.6);
}


/* =========================================
   SERVER UNITS
========================================= */

.server-display {
    display: grid;

    gap: 12px;

    padding: 25px 0;
}

.server-unit {
    display: grid;

    grid-template-columns:
        10px 1fr 45px;

    align-items: center;

    gap: 12px;

    padding: 14px;

    background: #0b0f15;

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

    border-radius: 8px;
}

.server-light {
    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.server-light.active {
    background: #65d88a;

    box-shadow:
        0 0 8px rgba(101,216,138,0.6);
}

.server-line {
    height: 4px;

    border-radius: 4px;

    background:
        linear-gradient(
            90deg,
            rgba(184,192,204,0.8),
            rgba(184,192,204,0.12)
        );
}

.server-unit span {
    color: #7d8795;

    font-size: 10px;

    letter-spacing: 1px;
}


/* =========================================
   SERVER STATS
========================================= */

.server-stats {
    display: grid;

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

    gap: 10px;
}

.server-stats div {
    padding: 13px;

    background: #0b0f15;

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

    border-radius: 8px;
}

.server-stats span {
    display: block;

    color: #66707d;

    font-size: 9px;

    letter-spacing: 1.5px;
}

.server-stats strong {
    display: block;

    margin-top: 5px;

    font-size: 13px;
}


/* =========================================
   HOSTING SYSTEM FLOW
========================================= */

.hosting-system-section {
    background: #0b0f15;
}

.hosting-flow {
    display: flex;

    align-items: stretch;

    justify-content: space-between;

    gap: 10px;
}

.hosting-flow-item {
    flex: 1;

    min-width: 0;

    padding: 25px;

    background: #10151d;

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

    border-radius: 14px;
}

.hosting-flow-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    margin-bottom: 25px;

    border-radius: 12px;

    color: #b8c0cc;

    background:
        rgba(184,192,204,0.08);

    border:
        1px solid rgba(184,192,204,0.16);

    font-size: 20px;
}

.hosting-flow-item > span {
    color: #657080;

    font-size: 10px;

    letter-spacing: 1.8px;
}

.hosting-flow-item h3 {
    margin: 12px 0 8px;

    font-size: 19px;
}

.hosting-flow-item p {
    color: #929aa7;

    font-size: 13px;

    line-height: 1.7;
}

.hosting-flow-line {
    display: flex;

    align-items: center;

    color: #b8c0cc;

    font-size: 20px;
}


/* =========================================
   HOSTING MANAGEMENT
========================================= */

.hosting-management-layout {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 80px;

    align-items: start;
}

.hosting-management-layout h2 {
    font-size: clamp(32px,5vw,52px);

    line-height: 1.1;

    margin-bottom: 18px;
}

.hosting-management-layout > div:first-child p {
    max-width: 540px;

    color: #929aa7;

    line-height: 1.8;
}

.hosting-management-list {
    border-top:
        1px solid rgba(255,255,255,0.08);
}

.hosting-management-item {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 20px;

    padding: 25px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

.hosting-management-item > span {
    color: #b8c0cc;

    font-size: 11px;

    letter-spacing: 2px;
}

.hosting-management-item h3 {
    margin-bottom: 6px;

    font-size: 19px;
}

.hosting-management-item p {
    color: #929aa7;

    font-size: 14px;
}


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

.hosting-feature-section {
    background: #0b0f15;
}

.hosting-feature-grid {
    display: grid;

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

    gap: 18px;
}

.hosting-feature-card {
    padding: 30px;

    background: #10151d;

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

    border-radius: 14px;

    transition: 0.3s ease;
}

.hosting-feature-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(184,192,204,0.45);
}

.hosting-feature-icon {
    width: 46px;
    height: 46px;

    display: flex;

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

    margin-bottom: 28px;

    border-radius: 11px;

    background:
        rgba(184,192,204,0.08);

    border:
        1px solid rgba(184,192,204,0.16);

    color: #b8c0cc;

    font-size: 19px;
}

.hosting-feature-card h3 {
    margin-bottom: 10px;

    font-size: 20px;
}

.hosting-feature-card p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   DOMAIN OWNERSHIP
========================================= */

.hosting-ownership-box {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 60px;

    padding: 50px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(184,192,204,0.12),
            transparent 35%
        ),
        #10151d;

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

    border-radius: 18px;
}

.hosting-ownership-box h2 {
    font-size: clamp(32px,5vw,48px);

    line-height: 1.1;

    margin-bottom: 15px;
}

.hosting-ownership-box p {
    color: #929aa7;

    line-height: 1.8;
}

.ownership-record {
    display: grid;

    gap: 12px;
}

.ownership-record div {
    padding: 18px;

    background: #0b0f15;

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

    border-radius: 10px;
}

.ownership-record span {
    display: block;

    color: #6f7986;

    font-size: 9px;

    letter-spacing: 1.5px;
}

.ownership-record strong {
    display: block;

    margin-top: 6px;

    font-size: 14px;
}


/* =========================================
   HOSTING FINAL CTA
========================================= */

.hosting-final-cta {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 35px;

    padding: 50px;

    background: #10151d;

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

    border-radius: 18px;
}

.hosting-final-cta h2 {
    font-size: clamp(30px,5vw,46px);

    line-height: 1.1;

    margin-bottom: 12px;
}

.hosting-final-cta p {
    color: #929aa7;
}


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

@media (max-width: 900px) {

    .hosting-tech-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .hosting-server-panel {
        max-width: 650px;
    }

    .hosting-flow {
        display: grid;

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

    .hosting-flow-line {
        display: none;
    }

    .hosting-management-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

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

    .hosting-ownership-box {
        grid-template-columns: 1fr;
    }

    .hosting-final-cta {
        flex-direction: column;

        align-items: flex-start;
    }

}


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

@media (max-width: 600px) {

    .hosting-tech-hero {
        min-height: auto;

        padding: 110px 0 70px;
    }

    .hosting-tech-copy h1 {
        letter-spacing: -2px;
    }

    .server-stats {
        grid-template-columns: 1fr;
    }

    .hosting-flow {
        grid-template-columns: 1fr;
    }

    .hosting-feature-grid {
        grid-template-columns: 1fr;
    }

    .hosting-ownership-box {
        padding: 30px;
    }

    .hosting-final-cta {
        padding: 30px;
    }

}

/* =========================================
   WEB DEVELOPMENT SHOWCASE HERO
========================================= */

.dev-showcase-hero {
    min-height: 84vh;

    display: flex;
    align-items: center;

    padding: 120px 0 90px;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(143, 169, 255, 0.16),
            transparent 32%
        ),
        #080b10;
}

.dev-showcase-layout {
    display: grid;

    grid-template-columns: 1fr 0.95fr;

    align-items: center;

    gap: 70px;
}

.dev-showcase-copy h1 {
    font-size: clamp(48px, 7vw, 78px);

    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 25px;
}

.dev-showcase-copy h1 span {
    display: block;

    color: #b8c0cc;
}

.dev-showcase-copy p {
    max-width: 620px;

    color: #9ea7b4;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 30px;
}


/* =========================================
   BROWSER MOCKUP
========================================= */

.browser-mockup {
    overflow: hidden;

    background: #10151d;

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

    border-radius: 18px;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.4);

    transform: perspective(1000px)
               rotateY(-4deg)
               rotateX(2deg);
}

.browser-topbar {
    display: flex;

    align-items: center;

    gap: 18px;

    padding: 13px 15px;

    background: #0b0f15;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}

.browser-dots {
    display: flex;

    gap: 6px;
}

.browser-dots span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.18);
}

.browser-address {
    flex: 1;

    padding: 7px 12px;

    border-radius: 6px;

    background: #080b10;

    color: #697383;

    font-size: 10px;
}

.browser-content {
    min-height: 390px;

    padding: 24px;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(184,192,204,0.13),
            transparent 35%
        ),
        #0d1118;
}

.browser-demo-nav {
    display: flex;

    align-items: center;

    gap: 18px;

    font-size: 9px;

    color: #6f7988;
}

.browser-demo-nav strong {
    margin-right: auto;

    color: #ffffff;

    letter-spacing: 2px;
}

.browser-demo-hero {
    max-width: 330px;

    padding-top: 65px;
}

.browser-demo-hero > span {
    color: #b8c0cc;

    font-size: 8px;

    letter-spacing: 1.5px;
}

.browser-demo-hero h3 {
    margin: 10px 0;

    font-size: 29px;

    line-height: 1.1;
}

.browser-demo-hero p {
    color: #7d8795;

    font-size: 11px;
}

.browser-demo-button {
    display: inline-block;

    margin-top: 18px;

    padding: 9px 13px;

    border-radius: 5px;

    background: #ffffff;

    color: #080b10;

    font-size: 9px;

    font-weight: 700;
}

.browser-demo-cards {
    display: grid;

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

    gap: 9px;

    margin-top: 45px;
}

.browser-demo-cards div {
    height: 70px;

    border-radius: 7px;

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

    border:
        1px solid rgba(255,255,255,0.06);
}


/* =========================================
   DEVELOPMENT FOUNDATIONS
========================================= */

.dev-foundation-section {
    background: #0b0f15;
}

.dev-foundation-grid {
    display: grid;

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

    gap: 0;

    border-top:
        1px solid rgba(255,255,255,0.08);
}

.dev-foundation-item {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 20px;

    padding: 32px;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

.dev-foundation-item:nth-child(odd) {
    border-right:
        1px solid rgba(255,255,255,0.08);
}

.dev-foundation-item > span {
    color: #b8c0cc;

    font-size: 11px;

    letter-spacing: 2px;
}

.dev-foundation-item h3 {
    margin-bottom: 8px;

    font-size: 20px;
}

.dev-foundation-item p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   WEBSITE TYPE GRID
========================================= */

.dev-types-grid {
    display: grid;

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

    gap: 18px;
}

.dev-type-card {
    min-height: 250px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            #10151d,
            #0b0f15
        );

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

    border-radius: 15px;

    transition: 0.3s ease;
}

.dev-type-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(184,192,204,0.45);
}

.dev-type-large {
    min-height: 360px;
}

.dev-type-wide {
    grid-column: 1 / -1;

    min-height: 220px;
}

.dev-type-label {
    margin-bottom: auto;

    color: #b8c0cc;

    font-size: 10px;

    letter-spacing: 2px;
}

.dev-type-card h3 {
    margin-bottom: 10px;

    font-size: 25px;
}

.dev-type-card p {
    max-width: 500px;

    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 20px;
}

.dev-type-card > span {
    color: #b8c0cc;

    font-size: 13px;
}


/* =========================================
   DEV PROCESS TIMELINE
========================================= */

.dev-process-section-new {
    background: #0b0f15;
}

.dev-process-timeline {
    max-width: 900px;
}

.dev-process-step {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 22px;

    align-items: start;
}

.dev-step-number {
    width: 44px;
    height: 44px;

    display: flex;

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

    border-radius: 50%;

    color: #b8c0cc;

    border:
        1px solid rgba(184,192,204,0.35);

    background:
        rgba(184,192,204,0.06);

    font-size: 11px;
}

.dev-step-label {
    color: #66717f;

    font-size: 10px;

    letter-spacing: 1.8px;
}

.dev-process-step h3 {
    margin: 7px 0;

    font-size: 21px;
}

.dev-process-step p {
    max-width: 620px;

    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}

.dev-process-line {
    width: 1px;
    height: 42px;

    margin-left: 22px;

    background:
        rgba(184,192,204,0.25);
}


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

.dev-included-layout {
    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 70px;

    align-items: start;
}

.dev-included-layout h2 {
    font-size:
        clamp(32px,5vw,52px);

    line-height: 1.1;

    margin-bottom: 15px;
}

.dev-included-layout > div:first-child p {
    color: #929aa7;

    line-height: 1.8;
}

.dev-included-list {
    display: grid;

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

    gap: 12px;
}

.dev-included-list div {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 16px 18px;

    border-radius: 9px;

    background: #0d1118;

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

    color: #adb5c0;

    font-size: 14px;
}

.dev-included-list span {
    color: #b8c0cc;
}


/* =========================================
   DEV PRICING PREVIEW
========================================= */

.dev-pricing-preview-section {
    background: #0b0f15;
}

.dev-pricing-preview {
    display: grid;

    grid-template-columns: 1fr 0.65fr;

    gap: 60px;

    align-items: center;

    padding: 50px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(184,192,204,0.13),
            transparent 38%
        ),
        #10151d;

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

    border-radius: 18px;
}

.dev-pricing-preview h2 {
    font-size: clamp(32px,5vw,48px);

    line-height: 1.1;

    margin-bottom: 12px;
}

.dev-pricing-preview p {
    color: #929aa7;

    line-height: 1.8;
}

.dev-price-display {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}

.dev-price-display > span {
    color: #687281;

    font-size: 9px;

    letter-spacing: 1.8px;
}

.dev-price-display strong {
    font-size: clamp(38px,6vw,60px);

    line-height: 1;
}


/* =========================================
   FINAL DEV CTA
========================================= */

.dev-final-cta {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 35px;

    padding: 50px;

    border-radius: 18px;

    background: #10151d;

    border:
        1px solid rgba(255,255,255,0.08);
}

.dev-final-cta h2 {
    font-size: clamp(30px,5vw,46px);

    line-height: 1.1;

    margin-bottom: 12px;
}

.dev-final-cta p {
    color: #929aa7;
}


/* =========================================
   WEB DEVELOPMENT TABLET
========================================= */

@media (max-width: 900px) {

    .dev-showcase-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .browser-mockup {
        max-width: 680px;

        transform: none;
    }

    .dev-foundation-grid {
        grid-template-columns: 1fr;
    }

    .dev-foundation-item:nth-child(odd) {
        border-right: none;
    }

    .dev-included-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .dev-pricing-preview {
        grid-template-columns: 1fr;
    }

    .dev-final-cta {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================
   WEB DEVELOPMENT MOBILE
========================================= */

@media (max-width: 600px) {

    .dev-showcase-hero {
        min-height: auto;

        padding: 110px 0 70px;
    }

    .dev-showcase-copy h1 {
        letter-spacing: -2px;
    }

    .browser-content {
        min-height: 330px;

        padding: 18px;
    }

    .browser-demo-nav span {
        display: none;
    }

    .browser-demo-hero {
        padding-top: 45px;
    }

    .browser-demo-hero h3 {
        font-size: 24px;
    }

    .dev-types-grid {
        grid-template-columns: 1fr;
    }

    .dev-type-wide {
        grid-column: auto;
    }

    .dev-type-large {
        min-height: 260px;
    }

    .dev-included-list {
        grid-template-columns: 1fr;
    }

    .dev-pricing-preview {
        padding: 30px;
    }

    .dev-final-cta {
        padding: 30px;
    }

}

/* =========================================
   WEB DEVELOPMENT ICONS
========================================= */

.dev-foundation-icon,
.dev-type-icon {
    width: 48px;
    height: 48px;

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

    border-radius: 12px;

    background: rgba(184, 192, 204, 0.07);

    border: 1px solid rgba(184, 192, 204, 0.14);

    color: #b8c0cc;
}

.dev-foundation-icon svg,
.dev-type-icon svg {
    width: 23px;
    height: 23px;

    stroke-width: 1.7;
}

.dev-type-icon {
    margin-bottom: 22px;
}

.dev-type-card:hover .dev-type-icon {
    transform: translateY(-2px);

    background: rgba(184, 192, 204, 0.11);

    border-color: rgba(184, 192, 204, 0.3);
}

.dev-type-icon {
    transition: 0.3s ease;
}

/* =========================================
   POSSIBLE FEATURE ICONS
========================================= */

.dev-feature-item {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 16px 18px;

    border-radius: 10px;

    background: #0d1118;

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

    color: #adb5c0;

    font-size: 14px;

    transition: 0.3s ease;
}

.dev-feature-item svg {
    width: 21px;
    height: 21px;

    flex-shrink: 0;

    color: #b8c0cc;

    stroke-width: 1.7;
}

.dev-feature-item:hover {
    transform: translateY(-3px);

    border-color: rgba(184,192,204,0.25);

    background: #10151d;
}

/* =========================================
   DIGITAL SYSTEM HERO
========================================= */

.digital-system-hero {
    min-height: 84vh;

    display: flex;
    align-items: center;

    padding: 120px 0 90px;

    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(184, 192, 204, 0.09),
            transparent 32%
        ),
        #080b10;
}

.digital-system-layout {
    display: grid;

    grid-template-columns: 1fr 0.95fr;

    align-items: center;

    gap: 70px;
}

.digital-system-copy h1 {
    font-size: clamp(48px, 7vw, 78px);

    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 25px;
}

.digital-system-copy h1 span {
    display: block;

    color: #b8c0cc;
}

.digital-system-copy p {
    max-width: 620px;

    color: #9ea7b4;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 30px;
}


/* =========================================
   DIGITAL SYSTEM PANEL
========================================= */

.digital-system-panel {
    padding: 28px;

    background: #10151d;

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

    border-radius: 18px;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.38);
}

.digital-panel-header {
    display: flex;

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

    gap: 20px;

    padding-bottom: 20px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}

.digital-panel-header > div:first-child span {
    color: #66717f;

    font-size: 9px;

    letter-spacing: 1.8px;
}

.digital-panel-header h3 {
    margin-top: 5px;

    font-size: 21px;
}

.digital-system-status {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 11px;

    border-radius: 25px;

    background:
        rgba(101,216,138,0.07);

    border:
        1px solid rgba(101,216,138,0.16);

    font-size: 11px;
}

.digital-system-status > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #65d88a;

    box-shadow:
        0 0 9px rgba(101,216,138,0.55);
}


/* =========================================
   DIGITAL NODE MAP
========================================= */

.digital-node-map {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 18px;

    min-height: 250px;

    padding: 30px 0;
}

.digital-node {
    padding: 18px 12px;

    text-align: center;

    background: #0b0f15;

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

    border-radius: 12px;
}

.digital-node-icon {
    width: 42px;
    height: 42px;

    display: flex;

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

    margin: 0 auto 10px;

    border-radius: 10px;

    background:
        rgba(184,192,204,0.07);

    border:
        1px solid rgba(184,192,204,0.14);

    color: #b8c0cc;
}

.digital-node-icon svg {
    width: 20px;
    height: 20px;

    stroke-width: 1.7;
}

.digital-node > span {
    color: #9099a5;

    font-size: 11px;
}

.digital-core-node {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 150px;

    padding: 20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184,192,204,0.12),
            #0b0f15 70%
        );

    border:
        1px solid rgba(184,192,204,0.25);

    box-shadow:
        0 0 40px rgba(184,192,204,0.05);
}

.digital-core-icon {
    width: 42px;
    height: 42px;

    display: flex;

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

    margin-bottom: 10px;

    border-radius: 50%;

    background: #b8c0cc;

    color: #080b10;

    font-weight: 800;
}

.digital-core-node strong {
    font-size: 13px;

    letter-spacing: 2px;
}

.digital-core-node small {
    margin-top: 4px;

    color: #6f7985;
}


/* =========================================
   MINI MODULES
========================================= */

.digital-mini-modules {
    display: grid;

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

    gap: 10px;
}

.digital-mini-modules div {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px;

    border-radius: 8px;

    background: #0b0f15;

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

    color: #8f98a4;

    font-size: 10px;
}

.digital-mini-modules svg {
    width: 16px;
    height: 16px;

    color: #b8c0cc;

    stroke-width: 1.6;
}


/* =========================================
   WORKFLOW TRACK
========================================= */

.digital-workflow-section {
    background: #0b0f15;
}

.digital-workflow-track {
    display: flex;

    align-items: stretch;

    gap: 10px;
}

.digital-workflow-step {
    flex: 1;

    padding: 28px;

    background: #10151d;

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

    border-radius: 14px;
}

.digital-workflow-icon {
    width: 45px;
    height: 45px;

    display: flex;

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

    margin-bottom: 26px;

    border-radius: 11px;

    background:
        rgba(184,192,204,0.07);

    border:
        1px solid rgba(184,192,204,0.14);

    color: #b8c0cc;
}

.digital-workflow-icon svg {
    width: 21px;
    height: 21px;

    stroke-width: 1.7;
}

.digital-workflow-step > span {
    color: #697381;

    font-size: 9px;

    letter-spacing: 1.7px;
}

.digital-workflow-step h3 {
    margin: 10px 0;

    font-size: 19px;
}

.digital-workflow-step p {
    color: #929aa7;

    font-size: 13px;

    line-height: 1.7;
}

.digital-track-arrow {
    display: flex;

    align-items: center;

    color: #7c8591;

    font-size: 18px;
}


/* =========================================
   SOLUTION MODULES
========================================= */

.digital-modules-layout {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    align-items: start;

    gap: 80px;
}

.digital-modules-copy {
    position: sticky;

    top: 120px;
}

.digital-modules-copy h2 {
    font-size: clamp(32px, 5vw, 52px);

    line-height: 1.1;

    margin-bottom: 18px;
}

.digital-modules-copy p {
    color: #929aa7;

    line-height: 1.8;
}

.digital-module-stack {
    border-top:
        1px solid rgba(255,255,255,0.08);
}

.digital-module-item {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 20px;

    padding: 28px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

.digital-module-icon {
    width: 44px;
    height: 44px;

    display: flex;

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

    border-radius: 10px;

    background:
        rgba(184,192,204,0.06);

    border:
        1px solid rgba(184,192,204,0.13);

    color: #b8c0cc;
}

.digital-module-icon svg {
    width: 21px;
    height: 21px;

    stroke-width: 1.7;
}

.digital-module-item > div:last-child > span {
    color: #68727f;

    font-size: 9px;

    letter-spacing: 1.7px;
}

.digital-module-item h3 {
    margin: 7px 0;

    font-size: 20px;
}

.digital-module-item p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   USE CASES
========================================= */

.digital-usecase-section {
    background: #0b0f15;
}

.digital-usecase-grid {
    display: grid;

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

    gap: 18px;
}

.digital-usecase-card {
    min-height: 260px;

    display: flex;

    flex-direction: column;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            #10151d,
            #0b0f15
        );

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

    border-radius: 15px;
}

.digital-usecase-label {
    color: #7a8491;

    font-size: 9px;

    letter-spacing: 1.8px;
}

.digital-usecase-card h3 {
    max-width: 500px;

    margin: 25px 0;

    font-size: 23px;

    line-height: 1.4;
}

.digital-usecase-result {
    margin-top: auto;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,255,255,0.07);
}

.digital-usecase-result span {
    display: block;

    color: #67717e;

    font-size: 8px;

    letter-spacing: 1.6px;
}

.digital-usecase-result strong {
    display: block;

    margin-top: 7px;

    color: #b8c0cc;

    font-size: 14px;
}


/* =========================================
   PROJECT PROCESS
========================================= */

.digital-project-layout {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: start;

    gap: 70px;
}

.digital-project-layout h2 {
    font-size: clamp(32px,5vw,52px);

    line-height: 1.1;

    margin-bottom: 18px;
}

.digital-project-layout > div:first-child p {
    color: #929aa7;

    line-height: 1.8;
}

.digital-project-list {
    border-top:
        1px solid rgba(255,255,255,0.08);
}

.digital-project-list div {
    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 20px;

    padding: 22px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}

.digital-project-list span {
    color: #7b8591;

    font-size: 10px;

    letter-spacing: 1.8px;
}

.digital-project-list strong {
    font-size: 16px;
}


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

.digital-final-cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    padding: 50px;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(184,192,204,0.08),
            transparent 35%
        ),
        #10151d;

    border:
        1px solid rgba(255,255,255,0.08);
}

.digital-final-cta h2 {
    font-size: clamp(30px,5vw,46px);

    line-height: 1.1;

    margin-bottom: 12px;
}

.digital-final-cta p {
    max-width: 650px;

    color: #929aa7;
}


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

@media (max-width: 900px) {

    .digital-system-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .digital-system-panel {
        max-width: 680px;
    }

    .digital-workflow-track {
        display: grid;

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

    .digital-track-arrow {
        display: none;
    }

    .digital-modules-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .digital-modules-copy {
        position: static;
    }

    .digital-project-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .digital-final-cta {
        flex-direction: column;

        align-items: flex-start;
    }

}


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

@media (max-width: 600px) {

    .digital-system-hero {
        min-height: auto;

        padding: 110px 0 70px;
    }

    .digital-system-copy h1 {
        letter-spacing: -2px;
    }

    .digital-node-map {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .digital-core-node {
        border-radius: 15px;

        min-height: 120px;
    }

    .digital-mini-modules {
        grid-template-columns: 1fr;
    }

    .digital-workflow-track {
        grid-template-columns: 1fr;
    }

    .digital-usecase-grid {
        grid-template-columns: 1fr;
    }

    .digital-final-cta {
        padding: 30px;
    }

}

/* =========================================
   PRICING PAGE
========================================= */


/* HERO */

.pricing-main-hero {
    min-height: 82vh;

    display: flex;
    align-items: center;

    padding: 130px 0 90px;

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(184, 192, 204, 0.07),
            transparent 32%
        ),
        #080b10;
}


.pricing-hero-layout {
    display: grid;

    grid-template-columns: 1fr 0.85fr;

    gap: 80px;

    align-items: center;
}


.pricing-hero-copy h1 {
    font-size: clamp(48px, 7vw, 78px);

    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 25px;
}


.pricing-hero-copy h1 span {
    display: block;

    color: #b8c0cc;
}


.pricing-hero-copy p {
    max-width: 620px;

    color: #9ea7b4;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 30px;
}



/* =========================================
   RANGE PANEL
========================================= */

.pricing-range-panel {
    padding: 35px;

    background: #10151d;

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

    border-radius: 16px;
}


.pricing-panel-label {
    color: #737d89;

    font-size: 9px;

    letter-spacing: 2px;
}


.pricing-range-main {
    display: flex;

    align-items: center;

    gap: 22px;

    padding: 32px 0;
}


.pricing-range-main > div {
    flex: 1;
}


.pricing-range-main small {
    display: block;

    margin-bottom: 8px;

    color: #6f7985;

    font-size: 9px;

    letter-spacing: 1.5px;
}


.pricing-range-main strong {
    display: block;

    font-size: clamp(28px, 4vw, 42px);

    letter-spacing: -2px;
}


.pricing-range-line {
    width: 35px;
    height: 1px;

    background:
        rgba(184,192,204,0.35);
}


.pricing-range-panel > p {
    padding-bottom: 25px;

    color: #929aa7;

    font-size: 13px;

    line-height: 1.7;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


.pricing-range-meta {
    display: grid;

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

    gap: 15px;

    padding-top: 22px;
}


.pricing-range-meta span {
    display: block;

    color: #69737f;

    font-size: 8px;

    letter-spacing: 1.4px;
}


.pricing-range-meta strong {
    display: block;

    margin-top: 5px;

    font-size: 13px;
}



/* =========================================
   PRICING PACKAGES
========================================= */

.pricing-packages-section {
    background: #0b0f15;
}


.pricing-package-list {
    border-top:
        1px solid rgba(255,255,255,0.09);
}


.pricing-package {
    display: grid;

    grid-template-columns:
        1.05fr 1.2fr 1.25fr 0.9fr;

    align-items: start;

    gap: 35px;

    padding: 38px 20px;

    border-bottom:
        1px solid rgba(255,255,255,0.08);

    transition: 0.25s ease;
}


.pricing-package:hover {
    background:
        rgba(255,255,255,0.018);
}


.pricing-package-emphasis {
    border-left:
        2px solid rgba(184,192,204,0.55);

    padding-left: 26px;
}


.pricing-package-name {
    display: flex;

    gap: 16px;
}


.pricing-package-name > span {
    color: #6d7783;

    font-size: 10px;

    letter-spacing: 1.5px;
}


.pricing-package-name small,
.pricing-package-for > span,
.pricing-package-price small {
    display: block;

    margin-bottom: 7px;

    color: #6d7783;

    font-size: 8px;

    letter-spacing: 1.6px;
}


.pricing-package-name h3 {
    font-size: 20px;
}


.pricing-package-for p {
    color: #929aa7;

    font-size: 13px;

    line-height: 1.7;
}


.pricing-package-features {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.pricing-package-features span {
    padding: 7px 10px;

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

    border-radius: 5px;

    color: #a4adb8;

    font-size: 11px;
}


.pricing-package-price {
    text-align: right;
}


.pricing-package-price strong {
    font-size: 20px;

    white-space: nowrap;
}


.pricing-package-price strong span {
    color: #69737f;

    font-weight: 400;
}



/* =========================================
   PRICING FACTORS
========================================= */

.pricing-factors-layout {
    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 90px;

    align-items: start;
}


.pricing-factors-heading {
    position: sticky;

    top: 120px;
}


.pricing-factors-heading h2 {
    font-size:
        clamp(32px, 5vw, 52px);

    line-height: 1.1;

    margin-bottom: 18px;
}


.pricing-factors-heading p {
    color: #929aa7;

    line-height: 1.8;
}


.pricing-factor-list {
    border-top:
        1px solid rgba(255,255,255,0.08);
}


.pricing-factor {
    display: grid;

    grid-template-columns:
        55px 1fr;

    gap: 20px;

    padding: 27px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}


.pricing-factor > span {
    color: #78828e;

    font-size: 10px;

    letter-spacing: 1.8px;
}


.pricing-factor h3 {
    margin-bottom: 7px;

    font-size: 19px;
}


.pricing-factor p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.7;
}



/* =========================================
   CUSTOM PROJECT
========================================= */

.pricing-custom-section {
    background: #0b0f15;
}


.pricing-custom-box {
    display: grid;

    grid-template-columns:
        100px 1fr 0.45fr;

    gap: 40px;

    align-items: center;

    padding: 45px;

    background: #10151d;

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

    border-radius: 16px;
}


.pricing-custom-number {
    width: 78px;
    height: 78px;

    display: flex;

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

    border:
        1px solid rgba(184,192,204,0.25);

    border-radius: 50%;

    color: #b8c0cc;

    font-size: 10px;

    letter-spacing: 1.5px;
}


.pricing-custom-content h2 {
    margin-bottom: 12px;

    font-size:
        clamp(28px, 4vw, 42px);

    line-height: 1.1;
}


.pricing-custom-content p {
    max-width: 680px;

    color: #929aa7;

    line-height: 1.8;
}


.pricing-custom-action {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
}


.pricing-custom-action > span {
    color: #6e7884;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.pricing-custom-action strong {
    margin-bottom: 10px;

    font-size: 19px;
}



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

.pricing-recurring-list {
    border-top:
        1px solid rgba(255,255,255,0.09);
}


.pricing-recurring-item {
    display: grid;

    grid-template-columns:
        1fr 1.2fr 0.65fr;

    gap: 50px;

    align-items: center;

    padding: 30px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}


.pricing-recurring-item > div:first-child span {
    color: #737d89;

    font-size: 8px;

    letter-spacing: 1.7px;
}


.pricing-recurring-item h3 {
    margin-top: 6px;

    font-size: 19px;
}


.pricing-recurring-item > p {
    color: #929aa7;

    font-size: 13px;

    line-height: 1.7;
}


.pricing-recurring-value small {
    display: block;

    color: #6f7985;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.pricing-recurring-value strong {
    display: block;

    margin-top: 6px;

    font-size: 13px;
}



/* =========================================
   PROJECT PROCESS
========================================= */

.pricing-payment-section {
    background: #0b0f15;
}


.pricing-payment-track {
    display: grid;

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

    gap: 0;

    border-top:
        1px solid rgba(255,255,255,0.08);
}


.pricing-payment-step {
    padding: 28px 22px;

    border-right:
        1px solid rgba(255,255,255,0.07);
}


.pricing-payment-step:last-child {
    border-right: none;
}


.pricing-payment-step > span {
    color: #747e8a;

    font-size: 9px;

    letter-spacing: 1.6px;
}


.pricing-payment-step h3 {
    margin: 16px 0 8px;

    font-size: 17px;
}


.pricing-payment-step p {
    color: #929aa7;

    font-size: 12px;

    line-height: 1.7;
}



/* =========================================
   PRICING NOTE
========================================= */

.pricing-note {
    display: grid;

    grid-template-columns:
        120px 1fr;

    gap: 35px;

    padding-top: 25px;

    border-top:
        1px solid rgba(255,255,255,0.09);
}


.pricing-note > span {
    color: #858f9a;

    font-size: 9px;

    letter-spacing: 1.8px;
}


.pricing-note p {
    max-width: 850px;

    color: #929aa7;

    font-size: 13px;

    line-height: 1.8;
}



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

.pricing-final-cta {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    padding: 50px;

    background: #10151d;

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

    border-radius: 16px;
}


.pricing-final-cta h2 {
    margin-bottom: 12px;

    font-size:
        clamp(30px, 5vw, 46px);

    line-height: 1.1;
}


.pricing-final-cta p {
    max-width: 650px;

    color: #929aa7;
}



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

@media (max-width: 900px) {

    .pricing-hero-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .pricing-range-panel {
        max-width: 650px;
    }


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


    .pricing-package-price {
        text-align: left;
    }


    .pricing-factors-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .pricing-factors-heading {
        position: static;
    }


    .pricing-custom-box {
        grid-template-columns:
            80px 1fr;
    }


    .pricing-custom-action {
        grid-column: 2;
    }


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


    .pricing-recurring-value {
        grid-column: 2;
    }


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


    .pricing-payment-step {
        border-bottom:
            1px solid rgba(255,255,255,0.07);
    }


    .pricing-final-cta {
        flex-direction: column;

        align-items: flex-start;
    }

}



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

@media (max-width: 600px) {

    .pricing-main-hero {
        min-height: auto;

        padding: 110px 0 70px;
    }


    .pricing-hero-copy h1 {
        letter-spacing: -2px;
    }


    .pricing-range-main {
        flex-direction: column;

        align-items: flex-start;
    }


    .pricing-range-line {
        width: 100%;
    }


    .pricing-range-meta {
        grid-template-columns: 1fr;
    }


    .pricing-package {
        grid-template-columns: 1fr;

        gap: 22px;

        padding: 30px 0;
    }


    .pricing-package-emphasis {
        padding-left: 15px;
    }


    .pricing-package-price {
        text-align: left;
    }


    .pricing-custom-box {
        grid-template-columns: 1fr;

        padding: 30px;
    }


    .pricing-custom-action {
        grid-column: auto;
    }


    .pricing-recurring-item {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .pricing-recurring-value {
        grid-column: auto;
    }


    .pricing-payment-track {
        grid-template-columns: 1fr;
    }


    .pricing-payment-step {
        border-right: none;
    }


    .pricing-note {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .pricing-final-cta {
        padding: 30px;
    }

}

/* =========================================
   PORTFOLIO PAGE
========================================= */


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

.portfolio-main-hero {
    min-height: 82vh;

    display: flex;
    align-items: center;

    padding: 130px 0 90px;

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(184,192,204,0.06),
            transparent 32%
        ),
        #080b10;
}


.portfolio-hero-layout {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    align-items: center;

    gap: 90px;
}


.portfolio-hero-copy h1 {
    font-size: clamp(48px,7vw,78px);

    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 25px;
}


.portfolio-hero-copy h1 span {
    display: block;

    color: #b8c0cc;
}


.portfolio-hero-copy p {
    max-width: 600px;

    color: #9ea7b4;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 30px;
}



/* =========================================
   PORTFOLIO INDEX
========================================= */

.portfolio-index {
    border-top:
        1px solid rgba(255,255,255,0.1);

    border-bottom:
        1px solid rgba(255,255,255,0.1);
}


.portfolio-index-heading {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 15px 0 22px;
}


.portfolio-index-heading span {
    color: #707a86;

    font-size: 8px;

    letter-spacing: 1.8px;
}


.portfolio-index-heading strong {
    color: #9aa3ad;

    font-size: 10px;

    letter-spacing: 2px;
}


.portfolio-index-row {
    display: grid;

    grid-template-columns:
        45px 1fr 1.2fr;

    gap: 18px;

    align-items: center;

    padding: 20px 0;

    border-top:
        1px solid rgba(255,255,255,0.07);
}


.portfolio-index-row > span {
    color: #737d89;

    font-size: 9px;
}


.portfolio-index-row strong {
    font-size: 14px;
}


.portfolio-index-row small {
    color: #727c88;

    font-size: 11px;
}



/* =========================================
   FEATURE PROJECT
========================================= */

.portfolio-selected-section {
    background: #0b0f15;
}


.portfolio-feature-project {
    display: grid;

    grid-template-columns:
        1.15fr 0.85fr;

    gap: 65px;

    align-items: center;

    padding-top: 15px;
}


.portfolio-project-visual {
    min-width: 0;
}


.portfolio-browser-frame {
    overflow: hidden;

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

    border-radius: 14px;

    background: #10151d;

    box-shadow:
        0 30px 70px rgba(0,0,0,0.25);
}


.portfolio-browser-bar {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 12px 15px;

    background: #090d12;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


.portfolio-browser-dots {
    display: flex;

    gap: 6px;
}


.portfolio-browser-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.18);
}


.portfolio-browser-address {
    flex: 1;

    padding: 7px 10px;

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

    border-radius: 5px;

    color: #65707d;

    background: #080b10;

    font-size: 9px;
}


.portfolio-browser-page {
    min-height: 430px;

    padding: 28px;

    background:
        linear-gradient(
            145deg,
            #0d1118,
            #090d12
        );
}


.portfolio-demo-header {
    display: flex;

    align-items: center;

    gap: 15px;
}


.portfolio-demo-header strong {
    margin-right: auto;

    color: #d5d9de;

    font-size: 10px;

    letter-spacing: 2px;
}


.portfolio-demo-header span {
    width: 36px;
    height: 4px;

    border-radius: 10px;

    background:
        rgba(255,255,255,0.09);
}


.portfolio-demo-title {
    max-width: 430px;

    padding-top: 80px;
}


.portfolio-demo-title small {
    color: #7c8692;

    font-size: 8px;

    letter-spacing: 1.8px;
}


.portfolio-demo-title h3 {
    margin: 12px 0 20px;

    font-size:
        clamp(28px,4vw,46px);

    line-height: 1.05;

    letter-spacing: -2px;
}


.portfolio-demo-line {
    width: 75px;
    height: 1px;

    background:
        rgba(184,192,204,0.5);
}


.portfolio-demo-grid {
    display: grid;

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

    gap: 10px;

    margin-top: 70px;
}


.portfolio-demo-grid div {
    height: 90px;

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

    border-radius: 7px;

    background:
        rgba(255,255,255,0.025);
}



/* PROJECT INFO */

.portfolio-project-category {
    color: #727c88;

    font-size: 9px;

    letter-spacing: 1.8px;
}


.portfolio-project-info h3 {
    margin: 18px 0;

    font-size:
        clamp(32px,5vw,52px);

    line-height: 1.05;
}


.portfolio-project-info > p {
    color: #929aa7;

    line-height: 1.8;

    font-size: 14px;
}


.portfolio-project-meta {
    margin-top: 35px;

    border-top:
        1px solid rgba(255,255,255,0.08);
}


.portfolio-project-meta div {
    display: grid;

    grid-template-columns:
        120px 1fr;

    gap: 20px;

    padding: 15px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


.portfolio-project-meta span {
    color: #707a86;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.portfolio-project-meta strong {
    font-size: 12px;

    font-weight: 500;
}



/* =========================================
   PROJECT ARCHIVE
========================================= */

.portfolio-archive-heading {
    display: grid;

    grid-template-columns:
        1fr 0.8fr;

    align-items: end;

    gap: 60px;

    margin-bottom: 55px;
}


.portfolio-archive-heading h2 {
    font-size:
        clamp(32px,5vw,52px);

    line-height: 1.1;
}


.portfolio-archive-heading > p {
    color: #929aa7;

    line-height: 1.8;

    font-size: 14px;
}


.portfolio-placeholder-grid {
    display: grid;

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

    gap: 16px;
}


.portfolio-placeholder {
    min-height: 360px;

    display: flex;

    flex-direction: column;

    padding: 24px;

    background: #0d1118;

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

    transition: 0.3s ease;
}


.portfolio-placeholder:hover {
    transform: translateY(-4px);

    border-color:
        rgba(184,192,204,0.18);
}


.portfolio-placeholder-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.portfolio-placeholder-top span,
.portfolio-placeholder-top small {
    color: #707a86;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.portfolio-placeholder-center {
    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;
}


.portfolio-placeholder-center span {
    color:
        rgba(184,192,204,0.12);

    font-size: 90px;

    font-weight: 700;

    letter-spacing: -6px;
}


.portfolio-placeholder-bottom {
    padding-top: 20px;

    border-top:
        1px solid rgba(255,255,255,0.07);
}


.portfolio-placeholder-bottom strong {
    display: block;

    font-size: 15px;
}


.portfolio-placeholder-bottom span {
    display: block;

    margin-top: 5px;

    color: #727c88;

    font-size: 11px;
}



/* =========================================
   CASE STUDIES
========================================= */

.portfolio-case-section {
    background: #0b0f15;
}


.portfolio-case-layout {
    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 90px;

    align-items: start;
}


.portfolio-case-layout > div:first-child h2 {
    font-size:
        clamp(32px,5vw,52px);

    line-height: 1.1;

    margin-bottom: 18px;
}


.portfolio-case-layout > div:first-child p {
    color: #929aa7;

    line-height: 1.8;
}


.portfolio-case-list {
    border-top:
        1px solid rgba(255,255,255,0.08);
}


.portfolio-case-row {
    display: grid;

    grid-template-columns:
        55px 1fr;

    gap: 20px;

    padding: 26px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}


.portfolio-case-row > span {
    color: #737d89;

    font-size: 9px;

    letter-spacing: 1.5px;
}


.portfolio-case-row h3 {
    margin-bottom: 7px;

    font-size: 18px;
}


.portfolio-case-row p {
    color: #929aa7;

    font-size: 13px;

    line-height: 1.7;
}



/* =========================================
   CAPABILITIES
========================================= */

.portfolio-capability-strip {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    padding-top: 10px;
}


.portfolio-capability-strip span {
    padding: 12px 15px;

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

    color: #a1a9b4;

    font-size: 12px;

    background: #0d1118;
}



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

.portfolio-final-cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 50px;

    background: #10151d;

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

    border-radius: 16px;
}


.portfolio-final-cta h2 {
    margin-bottom: 12px;

    font-size:
        clamp(30px,5vw,46px);

    line-height: 1.1;
}


.portfolio-final-cta p {
    max-width: 650px;

    color: #929aa7;

    line-height: 1.7;
}



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

@media (max-width: 900px) {

    .portfolio-hero-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .portfolio-index {
        max-width: 650px;
    }


    .portfolio-feature-project {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .portfolio-project-info {
        max-width: 700px;
    }


    .portfolio-archive-heading {
        grid-template-columns: 1fr;

        gap: 20px;
    }


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


    .portfolio-case-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .portfolio-final-cta {
        flex-direction: column;

        align-items: flex-start;
    }

}



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

@media (max-width: 600px) {

    .portfolio-main-hero {
        min-height: auto;

        padding: 110px 0 70px;
    }


    .portfolio-hero-copy h1 {
        letter-spacing: -2px;
    }


    .portfolio-index-row {
        grid-template-columns:
            30px 1fr;
    }


    .portfolio-index-row small {
        grid-column: 2;
    }


    .portfolio-browser-page {
        min-height: 330px;

        padding: 18px;
    }


    .portfolio-demo-title {
        padding-top: 55px;
    }


    .portfolio-demo-grid {
        margin-top: 45px;
    }


    .portfolio-demo-grid div {
        height: 60px;
    }


    .portfolio-project-meta div {
        grid-template-columns: 1fr;

        gap: 5px;
    }


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


    .portfolio-placeholder {
        min-height: 310px;
    }


    .portfolio-final-cta {
        padding: 30px;
    }

}

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


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

.contact-main-hero {
    padding: 150px 0 100px;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(184,192,204,0.06),
            transparent 30%
        ),
        #080b10;
}


.contact-hero-layout {
    display: grid;

    grid-template-columns:
        1fr 0.8fr;

    gap: 100px;

    align-items: end;
}


.contact-hero-copy h1 {
    font-size:
        clamp(48px,7vw,78px);

    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 25px;
}


.contact-hero-copy h1 span {
    display: block;

    color: #b8c0cc;
}


.contact-hero-copy p {
    max-width: 620px;

    color: #9ea7b4;

    font-size: 17px;

    line-height: 1.8;
}



/* =========================================
   DIRECT CONTACT LINKS
========================================= */

.contact-direct-list {
    border-top:
        1px solid rgba(255,255,255,0.1);
}


.contact-direct-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 23px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.08);

    color: inherit;

    text-decoration: none;

    transition: 0.25s ease;
}


.contact-direct-row:hover {
    padding-left: 8px;
}


.contact-direct-row div > span {
    display: block;

    color: #707a86;

    font-size: 8px;

    letter-spacing: 1.8px;
}


.contact-direct-row strong {
    display: block;

    margin-top: 6px;

    font-size: 15px;

    font-weight: 500;
}


.contact-direct-arrow {
    color: #858f9a;

    font-size: 18px;
}



/* =========================================
   PROJECT ENQUIRY
========================================= */

.contact-form-section {
    background: #0b0f15;
}


.contact-form-layout {
    display: grid;

    grid-template-columns:
        0.65fr 1.35fr;

    gap: 90px;

    align-items: start;
}


.contact-form-intro {
    position: sticky;

    top: 120px;
}


.contact-form-intro h2 {
    margin-bottom: 18px;

    font-size:
        clamp(34px,5vw,54px);

    line-height: 1.05;
}


.contact-form-intro > p {
    color: #929aa7;

    line-height: 1.8;
}


.contact-form-guide {
    margin-top: 45px;

    border-top:
        1px solid rgba(255,255,255,0.08);
}


.contact-form-guide div {
    display: grid;

    grid-template-columns:
        40px 1fr;

    gap: 15px;

    padding: 18px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


.contact-form-guide span {
    color: #747e8a;

    font-size: 9px;

    letter-spacing: 1.5px;
}


.contact-form-guide p {
    color: #929aa7;

    font-size: 12px;

    line-height: 1.6;
}



/* =========================================
   ENQUIRY PANEL
========================================= */

.XAQIL-enquiry-panel {
    padding: 42px;

    background: #10151d;

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

    border-radius: 16px;
}


.enquiry-panel-heading {
    padding-bottom: 28px;

    margin-bottom: 30px;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}


.enquiry-panel-heading > span {
    color: #737d89;

    font-size: 9px;

    letter-spacing: 1.8px;
}


.enquiry-panel-heading h3 {
    margin-top: 7px;

    font-size: 25px;
}



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

.form-grid-two {
    display: grid;

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

    gap: 18px;
}


.form-field {
    margin-bottom: 22px;
}


.form-field label {
    display: block;

    margin-bottom: 9px;

    color: #aeb6c0;

    font-size: 11px;

    font-weight: 500;
}


.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;

    padding: 15px 16px;

    outline: none;

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

    border-radius: 7px;

    background: #0b0f15;

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    transition: 0.2s ease;
}


.form-field textarea {
    resize: vertical;

    min-height: 160px;
}


.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #59636f;
}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color:
        rgba(184,192,204,0.4);

    background: #0d1118;
}


.form-field select {
    cursor: pointer;
}


.form-field select option {
    color: #ffffff;

    background: #10151d;
}



/* =========================================
   SUBMIT AREA
========================================= */

.form-submit-area {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding-top: 10px;
}


.form-submit-area p {
    max-width: 400px;

    color: #747e8a;

    font-size: 11px;

    line-height: 1.6;
}


.contact-submit-button {
    border: none;

    cursor: pointer;

    font-family: inherit;
}



/* =========================================
   WHAT HAPPENS NEXT
========================================= */

.contact-next-track {
    display: grid;

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

    border-top:
        1px solid rgba(255,255,255,0.09);
}


.contact-next-step {
    padding: 30px 25px;

    border-right:
        1px solid rgba(255,255,255,0.07);
}


.contact-next-step:last-child {
    border-right: none;
}


.contact-next-step > span {
    color: #747e8a;

    font-size: 9px;

    letter-spacing: 1.6px;
}


.contact-next-step h3 {
    margin: 18px 0 9px;

    font-size: 18px;
}


.contact-next-step p {
    color: #929aa7;

    font-size: 12px;

    line-height: 1.7;
}



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

.contact-details-section {
    background: #0b0f15;
}


.contact-details-layout {
    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 90px;

    align-items: start;
}


.contact-details-layout h2 {
    margin-bottom: 18px;

    font-size:
        clamp(32px,5vw,52px);

    line-height: 1.1;
}


.contact-details-layout > div:first-child p {
    color: #929aa7;

    line-height: 1.8;
}


.contact-details-data {
    border-top:
        1px solid rgba(255,255,255,0.09);
}


.contact-details-data div {
    display: grid;

    grid-template-columns:
        150px 1fr;

    gap: 25px;

    padding: 22px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}


.contact-details-data span {
    color: #727c88;

    font-size: 8px;

    letter-spacing: 1.7px;
}


.contact-details-data a,
.contact-details-data strong {
    color: #e4e7eb;

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;
}


.contact-details-data a:hover {
    color: #b8c0cc;
}



/* =========================================
   CONTACT FINAL CTA
========================================= */

.contact-final-cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 50px;

    background: #10151d;

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

    border-radius: 16px;
}


.contact-final-cta h2 {
    margin-bottom: 12px;

    font-size:
        clamp(30px,5vw,46px);

    line-height: 1.1;
}


.contact-final-cta p {
    color: #929aa7;
}



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

@media (max-width: 900px) {

    .contact-hero-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .contact-direct-list {
        max-width: 650px;
    }


    .contact-form-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .contact-form-intro {
        position: static;
    }


    .contact-form-guide {
        max-width: 650px;
    }


    .contact-details-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


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


    .contact-next-step {
        border-bottom:
            1px solid rgba(255,255,255,0.07);
    }


    .contact-final-cta {
        flex-direction: column;

        align-items: flex-start;
    }

}



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

@media (max-width: 600px) {

    .contact-main-hero {
        padding: 110px 0 70px;
    }


    .contact-hero-copy h1 {
        letter-spacing: -2px;
    }


    .form-grid-two {
        grid-template-columns: 1fr;
    }


    .XAQIL-enquiry-panel {
        padding: 25px 20px;
    }


    .form-submit-area {
        flex-direction: column;

        align-items: flex-start;
    }


    .contact-submit-button {
        width: 100%;

        text-align: center;
    }


    .contact-next-track {
        grid-template-columns: 1fr;
    }


    .contact-next-step {
        border-right: none;
    }


    .contact-details-data div {
        grid-template-columns: 1fr;

        gap: 6px;
    }


    .contact-final-cta {
        padding: 30px;
    }

}

/* =========================================
   CONTACT METHOD BUTTONS
========================================= */

.contact-methods {
    display: grid;

    gap: 1px;

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

    border-bottom:
        1px solid rgba(255,255,255,0.09);
}


.contact-method {
    display: grid;

    grid-template-columns:
        48px 1fr 22px;

    align-items: center;

    gap: 18px;

    padding: 20px 0;

    color: inherit;

    text-decoration: none;

    border-bottom:
        1px solid rgba(255,255,255,0.07);

    transition: 0.25s ease;
}


.contact-method:last-child {
    border-bottom: none;
}


.contact-method:hover {
    padding-left: 8px;
}


.contact-method-icon {
    width: 44px;
    height: 44px;

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

    border:
        1px solid rgba(184,192,204,0.15);

    border-radius: 10px;

    background:
        rgba(184,192,204,0.04);

    color: #b8c0cc;

    transition: 0.25s ease;
}


.contact-method-icon svg {
    width: 20px;
    height: 20px;

    stroke-width: 1.6;
}


.contact-method:hover .contact-method-icon {
    background:
        rgba(184,192,204,0.08);

    border-color:
        rgba(184,192,204,0.28);
}


.contact-method div:nth-child(2) > span {
    display: block;

    margin-bottom: 4px;

    color: #707a86;

    font-size: 8px;

    letter-spacing: 1.7px;
}


.contact-method strong {
    font-size: 15px;

    font-weight: 500;
}


.contact-method-arrow {
    width: 17px;
    height: 17px;

    color: #737d89;

    stroke-width: 1.5;
}



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

.contact-details-actions {
    display: grid;

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

    gap: 12px;
}


.contact-action {
    min-height: 150px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: space-between;

    padding: 22px;

    text-decoration: none;

    color: #ffffff;

    background: #10151d;

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

    border-radius: 12px;

    transition: 0.25s ease;
}


.contact-action:hover {
    transform: translateY(-4px);

    border-color:
        rgba(184,192,204,0.22);
}


.contact-action-icon {
    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 9px;

    background:
        rgba(184,192,204,0.05);

    border:
        1px solid rgba(184,192,204,0.12);

    color: #b8c0cc;
}


.contact-action-icon svg {
    width: 20px;
    height: 20px;

    stroke-width: 1.6;
}


.contact-action > span {
    font-size: 14px;

    font-weight: 500;
}



/* =========================================
   CONTACT ICONS - MOBILE
========================================= */

@media (max-width: 600px) {

    .contact-details-actions {
        grid-template-columns: 1fr;
    }


    .contact-action {
        min-height: 110px;
    }

}

/* =========================================
   AUTOMATIC PRICE FIELD
========================================= */

.form-field input[readonly] {
    color: #d7dce2;

    background: #0d1118;

    border-color:
        rgba(184,192,204,0.15);

    cursor: default;

    font-weight: 600;
}


.form-field-note {
    display: block;

    margin-top: 8px;

    color: #66707c;

    font-size: 9px;

    line-height: 1.5;
}

/* =========================================
   TECH SERVICES PAGE
========================================= */


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

.tech-main-hero {
    min-height: 84vh;

    display: flex;
    align-items: center;

    padding: 130px 0 90px;

    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(184,192,204,0.06),
            transparent 32%
        ),
        #080b10;
}


.tech-hero-layout {
    display: grid;

    grid-template-columns:
        1fr 0.8fr;

    align-items: center;

    gap: 90px;
}


.tech-hero-copy h1 {
    font-size:
        clamp(48px,7vw,78px);

    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 25px;
}


.tech-hero-copy h1 span {
    display: block;

    color: #b8c0cc;
}


.tech-hero-copy p {
    max-width: 620px;

    color: #9ea7b4;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 30px;
}



/* =========================================
   SERVICE INDEX
========================================= */

.tech-service-index {
    border-top:
        1px solid rgba(255,255,255,0.1);

    border-bottom:
        1px solid rgba(255,255,255,0.1);
}


.tech-index-heading {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 15px 0 22px;
}


.tech-index-heading span,
.tech-index-heading strong {
    color: #737d89;

    font-size: 8px;

    letter-spacing: 1.8px;
}


.tech-index-row {
    display: grid;

    grid-template-columns:
        42px 1fr;

    align-items: center;

    gap: 18px;

    padding: 19px 0;

    border-top:
        1px solid rgba(255,255,255,0.07);
}


.tech-index-row > svg {
    width: 20px;
    height: 20px;

    color: #b8c0cc;

    stroke-width: 1.5;
}


.tech-index-row strong {
    display: block;

    font-size: 14px;
}


.tech-index-row span {
    display: block;

    margin-top: 3px;

    color: #727c88;

    font-size: 10px;
}



/* =========================================
   MAIN TECH SERVICES
========================================= */

.tech-services-section {
    background: #0b0f15;
}


.tech-service-grid {
    display: grid;

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

    gap: 18px;
}


.tech-service-card {
    padding: 34px;

    background: #10151d;

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

    border-radius: 14px;

    transition: 0.3s ease;
}


.tech-service-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(184,192,204,0.22);
}


.tech-service-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 30px;

    color: #b8c0cc;

    border:
        1px solid rgba(184,192,204,0.14);

    border-radius: 11px;

    background:
        rgba(184,192,204,0.04);
}


.tech-service-icon svg {
    width: 22px;
    height: 22px;

    stroke-width: 1.6;
}


.tech-service-category {
    color: #707a86;

    font-size: 8px;

    letter-spacing: 1.8px;
}


.tech-service-card h3 {
    margin: 10px 0 12px;

    font-size: 23px;
}


.tech-service-card > p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.8;
}


.tech-service-card ul {
    list-style: none;

    margin-top: 24px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,255,255,0.07);
}


.tech-service-card li {
    padding: 7px 0;

    color: #a2abb6;

    font-size: 12px;
}


.tech-service-card li::before {
    content: "—";

    margin-right: 10px;

    color: #747e8a;
}



/* =========================================
   WIFI SECTION
========================================= */

.tech-wifi-layout {
    display: grid;

    grid-template-columns:
        0.75fr 1.25fr;

    gap: 90px;

    align-items: start;
}


.tech-wifi-copy {
    position: sticky;

    top: 120px;
}


.tech-wifi-copy h2 {
    margin-bottom: 18px;

    font-size:
        clamp(34px,5vw,54px);

    line-height: 1.05;
}


.tech-wifi-copy > p {
    color: #929aa7;

    line-height: 1.8;
}


.tech-small-note {
    margin-top: 25px;

    padding-top: 20px;

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

    font-size: 11px !important;

    color: #707a86 !important;
}


.tech-wifi-list {
    border-top:
        1px solid rgba(255,255,255,0.09);
}


.tech-wifi-item {
    display: grid;

    grid-template-columns:
        52px 1fr;

    gap: 20px;

    padding: 26px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}


.tech-wifi-icon {
    width: 44px;
    height: 44px;

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

    border:
        1px solid rgba(184,192,204,0.13);

    border-radius: 10px;

    color: #b8c0cc;
}


.tech-wifi-icon svg {
    width: 20px;
    height: 20px;

    stroke-width: 1.6;
}


.tech-wifi-item h3 {
    margin-bottom: 7px;

    font-size: 19px;
}


.tech-wifi-item p {
    color: #929aa7;

    font-size: 13px;

    line-height: 1.7;
}



/* =========================================
   SUPPORT OPTIONS
========================================= */

.tech-support-section {
    background: #0b0f15;
}


.tech-support-layout {
    display: grid;

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

    gap: 18px;
}


.tech-support-option {
    min-height: 350px;

    display: flex;

    flex-direction: column;

    padding: 35px;

    background: #10151d;

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

    border-radius: 14px;
}


.tech-support-number {
    color: #6d7783;

    font-size: 9px;

    letter-spacing: 1.8px;
}


.tech-support-icon {
    width: 48px;
    height: 48px;

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

    margin: 35px 0 25px;

    border:
        1px solid rgba(184,192,204,0.14);

    border-radius: 10px;

    color: #b8c0cc;
}


.tech-support-icon svg {
    width: 22px;
    height: 22px;

    stroke-width: 1.6;
}


.tech-support-option h3 {
    margin-bottom: 12px;

    font-size: 25px;
}


.tech-support-option p {
    color: #929aa7;

    font-size: 14px;

    line-height: 1.8;
}


.tech-support-link {
    margin-top: auto;

    padding-top: 25px;

    color: #b8c0cc;

    text-decoration: none;

    font-size: 12px;
}



/* =========================================
   TECH PROCESS
========================================= */

.tech-process-track {
    display: grid;

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

    border-top:
        1px solid rgba(255,255,255,0.09);
}


.tech-process-step {
    padding: 28px 24px;

    border-right:
        1px solid rgba(255,255,255,0.07);
}


.tech-process-step:last-child {
    border-right: none;
}


.tech-process-step > span {
    color: #747e8a;

    font-size: 9px;

    letter-spacing: 1.6px;
}


.tech-process-step h3 {
    margin: 17px 0 8px;

    font-size: 18px;
}


.tech-process-step p {
    color: #929aa7;

    font-size: 12px;

    line-height: 1.7;
}



/* =========================================
   SERVICE NOTE
========================================= */

.tech-note-section {
    background: #0b0f15;
}


.tech-service-note {
    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 80px;

    align-items: start;

    padding-top: 30px;

    border-top:
        1px solid rgba(255,255,255,0.09);
}


.tech-service-note h2 {
    font-size:
        clamp(30px,5vw,46px);

    line-height: 1.1;
}


.tech-service-note > p {
    color: #929aa7;

    font-size: 13px;

    line-height: 1.8;
}



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

.tech-final-cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 50px;

    background: #10151d;

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

    border-radius: 16px;
}


.tech-final-cta h2 {
    margin-bottom: 12px;

    font-size:
        clamp(30px,5vw,46px);

    line-height: 1.1;
}


.tech-final-cta p {
    max-width: 650px;

    color: #929aa7;

    line-height: 1.7;
}



/* =========================================
   TECH SERVICES TABLET
========================================= */

@media (max-width: 900px) {

    .tech-hero-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .tech-service-index {
        max-width: 650px;
    }


    .tech-wifi-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .tech-wifi-copy {
        position: static;
    }


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


    .tech-service-note {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .tech-final-cta {
        flex-direction: column;

        align-items: flex-start;
    }

}



/* =========================================
   TECH SERVICES MOBILE
========================================= */

@media (max-width: 600px) {

    .tech-main-hero {
        min-height: auto;

        padding: 110px 0 70px;
    }


    .tech-hero-copy h1 {
        letter-spacing: -2px;
    }


    .tech-service-grid {
        grid-template-columns: 1fr;
    }


    .tech-support-layout {
        grid-template-columns: 1fr;
    }


    .tech-process-track {
        grid-template-columns: 1fr;
    }


    .tech-process-step {
        border-right: none;

        border-bottom:
            1px solid rgba(255,255,255,0.07);
    }


    .tech-service-note {
        grid-template-columns: 1fr;
    }


    .tech-final-cta {
        padding: 30px;
    }

}

/* =========================================
   CONDITIONAL FORM FIELD
========================================= */

.conditional-field {
    display: none;
}


.conditional-field.is-visible {
    display: block;
    animation: conditionalFieldIn 0.25s ease;
}


@keyframes conditionalFieldIn {

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

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

}

/* =========================================
   DIGITAL SOLUTIONS LIVE WORKFLOW
========================================= */

.digital-live-demo {
    overflow: hidden;

    padding: 28px;

    background: #10151d;

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

    border-radius: 16px;
}


/* TOP */

.digital-demo-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 22px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


.digital-demo-label {
    display: block;

    margin-bottom: 6px;

    color: #68727f;

    font-size: 8px;

    letter-spacing: 1.8px;
}


.digital-demo-top h3 {
    font-size: 20px;
}


.digital-demo-stage {
    max-width: 160px;

    color: #89939f;

    font-size: 10px;

    line-height: 1.5;

    text-align: right;

    transition: 0.3s ease;
}


/* =========================================
   MAIN FLOW
========================================= */

.digital-demo-flow {
    padding: 28px 0;
}


.digital-demo-node {
    display: grid;

    grid-template-columns:
        45px 1fr;

    align-items: center;

    gap: 15px;

    padding: 15px;

    background: #0b0f15;

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

    border-radius: 10px;

    opacity: 0.55;

    transition:
        opacity 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}


.digital-demo-node.is-active {
    opacity: 1;

    border-color:
        rgba(184,192,204,0.28);

    transform: translateX(4px);
}


.digital-demo-node.is-complete {
    opacity: 0.85;
}


.digital-demo-node-icon {
    width: 42px;
    height: 42px;

    display: flex;

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

    border:
        1px solid rgba(184,192,204,0.13);

    border-radius: 8px;

    color: #b8c0cc;

    background:
        rgba(184,192,204,0.03);
}


.digital-demo-node-icon svg {
    width: 19px;
    height: 19px;

    stroke-width: 1.6;
}


.digital-demo-node span {
    display: block;

    margin-bottom: 3px;

    color: #69737f;

    font-size: 7px;

    letter-spacing: 1.5px;
}


.digital-demo-node strong {
    display: block;

    font-size: 13px;

    font-weight: 600;
}


.digital-demo-node small {
    display: block;

    margin-top: 3px;

    color: #737d89;

    font-size: 9px;
}


/* =========================================
   CONNECTIONS
========================================= */

.digital-demo-connection {
    position: relative;

    width: 2px;
    height: 28px;

    margin-left: 35px;

    overflow: hidden;
}


.digital-demo-track {
    position: absolute;

    inset: 0;

    background:
        rgba(255,255,255,0.09);
}


.digital-demo-packet {
    position: absolute;

    top: -8px;
    left: 0;

    width: 2px;
    height: 8px;

    background: #b8c0cc;

    opacity: 0;
}


.digital-demo-packet.is-moving {
    animation:
        digitalPacketMove 0.8s ease forwards;
}


@keyframes digitalPacketMove {

    0% {
        top: -8px;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        top: 28px;
        opacity: 0;
    }

}


/* =========================================
   OUTPUTS
========================================= */

.digital-demo-output {
    display: grid;

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

    gap: 9px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255,255,255,0.07);
}


.digital-output-item {
    min-width: 0;

    padding: 13px;

    background: #0b0f15;

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

    border-radius: 8px;

    opacity: 0.42;

    transition:
        opacity 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}


.digital-output-item.is-active {
    opacity: 1;

    border-color:
        rgba(184,192,204,0.25);

    transform: translateY(-3px);
}


.digital-output-item.is-complete {
    opacity: 0.82;
}


.digital-output-item > svg {
    width: 18px;
    height: 18px;

    margin-bottom: 12px;

    color: #aeb6c0;

    stroke-width: 1.5;
}


.digital-output-item span {
    display: block;

    margin-bottom: 4px;

    color: #68727e;

    font-size: 7px;

    letter-spacing: 1.3px;
}


.digital-output-item strong {
    display: block;

    color: #cbd1d7;

    font-size: 10px;

    line-height: 1.4;
}


/* =========================================
   ACTIVITY LINE
========================================= */

.digital-demo-activity {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 18px;

    padding-top: 16px;

    border-top:
        1px solid rgba(255,255,255,0.06);
}


.digital-activity-marker {
    width: 5px;
    height: 5px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #8a949f;
}


.digital-demo-activity p {
    color: #747e8a;

    font-size: 9px;

    transition: 0.25s ease;
}



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

@media (max-width: 600px) {

    .digital-live-demo {
        padding: 20px;
    }


    .digital-demo-output {
        grid-template-columns: 1fr;
    }


    .digital-output-item {
        display: grid;

        grid-template-columns:
            30px 1fr;

        align-items: center;

        gap: 10px;
    }


    .digital-output-item > svg {
        margin-bottom: 0;
    }


    .digital-demo-stage {
        display: none;
    }

}



/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .digital-demo-packet.is-moving {
        animation: none;
    }


    .digital-demo-node,
    .digital-output-item {
        transition: none;
    }

}

/* =========================================
   DIGITAL SOLUTIONS PRODUCT DEMO
========================================= */

.ds-product-demo {
    overflow: hidden;

    background: #10151d;

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

    border-radius: 16px;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.3);
}


/* =========================================
   BROWSER BAR
========================================= */

.ds-demo-browser-bar {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 11px 14px;

    background: #090d12;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


.ds-browser-dots {
    display: flex;

    gap: 5px;
}


.ds-browser-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.18);
}


.ds-browser-address {
    flex: 1;

    padding: 6px 10px;

    border-radius: 5px;

    background: #080b10;

    color: #646e7b;

    font-size: 8px;
}



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

.ds-demo-app-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 16px 20px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


.ds-demo-app-header > div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.ds-demo-brand {
    color: #717b87;

    font-size: 7px;

    letter-spacing: 1.6px;
}


.ds-demo-app-header strong {
    font-size: 12px;

    font-weight: 600;
}


.ds-demo-label {
    color: #68727f;

    font-size: 7px;

    letter-spacing: 1.4px;
}



/* =========================================
   DEMO SCREEN
========================================= */

.ds-demo-screen {
    position: relative;

    min-height: 450px;

    overflow: hidden;

    background: #0c1016;
}


.ds-demo-view {
    position: absolute;

    inset: 0;

    padding: 28px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        visibility 0.45s;
}


.ds-demo-view.is-visible {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}



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

.ds-form-heading {
    margin-bottom: 24px;
}


.ds-form-heading > span {
    display: block;

    margin-bottom: 6px;

    color: #717b87;

    font-size: 7px;

    letter-spacing: 1.6px;
}


.ds-form-heading h3 {
    margin-bottom: 7px;

    font-size: 21px;
}


.ds-form-heading p {
    color: #7d8793;

    font-size: 10px;
}


.ds-demo-form {
    display: grid;

    gap: 13px;
}


.ds-demo-field label {
    display: block;

    margin-bottom: 6px;

    color: #848e99;

    font-size: 8px;
}


.ds-demo-field input,
.ds-demo-field select {
    width: 100%;

    height: 39px;

    padding: 0 12px;

    outline: none;

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

    border-radius: 6px;

    background: #090d12;

    color: #d7dbe0;

    font-family: inherit;

    font-size: 10px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}


.ds-demo-field input.is-focused,
.ds-demo-field select.is-focused {
    border-color:
        rgba(184,192,204,0.4);

    background: #0b0f15;
}


.ds-demo-field input::placeholder {
    color: #4f5965;
}


.ds-demo-grid {
    display: grid;

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

    gap: 12px;
}



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

.ds-demo-submit {
    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 5px;

    border: none;

    border-radius: 6px;

    background: #d7dce2;

    color: #080b10;

    font-family: inherit;

    font-size: 10px;

    font-weight: 700;

    cursor: default;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.ds-demo-submit svg {
    width: 14px;
    height: 14px;
}


.ds-demo-submit.is-clicked {
    transform: scale(0.985);
}


.ds-demo-submit.is-processing {
    opacity: 0.7;
}



/* =========================================
   CONFIRMATION
========================================= */

.ds-confirmation {
    max-width: 390px;

    margin: 35px auto 0;
}


.ds-confirmation-icon {
    width: 46px;
    height: 46px;

    display: flex;

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

    margin-bottom: 22px;

    border-radius: 50%;

    border:
        1px solid rgba(130,200,150,0.25);

    color: #88c99c;

    background:
        rgba(130,200,150,0.05);
}


.ds-confirmation-icon svg {
    width: 20px;
    height: 20px;

    stroke-width: 1.8;
}


.ds-confirmation-label {
    display: block;

    margin-bottom: 8px;

    color: #77818d;

    font-size: 7px;

    letter-spacing: 1.7px;
}


.ds-confirmation h3 {
    margin-bottom: 10px;

    font-size: 24px;
}


.ds-confirmation > p {
    color: #7e8894;

    font-size: 10px;

    line-height: 1.7;
}


.ds-confirmation-details {
    margin-top: 28px;

    border-top:
        1px solid rgba(255,255,255,0.08);
}


.ds-confirmation-details div {
    display: grid;

    grid-template-columns:
        110px 1fr;

    gap: 15px;

    padding: 11px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.06);
}


.ds-confirmation-details span {
    color: #69737f;

    font-size: 7px;

    letter-spacing: 1.3px;
}


.ds-confirmation-details strong {
    font-size: 10px;

    font-weight: 500;
}



/* =========================================
   ADMIN VIEW
========================================= */

.ds-admin-demo {
    display: grid;

    grid-template-columns:
        105px 1fr;

    min-height: 390px;

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

    border-radius: 9px;

    overflow: hidden;
}


.ds-admin-sidebar {
    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 18px 12px;

    background: #090d12;

    border-right:
        1px solid rgba(255,255,255,0.06);
}


.ds-admin-sidebar strong {
    margin-bottom: 22px;

    font-size: 9px;

    letter-spacing: 1.7px;
}


.ds-admin-sidebar span {
    padding: 8px;

    border-radius: 5px;

    color: #65707c;

    font-size: 8px;
}


.ds-admin-sidebar span.is-selected {
    color: #c8cdd3;

    background:
        rgba(255,255,255,0.05);
}


.ds-admin-content {
    padding: 22px;
}


.ds-admin-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 18px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


.ds-admin-heading span {
    color: #6d7783;

    font-size: 7px;

    letter-spacing: 1.5px;
}


.ds-admin-heading h3 {
    margin-top: 5px;

    font-size: 17px;
}


.ds-admin-heading small {
    color: #8b949e;

    font-size: 8px;
}


.ds-admin-record {
    margin-top: 12px;
}


.ds-admin-record div {
    display: grid;

    grid-template-columns:
        100px 1fr;

    gap: 15px;

    padding: 11px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.06);
}


.ds-admin-record span {
    color: #68727e;

    font-size: 7px;

    letter-spacing: 1.3px;
}


.ds-admin-record strong {
    font-size: 10px;

    font-weight: 500;
}


.ds-admin-event {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 22px;

    padding: 13px;

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

    border-radius: 7px;

    background: #090d12;
}


.ds-admin-event > svg {
    width: 18px;
    height: 18px;

    color: #aab2bc;

    stroke-width: 1.5;
}


.ds-admin-event span {
    display: block;

    color: #68727e;

    font-size: 6px;

    letter-spacing: 1.3px;
}


.ds-admin-event strong {
    display: block;

    margin-top: 3px;

    font-size: 9px;
}



/* =========================================
   ANIMATED CURSOR
========================================= */

.ds-demo-cursor {
    position: absolute;

    top: 0;
    left: 0;

    z-index: 50;

    width: 20px;
    height: 25px;

    pointer-events: none;

    opacity: 0;

    transition:
        transform 0.7s cubic-bezier(.2,.8,.2,1),
        opacity 0.2s ease;
}


.ds-demo-cursor.is-visible {
    opacity: 1;
}


.ds-demo-cursor svg {
    width: 19px;
    height: 23px;

    fill: #ffffff;

    stroke: #080b10;

    stroke-width: 1;
}


.ds-demo-cursor > span {
    position: absolute;

    top: 8px;
    left: 6px;

    width: 8px;
    height: 8px;

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

    border-radius: 50%;

    opacity: 0;
}


.ds-demo-cursor.is-clicking > span {
    animation:
        dsCursorClick 0.45s ease;
}


@keyframes dsCursorClick {

    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

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

}



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

.ds-demo-progress {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 12px 18px;

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

    background: #090d12;
}


.ds-demo-progress-bar {
    flex: 1;

    height: 2px;

    overflow: hidden;

    background:
        rgba(255,255,255,0.08);
}


.ds-demo-progress-bar span {
    display: block;

    width: 0;
    height: 100%;

    background: #aeb6c0;

    transition: width 0.5s linear;
}


.ds-demo-progress > span {
    min-width: 110px;

    color: #69737f;

    font-size: 7px;

    text-align: right;
}



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

@media (max-width: 600px) {

    .ds-demo-screen {
        min-height: 470px;
    }


    .ds-demo-view {
        padding: 20px;
    }


    .ds-demo-grid {
        grid-template-columns: 1fr;
    }


    .ds-admin-demo {
        grid-template-columns:
            78px 1fr;
    }


    .ds-admin-sidebar {
        padding: 14px 8px;
    }


    .ds-admin-content {
        padding: 15px;
    }


    .ds-admin-record div {
        grid-template-columns: 1fr;

        gap: 3px;
    }


    .ds-demo-progress > span {
        display: none;
    }

}



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

@media (prefers-reduced-motion: reduce) {

    .ds-demo-cursor,
    .ds-demo-view,
    .ds-demo-submit,
    .ds-demo-progress-bar span {
        transition: none;
    }

}

/* =========================================
   XAQIL PREMIUM HOMEPAGE
   Flyer-inspired, premium website treatment
========================================= */

/* HERO */
.xaqil-home-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 145px 0 92px;
    background:
        radial-gradient(circle at 82% 28%, rgba(35, 157, 255, 0.14), transparent 24%),
        radial-gradient(circle at 70% 66%, rgba(37, 211, 102, 0.09), transparent 25%),
        linear-gradient(180deg, #070a0f 0%, #080b10 68%, #090d12 100%);
}

.xaqil-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 86%);
}

.xaqil-home-hero::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 2px;
    top: 118px;
    right: 8%;
    opacity: .62;
    background: linear-gradient(90deg, transparent, #2e9cff, #37d67a, transparent);
    box-shadow: 0 0 20px rgba(46,156,255,.35);
}

.xaqil-home-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(420px,.88fr);
    gap: 76px;
    align-items: center;
}

.xaqil-home-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    color: #9aa4b0;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
}

.xaqil-home-kicker > span {
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg, #2e9cff, #37d67a);
    box-shadow: 0 0 14px rgba(46,156,255,.4);
}

.xaqil-home-copy h1 {
    max-width: 760px;
    margin-bottom: 28px;
    font-size: clamp(58px,8vw,94px);
    line-height: .93;
    letter-spacing: -5px;
}

.xaqil-home-copy h1 span {
    display: block;
    color: transparent;
    background: linear-gradient(90deg, #f4f7fb 0%, #79b8ff 45%, #48dc8a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 22px rgba(70,170,255,.10));
}

.xaqil-home-copy > p {
    max-width: 640px;
    margin-bottom: 34px;
    color: #a0aab6;
    font-size: 17px;
    line-height: 1.8;
}

.xaqil-home-copy .primary-button {
    box-shadow: 0 12px 35px rgba(38,148,255,.16);
}

.xaqil-hero-meta {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0;
    margin-top: 55px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.018);
}

.xaqil-hero-meta > div {
    position: relative;
    padding: 17px 18px;
    border-right: 1px solid rgba(255,255,255,.07);
}

.xaqil-hero-meta > div:last-child { border-right: 0; }
.xaqil-hero-meta > div::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, #2e9cff, #37d67a);
    opacity: .65;
}

.xaqil-hero-meta span {
    display: block;
    color: #6f7a87;
    font-size: 7px;
    letter-spacing: 1.6px;
}

.xaqil-hero-meta strong {
    display: block;
    margin-top: 6px;
    color: #e8ecf1;
    font-size: 11px;
    font-weight: 600;
}

/* FLYER-INSPIRED HERO VISUAL */
.xaqil-hero-display { position: relative; }

.xaqil-flyer-visual {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(111,173,255,.20);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(18,26,36,.97), rgba(6,10,15,.98)),
        #0b1017;
    box-shadow:
        0 40px 100px rgba(0,0,0,.42),
        inset 0 1px rgba(255,255,255,.05),
        0 0 45px rgba(46,156,255,.05);
}

.xaqil-flyer-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .5;
    background:
        linear-gradient(135deg, transparent 58%, rgba(46,156,255,.12) 58.2%, transparent 58.6%),
        linear-gradient(25deg, transparent 71%, rgba(55,214,122,.10) 71.2%, transparent 71.7%);
}

.xaqil-flyer-visual::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2e9cff 25%, #37d67a 75%, transparent);
    box-shadow: 0 0 18px rgba(55,214,122,.28);
}

.xaqil-visual-orbit {
    position: absolute;
    border: 1px solid rgba(91,160,255,.13);
    border-radius: 50%;
    pointer-events: none;
}
.xaqil-visual-orbit-one { width: 270px; height: 270px; right: -110px; top: 100px; }
.xaqil-visual-orbit-two { width: 170px; height: 170px; right: -45px; top: 150px; border-color: rgba(55,214,122,.12); }

.xaqil-visual-topline,
.xaqil-visual-brand,
.xaqil-visual-services,
.xaqil-visual-feature-row,
.xaqil-visual-offer { position: relative; z-index: 1; }

.xaqil-visual-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #75818e;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.xaqil-visual-topline span:first-child { color: #7eb8ff; }

.xaqil-visual-brand {
    display: grid;
    grid-template-columns: 145px minmax(0,1fr);
    gap: 23px;
    align-items: center;
    padding: 34px 0 28px;
}

.xaqil-visual-logo {
    width: 100%;
    max-height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(72,168,255,.14));
}

.xaqil-visual-brand span {
    display: block;
    margin-bottom: 8px;
    color: #49d987;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.xaqil-visual-brand h3 {
    margin: 0;
    color: #f1f4f8;
    font-size: clamp(25px,3vw,35px);
    line-height: 1.02;
    letter-spacing: -1.5px;
}

.xaqil-visual-brand h3 em {
    display: block;
    color: #8dbfff;
    font-style: normal;
}

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

.xaqil-visual-service {
    min-width: 0;
    padding: 18px 10px 15px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.024);
}

.xaqil-visual-service i { display: block; margin-bottom: 9px; font-size: 19px; }
.xaqil-visual-service span { color: #c9d0d8; font-size: 9px; }
.xaqil-visual-service-blue { color:#72adff; border-color:rgba(114,173,255,.18); background:rgba(114,173,255,.055); }
.xaqil-visual-service-violet { color:#a591ff; border-color:rgba(165,145,255,.18); background:rgba(165,145,255,.055); }
.xaqil-visual-service-green { color:#5dd68f; border-color:rgba(93,214,143,.18); background:rgba(93,214,143,.055); }
.xaqil-visual-service-cyan { color:#67cbd9; border-color:rgba(103,203,217,.18); background:rgba(103,203,217,.055); }

.xaqil-visual-feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    background: rgba(5,8,12,.38);
}

.xaqil-visual-feature-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8d98a5;
    font-size: 8px;
}
.xaqil-visual-feature-row i { color:#50d788; font-size: 10px; }

.xaqil-visual-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 16px;
    padding: 16px 17px;
    border: 1px solid rgba(55,214,122,.18);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(55,214,122,.07), rgba(46,156,255,.055));
}

.xaqil-visual-offer span { display:block; color:#6f7b87; font-size:7px; letter-spacing:1.4px; }
.xaqil-visual-offer strong { display:block; margin-top:3px; color:#f2f5f8; font-size:17px; }
.xaqil-visual-offer a {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    color:#07100b;
    background:#55dc8e;
    border-radius:7px;
    text-decoration:none;
    font-size:9px;
    font-weight:800;
}

.xaqil-display-caption {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 17px;
}
.xaqil-display-caption > span { width:34px; height:1px; background:linear-gradient(90deg,#2e9cff,#37d67a); }
.xaqil-display-caption p { max-width:420px; margin:0; color:#737e8a; font-size:11px; line-height:1.7; }

/* SECTION TOP */
.xaqil-home-section-top {
    display: grid;
    grid-template-columns: 1fr .7fr;
    align-items: end;
    gap: 70px;
    margin-bottom: 55px;
}
.xaqil-home-section-top h2 {
    max-width: 720px;
    font-size: clamp(38px,6vw,62px);
    line-height: 1;
    letter-spacing: -2px;
}
.xaqil-home-section-top > p { color:#929aa7; font-size:14px; line-height:1.8; }

/* SERVICES */
.xaqil-home-services {
    position: relative;
    background:
        radial-gradient(circle at 5% 25%, rgba(46,156,255,.045), transparent 28%),
        #0b0f15;
}

.xaqil-service-list { width:100%; border-top:1px solid rgba(255,255,255,.09); }
.xaqil-home-service {
    width:100%;
    display:grid;
    grid-template-columns:58px minmax(0,1fr) 24px;
    align-items:center;
    gap:23px;
    padding:27px 0;
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:padding .3s ease, background .3s ease;
}
.xaqil-home-service:hover { padding-left:12px; padding-right:12px; background:rgba(255,255,255,.018); }

.xaqil-home-service-icon {
    position:relative;
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    border-radius:11px;
    background:rgba(255,255,255,.025);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.xaqil-home-service-icon::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(135deg,rgba(255,255,255,.13),transparent 55%);
    pointer-events:none;
}
.xaqil-home-service-icon i { font-size:21px; line-height:1; }
.xaqil-home-service:nth-child(1) .xaqil-home-service-icon { color:#72adff; background:linear-gradient(145deg,rgba(114,173,255,.16),rgba(114,173,255,.035)); border-color:rgba(114,173,255,.28); }
.xaqil-home-service:nth-child(2) .xaqil-home-service-icon { color:#a591ff; background:linear-gradient(145deg,rgba(165,145,255,.16),rgba(165,145,255,.035)); border-color:rgba(165,145,255,.28); }
.xaqil-home-service:nth-child(3) .xaqil-home-service-icon { color:#62d195; background:linear-gradient(145deg,rgba(98,209,149,.16),rgba(98,209,149,.035)); border-color:rgba(98,209,149,.27); }
.xaqil-home-service:nth-child(4) .xaqil-home-service-icon { color:#d8af64; background:linear-gradient(145deg,rgba(216,175,100,.16),rgba(216,175,100,.035)); border-color:rgba(216,175,100,.27); }
.xaqil-home-service:nth-child(5) .xaqil-home-service-icon { color:#67cbd9; background:linear-gradient(145deg,rgba(103,203,217,.16),rgba(103,203,217,.035)); border-color:rgba(103,203,217,.27); }
.xaqil-home-service:hover .xaqil-home-service-icon { transform:translateY(-2px) scale(1.035); box-shadow:0 14px 30px rgba(0,0,0,.25); }
.xaqil-home-service-content { width:100%; min-width:0; }
.xaqil-home-service h3 { margin:0 0 7px; color:#f2f4f6; font-size:20px; font-weight:650; letter-spacing:-.4px; }
.xaqil-home-service p { max-width:720px; margin:0; color:#87919d; font-size:12px; line-height:1.75; }
.xaqil-home-service > i:last-child { justify-self:end; color:#74808b; font-size:14px; transition:color .3s ease, transform .3s ease; }
.xaqil-home-service:hover > i:last-child { color:#d7dce2; transform:translate(3px,-3px); }

/* WHY XAQIL */
.xaqil-why-section {
    background:
        radial-gradient(circle at 80% 10%, rgba(55,214,122,.045), transparent 28%),
        #090d12;
}
.xaqil-why-layout { display:grid; grid-template-columns:.82fr 1.18fr; gap:90px; align-items:start; }
.xaqil-why-intro { position:sticky; top:120px; }
.xaqil-why-intro h2 { font-size:clamp(38px,6vw,58px); line-height:1; letter-spacing:-2px; margin-bottom:20px; }
.xaqil-why-intro p { color:#929aa7; line-height:1.8; }
.xaqil-why-list { border-top:1px solid rgba(255,255,255,.09); }
.xaqil-why-item {
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    gap:22px;
    align-items:start;
    padding:28px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.xaqil-why-icon {
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:rgba(255,255,255,.025);
    font-size:18px;
}
.xaqil-why-icon-blue { color:#72adff; background:rgba(114,173,255,.08); border-color:rgba(114,173,255,.22); }
.xaqil-why-icon-cyan { color:#67cbd9; background:rgba(103,203,217,.08); border-color:rgba(103,203,217,.22); }
.xaqil-why-icon-gold { color:#d8af64; background:rgba(216,175,100,.08); border-color:rgba(216,175,100,.22); }
.xaqil-why-icon-green { color:#62d195; background:rgba(98,209,149,.08); border-color:rgba(98,209,149,.22); }
.xaqil-why-item h3 { margin:0 0 8px; font-size:20px; }
.xaqil-why-item p { margin:0; color:#8a949f; font-size:13px; line-height:1.7; }

/* PROCESS */
.xaqil-home-process { background:#0b0f15; }
.xaqil-process-track {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:13px;
    background:rgba(255,255,255,.014);
}
.xaqil-process-track > div {
    position:relative;
    min-height:165px;
    padding:28px 22px;
    border-right:1px solid rgba(255,255,255,.07);
}
.xaqil-process-track > div:last-child { border-right:0; }
.xaqil-process-track > div::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,#2e9cff,#37d67a); opacity:.6; }
.xaqil-process-track span { color:#6f7a86; font-size:8px; letter-spacing:1px; }
.xaqil-process-track strong { display:block; margin:18px 0 8px; color:#f0f3f6; font-size:17px; }
.xaqil-process-track p { margin:0; color:#858f9a; font-size:11px; line-height:1.6; }

/* FINAL CTA */
.xaqil-home-final-cta {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
    overflow:hidden;
    padding:58px;
    border:1px solid rgba(74,169,255,.16);
    border-radius:16px;
    background:
        radial-gradient(circle at 86% 30%, rgba(55,214,122,.10), transparent 25%),
        radial-gradient(circle at 12% 100%, rgba(46,156,255,.11), transparent 28%),
        #0e141c;
    box-shadow:0 28px 70px rgba(0,0,0,.24);
}
.xaqil-home-final-cta::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(#2e9cff,#37d67a); box-shadow:0 0 20px rgba(46,156,255,.3); }
.xaqil-home-final-cta > * { position:relative; z-index:1; }
.xaqil-home-final-cta h2 { margin-bottom:12px; font-size:clamp(34px,5vw,50px); line-height:1; }
.xaqil-home-final-cta p { color:#8d97a3; }

/* TABLET */
@media (max-width: 900px) {
    .xaqil-home-hero-layout,
    .xaqil-home-section-top,
    .xaqil-why-layout { grid-template-columns:1fr; }
    .xaqil-home-hero-layout { gap:55px; }
    .xaqil-home-copy h1 { letter-spacing:-3px; }
    .xaqil-hero-display { max-width:700px; }
    .xaqil-home-section-top { gap:20px; }
    .xaqil-why-intro { position:static; }
    .xaqil-process-track { grid-template-columns:repeat(2,1fr); }
    .xaqil-process-track > div:nth-child(2n) { border-right:0; }
    .xaqil-process-track > div { border-bottom:1px solid rgba(255,255,255,.07); }
    .xaqil-home-final-cta { flex-direction:column; align-items:flex-start; }
}

/* MOBILE */
@media (max-width: 600px) {
    .xaqil-home-hero { min-height:auto; padding:118px 0 70px; }
    .xaqil-home-hero::after { display:none; }
    .xaqil-home-copy h1 { font-size:50px; letter-spacing:-3px; }
    .xaqil-home-copy > p { font-size:15px; }
    .xaqil-hero-meta { grid-template-columns:1fr; }
    .xaqil-hero-meta > div { border-right:0; border-bottom:1px solid rgba(255,255,255,.07); }
    .xaqil-hero-meta > div:last-child { border-bottom:0; }
    .xaqil-flyer-visual { min-height:auto; padding:20px; }
    .xaqil-visual-brand { grid-template-columns:1fr; gap:16px; }
    .xaqil-visual-logo { max-width:170px; }
    .xaqil-visual-services { grid-template-columns:repeat(2,1fr); }
    .xaqil-visual-feature-row { align-items:flex-start; flex-direction:column; }
    .xaqil-visual-offer { align-items:flex-start; flex-direction:column; }
    .xaqil-home-service { grid-template-columns:48px minmax(0,1fr) 18px; gap:16px; padding:22px 0; }
    .xaqil-home-service:hover { padding-left:0; padding-right:0; }
    .xaqil-home-service-icon { width:44px; height:44px; }
    .xaqil-home-service h3 { font-size:17px; }
    .xaqil-home-service p { font-size:11px; line-height:1.65; }
    .xaqil-why-item { grid-template-columns:46px minmax(0,1fr); gap:16px; }
    .xaqil-why-icon { width:42px; height:42px; }
    .xaqil-process-track { grid-template-columns:1fr; }
    .xaqil-process-track > div { border-right:0; }
    .xaqil-home-final-cta { padding:32px 28px; }
}

/* =========================================
   XAQIL REAL ICON UPGRADE
========================================= */

.service-card-icon i,
.contact-method-icon i,
.contact-action-icon i,
.dev-foundation-icon i,
.dev-type-icon i,
.hosting-feature-icon i,
.hosting-flow-icon i,
.health-icon i,
.care-card-icon i,
.digital-workflow-icon i,
.digital-module-icon i,
.tech-service-icon i,
.tech-wifi-icon i,
.tech-support-icon i,
.ds-confirmation-icon i {
    font-size: 20px;
    line-height: 1;
}

.dev-type-icon i,
.hosting-feature-icon i,
.hosting-flow-icon i,
.digital-workflow-icon i,
.digital-module-icon i,
.tech-service-icon i,
.tech-wifi-icon i,
.tech-support-icon i {
    font-size: 21px;
}

.health-icon i,
.ds-confirmation-icon i {
    font-size: 18px;
}

.service-card-icon,
.contact-method-icon,
.contact-action-icon,
.dev-foundation-icon,
.dev-type-icon,
.hosting-feature-icon,
.hosting-flow-icon,
.health-icon,
.care-card-icon,
.digital-workflow-icon,
.digital-module-icon,
.tech-service-icon,
.tech-wifi-icon,
.tech-support-icon,
.ds-confirmation-icon {
    position: relative;
    overflow: hidden;
}

.service-card-icon::after,
.contact-method-icon::after,
.contact-action-icon::after,
.dev-foundation-icon::after,
.dev-type-icon::after,
.hosting-feature-icon::after,
.hosting-flow-icon::after,
.health-icon::after,
.care-card-icon::after,
.digital-workflow-icon::after,
.digital-module-icon::after,
.tech-service-icon::after,
.tech-wifi-icon::after,
.tech-support-icon::after,
.ds-confirmation-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 58%);
    pointer-events: none;
}

/* Services page */
.services-grid .service-card:nth-child(1) .service-card-icon { color:#71a5ff; background:linear-gradient(145deg, rgba(113,165,255,.16), rgba(113,165,255,.04)); border-color:rgba(113,165,255,.28); }
.services-grid .service-card:nth-child(2) .service-card-icon { color:#9b86ff; background:linear-gradient(145deg, rgba(155,134,255,.16), rgba(155,134,255,.04)); border-color:rgba(155,134,255,.28); }
.services-grid .service-card:nth-child(3) .service-card-icon { color:#65cf9c; background:linear-gradient(145deg, rgba(101,207,156,.16), rgba(101,207,156,.04)); border-color:rgba(101,207,156,.28); }
.services-grid .service-card:nth-child(4) .service-card-icon { color:#d7ae64; background:linear-gradient(145deg, rgba(215,174,100,.16), rgba(215,174,100,.04)); border-color:rgba(215,174,100,.28); }
.services-grid .service-card:nth-child(5) .service-card-icon { color:#64c7d5; background:linear-gradient(145deg, rgba(100,199,213,.16), rgba(100,199,213,.04)); border-color:rgba(100,199,213,.28); }

/* Contact page */
.contact-methods .contact-method:nth-child(1) .contact-method-icon,
.contact-details-actions .contact-action:nth-child(1) .contact-action-icon { color:#25d366; background:linear-gradient(145deg, rgba(37,211,102,.16), rgba(37,211,102,.04)); border-color:rgba(37,211,102,.28); }
.contact-methods .contact-method:nth-child(2) .contact-method-icon,
.contact-details-actions .contact-action:nth-child(2) .contact-action-icon { color:#71a5ff; background:linear-gradient(145deg, rgba(113,165,255,.16), rgba(113,165,255,.04)); border-color:rgba(113,165,255,.28); }
.contact-methods .contact-method:nth-child(3) .contact-method-icon,
.contact-details-actions .contact-action:nth-child(3) .contact-action-icon { color:#d7ae64; background:linear-gradient(145deg, rgba(215,174,100,.16), rgba(215,174,100,.04)); border-color:rgba(215,174,100,.28); }

/* Web Development */
.dev-foundation-list li:nth-child(1) .dev-foundation-icon,
.dev-type-card:nth-child(1) .dev-type-icon { color:#71a5ff; background:linear-gradient(145deg, rgba(113,165,255,.16), rgba(113,165,255,.04)); border-color:rgba(113,165,255,.28); }
.dev-foundation-list li:nth-child(2) .dev-foundation-icon,
.dev-type-card:nth-child(2) .dev-type-icon { color:#65cf9c; background:linear-gradient(145deg, rgba(101,207,156,.16), rgba(101,207,156,.04)); border-color:rgba(101,207,156,.28); }
.dev-foundation-list li:nth-child(3) .dev-foundation-icon,
.dev-type-card:nth-child(3) .dev-type-icon { color:#d7ae64; background:linear-gradient(145deg, rgba(215,174,100,.16), rgba(215,174,100,.04)); border-color:rgba(215,174,100,.28); }
.dev-foundation-list li:nth-child(4) .dev-foundation-icon,
.dev-type-card:nth-child(4) .dev-type-icon { color:#9b86ff; background:linear-gradient(145deg, rgba(155,134,255,.16), rgba(155,134,255,.04)); border-color:rgba(155,134,255,.28); }

/* Web Hosting */
.hosting-flow-track .hosting-flow-item:nth-child(1) .hosting-flow-icon,
.hosting-feature-grid .hosting-feature-card:nth-child(1) .hosting-feature-icon { color:#5db8ff; background:linear-gradient(145deg, rgba(93,184,255,.16), rgba(93,184,255,.04)); border-color:rgba(93,184,255,.28); }
.hosting-flow-track .hosting-flow-item:nth-child(3) .hosting-flow-icon,
.hosting-feature-grid .hosting-feature-card:nth-child(2) .hosting-feature-icon { color:#9b86ff; background:linear-gradient(145deg, rgba(155,134,255,.16), rgba(155,134,255,.04)); border-color:rgba(155,134,255,.28); }
.hosting-flow-track .hosting-flow-item:nth-child(5) .hosting-flow-icon,
.hosting-feature-grid .hosting-feature-card:nth-child(3) .hosting-feature-icon { color:#65cf9c; background:linear-gradient(145deg, rgba(101,207,156,.16), rgba(101,207,156,.04)); border-color:rgba(101,207,156,.28); }
.hosting-flow-track .hosting-flow-item:nth-child(7) .hosting-flow-icon,
.hosting-feature-grid .hosting-feature-card:nth-child(4) .hosting-feature-icon { color:#d7ae64; background:linear-gradient(145deg, rgba(215,174,100,.16), rgba(215,174,100,.04)); border-color:rgba(215,174,100,.28); }
.hosting-flow-track .hosting-flow-item:nth-child(9) .hosting-flow-icon,
.hosting-feature-grid .hosting-feature-card:nth-child(5) .hosting-feature-icon { color:#64c7d5; background:linear-gradient(145deg, rgba(100,199,213,.16), rgba(100,199,213,.04)); border-color:rgba(100,199,213,.28); }
.hosting-feature-grid .hosting-feature-card:nth-child(6) .hosting-feature-icon { color:#ff8c7d; background:linear-gradient(145deg, rgba(255,140,125,.16), rgba(255,140,125,.04)); border-color:rgba(255,140,125,.28); }

/* Website Care */
.health-icon,
.care-dashboard-grid .care-dashboard-card:nth-child(3) .care-card-icon { color:#65cf9c; background:linear-gradient(145deg, rgba(101,207,156,.16), rgba(101,207,156,.04)); border-color:rgba(101,207,156,.28); }
.care-dashboard-grid .care-dashboard-card:nth-child(1) .care-card-icon { color:#71a5ff; background:linear-gradient(145deg, rgba(113,165,255,.16), rgba(113,165,255,.04)); border-color:rgba(113,165,255,.28); }
.care-dashboard-grid .care-dashboard-card:nth-child(2) .care-card-icon { color:#64c7d5; background:linear-gradient(145deg, rgba(100,199,213,.16), rgba(100,199,213,.04)); border-color:rgba(100,199,213,.28); }
.care-dashboard-grid .care-dashboard-card:nth-child(4) .care-card-icon { color:#d7ae64; background:linear-gradient(145deg, rgba(215,174,100,.16), rgba(215,174,100,.04)); border-color:rgba(215,174,100,.28); }
.care-dashboard-grid .care-dashboard-card:nth-child(5) .care-card-icon { color:#9b86ff; background:linear-gradient(145deg, rgba(155,134,255,.16), rgba(155,134,255,.04)); border-color:rgba(155,134,255,.28); }
.care-dashboard-grid .care-dashboard-card:nth-child(6) .care-card-icon { color:#ff8c7d; background:linear-gradient(145deg, rgba(255,140,125,.16), rgba(255,140,125,.04)); border-color:rgba(255,140,125,.28); }

/* Digital Solutions */
.digital-workflow-track .digital-workflow-step:nth-child(1) .digital-workflow-icon { color:#ff8c7d; background:linear-gradient(145deg, rgba(255,140,125,.16), rgba(255,140,125,.04)); border-color:rgba(255,140,125,.28); }
.digital-workflow-track .digital-workflow-step:nth-child(3) .digital-workflow-icon { color:#71a5ff; background:linear-gradient(145deg, rgba(113,165,255,.16), rgba(113,165,255,.04)); border-color:rgba(113,165,255,.28); }
.digital-workflow-track .digital-workflow-step:nth-child(5) .digital-workflow-icon { color:#9b86ff; background:linear-gradient(145deg, rgba(155,134,255,.16), rgba(155,134,255,.04)); border-color:rgba(155,134,255,.28); }
.digital-workflow-track .digital-workflow-step:nth-child(7) .digital-workflow-icon { color:#65cf9c; background:linear-gradient(145deg, rgba(101,207,156,.16), rgba(101,207,156,.04)); border-color:rgba(101,207,156,.28); }
.digital-module-stack .digital-module-item:nth-child(1) .digital-module-icon { color:#9b86ff; background:linear-gradient(145deg, rgba(155,134,255,.16), rgba(155,134,255,.04)); border-color:rgba(155,134,255,.28); }
.digital-module-stack .digital-module-item:nth-child(2) .digital-module-icon { color:#5db8ff; background:linear-gradient(145deg, rgba(93,184,255,.16), rgba(93,184,255,.04)); border-color:rgba(93,184,255,.28); }
.digital-module-stack .digital-module-item:nth-child(3) .digital-module-icon { color:#64c7d5; background:linear-gradient(145deg, rgba(100,199,213,.16), rgba(100,199,213,.04)); border-color:rgba(100,199,213,.28); }
.digital-module-stack .digital-module-item:nth-child(4) .digital-module-icon { color:#d7ae64; background:linear-gradient(145deg, rgba(215,174,100,.16), rgba(215,174,100,.04)); border-color:rgba(215,174,100,.28); }
.digital-module-stack .digital-module-item:nth-child(5) .digital-module-icon { color:#ff8c7d; background:linear-gradient(145deg, rgba(255,140,125,.16), rgba(255,140,125,.04)); border-color:rgba(255,140,125,.28); }
.digital-module-stack .digital-module-item:nth-child(6) .digital-module-icon,
.ds-confirmation-icon { color:#65cf9c; background:linear-gradient(145deg, rgba(101,207,156,.16), rgba(101,207,156,.04)); border-color:rgba(101,207,156,.28); }

/* Tech Services */
.tech-service-grid .tech-service-card:nth-child(1) .tech-service-icon { color:#71a5ff; background:linear-gradient(145deg, rgba(113,165,255,.16), rgba(113,165,255,.04)); border-color:rgba(113,165,255,.28); }
.tech-service-grid .tech-service-card:nth-child(2) .tech-service-icon { color:#f25022; background:linear-gradient(145deg, rgba(242,80,34,.18), rgba(242,80,34,.04)); border-color:rgba(242,80,34,.28); }
.tech-service-grid .tech-service-card:nth-child(3) .tech-service-icon { color:#64c7d5; background:linear-gradient(145deg, rgba(100,199,213,.16), rgba(100,199,213,.04)); border-color:rgba(100,199,213,.28); }
.tech-service-grid .tech-service-card:nth-child(4) .tech-service-icon { color:#65cf9c; background:linear-gradient(145deg, rgba(101,207,156,.16), rgba(101,207,156,.04)); border-color:rgba(101,207,156,.28); }
.tech-wifi-list .tech-wifi-item:nth-child(1) .tech-wifi-icon { color:#d7ae64; background:linear-gradient(145deg, rgba(215,174,100,.16), rgba(215,174,100,.04)); border-color:rgba(215,174,100,.28); }
.tech-wifi-list .tech-wifi-item:nth-child(2) .tech-wifi-icon { color:#65cf9c; background:linear-gradient(145deg, rgba(101,207,156,.16), rgba(101,207,156,.04)); border-color:rgba(101,207,156,.28); }
.tech-wifi-list .tech-wifi-item:nth-child(3) .tech-wifi-icon { color:#ff8c7d; background:linear-gradient(145deg, rgba(255,140,125,.16), rgba(255,140,125,.04)); border-color:rgba(255,140,125,.28); }
.tech-wifi-list .tech-wifi-item:nth-child(4) .tech-wifi-icon { color:#5db8ff; background:linear-gradient(145deg, rgba(93,184,255,.16), rgba(93,184,255,.04)); border-color:rgba(93,184,255,.28); }
.tech-wifi-list .tech-wifi-item:nth-child(5) .tech-wifi-icon { color:#9b86ff; background:linear-gradient(145deg, rgba(155,134,255,.16), rgba(155,134,255,.04)); border-color:rgba(155,134,255,.28); }
.tech-wifi-list .tech-wifi-item:nth-child(6) .tech-wifi-icon { color:#64c7d5; background:linear-gradient(145deg, rgba(100,199,213,.16), rgba(100,199,213,.04)); border-color:rgba(100,199,213,.28); }
.tech-support-grid .tech-support-card:nth-child(1) .tech-support-icon { color:#71a5ff; background:linear-gradient(145deg, rgba(113,165,255,.16), rgba(113,165,255,.04)); border-color:rgba(113,165,255,.28); }
.tech-support-grid .tech-support-card:nth-child(2) .tech-support-icon { color:#65cf9c; background:linear-gradient(145deg, rgba(101,207,156,.16), rgba(101,207,156,.04)); border-color:rgba(101,207,156,.28); }

/* Hover polish */
.service-card:hover .service-card-icon,
.contact-method:hover .contact-method-icon,
.contact-action:hover .contact-action-icon,
.hosting-feature-card:hover .hosting-feature-icon,
.tech-service-card:hover .tech-service-icon,
.tech-wifi-item:hover .tech-wifi-icon,
.tech-support-card:hover .tech-support-icon,
.digital-module-item:hover .digital-module-icon,
.care-dashboard-card:hover .care-card-icon,
.dev-type-card:hover .dev-type-icon {
    box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}


/* =========================================
   XAQIL PHOTO-LED HOMEPAGE V2
========================================= */

.xaqil-visual-services { display:none !important; }

.xaqil-visual-photo {
    position:relative;
    z-index:1;
    height:210px;
    overflow:hidden;
    margin-top:2px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    background:#090d12;
}

.xaqil-visual-photo img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center 48%;
    filter:saturate(.82) contrast(1.06) brightness(.78);
    transform:scale(1.01);
    transition:transform .7s ease, filter .7s ease;
}

.xaqil-flyer-visual:hover .xaqil-visual-photo img {
    transform:scale(1.045);
    filter:saturate(.92) contrast(1.07) brightness(.84);
}

.xaqil-visual-photo-shade {
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(5,8,12,.76) 0%, rgba(5,8,12,.28) 58%, rgba(5,8,12,.14) 100%),
        linear-gradient(0deg, rgba(5,8,12,.58), transparent 55%);
}

.xaqil-visual-photo-label {
    position:absolute;
    left:18px;
    bottom:17px;
    z-index:2;
    max-width:310px;
}

.xaqil-visual-photo-label span {
    display:block;
    margin-bottom:6px;
    color:#65d693;
    font-size:7px;
    font-weight:800;
    letter-spacing:1.6px;
}

.xaqil-visual-photo-label strong {
    color:#f1f4f7;
    font-size:15px;
    line-height:1.35;
    font-weight:650;
}

.xaqil-home-service {
    grid-template-columns:78px minmax(0,1fr) 24px;
}

.xaqil-home-service-media {
    width:70px;
    height:52px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    border-radius:9px;
    background:#0b1016;
}

.xaqil-home-service-media img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    filter:saturate(.72) contrast(1.05) brightness(.78);
    transition:transform .45s ease, filter .45s ease;
}

.xaqil-home-service:hover .xaqil-home-service-media img {
    transform:scale(1.08);
    filter:saturate(.92) contrast(1.05) brightness(.9);
}

.xaqil-home-service-icon {
    box-shadow:none !important;
    background:rgba(255,255,255,.025) !important;
    border-color:rgba(255,255,255,.11) !important;
}

.xaqil-home-service:nth-child(3) .xaqil-home-service-icon { color:#69c997; }
.xaqil-home-service:nth-child(4) .xaqil-home-service-icon { color:#c6a66c; }

.xaqil-why-marker {
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-left:2px solid #65d693;
    color:#76818c;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.3px;
}

@media (max-width: 700px) {
    .xaqil-visual-photo { height:180px; }
    .xaqil-home-service { grid-template-columns:66px minmax(0,1fr) 18px; gap:14px; }
    .xaqil-home-service-media { width:60px; height:48px; }
    .xaqil-why-marker { width:38px; height:38px; }
}


/* =========================================
   XAQIL REAL-PHOTO SERVICE SYSTEM V3
========================================= */

/* -----------------------------
   SERVICES OVERVIEW HERO
----------------------------- */

.services-photo-strip {
    margin-top: 42px;
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr;
    gap: 12px;
}

.services-photo-strip-item {
    position: relative;
    height: 190px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    background: #0b1016;
}

.services-photo-strip-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.86) contrast(1.06) brightness(.78);
    transition: transform .55s ease, filter .55s ease;
}

.services-photo-strip-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 35%, rgba(5,8,12,.84) 100%);
}

.services-photo-strip-item span {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 2;
    color: #f1f4f7;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.services-photo-strip-item:hover img {
    transform: scale(1.045);
    filter: saturate(1) contrast(1.05) brightness(.88);
}


/* -----------------------------
   SERVICES OVERVIEW CARDS
----------------------------- */

.services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.service-card {
    min-height: 380px;
    padding: 0 0 28px;
    overflow: hidden;
}

.service-card-media {
    position: relative;
    width: 100%;
    height: 176px;
    margin-bottom: 26px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.service-card-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.82) contrast(1.07) brightness(.76);
    transition: transform .55s ease, filter .55s ease;
}

.service-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5,8,12,.03), rgba(5,8,12,.68));
}

.service-card-media span {
    position: absolute;
    z-index: 2;
    left: 18px;
    bottom: 14px;
    color: #ffffff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.45px;
}

.service-card:hover .service-card-media img {
    transform: scale(1.055);
    filter: saturate(.98) contrast(1.06) brightness(.86);
}

.service-card h3,
.service-card > p,
.service-card > .card-link {
    margin-left: 28px;
    margin-right: 28px;
}

.service-card h3 {
    margin-bottom: 12px;
}

.service-card > p {
    min-height: 62px;
}


/* -----------------------------
   SERVICE DETAIL HERO PHOTOS
----------------------------- */

.service-real-photo {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: #0a0f15;
    box-shadow: 0 30px 80px rgba(0,0,0,.34);
}

.service-real-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.84) contrast(1.07) brightness(.74);
    transition: transform .7s ease, filter .7s ease;
}

.service-real-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4,7,11,.06), rgba(4,7,11,.28) 50%, rgba(4,7,11,.86) 100%),
        linear-gradient(90deg, rgba(6,10,15,.10), transparent 50%);
}

.service-real-photo > span {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 18px;
    color: #edf1f4;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.65px;
}

.service-real-photo:hover img {
    transform: scale(1.04);
    filter: saturate(.96) contrast(1.07) brightness(.83);
}


/* -----------------------------
   DIGITAL SOLUTIONS REALITY BAND
----------------------------- */

.service-reality-section {
    padding: 40px 0 105px;
    background: #080b10;
}

.service-reality-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
}

.service-reality-photo {
    height: 360px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: #0a0f15;
}

.service-reality-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.80) contrast(1.06) brightness(.80);
}

.service-reality-copy h2 {
    max-width: 560px;
    margin: 12px 0 18px;
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.service-reality-copy h2 span {
    color: #b8c0cc;
}

.service-reality-copy p {
    max-width: 560px;
    color: #9ea7b4;
    font-size: 15px;
    line-height: 1.8;
}


/* -----------------------------
   TECH SERVICES REAL COLLAGE
----------------------------- */

.tech-real-collage {
    display: grid;
    grid-template-rows: 1.25fr .75fr;
    gap: 12px;
    min-height: 505px;
}

.tech-real-photo {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: #0a0f15;
}

.tech-real-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.85) contrast(1.06) brightness(.77);
    transition: transform .55s ease, filter .55s ease;
}

.tech-real-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(5,8,12,.82) 100%);
}

.tech-real-photo span {
    position: absolute;
    z-index: 2;
    left: 16px;
    bottom: 14px;
    color: #f2f5f7;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.45px;
}

.tech-real-photo:hover img {
    transform: scale(1.04);
    filter: saturate(.98) contrast(1.06) brightness(.86);
}


/* -----------------------------
   RESPONSIVE
----------------------------- */

@media (max-width: 980px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .services-photo-strip {
        grid-template-columns: 1.2fr 1fr;
    }

    .services-photo-strip-item:last-child {
        grid-column: 1 / -1;
        height: 155px;
    }

    .service-reality-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .service-reality-photo {
        height: 320px;
    }
}

@media (max-width: 700px) {
    .services-photo-strip {
        grid-template-columns: 1fr;
        margin-top: 30px;
    }

    .services-photo-strip-item,
    .services-photo-strip-item:last-child {
        grid-column: auto;
        height: 150px;
    }

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

    .service-card {
        min-height: 0;
    }

    .service-card-media {
        height: 188px;
    }

    .service-card > p {
        min-height: 0;
    }

    .service-real-photo {
        min-height: 330px;
    }

    .service-reality-section {
        padding: 20px 0 80px;
    }

    .service-reality-photo {
        height: 250px;
    }

    .tech-real-collage {
        min-height: 420px;
    }
}


/* =========================================
   HOMEPAGE NO.1 — REAL TECHNOLOGY SLIDESHOW
========================================= */


/* RIGHT-SIDE HERO SLIDESHOW */

.xaqil-hero-slideshow {
    position: relative;

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

    overflow: hidden;

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

    border-radius:
        18px;

    background:
        #080c11;

    box-shadow:
        0 32px 90px
        rgba(0,0,0,.36);
}


.xaqil-slide {
    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transform:
        scale(1.025);

    transition:
        opacity .65s ease,
        visibility .65s ease,
        transform 5.2s ease;
}


.xaqil-slide.is-active {
    opacity: 1;

    visibility: visible;

    transform:
        scale(1);
}


.xaqil-slide img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter:
        saturate(.88)
        contrast(1.05)
        brightness(.80);
}


.xaqil-slide-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4,7,11,.04) 22%,
            rgba(4,7,11,.20) 51%,
            rgba(4,7,11,.88) 100%
        );
}


.xaqil-slide-content {
    position: absolute;

    z-index: 2;

    left: 28px;
    right: 80px;
    bottom: 30px;

    max-width: 420px;
}


.xaqil-slide-content span {
    display: block;

    margin-bottom: 8px;

    color:
        #6ed89c;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.7px;
}


.xaqil-slide-content strong {
    display: block;

    color:
        #f3f5f7;

    font-size:
        clamp(18px, 2vw, 25px);

    font-weight:
        600;

    line-height:
        1.35;

    letter-spacing:
        -.5px;
}


.xaqil-slider-arrow {
    position: absolute;

    z-index: 4;

    top: 50%;

    width: 38px;
    height: 38px;

    display: flex;

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

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

    border-radius:
        50%;

    background:
        rgba(4,7,11,.52);

    backdrop-filter:
        blur(10px);

    color:
        #ffffff;

    cursor: pointer;

    transform:
        translateY(-50%);

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


.xaqil-slider-arrow:hover {
    border-color:
        rgba(255,255,255,.28);

    background:
        rgba(4,7,11,.78);
}


.xaqil-slider-prev {
    left: 15px;
}


.xaqil-slider-next {
    right: 15px;
}


.xaqil-slider-dots {
    position: absolute;

    z-index: 5;

    right: 22px;
    bottom: 22px;

    display: flex;

    gap: 6px;
}


.xaqil-slider-dots button {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;

    border-radius:
        999px;

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

    cursor:
        pointer;

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


.xaqil-slider-dots button.is-active {
    width: 24px;

    background:
        #ffffff;
}


/* WHAT WE DO — ICONS ONLY AGAIN */

.xaqil-home-service {
    grid-template-columns:
        52px
        minmax(0,1fr)
        24px;
}


.xaqil-home-service-media {
    display:
        none !important;
}


.xaqil-home-service-icon {
    display: flex !important;

    width: 48px;
    height: 48px;

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


/* WHY XAQIL — ICONS ONLY AGAIN */

.xaqil-why-marker {
    display:
        none !important;
}


.xaqil-why-icon {
    display:
        flex !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .xaqil-hero-slideshow {
        min-height:
            380px;
    }


    .xaqil-slide-content {
        left:
            20px;

        right:
            58px;

        bottom:
            24px;
    }


    .xaqil-slider-arrow {
        width:
            34px;

        height:
            34px;
    }


    .xaqil-slider-prev {
        left:
            10px;
    }


    .xaqil-slider-next {
        right:
            10px;
    }


    .xaqil-slider-dots {
        right:
            16px;

        bottom:
            16px;
    }


    .xaqil-home-service {
        grid-template-columns:
            44px
            minmax(0,1fr)
            18px;

        gap:
            16px;
    }


    .xaqil-home-service-icon {
        width:
            42px;

        height:
            42px;
    }

}


/* =========================================
   WEB DEVELOPMENT STEP-BY-STEP FIX
========================================= */

/* Homepage missing responsive icon */
.xaqil-why-icon-cyan .fa-laptop {
    font-size: 19px;
}


/* Built With Purpose — coloured icons */
.dev-foundation-icon i,
.dev-type-icon i {
    font-size: 21px;
    line-height: 1;
}

.dev-foundation-item:nth-child(1) .dev-foundation-icon {
    color: #67a2ff;
    background: rgba(103,162,255,.11);
    border-color: rgba(103,162,255,.24);
}

.dev-foundation-item:nth-child(2) .dev-foundation-icon {
    color: #62cbd6;
    background: rgba(98,203,214,.10);
    border-color: rgba(98,203,214,.23);
}

.dev-foundation-item:nth-child(3) .dev-foundation-icon {
    color: #a98cff;
    background: rgba(169,140,255,.11);
    border-color: rgba(169,140,255,.24);
}

.dev-foundation-item:nth-child(4) .dev-foundation-icon {
    color: #d8ad61;
    background: rgba(216,173,97,.10);
    border-color: rgba(216,173,97,.23);
}


/* Website Types */
.dev-type-icon-blue {
    color: #67a2ff;
    background: rgba(103,162,255,.11);
    border-color: rgba(103,162,255,.24);
}

.dev-type-icon-purple {
    color: #a98cff;
    background: rgba(169,140,255,.11);
    border-color: rgba(169,140,255,.24);
}

.dev-type-icon-green {
    color: #68cf96;
    background: rgba(104,207,150,.10);
    border-color: rgba(104,207,150,.23);
}

.dev-type-icon-gold {
    color: #d8ad61;
    background: rgba(216,173,97,.10);
    border-color: rgba(216,173,97,.23);
}

.dev-type-card {
    justify-content: flex-start;
    min-height: 410px;
}

.dev-type-large {
    min-height: 460px;
}

.dev-type-wide {
    min-height: 340px;
}

.dev-type-label {
    margin-bottom: 18px;
}

.dev-type-card p {
    margin-bottom: 16px;
}

.dev-type-details {
    display: grid;
    gap: 8px;

    margin: 0 0 22px;
    padding: 0;

    list-style: none;
}

.dev-type-details li {
    position: relative;

    padding-left: 17px;

    color: #858f9b;

    font-size: 12px;
    line-height: 1.5;
}

.dev-type-details li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 7px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #b8c0cc;
}

.dev-type-card > span {
    margin-top: auto;
}


/* Possible Features — realistic colours */
.dev-feature-item i {
    width: 24px;

    flex: 0 0 24px;

    text-align: center;

    font-size: 18px;
    line-height: 1;
}

.dev-feature-item:nth-child(1) i { color: #62cbd6; }
.dev-feature-item:nth-child(2) i { color: #67a2ff; }
.dev-feature-item:nth-child(3) i { color: #25d366; }
.dev-feature-item:nth-child(4) i { color: #a98cff; }
.dev-feature-item:nth-child(5) i { color: #d8ad61; }
.dev-feature-item:nth-child(6) i { color: #68cf96; }
.dev-feature-item:nth-child(7) i { color: #5da6ff; }
.dev-feature-item:nth-child(8) i { color: #9b86ff; }
.dev-feature-item:nth-child(9) i { color: #62cbd6; }
.dev-feature-item:nth-child(10) i { color: #ff8c73; }


/* Final CTA */
.dev-final-cta-actions {
    display: flex;
    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}


/* Project Submission page */
.project-submission-hero {
    padding: 145px 0 90px;

    background:
        radial-gradient(
            circle at 80% 28%,
            rgba(103,162,255,.10),
            transparent 29%
        ),
        #080b10;
}

.project-submission-hero-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(300px,.85fr);

    gap: 70px;

    align-items: center;
}

.project-submission-hero h1 {
    max-width: 760px;

    margin: 12px 0 22px;

    color: #f4f6f8;

    font-size:
        clamp(48px,7vw,82px);

    line-height: .98;

    letter-spacing: -4px;
}

.project-submission-hero h1 span {
    display: block;
    color: #9ea7b4;
}

.project-submission-hero > .container > div:first-child > p {
    max-width: 660px;

    color: #9ea7b4;

    font-size: 15px;
    line-height: 1.8;
}

.project-review-card {
    padding: 28px;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #10151d,
            #0b0f15
        );
}

.project-review-card > span {
    display: block;

    margin-bottom: 21px;

    color: #707a86;

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

    letter-spacing: 1.7px;
}

.project-review-card > div {
    display: grid;

    grid-template-columns: 36px 1fr;

    gap: 12px;

    align-items: center;

    padding: 15px 0;

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

.project-review-card strong {
    color: #b8c0cc;

    font-size: 10px;

    letter-spacing: 1px;
}

.project-review-card p {
    color: #a0a9b5;

    font-size: 12px;
    line-height: 1.5;
}

.project-submission-section {
    background: #0b0f15;
}

.project-submission-layout {
    display: grid;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(0,1.18fr);

    gap: 70px;

    align-items: start;
}

.project-submission-intro {
    position: sticky;
    top: 120px;
}

.project-submission-intro h2 {
    margin: 12px 0 18px;

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

    line-height: 1.08;

    letter-spacing: -2px;
}

.project-submission-intro > p {
    color: #929aa7;

    font-size: 14px;
    line-height: 1.75;
}

.project-submission-note {
    display: grid;

    grid-template-columns: 22px 1fr;

    gap: 12px;

    margin-top: 30px;
    padding: 18px;

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

    border-radius: 12px;

    background:
        rgba(103,162,255,.05);
}

.project-submission-note i {
    color: #67a2ff;
}

.project-submission-note p {
    color: #919ba7;

    font-size: 12px;
    line-height: 1.6;
}

.project-submission-note a {
    color: #dce2e8;
}

.project-submission-panel {
    width: 100%;
}

.project-feature-checks {
    display: grid;

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

    gap: 10px;
}

.project-feature-checks label {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 46px;
    padding: 0 12px;

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

    border-radius: 8px;

    background: #0d1118;

    color: #aab3be;

    font-size: 12px;

    cursor: pointer;
}

.project-feature-checks input {
    accent-color: #67a2ff;
}

.project-submit-button {
    width: 100%;
    margin-top: 8px;
}

.project-form-build-note {
    margin-top: 12px;

    color: #67717d;

    font-size: 10px;
    line-height: 1.55;
}


@media (max-width: 900px) {

    .project-submission-hero-layout,
    .project-submission-layout {
        grid-template-columns: 1fr;
    }

    .project-submission-intro {
        position: static;
    }

    .dev-type-card,
    .dev-type-large,
    .dev-type-wide {
        min-height: 0;
    }
}


@media (max-width: 600px) {

    .project-submission-hero {
        padding: 115px 0 65px;
    }

    .project-submission-hero h1 {
        letter-spacing: -2.5px;
    }

    .project-feature-checks {
        grid-template-columns: 1fr;
    }

    .dev-final-cta-actions {
        width: 100%;
    }

    .dev-final-cta-actions a {
        width: 100%;
        text-align: center;
    }
}


/* =========================================
   WEB HOSTING STEP-BY-STEP FIX
========================================= */


/* -----------------------------------------
   HOW YOUR WEBSITE GETS ONLINE
----------------------------------------- */

.hosting-flow-item {
    display: flex;
    flex-direction: column;
}


.hosting-flow-icon i {
    font-size: 20px;
    line-height: 1;
}


/* DOMAIN */
.hosting-flow-domain .hosting-flow-icon {
    color: #68a5ff;

    background:
        rgba(104,165,255,.11);

    border-color:
        rgba(104,165,255,.25);
}


/* DNS */
.hosting-flow-dns .hosting-flow-icon {
    color: #68cbd7;

    background:
        rgba(104,203,215,.10);

    border-color:
        rgba(104,203,215,.24);
}


/* HOSTING */
.hosting-flow-server .hosting-flow-icon {
    color: #a58cff;

    background:
        rgba(165,140,255,.11);

    border-color:
        rgba(165,140,255,.25);
}


/* SSL */
.hosting-flow-ssl .hosting-flow-icon {
    color: #67cf96;

    background:
        rgba(103,207,150,.10);

    border-color:
        rgba(103,207,150,.24);
}


/* LIVE WEBSITE */
.hosting-flow-live .hosting-flow-icon {
    color: #d9ad62;

    background:
        rgba(217,173,98,.10);

    border-color:
        rgba(217,173,98,.24);
}


/* PRACTICAL EXAMPLES */

.hosting-flow-example {
    margin-top: auto;
    padding-top: 20px;
}


.hosting-flow-example > small {
    display: block;

    margin-bottom: 8px;

    color: #626d79;

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

    letter-spacing: 1.3px;
}


.hosting-example-browser {
    min-height: 35px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 10px;

    overflow: hidden;

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

    border-radius: 7px;

    background:
        #0a0e14;
}


.hosting-example-browser i {
    color: #66cf96;

    font-size: 9px;
}


.hosting-example-browser strong {
    overflow: hidden;

    color: #dce2e7;

    font-size: 8px;
    font-weight: 550;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.hosting-example-record {
    display: grid;

    grid-template-columns:
        30px
        1fr
        1.4fr;

    gap: 6px;

    align-items: center;

    min-height: 38px;

    padding: 0 8px;

    border:
        1px solid
        rgba(104,203,215,.15);

    border-radius: 7px;

    background:
        rgba(104,203,215,.035);
}


.hosting-example-record span {
    color: #68cbd7;

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


.hosting-example-record strong {
    color: #cbd2d8;

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


.hosting-example-record b {
    color: #89939f;

    font-size: 7px;
    font-weight: 500;

    white-space: nowrap;
}


.hosting-example-server {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 52px;

    padding: 9px;

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

    border-radius: 8px;

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


.hosting-example-server > i {
    width: 29px;
    height: 29px;

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

    flex: 0 0 29px;

    border-radius: 6px;

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

    color: #a58cff;

    font-size: 12px;
}


.hosting-example-server strong {
    display: block;

    color: #dce1e6;

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


.hosting-example-server span {
    display: block;

    margin-top: 3px;

    color: #6f7985;

    font-size: 6.5px;
}


.hosting-example-live {
    overflow: hidden;

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

    border-radius: 7px;

    background: #f4f6f8;
}


.hosting-example-live > div {
    padding: 6px 8px;

    border-bottom:
        1px solid #e0e4e8;

    background: #ffffff;

    color: #28313a;

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

    letter-spacing: .55px;
}


.hosting-example-live strong {
    display: block;

    padding: 10px 8px 0;

    color: #17202a;

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


.hosting-example-live span {
    display: block;

    padding: 4px 8px 10px;

    color: #727b85;

    font-size: 5.5px;
}


/* -----------------------------------------
   HOSTING FEATURES — CORRECT ICONS
----------------------------------------- */

.hosting-feature-icon i {
    font-size: 20px;
    line-height: 1;
}


/* Website Hosting */
.hosting-feature-server .hosting-feature-icon {
    color: #a58cff;

    background:
        rgba(165,140,255,.11);

    border-color:
        rgba(165,140,255,.25);
}


/* SSL */
.hosting-feature-ssl .hosting-feature-icon {
    color: #67cf96;

    background:
        rgba(103,207,150,.10);

    border-color:
        rgba(103,207,150,.24);
}


/* Backups */
.hosting-feature-backup .hosting-feature-icon {
    color: #68a5ff;

    background:
        rgba(104,165,255,.11);

    border-color:
        rgba(104,165,255,.25);
}


/* Business Email */
.hosting-feature-email .hosting-feature-icon {
    color: #d9ad62;

    background:
        rgba(217,173,98,.10);

    border-color:
        rgba(217,173,98,.24);
}


/* DNS */
.hosting-feature-dns .hosting-feature-icon {
    color: #68cbd7;

    background:
        rgba(104,203,215,.10);

    border-color:
        rgba(104,203,215,.24);
}


/* Technical Support */
.hosting-feature-support .hosting-feature-icon {
    color: #ff8d78;

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

    border-color:
        rgba(255,141,120,.24);
}


/* Premium hover polish */
.hosting-flow-item:hover .hosting-flow-icon,
.hosting-feature-card:hover .hosting-feature-icon {
    transform: translateY(-2px);

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


/* Mobile example spacing */
@media (max-width: 900px) {

    .hosting-flow-item {
        min-height: 330px;
    }

}


@media (max-width: 600px) {

    .hosting-flow-item {
        min-height: 0;
    }

}


/* =========================================
   WEBSITE CARE STEP-BY-STEP FIX
========================================= */

.care-card-icon i {
    font-size: 20px;
    line-height: 1;
}


/* CONTENT UPDATES — blue */
.care-icon-content {
    color: #6fa8ff;

    background:
        linear-gradient(
            145deg,
            rgba(111,168,255,.15),
            rgba(111,168,255,.04)
        );

    border-color:
        rgba(111,168,255,.27);
}


/* BACKUPS — cyan */
.care-icon-backup {
    color: #63c9d7;

    background:
        linear-gradient(
            145deg,
            rgba(99,201,215,.14),
            rgba(99,201,215,.035)
        );

    border-color:
        rgba(99,201,215,.26);
}


/* SECURITY — green */
.care-icon-security {
    color: #68cf96;

    background:
        linear-gradient(
            145deg,
            rgba(104,207,150,.14),
            rgba(104,207,150,.035)
        );

    border-color:
        rgba(104,207,150,.26);
}


/* PERFORMANCE — gold */
.care-icon-performance {
    color: #d9ae63;

    background:
        linear-gradient(
            145deg,
            rgba(217,174,99,.14),
            rgba(217,174,99,.035)
        );

    border-color:
        rgba(217,174,99,.26);
}


/* MONITORING — violet */
.care-icon-monitoring {
    color: #a58dff;

    background:
        linear-gradient(
            145deg,
            rgba(165,141,255,.14),
            rgba(165,141,255,.035)
        );

    border-color:
        rgba(165,141,255,.26);
}


/* SUPPORT — warm coral */
.care-icon-support {
    color: #ff927f;

    background:
        linear-gradient(
            145deg,
            rgba(255,146,127,.14),
            rgba(255,146,127,.035)
        );

    border-color:
        rgba(255,146,127,.26);
}


/* Premium hover */
.care-dashboard-card:hover .care-card-icon {
    transform:
        translateY(-2px)
        scale(1.03);

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.24);
}


.care-card-icon {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


/* =========================================
   DIGITAL SOLUTIONS MICROSOFT EDGE FIX
========================================= */


/* -----------------------------------------
   OUTER DEMO WINDOW
----------------------------------------- */

.ds-product-demo {
    overflow: hidden;

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

    border-radius:
        12px;

    background:
        #ffffff;

    box-shadow:
        0 34px 90px
        rgba(0,0,0,.38);
}


/* Hide the old simple browser pieces if they
   exist elsewhere in the stylesheet. */
.ds-demo-browser-bar,
.ds-browser-dots,
.ds-browser-address {
    display: none !important;
}


/* -----------------------------------------
   MICROSOFT EDGE — TITLE / TAB ROW
----------------------------------------- */

.ds-edge-browser {
    width: 100%;

    background:
        #202124;

    color:
        #e8eaed;
}


.ds-edge-titlebar {
    min-height: 40px;

    display: grid;

    grid-template-columns:
        34px
        minmax(190px, 255px)
        36px
        1fr
        auto;

    align-items: end;

    gap: 0;

    padding-left: 7px;

    background:
        #2b2d31;
}


.ds-edge-tab-actions,
.ds-edge-new-tab {
    width: 28px;
    height: 28px;

    margin-bottom: 5px;

    display: flex;

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

    border: 0;

    border-radius: 7px;

    background:
        transparent;

    color:
        #c7cbd0;

    font-size:
        10px;
}


.ds-edge-tab-actions {
    margin-right: 3px;
}


.ds-edge-tab {
    min-height: 34px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        0 11px;

    overflow: hidden;

    border-radius:
        8px 8px 0 0;

    background:
        #202124;

    color:
        #f1f3f4;

    font-size:
        9px;
}


.ds-edge-tab span {
    overflow: hidden;

    flex: 1;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.ds-edge-logo {
    flex: 0 0 auto;

    font-size: 15px;

    background:
        linear-gradient(
            135deg,
            #0aa7f7 0%,
            #0fc79b 48%,
            #2b75e8 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.ds-edge-tab-close {
    flex: 0 0 auto;

    color:
        #aeb4bb;

    font-size:
        10px;
}


.ds-edge-new-tab {
    margin-left: 3px;

    font-size:
        10px;
}


.ds-edge-title-space {
    min-width: 12px;
}


.ds-edge-window-controls {
    align-self: stretch;

    display: grid;

    grid-template-columns:
        repeat(3, 46px);
}


.ds-edge-window-controls span {
    display: flex;

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

    color:
        #d6d9dd;

    font-size:
        9px;
}


.ds-edge-window-close:hover {
    background:
        #c42b1c;

    color:
        #ffffff;
}


/* -----------------------------------------
   MICROSOFT EDGE — TOOLBAR
----------------------------------------- */

.ds-edge-toolbar {
    min-height: 48px;

    display: grid;

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

    gap: 9px;

    align-items: center;

    padding:
        7px 10px;

    background:
        #202124;

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


.ds-edge-navigation {
    display: flex;

    align-items: center;

    gap: 1px;
}


.ds-edge-navigation span,
.ds-edge-tools > span {
    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 50%;

    color:
        #c9cdd2;

    font-size:
        10px;
}


.ds-edge-navigation .is-disabled {
    opacity: .35;
}


.ds-edge-addressbar {
    min-height: 34px;

    display: flex;

    align-items: center;

    gap: 5px;

    min-width: 0;

    padding:
        0 12px;

    border-radius:
        18px;

    background:
        #303134;

    color:
        #d7dade;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.03);
}


.ds-edge-site-control {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    display: flex;

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

    border-radius: 50%;

    background:
        #3d4044;

    color:
        #d7dade;

    font-size:
        7px;
}


.ds-edge-addressbar strong {
    overflow: hidden;

    color:
        #f1f3f4;

    font-size:
        8.5px;

    font-weight:
        500;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.ds-edge-path {
    color:
        #a6abb1;

    font-size:
        8px;

    white-space:
        nowrap;
}


.ds-edge-favorite {
    margin-left: auto;

    flex: 0 0 auto;

    color:
        #c9cdd2;

    font-size:
        10px;
}


.ds-edge-tools {
    display: flex;

    align-items: center;

    gap: 1px;
}


.ds-edge-profile {
    width: 27px;
    height: 27px;

    display: flex;

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

    margin:
        0 3px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #3269d9,
            #6d4bc3
        );

    color:
        #ffffff;

    font-size:
        8px;

    font-weight:
        700;
}


/* -----------------------------------------
   REAL WEBSITE / WEB APP INSIDE EDGE
----------------------------------------- */

.ds-demo-app-header {
    min-height: 62px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 24px;

    padding:
        10px 18px;

    border-bottom:
        1px solid
        #e4e7eb;

    background:
        #ffffff;
}


.ds-real-app-brand {
    display: flex !important;

    flex-direction: row !important;

    align-items: center;

    gap: 10px !important;
}


.ds-real-app-brand img {
    width: 64px;
    height: 27px;

    display: block;

    object-fit: contain;

    object-position:
        left center;

    filter:
        brightness(.10);
}


.ds-real-app-brand > div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.ds-real-app-brand strong {
    color:
        #1c2530;

    font-size:
        9.5px;

    font-weight:
        650;
}


.ds-real-app-brand span {
    color:
        #7d8792;

    font-size:
        6.5px;
}


.ds-real-app-nav {
    display: flex;

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

    gap: 22px;
}


.ds-real-app-nav span {
    position: relative;

    color:
        #717c87;

    font-size:
        8px;
}


.ds-real-app-nav span.is-active {
    color:
        #2457b8;

    font-weight:
        650;
}


.ds-real-app-nav span.is-active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -20px;

    height: 2px;

    border-radius: 999px;

    background:
        #2f6fdb;
}


.ds-real-app-account {
    display: flex;

    align-items: center;

    gap: 8px;
}


.ds-real-app-account > span {
    color:
        #727d88;

    font-size:
        7px;
}


.ds-real-app-account > div {
    width: 28px;
    height: 28px;

    display: flex;

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

    border-radius: 50%;

    background:
        #e8eef9;

    color:
        #2f60bd;

    font-size:
        7px;

    font-weight:
        700;
}


/* -----------------------------------------
   LIGHT WEB-APP SCREEN
----------------------------------------- */

.ds-demo-screen {
    min-height:
        450px;

    background:
        #f5f7f9;
}


.ds-demo-view {
    padding:
        28px 30px;
}


.ds-form-heading > span {
    color:
        #2f6fdb;

    font-weight:
        700;
}


.ds-form-heading h3 {
    color:
        #19232e;

    font-size:
        22px;

    font-weight:
        650;
}


.ds-form-heading p {
    color:
        #6f7a85;

    font-size:
        9.5px;
}


.ds-demo-field label {
    color:
        #4d5965;

    font-weight:
        550;
}


.ds-demo-field input,
.ds-demo-field select {
    border:
        1px solid
        #d8dee5;

    background:
        #ffffff;

    color:
        #1e2833;

    box-shadow:
        0 1px 2px
        rgba(15,23,42,.035);
}


.ds-demo-field input::placeholder {
    color:
        #a5adb6;
}


.ds-demo-field input.is-focused,
.ds-demo-field select.is-focused {
    border-color:
        #4f7ed8;

    background:
        #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(79,126,216,.10);
}


.ds-demo-submit {
    background:
        #2f6fdb;

    color:
        #ffffff;

    box-shadow:
        0 5px 14px
        rgba(47,111,219,.20);
}


/* CONFIRMATION SCREEN */

.ds-confirmation-icon {
    border-color:
        rgba(38,157,91,.24);

    background:
        rgba(38,157,91,.08);

    color:
        #29975b;
}


.ds-confirmation-label {
    color:
        #29975b;

    font-weight:
        700;
}


.ds-confirmation h3 {
    color:
        #19232e;
}


.ds-confirmation > p {
    color:
        #6f7a85;
}


.ds-confirmation-details {
    border-top:
        1px solid
        #dde2e7;
}


.ds-confirmation-details div {
    border-bottom:
        1px solid
        #e4e8ec;
}


.ds-confirmation-details span {
    color:
        #7b8691;
}


.ds-confirmation-details strong {
    color:
        #25303b;
}


/* ADMIN SCREEN */

.ds-admin-demo {
    border:
        1px solid
        #dde2e7;

    background:
        #ffffff;
}


.ds-admin-sidebar {
    background:
        #f7f9fb;

    border-right:
        1px solid
        #e1e6eb;
}


.ds-admin-sidebar strong {
    color:
        #1f2933;
}


.ds-admin-sidebar span {
    color:
        #7a8590;
}


.ds-admin-sidebar span.is-selected {
    background:
        #e8effb;

    color:
        #2f63c6;
}


.ds-admin-content {
    background:
        #ffffff;
}


.ds-admin-heading {
    border-bottom:
        1px solid
        #e3e7eb;
}


.ds-admin-heading span,
.ds-admin-record span,
.ds-admin-event span {
    color:
        #7a8590;
}


.ds-admin-heading h3,
.ds-admin-record strong,
.ds-admin-event strong {
    color:
        #25303b;
}


.ds-admin-heading small {
    color:
        #6f7a85;
}


.ds-admin-record div {
    border-bottom:
        1px solid
        #e6eaee;
}


.ds-admin-event {
    border:
        1px solid
        #dfe4e8;

    background:
        #f8fafb;
}


/* -----------------------------------------
   RESPONSIVE EDGE WINDOW
----------------------------------------- */

@media (max-width: 800px) {

    .ds-edge-titlebar {
        grid-template-columns:
            30px
            minmax(145px,1fr)
            32px
            auto;
    }


    .ds-edge-title-space {
        display: none;
    }


    .ds-edge-window-controls {
        grid-template-columns:
            repeat(3,34px);
    }


    .ds-edge-tools > span:nth-child(1),
    .ds-edge-tools > span:nth-child(2),
    .ds-edge-tools > span:nth-child(3) {
        display: none;
    }


    .ds-edge-addressbar strong {
        max-width: 160px;
    }


    .ds-edge-path {
        display: none;
    }


    .ds-demo-app-header {
        grid-template-columns:
            1fr auto;
    }


    .ds-real-app-nav {
        display: none;
    }

}


@media (max-width: 560px) {

    .ds-edge-titlebar {
        grid-template-columns:
            27px
            minmax(120px,1fr)
            28px;
    }


    .ds-edge-window-controls {
        display: none;
    }


    .ds-edge-toolbar {
        grid-template-columns:
            auto 1fr;
    }


    .ds-edge-tools {
        display: none;
    }


    .ds-edge-navigation span {
        width: 26px;
        height: 26px;
    }


    .ds-edge-navigation span:nth-child(2) {
        display: none;
    }


    .ds-edge-addressbar {
        min-height: 31px;
    }


    .ds-edge-addressbar strong {
        max-width: 120px;
    }


    .ds-real-app-brand img {
        width: 54px;
    }


    .ds-real-app-account > span {
        display: none;
    }

}


/* =========================================
   TECH SERVICES REAL IMAGE CARDS
========================================= */


/* Only the four main Tech Services cards */
.tech-service-media {
    position: relative;

    height: 205px;

    display: flex;

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

    margin:
        -34px
        -34px
        28px;

    padding: 16px;

    overflow: hidden;

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

    border-radius:
        14px 14px 0 0;

    background:
        linear-gradient(
            145deg,
            #f4f6f8,
            #e9edf1
        );
}


/* Important: contain keeps the complete Microsoft
   image or Windows screenshot visible. */
.tech-service-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    object-position: center;

    transition:
        transform .35s ease;
}


/* Microsoft product art */
.tech-service-media-product {
    background:
        linear-gradient(
            145deg,
            #f7f8fa,
            #e9edf2
        );
}


/* Windows settings screenshots */
.tech-service-media-screen {
    padding: 12px;

    background:
        #eef1f4;
}


.tech-service-media > span {
    position: absolute;

    left: 13px;
    bottom: 11px;

    padding:
        5px 8px;

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

    border-radius: 5px;

    background:
        rgba(8,11,16,.78);

    backdrop-filter:
        blur(8px);

    color:
        #f2f4f6;

    font-size:
        7px;

    font-weight:
        750;

    letter-spacing:
        1.1px;
}


.tech-service-card:hover
.tech-service-media img {
    transform:
        scale(1.02);
}


/* Keep the card layout balanced after replacing
   the small icons with wide images. */
.tech-service-card {
    overflow: hidden;
}


@media (max-width: 700px) {

    .tech-service-media {
        height: 185px;

        margin:
            -28px
            -28px
            25px;
    }

}


/* =========================================
   PRICING — ALL SERVICES & PREMIUM NUMBERS
========================================= */


/* -----------------------------------------
   PREMIUM NUMBERING
----------------------------------------- */

.pricing-premium-number {
    width: 42px;
    height: 42px;

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

    flex: 0 0 42px;

    border:
        1px solid
        rgba(184,192,204,.16);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    color: #d7dde3;

    font-size: 17px;
    font-weight: 650;

    letter-spacing: -.5px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.04);
}


.pricing-package-emphasis
.pricing-premium-number {
    color: #ffffff;

    border-color:
        rgba(111,168,255,.24);

    background:
        linear-gradient(
            145deg,
            rgba(111,168,255,.14),
            rgba(111,168,255,.035)
        );
}


.pricing-factor-number {
    width: 38px;
    height: 38px;

    flex-basis: 38px;

    border-radius: 9px;

    font-size: 15px;
}


.pricing-process-number {
    width: 44px;
    height: 44px;

    margin-bottom: 20px;

    border-radius: 11px;

    font-size: 16px;
}


/* -----------------------------------------
   OTHER SERVICE PRICING
----------------------------------------- */

.pricing-services-section {
    background: #0a0e14;
}


.pricing-service-grid {
    display: grid;

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

    gap: 18px;
}


.pricing-service-card {
    min-height: 340px;

    display: flex;
    flex-direction: column;

    padding: 30px;

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

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #10151d,
            #0c1117
        );

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


.pricing-service-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(184,192,204,.19);
}


.pricing-service-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 25px;

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

    border-radius: 11px;

    font-size: 20px;
}


.pricing-service-hosting
.pricing-service-icon {
    color: #a58cff;

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

    border-color:
        rgba(165,140,255,.22);
}


.pricing-service-care
.pricing-service-icon {
    color: #68cf96;

    background:
        rgba(104,207,150,.09);

    border-color:
        rgba(104,207,150,.22);
}


.pricing-service-digital
.pricing-service-icon {
    color: #67a8ff;

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

    border-color:
        rgba(103,168,255,.22);
}


.pricing-service-domain
.pricing-service-icon {
    color: #66cad6;

    background:
        rgba(102,202,214,.09);

    border-color:
        rgba(102,202,214,.22);
}


.pricing-service-category {
    margin-bottom: 9px;

    color: #737d89;

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

    letter-spacing: 1.5px;
}


.pricing-service-card h3 {
    margin-bottom: 12px;

    color: #eef1f4;

    font-size: 22px;

    letter-spacing: -.6px;
}


.pricing-service-card > p {
    color: #9099a5;

    font-size: 13px;

    line-height: 1.7;
}


.pricing-service-value {
    margin-top: auto;
    padding-top: 25px;
}


.pricing-service-value small {
    display: block;

    margin-bottom: 5px;

    color: #606b77;

    font-size: 7px;

    letter-spacing: 1.25px;
}


.pricing-service-value strong {
    color: #f1f3f5;

    font-size: 17px;

    font-weight: 600;
}


.pricing-service-link {
    margin-top: 20px;

    color: #aeb7c2;

    font-size: 11px;
}


/* -----------------------------------------
   TECH SERVICES PRICING
----------------------------------------- */

.pricing-tech-section {
    background: #080b10;
}


.pricing-tech-list {
    overflow: hidden;

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

    border-radius: 15px;

    background:
        #0d1118;
}


.pricing-tech-item {
    display: grid;

    grid-template-columns:
        48px
        minmax(0,1fr)
        minmax(120px,auto);

    gap: 20px;

    align-items: center;

    padding: 21px 24px;

    border-bottom:
        1px solid
        rgba(255,255,255,.065);
}


.pricing-tech-item:last-child {
    border-bottom: none;
}


.pricing-tech-icon {
    width: 44px;
    height: 44px;

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

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

    border-radius: 10px;

    font-size: 18px;
}


.pricing-tech-windows {
    color: #58a6ff;

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


.pricing-tech-office {
    color: #d86a45;

    background:
        rgba(216,106,69,.08);
}


.pricing-tech-key {
    color: #d8ad61;

    background:
        rgba(216,173,97,.08);
}


.pricing-tech-remote {
    color: #a58cff;

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


.pricing-tech-wifi {
    color: #62cbd6;

    background:
        rgba(98,203,214,.08);
}


.pricing-tech-device {
    color: #68cf96;

    background:
        rgba(104,207,150,.08);
}


.pricing-tech-update {
    color: #7fa8ff;

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


.pricing-tech-support {
    color: #ff917d;

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


.pricing-tech-item > div:nth-child(2) > span {
    display: block;

    margin-bottom: 5px;

    color: #66717d;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.25px;
}


.pricing-tech-item h3 {
    margin-bottom: 5px;

    color: #e9edf0;

    font-size: 15px;

    font-weight: 600;
}


.pricing-tech-item p {
    max-width: 700px;

    color: #838d99;

    font-size: 11px;

    line-height: 1.55;
}


.pricing-tech-price {
    color: #f3f5f7;

    font-size: 16px;

    font-weight: 650;

    text-align: right;

    white-space: nowrap;
}


.pricing-tech-assess {
    color: #b8c0cc;

    font-size: 12px;
}


.pricing-tech-note {
    display: grid;

    grid-template-columns:
        20px
        1fr;

    gap: 12px;

    margin-top: 16px;

    padding: 16px 18px;

    border:
        1px solid
        rgba(98,203,214,.14);

    border-radius: 10px;

    background:
        rgba(98,203,214,.035);
}


.pricing-tech-note i {
    color: #62cbd6;
}


.pricing-tech-note p {
    color: #7d8793;

    font-size: 11px;

    line-height: 1.55;
}


/* -----------------------------------------
   RESPONSIVE
----------------------------------------- */

@media (max-width: 800px) {

    .pricing-service-grid {
        grid-template-columns: 1fr;
    }


    .pricing-tech-item {
        grid-template-columns:
            44px
            minmax(0,1fr);
    }


    .pricing-tech-price {
        grid-column: 2;

        text-align: left;
    }

}


@media (max-width: 560px) {

    .pricing-service-card {
        min-height: 0;

        padding: 24px;
    }


    .pricing-tech-item {
        gap: 14px;

        padding: 18px;
    }


    .pricing-tech-icon {
        width: 40px;
        height: 40px;

        font-size: 16px;
    }


    .pricing-premium-number {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        font-size: 15px;
    }

}


/* =========================================
   XAQIL FLOATING SUPPORT CENTRE
========================================= */

.xaqil-support-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9998;
    font-family: "Inter", sans-serif;
}

.xaqil-support-button {
    min-width: 118px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 17px;
    border: 1px solid rgba(184,192,204,.22);
    border-radius: 999px;
    background: linear-gradient(145deg,#151b24,#0d1219);
    box-shadow: 0 16px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04);
    color: #eef1f4;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15px;
    cursor: pointer;
    transition: transform .2s ease,border-color .2s ease,background .2s ease;
}

.xaqil-support-button i {
    color: #b8c0cc;
    font-size: 15px;
}

.xaqil-support-button:hover {
    transform: translateY(-2px);
    border-color: rgba(184,192,204,.42);
    background: linear-gradient(145deg,#1a212c,#10161e);
}

.xaqil-support-panel {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: min(360px, calc(100vw - 32px));
    padding: 20px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(11,15,21,.98);
    box-shadow: 0 28px 70px rgba(0,0,0,.50);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.985);
    transform-origin: bottom right;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.xaqil-support-widget.is-open .xaqil-support-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.xaqil-support-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.xaqil-support-panel-head span {
    display: block;
    margin-bottom: 5px;
    color: #737e8a;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.xaqil-support-panel-head strong {
    color: #f3f5f7;
    font-size: 17px;
    letter-spacing: -.35px;
}

.xaqil-support-close {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: #111720;
    color: #77818d;
    cursor: pointer;
}

.xaqil-support-intro {
    margin: 0 0 15px;
    color: #7d8792;
    font-size: 10px;
    line-height: 1.6;
}

.xaqil-support-actions {
    display: grid;
    gap: 8px;
}

.xaqil-support-action {
    min-height: 62px;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 18px;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
    background: #0e131a;
    text-decoration: none;
    transition: border-color .18s ease,background .18s ease,transform .18s ease;
}

.xaqil-support-action:hover {
    transform: translateX(2px);
    border-color: rgba(184,192,204,.18);
    background: #111820;
}

.xaqil-support-action-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    background: #151b23;
    color: #b8c0cc;
    font-size: 15px;
}

.xaqil-support-action-icon.whatsapp {
    color: #25d366;
    background: rgba(37,211,102,.07);
    border-color: rgba(37,211,102,.16);
}

.xaqil-support-action-icon.meeting {
    color: #d7ae64;
    background: rgba(215,174,100,.07);
    border-color: rgba(215,174,100,.16);
}

.xaqil-support-action-icon.enquiry {
    color: #71a5ff;
    background: rgba(113,165,255,.07);
    border-color: rgba(113,165,255,.16);
}

.xaqil-support-action-icon.phone {
    color: #9ea7b4;
}

.xaqil-support-action small,
.xaqil-support-action strong {
    display: block;
}

.xaqil-support-action small {
    margin-bottom: 4px;
    color: #626d78;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .9px;
}

.xaqil-support-action strong {
    color: #dfe4e8;
    font-size: 10px;
}

.xaqil-support-arrow {
    justify-self: end;
    color: #525d69;
    font-size: 9px;
}

.xaqil-support-foot {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.055);
    color: #535e69;
    font-size: 7px;
    text-align: center;
}

@media (max-width: 600px) {
    .xaqil-support-widget {
        right: 16px;
        bottom: 16px;
    }

    .xaqil-support-button {
        min-width: 50px;
        width: 50px;
        padding: 0;
    }

    .xaqil-support-button span {
        display: none;
    }

    .xaqil-support-panel {
        bottom: 60px;
    }
}

/* Contact page: Book a Meeting method */
.contact-methods .contact-method:nth-child(4) .contact-method-icon,
.contact-details-actions .contact-action:nth-child(4) .contact-action-icon {
    color: #c2a0ff;
    background: linear-gradient(145deg, rgba(194,160,255,.16), rgba(194,160,255,.04));
    border-color: rgba(194,160,255,.28);
}


/* Give the homepage a fuller desktop presence without changing inner pages. */
.home-page .container {
    width: min(1220px, 92%);
}

@media (min-width: 1100px) {
    .home-page .xaqil-home-hero-layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(470px, .92fr);
        gap: 64px;
    }

    .home-page .xaqil-home-copy h1 {
        max-width: 800px;
        font-size: clamp(64px, 7vw, 102px);
    }

    .home-page .xaqil-home-copy > p {
        max-width: 680px;
        font-size: 18px;
    }

    .home-page .xaqil-hero-slideshow {
        min-height: 540px;
    }
}

/* Keep project feature options aligned as two clean equal cards. */
.project-feature-checks {
    gap: 12px;
}

.project-feature-checks label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 12px;

    min-height: 54px;
    margin: 0;
    padding: 11px 14px;
}

.project-feature-checks input[type="checkbox"] {
    width: 16px !important;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0 !important;
    justify-self: start;
    flex: 0 0 16px;
    border-radius: 3px;
    accent-color: #67a2ff;
}

.project-feature-checks span {
    display: block;
    min-width: 0;
    line-height: 1.35;
    text-align: left;
}

@media (max-width: 600px) {
    .project-feature-checks label {
        min-height: 50px;
    }
}

/* =========================================
   SEPT 2026 — HOMEPAGE SCALE MATCH
========================================= */
.home-page .container {
    width: 92%;
    max-width: 1520px;
}

@media (min-width: 1100px) {
    .home-page .navbar .container { min-height: 82px; }
    .home-page .logo img { width: 165px; }
    .home-page .xaqil-home-hero {
        min-height: calc(100vh - 82px);
        padding: 126px 0 88px;
    }
    .home-page .xaqil-home-hero-layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(500px, .92fr);
        gap: 72px;
    }
    .home-page .xaqil-home-copy h1 {
        max-width: 900px;
        font-size: clamp(76px, 6.7vw, 112px);
        line-height: .92;
        letter-spacing: -5px;
    }
    .home-page .xaqil-home-copy > p {
        max-width: 760px;
        font-size: 19px;
        line-height: 1.75;
    }
    .home-page .xaqil-home-kicker { font-size: 10px; }
    .home-page .hero-buttons .primary-button,
    .home-page .hero-buttons .secondary-button {
        padding: 15px 24px;
        font-size: 15px;
    }
    .home-page .xaqil-hero-slideshow { min-height: 600px; }
    .home-page .xaqil-hero-meta span { font-size: 8px; }
    .home-page .xaqil-hero-meta strong { font-size: 12px; }
}

@media (max-width: 1099px) {
    .home-page .container { width: min(1120px, 90%); }
}

/* Project submission feature alignment retained. */
.project-feature-checks { gap: 12px; }
.project-feature-checks label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 54px;
    margin: 0;
    padding: 11px 14px;
}
.project-feature-checks input[type="checkbox"] {
    width: 16px !important;
    height: 16px;
    min-width: 16px;
    margin: 0;
    padding: 0 !important;
    justify-self: start;
    border-radius: 3px;
    accent-color: #67a2ff;
}
.project-feature-checks span {
    display: block;
    min-width: 0;
    line-height: 1.35;
    text-align: left;
}
@media (max-width: 600px) {
    .project-feature-checks label { min-height: 50px; }
}

/* =========================================
   XAQIL PUBLIC FOOTER — CENTERED WATERMARK
========================================= */
.xaqil-footer {
    position: relative;
    overflow: hidden;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 50% 35%, rgba(184,192,204,.035), transparent 42%),
        #06080c;
}

.xaqil-footer .container {
    position: relative;
    z-index: 2;
    padding-top: 48px;
}

.xaqil-footer-watermark {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
}

.xaqil-footer-watermark img {
    width: min(470px, 70vw);
    max-height: 175px;
    object-fit: contain;
    opacity: .075;
    filter: grayscale(1) brightness(1.35) contrast(1.05);
}

.xaqil-footer-content {
    width: min(720px, 100%);
    margin: 0 auto;
    text-align: center;
}

.xaqil-footer-description {
    max-width: 620px;
    margin: 0 auto;
    color: #7d8792;
    font-size: 13px;
    line-height: 1.75;
}

.xaqil-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 34px;
    padding: 19px 0 22px;
    border-top: 1px solid rgba(255,255,255,.055);
    text-align: center;
}

.xaqil-footer-bottom p {
    margin: 0;
    color: #59636f;
    font-size: 11px;
}

.xaqil-footer-bottom p:last-child {
    color: #707a86;
    letter-spacing: .4px;
}

@media (max-width: 760px) {
    .xaqil-footer .container {
        padding-top: 38px;
    }

    .xaqil-footer-watermark img {
        width: min(360px, 82vw);
        opacity: .065;
    }

    .xaqil-footer-description {
        max-width: 480px;
        font-size: 12px;
    }

    .xaqil-footer-bottom {
        flex-direction: column;
        gap: 5px;
        margin-top: 28px;
    }
}

/* =========================================
   XAQIL AI SUPPORT CHAT
   Original dark XAQIL palette only.
========================================= */
.xaqil-support-widget {
    right: 24px;
    bottom: 24px;
}

.xaqil-support-button {
    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184,192,204,.23);
    background: linear-gradient(145deg,#151b24,#0d1219);
    color: #eef1f4;
}

.xaqil-support-button i {
    color: #c7ced6;
    font-size: 16px;
}

.xaqil-ai-panel {
    width: min(390px, calc(100vw - 32px));
    height: min(590px, calc(100vh - 115px));
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: #0b0f15;
    box-shadow: 0 30px 80px rgba(0,0,0,.56);
}

.xaqil-ai-head {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(180deg,#111720,#0d1219);
}

.xaqil-ai-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.xaqil-ai-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184,192,204,.16);
    border-radius: 12px;
    background: linear-gradient(145deg,#1a222d,#10161e);
    color: #c8d0d8;
    font-size: 17px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.xaqil-ai-identity small,
.xaqil-ai-identity strong,
.xaqil-ai-identity em {
    display: block;
}

.xaqil-ai-identity small {
    margin-bottom: 3px;
    color: #687480;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.xaqil-ai-identity strong {
    margin-bottom: 4px;
    color: #f0f3f5;
    font-size: 11px;
}

.xaqil-ai-identity em {
    color: #75818d;
    font-size: 7px;
    font-style: normal;
}

.xaqil-ai-identity em i {
    width: 6px;
    height: 6px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 50%;
    background: #68cf96;
    box-shadow: 0 0 0 3px rgba(104,207,150,.08);
}

.xaqil-ai-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.xaqil-ai-reset,
.xaqil-support-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    background: #111720;
    color: #7b8691;
    cursor: pointer;
    transition: color .18s ease,border-color .18s ease,background .18s ease;
}

.xaqil-ai-reset:hover,
.xaqil-support-close:hover {
    color: #e8ecef;
    border-color: rgba(184,192,204,.18);
    background: #151c25;
}

.xaqil-ai-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 14px;
    scroll-behavior: smooth;
    background:
        radial-gradient(circle at 100% 0%,rgba(83,155,255,.045),transparent 26%),
        #0b0f15;
}

.xaqil-ai-messages::-webkit-scrollbar {
    width: 5px;
}

.xaqil-ai-messages::-webkit-scrollbar-thumb {
    background: #242d38;
    border-radius: 999px;
}

.xaqil-ai-message {
    display: flex;
    margin-bottom: 11px;
}

.xaqil-ai-message.is-user {
    justify-content: flex-end;
}

.xaqil-ai-bubble {
    max-width: 83%;
    padding: 10px 12px;
    border-radius: 13px 13px 13px 4px;
    border: 1px solid rgba(255,255,255,.065);
    background: #111720;
    color: #cbd2d9;
    font-size: 9px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.xaqil-ai-message.is-user .xaqil-ai-bubble {
    border-color: rgba(184,192,204,.13);
    border-radius: 13px 13px 4px 13px;
    background: #1b232d;
    color: #f0f3f5;
}

.xaqil-ai-bubble.is-loading {
    min-width: 52px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.xaqil-ai-bubble.is-loading span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7d8894;
    animation: xaqilAiTyping 1s infinite ease-in-out;
}

.xaqil-ai-bubble.is-loading span:nth-child(2) { animation-delay: .14s; }
.xaqil-ai-bubble.is-loading span:nth-child(3) { animation-delay: .28s; }

@keyframes xaqilAiTyping {
    0%,60%,100% { transform: translateY(0); opacity:.45; }
    30% { transform: translateY(-3px); opacity:1; }
}

.xaqil-ai-composer {
    display: grid;
    grid-template-columns: minmax(0,1fr) 38px;
    gap: 8px;
    align-items: end;
    padding: 12px 12px 8px;
    border-top: 1px solid rgba(255,255,255,.07);
    background: #0d1219;
}

.xaqil-ai-composer textarea {
    width: 100%;
    min-height: 40px;
    max-height: 110px;
    padding: 11px 12px;
    resize: none;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    outline: none;
    background: #090d12;
    color: #e6eaed;
    font: inherit;
    font-size: 9px;
    line-height: 1.5;
}

.xaqil-ai-composer textarea::placeholder {
    color: #58636e;
}

.xaqil-ai-composer textarea:focus {
    border-color: rgba(184,192,204,.23);
}

.xaqil-ai-send {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184,192,204,.22);
    border-radius: 11px;
    background: #e8ecef;
    color: #0a0e13;
    cursor: pointer;
    transition: transform .18s ease,opacity .18s ease;
}

.xaqil-ai-send:hover {
    transform: translateY(-1px);
}

.xaqil-ai-send:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.xaqil-ai-privacy {
    margin: 0;
    padding: 0 14px 11px;
    background: #0d1219;
    color: #4f5964;
    font-size: 6.5px;
    line-height: 1.4;
    text-align: center;
}

@media (max-width:600px) {
    .xaqil-ai-panel {
        width: min(380px, calc(100vw - 24px));
        height: min(620px, calc(100vh - 92px));
        bottom: 58px;
        border-radius: 16px;
    }

    .xaqil-support-widget {
        right: 12px;
        bottom: 12px;
    }

    .xaqil-support-button {
        min-width: 50px;
        width: 50px;
        height: 50px;
        padding: 0;
    }

    .xaqil-support-button span {
        display: none;
    }
}


/* =========================================================
   XAQIL HOMEPAGE — BRIEF PRICING + ABOUT
   ========================================================= */

.xaqil-home-web-pricing {
    padding-top: 92px;
    padding-bottom: 82px;
}

.xaqil-home-pricing-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 48px;
    align-items: end;
    margin-bottom: 38px;
}

.xaqil-home-pricing-heading h2 {
    max-width: 720px;
    margin-top: 12px;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.02;
    letter-spacing: -2.3px;
}

.xaqil-home-pricing-heading h2 span {
    color: #b8c0cc;
}

.xaqil-home-pricing-heading > p {
    max-width: 460px;
    color: #8e98a4;
    font-size: 14px;
    line-height: 1.75;
}

.xaqil-home-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.xaqil-home-price-card {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
        #0d1118;
    box-shadow: 0 24px 55px rgba(0,0,0,.16);
}

.xaqil-home-price-card::after {
    content: "";
    position: absolute;
    inset: auto -80px -110px auto;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(184,192,204,.035);
    pointer-events: none;
}

.xaqil-home-price-card-popular {
    border-color: rgba(184,192,204,.32);
    background:
        linear-gradient(155deg, rgba(184,192,204,.07), rgba(255,255,255,0) 45%),
        #10151d;
    transform: translateY(-8px);
}

.xaqil-popular-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(184,192,204,.28);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(184,192,204,.12), rgba(184,192,204,.045));
    color: #c7ced6;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.xaqil-popular-badge i {
    font-size: 7px;
}

.xaqil-home-price-card-top {
    padding-right: 4px;
}

.xaqil-home-price-card-popular .xaqil-home-price-card-top {
    padding-right: 112px;
}

.xaqil-home-price-label {
    display: block;
    margin-bottom: 13px;
    color: #77818d;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.xaqil-home-price-card h3 {
    margin-bottom: 12px;
    color: #f4f6f8;
    font-size: 22px;
    letter-spacing: -.7px;
}

.xaqil-home-price-card-top p {
    min-height: 70px;
    color: #858f9b;
    font-size: 12px;
    line-height: 1.7;
}

.xaqil-home-price {
    margin: 28px 0 24px;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.xaqil-home-price small {
    display: block;
    margin-bottom: 7px;
    color: #626d78;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.xaqil-home-price strong {
    color: #f6f7f9;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1;
    letter-spacing: -1.5px;
}

.xaqil-home-price strong span {
    margin-left: 3px;
    color: #8e98a4;
    font-size: 17px;
    vertical-align: top;
}

.xaqil-home-price-features {
    display: grid;
    gap: 12px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.xaqil-home-price-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #a3acb6;
    font-size: 11px;
    line-height: 1.45;
}

.xaqil-home-price-features i {
    margin-top: 2px;
    color: #74c897;
    font-size: 9px;
}

.xaqil-home-price-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.07);
    color: #e7eaee;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.xaqil-home-price-link i {
    color: #8f99a5;
    transition: transform .2s ease;
}

.xaqil-home-price-link:hover i {
    transform: translateX(4px);
}

.xaqil-home-pricing-note {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
    padding: 0 4px;
    color: #737e89;
    font-size: 10px;
}

.xaqil-home-pricing-note a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b8c0cc;
    font-weight: 700;
    text-decoration: none;
}

.xaqil-home-about {
    padding-top: 78px;
    padding-bottom: 88px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.012);
}

.xaqil-home-about-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 80px;
    align-items: start;
}

.xaqil-home-about h2 {
    max-width: 560px;
    margin-top: 12px;
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.07;
    letter-spacing: -2px;
}

.xaqil-home-about-copy > p {
    max-width: 650px;
    color: #929ca7;
    font-size: 14px;
    line-height: 1.85;
}

.xaqil-home-about-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.xaqil-home-about-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7d8793;
    font-size: 10px;
    font-weight: 600;
}

.xaqil-home-about-meta i {
    color: #b8c0cc;
}

@media (max-width: 980px) {
    .xaqil-home-pricing-heading,
    .xaqil-home-about-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .xaqil-home-pricing-grid {
        grid-template-columns: 1fr;
    }

    .xaqil-home-price-card,
    .xaqil-home-price-card-popular {
        transform: none;
    }

    .xaqil-home-price-card-top p {
        min-height: 0;
    }
}

@media (max-width: 620px) {
    .xaqil-home-web-pricing {
        padding-top: 64px;
        padding-bottom: 58px;
    }

    .xaqil-home-pricing-heading h2,
    .xaqil-home-about h2 {
        letter-spacing: -1.4px;
    }

    .xaqil-home-price-card {
        padding: 24px;
        border-radius: 15px;
    }

    .xaqil-home-price-card-popular .xaqil-home-price-card-top {
        padding-right: 0;
        padding-top: 34px;
    }

    .xaqil-popular-badge {
        left: 24px;
        right: auto;
    }

    .xaqil-home-pricing-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .xaqil-home-about {
        padding-top: 58px;
        padding-bottom: 64px;
    }
}

/* =========================================================
   XAQIL HOMEPAGE — DISTINCTIVE HOME-ONLY SECTION TREATMENT
   Keeps the homepage visually different from inner pages.
   ========================================================= */

.home-page .xaqil-home-pricing-heading {
    display: block;
    max-width: 860px;
    margin: 0 auto 44px;
    text-align: center;
}

.home-page .xaqil-home-pricing-heading h2 {
    max-width: 820px;
    margin: 12px auto 0;
}

.home-page .xaqil-home-pricing-heading > p {
    max-width: 650px;
    margin: 18px auto 0;
}

.home-page .xaqil-home-about {
    position: relative;
    overflow: hidden;
    padding-top: 96px;
    padding-bottom: 96px;
    border-top: 1px solid rgba(255,255,255,.07);
    background:
        radial-gradient(circle at 50% 0%, rgba(184,192,204,.08), transparent 43%),
        linear-gradient(180deg, #0a0e14 0%, #080b10 100%);
}

.home-page .xaqil-home-about::before,
.home-page .xaqil-home-about::after {
    content: "";
    position: absolute;
    top: 50%;
    width: min(18vw, 250px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,192,204,.23));
}

.home-page .xaqil-home-about::before {
    left: 0;
}

.home-page .xaqil-home-about::after {
    right: 0;
    transform: rotate(180deg);
}

.home-page .xaqil-home-about-inner {
    position: relative;
    z-index: 1;
    max-width: 980px;
    text-align: center;
}

.home-page .xaqil-home-about-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    color: rgba(255,255,255,.018);
    font-size: clamp(110px, 17vw, 245px);
    font-weight: 800;
    letter-spacing: -10px;
    line-height: .8;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.home-page .xaqil-home-about-heading {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}

.home-page .xaqil-home-about-heading .eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.home-page .xaqil-home-about-heading .eyebrow::before,
.home-page .xaqil-home-about-heading .eyebrow::after {
    content: "";
    width: 34px;
    height: 1px;
    background: rgba(184,192,204,.32);
}

.home-page .xaqil-home-about h2 {
    max-width: 800px;
    margin: 16px auto 0;
    font-size: clamp(34px, 4.3vw, 58px);
    line-height: 1.02;
    letter-spacing: -2.7px;
}

.home-page .xaqil-home-about-heading > p {
    max-width: 700px;
    margin: 24px auto 0;
    color: #939da8;
    font-size: 14px;
    line-height: 1.9;
}

.home-page .xaqil-home-about-meta {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 760px;
    margin: 34px auto 0;
    padding-top: 0;
    border-top: 0;
}

.home-page .xaqil-home-about-meta span {
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: #89939f;
    font-size: 9px;
    letter-spacing: .2px;
}

.home-page .xaqil-home-about-meta i {
    color: #b8c0cc;
}

@media (max-width: 980px) {
    .home-page .xaqil-home-pricing-heading {
        text-align: center;
    }
}

@media (max-width: 620px) {
    .home-page .xaqil-home-pricing-heading {
        margin-bottom: 30px;
    }

    .home-page .xaqil-home-about {
        padding-top: 72px;
        padding-bottom: 74px;
    }

    .home-page .xaqil-home-about::before,
    .home-page .xaqil-home-about::after {
        display: none;
    }

    .home-page .xaqil-home-about-mark {
        font-size: 94px;
        letter-spacing: -6px;
    }

    .home-page .xaqil-home-about h2 {
        font-size: clamp(31px, 10vw, 42px);
        letter-spacing: -1.8px;
    }

    .home-page .xaqil-home-about-heading > p {
        font-size: 13px;
    }

    .home-page .xaqil-home-about-meta {
        gap: 8px;
        margin-top: 28px;
    }
}

/* =========================================================
   XAQIL FINAL VISUAL POLISH
   Dark graphite + steel-blue + metallic silver.
   Keeps the brand restrained, but adds depth and stronger
   contrast to the public site without changing layouts.
   ========================================================= */

:root {
    --xq-bg: #080b10;
    --xq-surface: #0d131b;
    --xq-surface-2: #111a24;
    --xq-steel: #88a9bf;
    --xq-steel-bright: #b9ccd8;
    --xq-silver: #dce4e9;
    --xq-muted: #8b98a4;
    --xq-line: rgba(136,169,191,.18);
    --xq-glow: rgba(107,151,183,.16);
}

::selection {
    background: rgba(136,169,191,.28);
    color: #ffffff;
}

/* Header / core actions */
.navbar {
    border-bottom-color: rgba(136,169,191,.13);
    box-shadow: 0 10px 32px rgba(0,0,0,.16);
}

.nav-links a {
    color: #aab4be;
}

.nav-links a:hover {
    color: #e9eef1;
}

.nav-button,
.primary-button {
    border: 1px solid rgba(207,222,231,.42);
    background: linear-gradient(135deg, #dce6ec 0%, #a9bfce 52%, #819daf 100%);
    color: #071019;
    box-shadow: 0 10px 28px rgba(78,111,135,.16), inset 0 1px 0 rgba(255,255,255,.62);
}

.nav-button:hover,
.primary-button:hover {
    background: linear-gradient(135deg, #eef3f6 0%, #bfd0da 55%, #91aebf 100%);
    color: #071019;
    border-color: rgba(230,239,244,.62);
    box-shadow: 0 14px 34px rgba(78,111,135,.22), inset 0 1px 0 rgba(255,255,255,.72);
}

.secondary-button {
    border-color: rgba(136,169,191,.26);
    background: rgba(136,169,191,.045);
}

.secondary-button:hover {
    border-color: rgba(171,200,219,.45);
    background: rgba(136,169,191,.095);
}

.eyebrow {
    color: #a9bfce;
}

/* Give common public cards slightly richer depth without changing structure. */
.service-card,
.price-card,
.xaqil-home-price-card {
    border-color: rgba(136,169,191,.13);
    background:
        linear-gradient(145deg, rgba(136,169,191,.045), rgba(255,255,255,0) 42%),
        #0d131b;
}

.service-card:hover,
.price-card:hover,
.xaqil-home-price-card:hover {
    border-color: rgba(136,169,191,.34);
    box-shadow: 0 24px 58px rgba(0,0,0,.22), 0 0 0 1px rgba(136,169,191,.035) inset;
}

.service-card a,
.card-link,
.xaqil-home-pricing-note a {
    color: #a9c0cf;
}

/* Homepage pricing hierarchy */
.xaqil-home-web-pricing {
    position: relative;
    background:
        radial-gradient(circle at 50% 0%, rgba(102,149,183,.08), transparent 34%),
        #080b10;
}

.xaqil-home-price-card {
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.xaqil-home-price-card:hover {
    transform: translateY(-5px);
}

.xaqil-home-price-card-popular,
.xaqil-home-price-card-popular:hover {
    border-color: rgba(157,190,211,.50);
    background:
        linear-gradient(150deg, rgba(128,169,197,.13), rgba(255,255,255,.012) 47%),
        #111923;
    box-shadow: 0 26px 65px rgba(0,0,0,.26), 0 0 0 1px rgba(157,190,211,.06) inset;
}

.xaqil-home-price-card-popular:hover {
    transform: translateY(-11px);
}

.xaqil-home-price-card-popular::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, #91b3c9, #d3e0e7, #91b3c9, transparent);
    opacity: .86;
}

.xaqil-popular-badge {
    border-color: rgba(168,199,218,.38);
    background: linear-gradient(135deg, rgba(143,178,201,.18), rgba(72,102,124,.12));
    color: #d9e4ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.xaqil-popular-badge i {
    color: #a9c5d6;
    font-size: 8px;
}

.xaqil-home-price strong {
    color: #f5f8fa;
}

.xaqil-home-price strong span,
.xaqil-home-pricing-heading h2 span {
    color: #9eb9ca;
}

.xaqil-home-price-features i {
    color: #76c99b;
}

/* About block: richer but still understated. */
.home-page .xaqil-home-about {
    background:
        radial-gradient(circle at 50% 0%, rgba(121,164,193,.12), transparent 43%),
        linear-gradient(180deg, #0b1118 0%, #080b10 100%);
}

.home-page .xaqil-home-about-heading .eyebrow::before,
.home-page .xaqil-home-about-heading .eyebrow::after {
    background: linear-gradient(90deg, transparent, rgba(151,184,205,.55));
}

.home-page .xaqil-home-about-heading .eyebrow::after {
    transform: rotate(180deg);
}

.home-page .xaqil-home-about-meta span {
    border-color: rgba(136,169,191,.16);
    background: rgba(136,169,191,.05);
}

.home-page .xaqil-home-about-meta i {
    color: #9db8c9;
}

/* =========================================================
   FOOTER — NO LOGO, CLEAN CENTERED FINISH
   ========================================================= */
.xaqil-footer {
    padding: 0;
    border-top: 1px solid rgba(136,169,191,.16);
    background:
        radial-gradient(circle at 50% -35%, rgba(116,159,188,.14), transparent 46%),
        linear-gradient(180deg, #080d13 0%, #05070a 100%);
}

.xaqil-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(520px, 70vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(155,188,209,.62), transparent);
}

.xaqil-footer .container {
    padding-top: 52px;
}

.xaqil-footer-watermark {
    display: none !important;
}

.xaqil-footer-content {
    width: min(760px, 100%);
    margin: 0 auto;
    text-align: center;
}

.xaqil-footer-description {
    max-width: 660px;
    margin: 0 auto;
    color: #929eaa;
    font-size: 13px;
    line-height: 1.8;
}

.xaqil-footer-description::before {
    content: "XAQIL";
    display: block;
    margin-bottom: 13px;
    color: #b8cbd7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3.4px;
}

.xaqil-footer-bottom {
    justify-content: center;
    gap: 8px 22px;
    margin-top: 34px;
    padding: 19px 0 24px;
    border-top-color: rgba(136,169,191,.10);
}

.xaqil-footer-bottom p {
    color: #697581;
}

.xaqil-footer-bottom p:last-child {
    color: #8997a3;
}

/* =========================================================
   FLOATING MESSAGE BUTTON — stronger, larger and unmistakable
   ========================================================= */
.xaqil-support-widget {
    right: 26px;
    bottom: 26px;
}

.xaqil-support-button {
    position: relative;
    width: 62px;
    min-width: 62px;
    height: 62px;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(206,222,232,.54);
    border-radius: 19px;
    background:
        linear-gradient(145deg, #d9e5ec 0%, #9bb7c8 48%, #6f8da1 100%);
    color: #071019;
    box-shadow:
        0 18px 38px rgba(41,67,86,.34),
        0 0 0 5px rgba(115,157,186,.07),
        inset 0 1px 0 rgba(255,255,255,.75);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.xaqil-support-button::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border: 3px solid #080b10;
    border-radius: 50%;
    background: #66cf96;
    box-shadow: 0 0 0 3px rgba(102,207,150,.08);
}

.xaqil-support-button i {
    color: #071019;
    font-size: 24px;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.28));
}

.xaqil-support-button:hover {
    transform: translateY(-4px) scale(1.035);
    filter: brightness(1.06);
    box-shadow:
        0 22px 46px rgba(41,67,86,.42),
        0 0 0 7px rgba(115,157,186,.09),
        inset 0 1px 0 rgba(255,255,255,.82);
}

/* Match the chat panel to the stronger message button. */
.xaqil-ai-panel {
    border-color: rgba(136,169,191,.19);
    box-shadow: 0 32px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(136,169,191,.035) inset;
}

.xaqil-ai-head {
    border-bottom-color: rgba(136,169,191,.13);
    background:
        linear-gradient(135deg, rgba(116,159,188,.10), transparent 44%),
        linear-gradient(180deg,#111923,#0d131b);
}

.xaqil-ai-avatar {
    border-color: rgba(164,194,213,.30);
    background: linear-gradient(145deg,#253847,#15212c);
    color: #d7e3ea;
}

.xaqil-ai-send {
    border-color: rgba(206,222,232,.42);
    background: linear-gradient(135deg,#dce7ed,#9fb9c9);
    color: #071019;
}

@media (max-width: 760px) {
    .xaqil-footer .container {
        padding-top: 44px;
    }

    .xaqil-support-widget {
        right: 14px;
        bottom: 14px;
    }

    .xaqil-support-button {
        width: 58px;
        min-width: 58px;
        height: 58px;
        border-radius: 18px;
    }

    .xaqil-support-button i {
        font-size: 22px;
    }
}


/* =========================================================
   XAQIL TECHNOLOGIES — FINAL PROFESSIONAL TYPOGRAPHY + MOBILE NAV
   ========================================================= */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.nav-links a,
.nav-button {
    font-weight: 600;
    letter-spacing: .01em;
}

.page-hero p,
.service-card p,
.price-card p,
.xaqil-home-price-card p,
.xaqil-home-pricing-heading > p,
.xaqil-home-about p {
    color: #98a6b2;
}

.service-card i,
.price-card i,
.feature-icon i,
.tech-service-icon i {
    filter: drop-shadow(0 4px 12px rgba(95,140,171,.10));
}

/* Keep the mobile navigation trigger in the same right-hand position on every page. */
@media (max-width: 900px) {
    .navbar .container {
        justify-content: flex-start;
        gap: 10px;
    }

    .navbar .logo {
        order: 1;
        flex: 0 0 auto;
    }

    .navbar .nav-links {
        order: 4;
    }

    .navbar .nav-button {
        order: 2;
        margin-left: auto;
        flex: 0 0 auto;
        padding: 10px 13px;
    }

    .navbar .menu-button {
        order: 3;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        display: inline-grid;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(136,169,191,.16);
        border-radius: 10px;
        background: rgba(136,169,191,.045);
        color: #dce5ea;
        font-size: 23px;
        line-height: 1;
    }

    .nav-links.mobile-open {
        top: 76px;
        z-index: 1001;
    }
}

@media (max-width: 480px) {
    .navbar .container { width: 92%; }
    .logo img { width: 132px; }
    .home-page .logo img { width: 132px; }
    .navbar .nav-button {
        font-size: 12px;
        padding: 9px 11px;
    }
    .navbar .nav-button i { font-size: 13px; }
}

/* XAQIL Technologies Support — larger, clearer typography. */
.xaqil-ai-panel {
    width: min(430px, calc(100vw - 32px));
}

.xaqil-ai-head {
    min-height: 84px;
    padding: 17px 18px;
}

.xaqil-ai-avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 19px;
}

.xaqil-ai-identity small {
    font-size: 8px;
    letter-spacing: 1.35px;
}

.xaqil-ai-identity strong {
    font-size: 14px;
    letter-spacing: -.15px;
}

.xaqil-ai-identity em {
    font-size: 9px;
}

.xaqil-ai-reset,
.xaqil-support-close {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

.xaqil-ai-messages {
    padding: 20px 16px;
}

.xaqil-ai-message {
    margin-bottom: 13px;
}

.xaqil-ai-bubble {
    max-width: 86%;
    padding: 12px 14px;
    border-radius: 15px 15px 15px 5px;
    color: #d3dbe1;
    font-size: 13px;
    line-height: 1.62;
}

.xaqil-ai-message.is-user .xaqil-ai-bubble {
    border-radius: 15px 15px 5px 15px;
}

.xaqil-ai-composer {
    grid-template-columns: minmax(0,1fr) 44px;
    gap: 9px;
    padding: 13px 13px 9px;
}

.xaqil-ai-composer textarea {
    min-height: 46px;
    padding: 12px 13px;
    font-size: 12.5px;
    line-height: 1.5;
}

.xaqil-ai-send {
    width: 44px;
    height: 44px;
    font-size: 14px;
}

.xaqil-ai-privacy {
    padding: 1px 16px 12px;
    font-size: 8px;
}

@media (max-width: 600px) {
    .xaqil-ai-panel {
        width: calc(100vw - 20px);
        height: min(640px, calc(100vh - 84px));
        right: -2px;
        bottom: 62px;
    }

    .xaqil-ai-bubble {
        max-width: 88%;
        font-size: 13.5px;
        line-height: 1.6;
    }

    .xaqil-ai-composer textarea {
        font-size: 13px;
    }
}