/* =========================================================
   CLIENTS SECTION HEADING
   ========================================================= */

.clients-heading {
    max-width: 1050px;
    margin: 0 auto 55px;
    padding: 0 20px;
    text-align: center;
}


/* OUR CLIENTS */

.clients-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 22px;

    margin-bottom: 22px;
}

.clients-eyebrow span {
    width: 92px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--shrisha-blue-bright)
        );
}

.clients-eyebrow span:last-child {
    background:
        linear-gradient(
            90deg,
            var(--shrisha-blue-bright),
            transparent
        );
}

.clients-eyebrow strong {
    color: var(--shrisha-blue-bright);

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

    letter-spacing: 0.28em;
}


/* MAIN TITLE */

.clients-heading h2 {
    margin: 0;

    color: var(--shrisha-white);

    font-size: clamp(38px, 4.2vw, 58px);

    line-height: 1.08;

    letter-spacing: -0.04em;

    font-weight: 800;
}

.clients-heading h2 span {
    display: inline;

    background:
        linear-gradient(
            90deg,
            var(--shrisha-blue-bright) 0%,
            #48b3ff 45%,
            var(--shrisha-gold) 100%
        );

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

    -webkit-text-fill-color: transparent;
}


/* DESCRIPTION */

.clients-heading p {
    max-width: 800px;

    margin: 20px auto 0;

    color: var(--shrisha-muted);

    font-size: 17px;

    line-height: 1.7;
}


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

@media (max-width: 767px) {

    .clients-heading {
        margin-bottom: 40px;
        padding: 0 14px;
    }

    .clients-eyebrow {
        gap: 12px;
        margin-bottom: 18px;
    }

    .clients-eyebrow span {
        width: 45px;
    }

    .clients-eyebrow strong {
        font-size: 10px;
        letter-spacing: 0.22em;
    }

    .clients-heading h2 {
        font-size: 36px;
    }

    .clients-heading h2 span {
        display: block;
    }

    .clients-heading p {
        margin-top: 17px;
        font-size: 14px;
    }

}

/* =========================================================
   HOME HERO - FEATURED PROJECT PREVIEW
   ========================================================= */

.home-project-preview {
    position: relative;

    width: 100%;
    max-width: 680px;

    margin-left: auto;
}


/* Browser */

.home-project-browser {
    position: relative;

    overflow: hidden;

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

    border-radius: 24px;

    background: #091019;

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.40),
        0 0 70px rgba(20, 157, 255, 0.08);

    transform: perspective(1200px) rotateY(-2deg);

    transition:
        transform 350ms ease,
        border-color 350ms ease,
        box-shadow 350ms ease;
}


.home-project-browser:hover {
    transform:
        perspective(1200px)
        rotateY(0deg)
        translateY(-5px);

    border-color:
        rgba(20, 157, 255, 0.28);

    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.48),
        0 0 80px rgba(20, 157, 255, 0.12);
}


/* Browser top bar */

.home-project-browser-bar {
    height: 58px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 22px;

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

    background:
        rgba(8, 15, 24, 0.96);
}


.home-project-browser-dots {
    display: flex;

    align-items: center;

    gap: 8px;
}


.home-project-browser-dots span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #5c6570;
}


.home-project-url {
    color: #8291a2;

    font-family: monospace;

    font-size: 12px;

    letter-spacing: 0.03em;
}


/* Screenshot */

.home-project-screenshot {
    position: relative;

    width: 100%;
    height: 430px;

    overflow: hidden;

    background: #091019;
}


.home-project-screenshot img {
    display: block;

    width: 100%;
    height: auto;

    transform: translateY(0);

    transition:
        transform 7s ease-in-out;
}


/* Scroll website screenshot on hover */

.home-project-browser:hover
.home-project-screenshot img {

    transform:
        translateY(
            calc(-100% + 430px)
        );
}


/* Featured project label */

.home-project-label {
    position: absolute;

    left: -25px;
    bottom: 28px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 13px 18px;

    border:
        1px solid
        rgba(20, 157, 255, 0.20);

    border-radius: 12px;

    background:
        rgba(7, 11, 16, 0.94);

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(12px);
}


.home-project-label span {
    color:
        var(--shrisha-blue-bright);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.14em;
}


.home-project-label strong {
    color:
        var(--shrisha-white);

    font-size: 13px;

    font-weight: 700;
}


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

@media (max-width: 767px) {

    .home-project-preview {
        max-width: 100%;

        margin-top: 45px;
    }


    .home-project-browser {
        border-radius: 17px;

        transform: none;
    }


    .home-project-browser:hover {
        transform: none;
    }


    .home-project-browser-bar {
        height: 48px;

        padding: 0 16px;
    }


    .home-project-url {
        font-size: 10px;
    }


    .home-project-screenshot {
        height: 280px;
    }


    .home-project-browser:hover
    .home-project-screenshot img {

        transform: none;
    }


    .home-project-label {
        left: 14px;
        bottom: 14px;
    }

}

/* =========================================================
   HOME — CORE SERVICES
   ========================================================= */

.home-services {
    position: relative;
    padding: 20px 20px 110px;
}

.home-services-container {
    width: min(
        calc(100% - 20px),
        var(--shrisha-container)
    );
    margin: 0 auto;
}


/* Grid */

.home-services-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


/* Card */

.home-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 390px;
    padding: 30px;

    overflow: hidden;

    border:
        1px solid
        rgba(20, 157, 255, 0.13);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 22, 32, 0.86),
            rgba(8, 13, 20, 0.95)
        );

    transition:
        transform 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease;
}


/* Decorative glow */

.home-service-card::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -140px;
    top: -140px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(20, 157, 255, 0.10),
            transparent 68%
        );

    pointer-events: none;

    transition: transform 350ms ease;
}


/* Top accent */

.home-service-card::after {
    content: "";

    position: absolute;

    left: 30px;
    right: 30px;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--shrisha-blue-bright),
            transparent 70%
        );

    opacity: 0.55;
}


/* Hover */

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

    border-color:
        rgba(20, 157, 255, 0.32);

    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, 0.24);
}

.home-service-card:hover::before {
    transform: translate(-20px, 20px);
}


/* Top row */

.home-service-top {
    position: relative;
    z-index: 2;

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

    margin-bottom: 42px;
}

.home-service-number {
    color: var(--shrisha-blue-bright);

    font-family: monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.home-service-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(20, 157, 255, 0.17);

    border-radius: 12px;

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

    color: var(--shrisha-blue-bright);

    font-family: monospace;
    font-size: 16px;
    font-weight: 800;

    transition:
        color 250ms ease,
        border-color 250ms ease,
        transform 250ms ease;
}

.home-service-card:hover
.home-service-icon {
    color: var(--shrisha-gold);

    border-color:
        rgba(249, 185, 0, 0.30);

    transform: rotate(-4deg);
}


/* Content */

.home-service-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    flex: 1;
}

.home-service-content h3 {
    margin: 0;

    color: var(--shrisha-white);

    font-size: clamp(27px, 2.3vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.home-service-content h3 span {
    display: block;

    color: #aeb9c5;
}

.home-service-content > p {
    margin: 19px 0 0;

    color: var(--shrisha-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* Tags */

.home-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: auto;
    padding-top: 27px;
}

.home-service-tags span {
    padding: 7px 10px;

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

    border-radius: 7px;

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

    color: #929fac;

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


/* Explore all services */

.home-services-footer {
    display: flex;
    justify-content: center;

    margin-top: 45px;
}

.home-services-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--shrisha-white);

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

    text-decoration: none;

    transition: color 250ms ease;
}

.home-services-link span {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(20, 157, 255, 0.20);

    border-radius: 50%;

    color: var(--shrisha-blue-bright);

    transition:
        transform 250ms ease,
        color 250ms ease,
        border-color 250ms ease;
}

.home-services-link:hover {
    color: var(--shrisha-blue-bright);
}

.home-services-link:hover span {
    transform: translateX(4px);

    color: var(--shrisha-gold);

    border-color:
        rgba(249, 185, 0, 0.30);
}


/* =========================================================
   HOME SERVICES — TABLET
   ========================================================= */

@media (max-width: 1024px) {

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

}


/* =========================================================
   HOME SERVICES — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .home-services {
        padding:
            10px 14px 80px;
    }

    .home-services-container {
        width: 100%;
    }

    .home-services-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .home-service-card {
        min-height: 340px;

        padding: 25px 22px;

        border-radius: 18px;
    }

    .home-service-card::after {
        left: 22px;
        right: 22px;
    }

    .home-service-top {
        margin-bottom: 32px;
    }

    .home-service-icon {
        width: 41px;
        height: 41px;
    }

    .home-service-content h3 {
        font-size: 29px;
    }

    .home-service-content > p {
        font-size: 14px;
    }

    .home-services-footer {
        margin-top: 35px;
    }

}

/* =========================================================
   HOME — LATEST INSIGHT
   ========================================================= */

.home-latest-insight {
    position: relative;
    padding: 105px 20px 115px;
    background:
        radial-gradient(
            circle at 82% 30%,
            rgba(20, 157, 255, 0.07),
            transparent 30%
        ),
        #070b10;
}

.home-latest-container {
    width: min(
        calc(100% - 20px),
        var(--shrisha-container)
    );
    margin: 0 auto;
}


/* Section heading */

.home-latest-heading {
    max-width: 1050px;
    margin: 0 auto 55px;
    text-align: center;
}

.home-latest-heading h2 {
    margin: 0;

    color: var(--shrisha-white);

    font-size: clamp(38px, 4.2vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.home-latest-heading h2 span {
    background: linear-gradient(
        90deg,
        var(--shrisha-blue-bright) 0%,
        #48b3ff 45%,
        var(--shrisha-gold) 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
   LATEST ARTICLE CARD
   ========================================================= */

.home-latest-card {
    display: grid;
    grid-template-columns:
        minmax(0, 46%)
        minmax(0, 54%);

    max-width: 1180px;
    min-height: 390px;

    margin: 0 auto;

    overflow: hidden;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 22, 32, 0.94),
            rgba(8, 13, 20, 0.98)
        );

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.26);

    transition:
        transform 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease;
}

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

    border-color:
        rgba(20, 157, 255, 0.42);

    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.34),
        0 0 40px rgba(20, 157, 255, 0.07);
}


/* Image */

.home-latest-image {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    padding: 24px;

    overflow: hidden;

    background: #091019;

    text-decoration: none;
}

.home-latest-image img {
    display: block;

    width: 100%;
    height: 100%;

    max-height: 345px;

    object-fit: contain;

    transition: transform 400ms ease;
}

.home-latest-card:hover
.home-latest-image img {
    transform: scale(1.025);
}


/* Content */

.home-latest-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding: 48px 52px;
}


/* Category + Date */

.home-latest-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;

    margin-bottom: 20px;
}

.home-latest-category {
    color: var(--shrisha-blue-bright);

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

    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.home-latest-date {
    position: relative;

    padding-left: 16px;

    color: var(--shrisha-muted);

    font-size: 12px;
}

.home-latest-date::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--shrisha-gold);

    transform: translateY(-50%);
}


/* Article title */

.home-latest-content h3 {
    margin: 0 0 20px;

    color: var(--shrisha-white);

    font-size: clamp(29px, 3vw, 42px);
    font-weight: 800;

    line-height: 1.12;
    letter-spacing: -0.035em;
}

.home-latest-content h3 a {
    color: inherit;
    text-decoration: none;

    transition: color 220ms ease;
}

.home-latest-content h3 a:hover {
    color: var(--shrisha-blue-bright);
}


/* Excerpt */

.home-latest-excerpt {
    max-width: 620px;

    margin-bottom: 28px;

    color: var(--shrisha-muted);

    font-size: 15px;
    line-height: 1.75;
}


/* Read article */

.home-latest-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    width: fit-content;

    color: var(--shrisha-white);

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

    text-decoration: none;

    transition: color 220ms ease;
}

.home-latest-link span {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border:
        1px solid
        rgba(20, 157, 255, 0.25);

    border-radius: 50%;

    color: var(--shrisha-gold);

    transition:
        transform 220ms ease,
        border-color 220ms ease;
}

.home-latest-link:hover {
    color: var(--shrisha-blue-bright);
}

.home-latest-link:hover span {
    transform: translateX(4px);

    border-color:
        rgba(249, 185, 0, 0.45);
}


/* =========================================================
   EXPLORE ALL ARTICLES
   ========================================================= */

.home-latest-footer {
    display: flex;
    justify-content: center;

    margin-top: 38px;
}

.home-latest-footer a {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: var(--shrisha-white);

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

    text-decoration: none;

    transition: color 220ms ease;
}

.home-latest-footer a span {
    color: var(--shrisha-blue-bright);

    transition:
        color 220ms ease,
        transform 220ms ease;
}

.home-latest-footer a:hover {
    color: var(--shrisha-blue-bright);
}

.home-latest-footer a:hover span {
    color: var(--shrisha-gold);
    transform: translateX(4px);
}


/* =========================================================
   LATEST INSIGHT — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .home-latest-card {
        grid-template-columns: 1fr;
        max-width: 720px;
    }

    .home-latest-image {
        min-height: 360px;
    }

    .home-latest-content {
        padding: 38px 36px 42px;
    }

}


/* =========================================================
   LATEST INSIGHT — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .home-latest-insight {
        padding: 75px 14px 85px;
	}

    .home-latest-container {
        width: 100%;
    }

    .home-latest-heading {
        margin-bottom: 38px;
    }

    .home-latest-heading h2 {
        font-size: 36px;
    }

    .home-latest-heading h2 span {
        display: block;
    }

    .home-latest-card {
        min-height: 0;
        border-radius: 18px;
    }

    .home-latest-image {
        min-height: 0;
        padding: 14px;
    }

    .home-latest-image img {
        height: auto;
        max-height: none;
    }

    .home-latest-content {
        padding: 28px 24px 32px;
    }

    .home-latest-content h3 {
        font-size: 28px;
    }

    .home-latest-excerpt {
        font-size: 14px;
    }

    .home-latest-footer {
        margin-top: 30px;
    }

}

/* =========================================================
   HOMEPAGE — INDUSTRY WEBSITE SHOWCASE
   ========================================================= */
.home-industries { padding: 20px 20px 115px; position: relative; }
.home-industries-container { width: min(calc(100% - 20px), var(--shrisha-container)); margin: 0 auto; }
.home-industries-heading { margin-bottom: 48px; }
.home-industries-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.home-industry-card { min-width: 0; border: 1px solid rgba(20,157,255,.18); border-radius: 22px; overflow: hidden; background: linear-gradient(145deg,#101b28,#090f17); transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.home-industry-card:hover { transform: translateY(-5px); border-color: rgba(20,157,255,.48); box-shadow: 0 22px 55px rgba(0,0,0,.26); }
.home-industry-card-link { display: block; height: 100%; text-decoration: none; color: inherit; }
.home-industry-card-link:focus-visible { outline: 3px solid var(--shrisha-gold); outline-offset: -3px; }
.home-industry-image { aspect-ratio: 16/10; overflow: hidden; background: #0d1824; border-bottom: 1px solid rgba(20,157,255,.12); }
.home-industry-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; transition: transform .4s ease; }
.home-industry-card:hover .home-industry-image img { transform: scale(1.035); }
.home-industry-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--shrisha-blue-bright); font-weight: 800; letter-spacing: .15em; }
.home-industry-placeholder span { color: var(--shrisha-muted); font-size: 11px; margin-top: 8px; }
.home-industry-details { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 23px; }
.home-industry-kicker { color: var(--shrisha-blue-bright); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.home-industry-details h3 { margin: 9px 0 12px; color: var(--shrisha-white); font-size: 21px; font-weight: 800; line-height: 1.25; }
.home-industry-action { color: var(--shrisha-muted); font-size: 13px; font-weight: 600; }
.home-industry-arrow { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid rgba(20,157,255,.28); border-radius: 50%; color: var(--shrisha-gold); font-size: 21px; }
.home-industries-footer { margin-top: 38px; text-align: center; }
.home-industries-footer a { color: var(--shrisha-white); text-decoration: none; font-weight: 700; font-size: 15px; }
.home-industries-footer a span { color: var(--shrisha-blue-bright); margin-left: 9px; }
.home-industries-footer a:hover { color: var(--shrisha-blue-bright); }
@media (max-width: 1024px) { .home-industries-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .home-industries { padding: 10px 14px 80px; } .home-industries-container { width: 100%; } .home-industries-grid { grid-template-columns: 1fr; gap: 16px; } .home-industry-details { padding: 20px; } .home-industry-details h3 { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .home-industry-card, .home-industry-image img { transition: none; } }