:root {

    --primary-dark: #4f0d3c;
    --primary: #5e114c;
    --purple: #961c8b;
    --indigo: #313e81;
    --cyan: #22bfc3;

    --white: #ffffff;
    --off-white: #fbf9fc;

    --text: #241b29;
    --muted: #6e6370;

    --border: rgba(79, 13, 60, .13);

    --shadow:
        0 25px 70px rgba(49, 62, 129, .13);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        Inter,
        Arial,
        sans-serif;

    color: var(--text);

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

    overflow-x: hidden;
}


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


.background-grid {

    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: .22;

    background-image:

        linear-gradient(
            rgba(150,28,139,.13) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(34,191,195,.13) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

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


/* HEADER */

.header {

    position: sticky;

    top: 0;

    z-index: 100;

    height: 82px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 6%;

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

    backdrop-filter:
        blur(20px);

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


.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-weight: 700;

    font-size: 17px;
}


.logo-mark {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--purple)
        );

    box-shadow:
        0 10px 25px
        rgba(150,28,139,.25);
}


.navigation {

    display: flex;

    align-items: center;

    gap: 20px;

    font-size: 12px;

    font-weight: 700;
}


.navigation a {

    opacity: .7;

    transition: .3s;
}


.navigation a:hover,
.navigation a.active {

    opacity: 1;

    color: var(--purple);
}


.navigation .nav-button {

    padding:
        11px 17px;

    border-radius:
        50px;

    color: white;

    background:
        var(--primary-dark);

    opacity: 1;
}


.menu-toggle {

    display: none;

    border: 0;

    background: none;

    font-size: 25px;

    cursor: pointer;
}


/* HERO */

.hero {

    width:
        min(1180px,88%);

    min-height:
        calc(100vh - 82px);

    margin: auto;

    display: grid;

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

    gap: 50px;

    align-items: center;
}


.eyebrow {

    margin-bottom: 18px;

    color:
        var(--purple);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;
}


.hero h1,
.page-hero h1 {

    margin: 0 0 25px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(45px,6vw,78px);

    line-height: .98;

    letter-spacing: -3px;
}


.hero h1 span {

    display: block;

    color:
        var(--purple);
}


.hero-content > p {

    max-width: 700px;

    color:
        var(--muted);

    line-height: 1.8;

    font-size: 18px;
}


.hero-buttons {

    display: flex;

    gap: 12px;

    margin:
        32px 0;
}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        14px 22px;

    border-radius:
        12px;

    font-size: 13px;

    font-weight: 800;

    transition: .3s;

    cursor: pointer;
}


.btn-primary {

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--indigo)
        );

    box-shadow:
        0 16px 35px
        rgba(49,62,129,.23);
}


.btn-primary:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 22px 45px
        rgba(49,62,129,.3);
}


.btn-outline {

    border:
        1px solid
        rgba(79,13,60,.25);
}


.btn-outline:hover {

    background: white;

    transform:
        translateY(-4px);
}


.hero-stat-row {

    display: flex;

    gap: 35px;
}


.hero-stat strong {

    display: block;

    font-family:
        "Space Grotesk";

    color:
        var(--purple);

    font-size: 20px;
}


.hero-stat span {

    color:
        var(--muted);

    font-size: 11px;
}


/* TEXTILE VISUAL */

.textile-visual {

    height: 550px;

    position: relative;

    display: grid;

    place-items: center;
}


.fabric-orb {

    position: relative;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--purple),
            var(--indigo)
        );

    box-shadow:

        0 0 100px
        rgba(150,28,139,.3),

        inset
        -35px -35px 60px
        rgba(0,0,0,.2);

    animation:
        fabricFloat 6s ease-in-out infinite;

    overflow: hidden;
}


.fabric-thread {

    position: absolute;

    width: 150%;

    height: 5px;

    left: -25%;

    border-radius: 50%;

    background:
        var(--cyan);

    opacity: .55;

    box-shadow:
        0 0 14px
        rgba(34,191,195,.7);
}


.thread-a {

    top: 25%;

    transform:
        rotate(18deg);

    animation:
        threadMove 4s infinite;
}


.thread-b {

    top: 43%;

    transform:
        rotate(-14deg);

    animation:
        threadMove 5s infinite reverse;
}


.thread-c {

    top: 60%;

    transform:
        rotate(20deg);

    animation:
        threadMove 6s infinite;
}


.thread-d {

    top: 76%;

    transform:
        rotate(-17deg);

    animation:
        threadMove 4.5s infinite reverse;
}


.visual-ring {

    position: absolute;

    border:
        1px solid
        rgba(150,28,139,.25);

    border-radius: 50%;
}


.ring-a {

    width: 360px;

    height: 360px;

    animation:
        rotateRing 17s linear infinite;
}


.ring-b {

    width: 470px;

    height: 210px;

    transform:
        rotate(30deg);

    animation:
        rotateRing 23s linear infinite;
}


.ring-c {

    width: 250px;

    height: 500px;

    transform:
        rotate(-30deg);

    animation:
        rotateRing 27s linear infinite;
}


.tech-badge {

    position: absolute;

    padding:
        14px 17px;

    border-radius:
        14px;

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

    backdrop-filter:
        blur(16px);

    border:
        1px solid white;

    box-shadow:
        var(--shadow);

    font-size: 12px;

    font-weight: 800;
}


.badge-one {

    top: 18%;

    right: 0;

    animation:
        badgeFloat 5s infinite ease-in-out;
}


.badge-two {

    left: 0;

    bottom: 22%;

    animation:
        badgeFloat 6s infinite ease-in-out reverse;
}


.badge-three {

    right: 4%;

    bottom: 12%;

    animation:
        badgeFloat 7s infinite ease-in-out;
}


/* SECTION */

.section {

    width:
        min(1180px,88%);

    margin: auto;

    padding:
        110px 0;
}


.section-heading {

    max-width:
        800px;

    margin-bottom:
        45px;
}


.section-heading h2,
.section h2,
.dark-section h2,
.cta-section h2 {

    margin:
        0 0 18px;

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height:
        1.08;

    letter-spacing:
        -2px;
}


.section-heading p,
.content-section > p {

    color:
        var(--muted);

    line-height:
        1.8;
}


/* CARDS */

.cards {

    display:
        grid;

    gap:
        18px;
}


.cards.four {

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


.cards.three {

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


.service-card,
.long-card {

    position:
        relative;

    overflow:
        hidden;

    padding:
        30px;

    border-radius:
        20px;

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

    border:
        1px solid white;

    box-shadow:
        0 15px 45px
        rgba(79,13,60,.07);

    transition:
        .35s ease;
}


.service-card:hover,
.long-card:hover {

    transform:
        translateY(-8px);

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


.service-card::before,
.long-card::before {

    content: "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    right:
        -90px;

    bottom:
        -90px;

    border-radius:
        50%;

    background:
        var(--cyan);

    opacity:
        .1;
}


.card-number {

    font-family:
        "Space Grotesk";

    font-size:
        13px;

    font-weight:
        800;

    color:
        var(--purple);
}


.service-card h3 {

    margin-top:
        38px;

    font-family:
        "Space Grotesk";

    font-size:
        21px;
}


.service-card p,
.long-card p {

    color:
        var(--muted);

    line-height:
        1.75;
}


.service-card a {

    display:
        inline-block;

    margin-top:
        12px;

    color:
        var(--purple);

    font-size:
        12px;

    font-weight:
        800;
}


/* DARK */

.dark-section {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        80px;

    padding:
        95px 6%;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--indigo)
        );
}


.dark-section .eyebrow {

    color:
        var(--cyan);
}


.dark-section p {

    color:
        #e8dfea;

    line-height:
        1.8;
}


/* SPLIT */

.split-layout {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        80px;
}


.feature-list > div {

    display:
        flex;

    gap:
        20px;

    padding:
        22px 0;

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


.feature-list b {

    color:
        var(--purple);
}


.feature-list p {

    margin:
        0;

    color:
        var(--muted);

    line-height:
        1.7;
}


/* PAGE HERO */

.page-hero {

    width:
        min(1180px,88%);

    margin:
        auto;

    padding:
        120px 0 65px;
}


.page-hero h1 {

    max-width:
        1000px;
}


.lead {

    max-width:
        800px;

    color:
        var(--muted);

    font-size:
        19px;

    line-height:
        1.8;
}


/* CONTENT */

.content-section {

    padding-top:
        20px;
}


.content-section h2 {

    margin-top:
        60px;
}


.content-section > p {

    max-width:
        900px;

    font-size:
        16px;
}


/* LONG CARDS */

.long-card {

    margin-bottom:
        20px;
}


.long-card > span {

    color:
        var(--purple);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;
}


.long-card h2 {

    margin:
        20px 0 10px;

    font-family:
        "Space Grotesk";

    font-size:
        30px;
}


/* TIMELINE */

.timeline {

    display:
        grid;

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

    gap:
        18px;
}


.timeline-item {

    padding:
        32px;

    border-left:
        3px solid
        var(--purple);

    border-radius:
        0 18px 18px 0;

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

    transition:
        .3s;
}


.timeline-item:hover {

    transform:
        translateX(6px);
}


.timeline-item > span {

    color:
        var(--cyan);

    font-weight:
        800;
}


.timeline-item h2 {

    font-family:
        "Space Grotesk";
}


.timeline-item p {

    color:
        var(--muted);

    line-height:
        1.7;
}


/* INSIGHTS */

.insight-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px;
}


/* CONTACT */

.contact-grid {

    display:
        grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:
        70px;
}


.contact-information h2 {

    font-family:
        "Space Grotesk";

    font-size:
        44px;
}


.contact-information > p {

    color:
        var(--muted);

    line-height:
        1.8;
}


.contact-item {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    padding:
        18px 0;

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


.contact-item strong {

    color:
        var(--purple);

    font-size:
        11px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


.contact-item a,
.contact-item span {

    color:
        var(--muted);
}


.contact-form {

    padding:
        32px;

    border-radius:
        22px;

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

    border:
        1px solid white;

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


.contact-form label {

    display:
        block;

    margin-bottom:
        18px;

    font-size:
        12px;

    font-weight:
        800;
}


input,
textarea,
select {

    width:
        100%;

    margin-top:
        8px;

    padding:
        14px;

    border-radius:
        10px;

    border:
        1px solid
        rgba(79,13,60,.15);

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

    font:
        inherit;

    outline:
        none;
}


input:focus,
textarea:focus,
select:focus {

    border-color:
        var(--purple);

    box-shadow:
        0 0 0 4px
        rgba(150,28,139,.1);
}


#formStatus {

    color:
        var(--purple);

    font-size:
        13px;
}


/* CTA */

.cta-section {

    width:
        min(1180px,88%);

    margin:
        auto;

    padding:
        110px 20px;

    text-align:
        center;
}


.cta-section p {

    color:
        var(--muted);

    margin-bottom:
        28px;
}


/* FOOTER */

.footer {

    display:
        grid;

    grid-template-columns:
        1.5fr 1fr 1.3fr 1fr;

    gap:
        40px;

    padding:
        65px 6%;

    color:
        #e8dfea;

    background:
        #25071d;
}


.footer-logo {

    color:
        white;
}


.footer p {

    max-width:
        390px;

    color:
        #c6aebf;

    line-height:
        1.7;
}


.footer h4 {

    margin-top:
        0;

    color:
        white;
}


.footer a,
.footer span {

    display:
        block;

    margin:
        10px 0;

    color:
        #c6aebf;

    font-size:
        12px;
}


.footer a:hover {

    color:
        var(--cyan);
}


/* REVEAL */

.reveal {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);
}


/* KEYFRAMES */

@keyframes fabricFloat {

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

    50% {
        transform:
            translateY(-18px)
            rotate(3deg);
    }
}


@keyframes threadMove {

    0%,
    100% {
        margin-left:
            0;
    }

    50% {
        margin-left:
            20px;
    }
}


@keyframes rotateRing {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


@keyframes badgeFloat {

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

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


/* TABLET */

@media(max-width:1000px) {

    .navigation {
        gap: 11px;
    }

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

}


/* MOBILE */

@media(max-width:850px) {

    .menu-toggle {
        display:
            block;
    }


    .navigation {

        position:
            absolute;

        top:
            82px;

        left:
            0;

        right:
            0;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        padding:
            20px 6%;

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

        backdrop-filter:
            blur(20px);

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


    .navigation.open {
        display:
            flex;
    }


    .navigation a {
        padding:
            10px;
    }


    .hero {

        grid-template-columns:
            1fr;

        padding:
            70px 0;
    }


    .textile-visual {
        height:
            400px;
    }


    .split-layout,
    .dark-section,
    .contact-grid {

        grid-template-columns:
            1fr;
    }


    .timeline,
    .insight-grid {

        grid-template-columns:
            1fr;
    }


    .footer {

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

}


/* SMALL */

@media(max-width:600px) {

    .cards.four,
    .cards.three {

        grid-template-columns:
            1fr;
    }


    .footer {

        grid-template-columns:
            1fr;
    }


    .hero h1,
    .page-hero h1 {

        font-size:
            43px;

        letter-spacing:
            -2px;
    }


    .hero-buttons {

        flex-direction:
            column;
    }


    .hero-stat-row {

        flex-wrap:
            wrap;
    }


    .fabric-orb {

        width:
            220px;

        height:
            220px;
    }


    .ring-a {

        width:
            280px;

        height:
            280px;
    }


    .ring-b {

        width:
            330px;

        height:
            160px;
    }


    .ring-c {

        height:
            380px;
    }


    .tech-badge {

        font-size:
            10px;

        padding:
            11px 13px;
    }


    .section {

        padding:
            75px 0;
    }

}