:root {

    /* Brand */

    --brand: #4338CA;
    --brand-dark: #312E81;
    --brand-light: #7C77F8;

    --accent: #A78BFA;

    /* Text */

    --heading: #171717;
    --body: #52525B;
    --muted: #8B8B95;

    /* Surfaces */

    --bg: #FAFAF8;
    --surface: #FFFFFF;
    --surface-soft: #F4F4F2;

    /* Borders */

    --line: #E9E8E4;

    /* Effects */

    --gradient:
        linear-gradient(135deg,
            #4338CA,
            #7C77F8);

    --shadow-sm:
        0 8px 18px rgba(23, 23, 23, .04);

    --shadow:
        0 20px 60px rgba(23, 23, 23, .08);

    --shadow-lg:
        0 45px 120px rgba(23, 23, 23, .12);

    /* Radius */

    --radius-sm: 14px;
    --radius: 22px;
    --radius-lg: 34px;

    /* Animation */

    --transition:
        .35s cubic-bezier(.22, 1, .36, 1);

}

/*======================================
Google Font
=======================================*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');


/*======================================
Reset
=======================================*/

*,
*::before,
*::after {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;
    scroll-padding-top: 120px;

}

body {

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

    background: var(--bg);

    color: var(--body);

    font-size: 16px;

    line-height: 1.75;

    font-weight: 500;

    overflow-x: hidden;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}


/*======================================
Typography
=======================================*/

h1,
h2,
h3,
h4,
h5,
h6 {

    color: var(--heading);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -.04em;

}



h1 {

    font-size: clamp(2.2rem, 5vw, 3.8rem);

    line-height: 1.1;

}

h2 {

    font-size: clamp(1.7rem, 3vw, 2.8rem);

    line-height: 1.2;

}

h3 {

    font-size: clamp(1.15rem, 2vw, 1.45rem);

    line-height: 1.3;

}

h4 {

    font-size: clamp(.95rem, 1.3vw, 1.15rem);

    line-height: 1.4;

}

p {

    color: var(--body);

    font-size: 1.03rem;

}


/*======================================
Images
=======================================*/

img {

    display: block;

    max-width: 100%;

}


/*======================================
Lists
=======================================*/

ul {

    list-style: none;

}


/*======================================
Links
=======================================*/

a {

    color: inherit;

    text-decoration: none;

}


/*======================================
Buttons
=======================================*/

button {

    font: inherit;

    border: none;

    outline: none;

    cursor: pointer;

    background: none;

}


/*======================================
Inputs
=======================================*/

input,
textarea,
select {

    font: inherit;

    outline: none;

    border: none;

}


/*======================================
Container
=======================================*/

.container {

    width: min(1380px, 92%);

    margin: auto;

}


/*======================================
Section Spacing
=======================================*/

section {

    position: relative;

    padding: 120px 0;

}


/*======================================
Custom Scrollbar
=======================================*/

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #F2F2F0;

}

::-webkit-scrollbar-thumb {

    background: linear-gradient(var(--brand),
            var(--brand-light));

    border-radius: 100px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--brand);

}


/*======================================
Text Selection
=======================================*/

::selection {

    background: var(--brand);

    color: #fff;

}


/*======================================
Utility Classes
=======================================*/

.text-center {

    text-align: center;

}

.hidden {

    display: none;

}

.glass {

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

    backdrop-filter: blur(28px);

    border: 1px solid rgba(255, 255, 255, .55);

    box-shadow: var(--shadow);

}

.blur-circle {

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(124, 119, 248, .18),
            transparent 70%);

    filter: blur(20px);

    pointer-events: none;

    z-index: -1;

}


/*======================================
Animations
=======================================*/

@keyframes float {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*======================================
Header
=======================================*/

header {

    position: fixed;

    top: 22px;
    left: 0;

    width: 100%;

    z-index: 1000;

    transition: var(--transition);

}

header.scrolled {

    top: 12px;

}


/*======================================
Navigation
=======================================*/

.navbar {

    width: min(1380px, 94%);

    height: 84px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 28px;

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

    backdrop-filter: blur(28px);

    border: 1px solid rgba(255, 255, 255, .6);

    border-radius: 28px;

    box-shadow: var(--shadow);

    transition: var(--transition);

}

header.scrolled .navbar {

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

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

}


/*======================================
Logo
=======================================*/

.logo {

    display: flex;

    align-items: center;

    gap: 16px;

    flex-shrink: 0;

}

.logo-mark {

    width: 54px;
    height: 54px;

    border-radius: 18px;

    background: var(--gradient);

    display: grid;

    place-items: center;

    box-shadow:
        0 18px 40px rgba(67, 56, 202, .18);

    transition: var(--transition);

}

.logo:hover .logo-mark {

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

}

.logo-mark i {

    font-size: 22px;

    color: #fff;

}

.logo-icon {

    position: relative;

    width: 54px;

    height: 54px;

    border-radius: 18px;

    background: var(--gradient);

    overflow: hidden;

}

.node {

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #fff;

    z-index: 2;

}

.node-1 {

    top: 12px;
    left: 12px;

}

.node-2 {

    top: 12px;
    right: 12px;

}

.node-3 {

    bottom: 12px;
    left: 12px;

}

.node-4 {

    bottom: 12px;
    right: 12px;

}

.line {

    position: absolute;

    height: 2px;

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

    transform-origin: left;

}

.line-1 {

    width: 26px;

    top: 15px;

    left: 15px;

    transform: rotate(35deg);

}

.line-2 {

    width: 26px;

    bottom: 15px;

    left: 15px;

    transform: rotate(-35deg);

}

.logo-text {

    display: flex;

    flex-direction: column;

}

.logo-text h2 {

    font-size: 22px;

    letter-spacing: -.04em;

    line-height: 1;

}

.logo-text span {

    margin-top: 5px;

    font-size: 11px;

    letter-spacing: .24em;

    text-transform: uppercase;

    color: var(--muted);

}


/*======================================
Desktop Menu
=======================================*/

.nav-menu {

    display: flex;

    align-items: center;

    gap: 8px;

}

.nav-menu li {

    position: relative;

}

.nav-menu a {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 50px;

    padding: 0 20px;

    border-radius: 16px;

    font-size: 15px;

    font-weight: 700;

    color: var(--heading);

    transition: var(--transition);

}

.nav-menu a:hover {

    background: rgba(67, 56, 202, .08);

    color: var(--brand);

}

.nav-menu a.active {

    background: var(--heading);

    color: #fff;

    box-shadow:
        0 16px 34px rgba(23, 23, 23, .12);

}

.nav-menu a.active::before {

    content: "";

    position: absolute;

    left: 14px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--accent);

}


/*======================================
Contact Button
=======================================*/

.contact-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    height: 56px;

    padding: 0 28px;

    border-radius: 999px;

    background: var(--gradient);

    color: #fff;

    font-weight: 700;

    transition: var(--transition);

    box-shadow:
        0 20px 45px rgba(67, 56, 202, .18);

}

.contact-btn i {

    font-size: 14px;

    transition: var(--transition);

}

.contact-btn:hover {

    transform: translateY(-4px);

}

.contact-btn:hover i {

    transform: translateX(4px);

}


/*======================================
Menu Toggle
=======================================*/

.menu-toggle {

    width: 52px;
    height: 52px;

    display: none;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: var(--surface);

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

    position: relative;

}

.menu-toggle span {

    position: absolute;

    width: 22px;

    height: 2px;

    background: var(--heading);

    border-radius: 10px;

    transition: var(--transition);

}

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

    transform: translateY(-7px);

}

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

    transform: translateY(7px);

}

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

    transform: rotate(45deg);

}

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

    opacity: 0;

}

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

    transform: rotate(-45deg);

}

/*======================================
Mobile Overlay
=======================================*/

.mobile-overlay {

    position: fixed;

    inset: 0;

    background: rgba(17, 17, 23, .32);

    backdrop-filter: blur(14px);

    opacity: 0;

    visibility: hidden;

    transition: var(--transition);

    z-index: 998;

}

.mobile-overlay.show {

    opacity: 1;

    visibility: visible;

}


/*======================================
Mobile Drawer
=======================================*/

.mobile-menu {

    position: fixed;

    top: 0;
    right: -100%;

    width: 380px;
    max-width: 92%;

    height: 100vh;

    padding: 30px;

    display: flex;

    flex-direction: column;

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

    backdrop-filter: blur(40px);

    border-left: 1px solid var(--line);

    box-shadow: -40px 0 80px rgba(23, 23, 23, .08);

    transition: .45s cubic-bezier(.22, 1, .36, 1);

    z-index: 999;

}

.mobile-menu.open {

    right: 0;

}


/*======================================
Mobile Header
=======================================*/

.mobile-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 50px;

}

.close-menu {

    width: 48px;
    height: 48px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--surface-soft);

    color: var(--heading);

    transition: var(--transition);

}

.close-menu:hover {

    background: var(--heading);

    color: #fff;

    transform: rotate(90deg);

}


/*======================================
Mobile Navigation
=======================================*/

.mobile-menu ul {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.mobile-menu li {

    width: 100%;

}

.mobile-menu a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 18px 20px;

    border-radius: 16px;

    font-size: 16px;

    font-weight: 700;

    color: var(--heading);

    transition: var(--transition);

}

.mobile-menu a::after {

    content: "↗";

    font-size: 15px;

    opacity: 0;

    transform: translateX(-6px);

    transition: var(--transition);

}

.mobile-menu a:hover {

    background: var(--surface-soft);

    color: var(--brand);

}

.mobile-menu a:hover::after {

    opacity: 1;

    transform: translateX(0);

}

.mobile-menu a.active {

    background: var(--heading);

    color: #fff;

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

}

.mobile-menu a.active::after {

    opacity: 1;

    color: var(--accent);

    transform: none;

}


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

.mobile-menu .contact-btn {

    width: 100%;

    margin-top: auto;

    justify-content: center;

}


/*======================================
Responsive
=======================================*/

@media(max-width:1150px) {

    .nav-menu {

        display: none;

    }

    .navbar>.contact-btn {

        display: none;

    }

    .menu-toggle {

        display: flex;

    }

}

@media(max-width:768px) {

    header {

        top: 14px;

    }

    header.scrolled {

        top: 8px;

    }

    .navbar {

        width: 94%;

        height: 74px;

        padding: 0 18px;

        border-radius: 22px;

    }

    .logo {

        gap: 12px;

    }

    .logo-mark {

        width: 46px;
        height: 46px;

        border-radius: 15px;

    }

    .logo-mark i {

        font-size: 18px;

    }

    .logo-text h2 {

        font-size: 20px;

    }

    .logo-text span {

        display: none;

    }

}

@media(max-width:540px) {

    section {

        padding: 90px 0;

    }

    .container {

        width: 92%;

    }

    .mobile-menu {

        width: 100%;

        max-width: 100%;

        padding: 24px;

    }

    .mobile-menu a {

        font-size: 15px;

        padding: 16px 18px;

    }

    .contact-btn {

        height: 52px;

        font-size: 15px;

        padding: 0 24px;

    }

}

/*======================================
Footer
=======================================*/

.footer {

    position: relative;


    padding: 20px 0 45px;

    overflow: visible;

    background:
        radial-gradient(circle at top right,
            rgba(167, 139, 250, .08),
            transparent 35%),

        radial-gradient(circle at bottom left,
            rgba(124, 119, 248, .08),
            transparent 45%),

        #17151F;

}

.footer::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .02),
            transparent 20%);

    pointer-events: none;

}


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

.footer-cta {

    position: relative;

    transform: translateY(-90px);

    margin-bottom: -10px;

    padding: 80px;

    text-align: center;

    border-radius: 36px;

    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--line);

    box-shadow:
        0 50px 120px rgba(17, 17, 17, .16);

}

.footer-cta::before {

    content: "";

    position: absolute;

    width: 460px;

    height: 460px;

    top: -240px;

    right: -180px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(124, 119, 248, .14),
            transparent 70%);

}

.footer-cta::after {

    content: "";

    position: absolute;

    width: 380px;

    height: 380px;

    bottom: -220px;

    left: -180px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(167, 139, 250, .10),
            transparent 70%);

}

.footer-label {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 20px;

    margin-bottom: 22px;

    border-radius: 999px;

    background: rgba(67, 56, 202, .08);

    color: var(--brand);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

}

.footer-cta h2 {

    position: relative;

    max-width: 760px;

    margin: auto;

    margin-bottom: 22px;

}

.footer-cta p {

    position: relative;

    max-width: 690px;

    margin: auto;

    margin-bottom: 40px;

    color: var(--muted);

    font-size: 1.08rem;

}

.footer-cta .contact-btn {

    position: relative;

    display: inline-flex;

}

/*======================================
Footer Grid
=======================================*/

.footer-grid {

    display: grid;

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

    gap: 70px;

    padding: 20px 0 70px;

}


/*======================================
Footer About
=======================================*/

.footer-about {

    max-width: 440px;

}

.footer-logo {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 28px;

}

.footer-logo .logo-mark {

    flex-shrink: 0;

}

.footer-logo .logo-text h3 {

    color: #FFFFFF;

    font-size: 24px;

    margin-bottom: 6px;

}

.footer-logo .logo-text span {

    color: rgba(255, 255, 255, .55);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .18em;

    text-transform: uppercase;

}

.footer-about p {

    color: rgba(255, 255, 255, .70);

    line-height: 1.9;

}


/*======================================
Footer Columns
=======================================*/

.footer-links h4 {

    color: #FFFFFF;

    margin-bottom: 30px;

    font-size: 18px;

    font-weight: 700;

}

.footer-links ul {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.footer-links li {

    width: 100%;

}

.footer-links a {

    display: inline-flex;

    align-items: center;

    color: rgba(255, 255, 255, .68);

    transition: var(--transition);

    position: relative;

}

.footer-links a::before {

    content: "";

    width: 0;

    height: 2px;

    margin-right: 0;

    background: var(--brand);

    transition: var(--transition);

}

.footer-links a:hover {

    color: #FFFFFF;

    transform: translateX(8px);

}

.footer-links a:hover::before {

    width: 12px;

    margin-right: 10px;

}


/*======================================
Social Icons
=======================================*/

.footer-social {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

}

.footer-social a {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    color: #FFFFFF;

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

    border: 1px solid rgba(255, 255, 255, .08);

    transition: var(--transition);

}

.footer-social a:hover {

    background: var(--brand);

    border-color: var(--brand);

    transform: translateY(-6px);

}

.footer-social i {

    font-size: 16px;

}


/*======================================
Footer Bottom
=======================================*/

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 35px;

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

}

.footer-bottom p {

    color: rgba(255, 255, 255, .55);

    font-size: 15px;

}

.footer-bottom-links {

    display: flex;

    align-items: center;

    gap: 18px;

}

.footer-bottom-links span {

    width: 5px;

    height: 5px;

    border-radius: 50%;

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

}

.footer-bottom-links a {

    color: rgba(255, 255, 255, .55);

    transition: var(--transition);

}

.footer-bottom-links a:hover {

    color: #FFFFFF;

}


/*======================================
Footer Responsive
=======================================*/

@media(max-width:1200px) {

    .footer-grid {

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

        gap: 55px;

    }

    .footer-links:last-child {

        grid-column: 1 / -1;

        margin-top: 10px;

    }

}


@media(max-width:992px) {

    .footer {

        margin-top: 150px;

    }

    .footer-cta {

        padding: 65px 45px;

        border-radius: 30px;

    }

    .footer-grid {

        grid-template-columns: 1fr 1fr;

        gap: 55px 40px;

        padding: 10px 0 60px;

    }

    .footer-about {

        max-width: 100%;

        grid-column: 1 / -1;

    }

}


@media(max-width:768px) {

    .footer {

        margin-top: 120px;

        padding-bottom: 35px;

    }

    .footer-cta {

        transform: translateY(-70px);

        padding: 55px 30px;

        border-radius: 26px;

    }

    .footer-label {

        font-size: 12px;

        letter-spacing: .08em;

    }

    .footer-cta h2 {

        font-size: 2rem;

    }

    .footer-cta p {

        font-size: 1rem;

    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 45px;

        padding: 0 0 50px;

    }

    .footer-links:last-child {

        grid-column: auto;

        margin-top: 0;

    }

    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }

}


@media(max-width:576px) {

    .footer {

        margin-top: 100px;

    }

    .footer-cta {

        transform: translateY(-55px);

        padding: 45px 22px;

        border-radius: 22px;

    }

    .footer-cta h2 {

        font-size: 1.8rem;

    }

    .footer-logo {

        gap: 14px;

    }

    .footer-logo .logo-mark {

        width: 50px;

        height: 50px;

    }

    .footer-logo .logo-text h3 {

        font-size: 21px;

    }

    .footer-links h4 {

        margin-bottom: 22px;

    }

    .footer-links ul {

        gap: 15px;

    }

    .footer-social {

        gap: 12px;

    }

    .footer-social a {

        width: 48px;

        height: 48px;

        border-radius: 14px;

    }

    .footer-bottom {

        text-align: center;

        align-items: center;

    }

    .footer-bottom-links {

        justify-content: center;

        flex-wrap: wrap;

    }

}


/*======================================
Hero
=======================================*/

.hero {

    position: relative;

    overflow: hidden;

    padding: 180px 0 140px;

    background: var(--background);

}

.hero-grid-pattern {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(20, 20, 20, .04) 1px, transparent 1px),

        linear-gradient(90deg, rgba(20, 20, 20, .04) 1px, transparent 1px);

    background-size: 60px 60px;

    mask-image: radial-gradient(circle at center, black 35%, transparent 95%);

    pointer-events: none;

}

.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .55;

    pointer-events: none;

}

.hero-glow-1 {

    width: 520px;

    height: 520px;

    top: -180px;

    right: -120px;

    background: #B794F4;

}

.hero-glow-2 {

    width: 420px;

    height: 420px;

    bottom: -150px;

    left: -120px;

    background: #F59EAE;

}


/*======================================
Hero Layout
=======================================*/

.hero-wrapper {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 90px;

    z-index: 2;

}

.hero-content {

    max-width: 650px;

}


/*======================================
Hero Text
=======================================*/

/*======================================
Hero Intro
=======================================*/

.hero-intro {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 35px;

}

.intro-line {

    width: 70px;

    height: 2px;

    background: linear-gradient(90deg,

            var(--brand),

            transparent);

}

.hero-intro p {

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: .25em;

    text-transform: uppercase;

    color: var(--muted);

}

.hero h1 {

    font-size: clamp(3.3rem, 6vw, 3.4rem);

    line-height: 1.02;

    margin-bottom: 28px;

    letter-spacing: -.04em;

}

.hero h1 span {

    display: block;

    color: var(--brand);

}

.hero p {

    max-width: 620px;

    margin-bottom: 42px;

    font-size: .87rem;

    line-height: 1.9;

    color: var(--muted);

}


/*======================================
Hero Buttons
=======================================*/

.hero-actions {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 60px;

}

.hero-link {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--heading);

    font-weight: 600;

    transition: var(--transition);

}

.hero-link:hover {

    gap: 16px;

}


/*======================================
Hero Stats
=======================================*/

.hero-stats {

    display: flex;

    gap: 26px;

}

.stat-item {

    min-width: 150px;

    padding: 24px;

    border-radius: 22px;

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

    backdrop-filter: blur(20px);

    border: 1px solid rgba(0, 0, 0, .06);

}

.stat-item h3 {

    margin-bottom: 8px;

    font-size: 2rem;

}

.stat-item span {

    color: var(--muted);

}

/*======================================
Hero Visual
=======================================*/

.hero-visual {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 700px;

}

.ai-network {

    position: relative;

    width: 620px;

    height: 620px;

}


/*======================================
Core
=======================================*/

.core {

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 170px;

    height: 170px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.core-center {

    position: relative;

    width: 120px;

    height: 120px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #2D1B69, #7C3AED);

    color: #fff;

    font-size: 42px;

    box-shadow:

        0 25px 70px rgba(45, 27, 105, .35);

    z-index: 5;

}

.core-ring {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border: 1px solid rgba(124, 58, 237, .18);

}

.ring-1 {

    animation: rotateRing 18s linear infinite;

}

.ring-2 {

    inset: -35px;

    border-color: rgba(192, 132, 252, .12);

    animation: rotateRingReverse 24s linear infinite;

}


/*======================================
AI Nodes
=======================================*/

.ai-node {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 14px 24px;

    border-radius: 999px;

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

    backdrop-filter: blur(20px);

    border: 1px solid rgba(0, 0, 0, .06);

    box-shadow: var(--shadow);

    white-space: nowrap;

    font-weight: 600;

    color: var(--heading);

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

}

.node-top {

    top: 0;

    left: 50%;

    transform: translateX(-50%);

}

.node-right {

    top: 50%;

    right: 0;

    transform: translateY(-50%);

    animation-delay: .8s;

}

.node-bottom {

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    animation-delay: 1.4s;

}

.node-left {

    top: 50%;

    left: 0;

    transform: translateY(-50%);

    animation-delay: 2s;

}

.node-top-right {

    top: 90px;

    right: 55px;

    animation-delay: 2.6s;

}

.node-bottom-left {

    left: 45px;

    bottom: 95px;

    animation-delay: 3.2s;

}


/*======================================
Connectors
=======================================*/

.connector {

    position: absolute;

    top: 50%;

    left: 50%;

    height: 1px;

    transform-origin: left center;

    background:

        linear-gradient(90deg,

            rgba(124, 58, 237, .65),

            transparent);

}

.connector-1 {

    width: 180px;

    transform: rotate(-90deg);

}

.connector-2 {

    width: 180px;

    transform: rotate(0deg);

}

.connector-3 {

    width: 180px;

    transform: rotate(90deg);

}

.connector-4 {

    width: 180px;

    transform: rotate(180deg);

}

.connector-5 {

    width: 150px;

    transform: rotate(-40deg);

}

.connector-6 {

    width: 150px;

    transform: rotate(140deg);

}


/*======================================
Particles
=======================================*/

.particle {

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #A78BFA;

    box-shadow:

        0 0 18px rgba(167, 139, 250, .9);

    animation: particleFloat 8s linear infinite;

}

.particle-1 {

    top: 60px;

    left: 200px;

}

.particle-2 {

    top: 170px;

    right: 90px;

    animation-delay: 1.2s;

}

.particle-3 {

    bottom: 110px;

    right: 160px;

    animation-delay: 2.4s;

}

.particle-4 {

    bottom: 70px;

    left: 140px;

    animation-delay: 3.5s;

}

.particle-5 {

    top: 300px;

    left: 40px;

    animation-delay: 4.4s;

}

/*======================================
Hero Animations
=======================================*/

@keyframes floatNode {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}

@keyframes particleFloat {

    0% {

        transform: translateY(0) scale(1);

        opacity: .2;

    }

    50% {

        transform: translateY(-28px) scale(1.4);

        opacity: 1;

    }

    100% {

        transform: translateY(0) scale(1);

        opacity: .2;

    }

}

@keyframes rotateRing {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes rotateRingReverse {

    from {

        transform: rotate(360deg);

    }

    to {

        transform: rotate(0deg);

    }

}

@keyframes heroFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-16px);

    }

}


/*======================================
Hero Hover Effects
=======================================*/

.ai-network {

    animation: heroFloat 8s ease-in-out infinite;

}

.ai-node {

    transition: var(--transition);

    cursor: default;

}

.ai-node:hover {

    transform: translateY(-8px) scale(1.05);

    box-shadow:

        0 30px 70px rgba(18, 18, 18, .12);

}

.core-center {

    transition: var(--transition);

}

.ai-network:hover .core-center {

    transform: scale(1.06);

    box-shadow:

        0 35px 90px rgba(124, 58, 237, .45);

}


/*======================================
Responsive Hero
=======================================*/

@media(max-width:1200px) {

    .hero-wrapper {

        gap: 60px;

    }

    .hero-visual {

        min-height: 600px;

    }

    .ai-network {

        transform: scale(.9);

    }

}

@media(max-width:992px) {

    .hero {

        padding: 150px 0 100px;

    }

    .hero-wrapper {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .hero-content {

        max-width: 100%;

        margin: auto;

    }

    .hero p {

        margin-left: auto;

        margin-right: auto;

    }

    .hero-actions {

        justify-content: center;

    }

    .hero-stats {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-visual {

        min-height: 560px;

    }

}

@media(max-width:768px) {

    .hero {

        padding: 130px 0 80px;

    }

    .hero h1 {

        font-size: 3rem;

    }

    .hero-label {

        font-size: .72rem;

    }

    .hero-actions {

        flex-direction: column;

        align-items: stretch;

    }

    .hero-actions .contact-btn,

    .hero-link {

        justify-content: center;

    }

    .hero-visual {

        display: none;

    }

    .hero-stats {

        gap: 18px;

    }

    .stat-item {

        flex: 1;

        min-width: 140px;

    }

}

@media(max-width:576px) {

    .hero h1 {

        font-size: 2.5rem;

    }

    .hero p {

        font-size: 1rem;

    }

    .hero-stats {

        flex-direction: column;

    }

    .stat-item {

        width: 100%;

    }

}


/*======================================
Reduced Motion
=======================================*/

@media(prefers-reduced-motion:reduce) {

    .ai-network,

    .ai-node,

    .core-ring,

    .particle {

        animation: none !important;

    }

}

.core-center.pulse {

    animation: corePulse 1.2s ease;

}

@keyframes corePulse {

    0% {

        box-shadow:
            0 0 0 rgba(124, 58, 237, .45);

    }

    50% {

        box-shadow:
            0 0 0 30px rgba(124, 58, 237, 0);

    }

    100% {

        box-shadow:
            0 0 0 rgba(124, 58, 237, 0);

    }

}


/*======================================
What We Build
=======================================*/

.what-we-build {

    position: relative;

    padding: 130px 0;

    overflow: hidden;

}

.what-we-build::before {

    content: "";

    position: absolute;

    top: 0;

    right: -250px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .06),

            transparent 70%);

    pointer-events: none;

}


/*======================================
Section Heading
=======================================*/

.section-heading {

    max-width: 760px;

    margin: 0 auto 80px;

    text-align: center;

}

.section-line {

    width: 90px;

    height: 2px;

    margin: 0 auto 22px;

    background:

        linear-gradient(90deg,

            transparent,

            var(--brand),

            transparent);

}

.section-heading span {

    display: block;

    margin-bottom: 18px;

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: .25em;

    text-transform: uppercase;

    color: var(--muted);

}

.section-heading h2 {

    margin-bottom: 24px;

}

.section-heading p {

    max-width: 650px;

    margin: auto;

    color: var(--muted);

    line-height: 1.9;

}


/*======================================
Build Grid
=======================================*/

.build-grid {

    display: grid;

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

    gap: 28px;

}

.build-card {

    position: relative;

    padding: 38px;

    border-radius: 30px;

    background: var(--surface);

    border: 1px solid var(--line);

    overflow: hidden;

    transition: var(--transition);

}

.build-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(145deg,

            rgba(124, 92, 255, .03),

            transparent 45%);

    opacity: 0;

    transition: var(--transition);

}

.build-card:hover {

    transform: translateY(-10px);

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

}

.build-card:hover::before {

    opacity: 1;

}


/*======================================
Card Sizes
=======================================*/

.build-card.large {

    grid-column: span 6;

    min-height: 360px;

}

.build-card.wide {

    grid-column: span 8;

}

.build-card:not(.large):not(.wide) {

    grid-column: span 3;

}


/*======================================
Build Card Content
=======================================*/

.build-icon {

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 32px;

    border-radius: 22px;

    background: rgba(124, 92, 255, .08);

    color: var(--brand);

    font-size: 24px;

    transition: var(--transition);

}

.build-card:hover .build-icon {

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

    background: var(--brand);

    color: #fff;

}

.build-card h3 {

    margin-bottom: 18px;

    font-size: 1.5rem;

    line-height: 1.3;

}

.build-card p {

    color: var(--muted);

    line-height: 1.9;

}

.build-card span {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 34px;

    font-weight: 600;

    color: var(--heading);

    transition: var(--transition);

}

.build-card span i {

    transition: var(--transition);

}

.build-card:hover span {

    gap: 16px;

}

.build-card:hover span i {

    transform: translateX(4px);

}


/*======================================
Card Accent
=======================================*/

.build-card::after {

    content: "";

    position: absolute;

    left: 38px;

    bottom: 0;

    width: 0;

    height: 4px;

    border-radius: 999px;

    background: var(--brand);

    transition: var(--transition);

}

.build-card:hover::after {

    width: 120px;

}


/*======================================
Responsive
=======================================*/

@media(max-width:1100px) {

    .build-card.large {

        grid-column: span 12;

    }

    .build-card.wide {

        grid-column: span 12;

    }

    .build-card:not(.large):not(.wide) {

        grid-column: span 6;

    }

}

@media(max-width:768px) {

    .what-we-build {

        padding: 100px 0;

    }

    .section-heading {

        margin-bottom: 60px;

    }

    .build-grid {

        gap: 22px;

    }

    .build-card,

    .build-card.large,

    .build-card.wide,

    .build-card:not(.large):not(.wide) {

        grid-column: span 12;

    }

    .build-card {

        padding: 30px;

        border-radius: 24px;

    }

    .build-icon {

        width: 60px;

        height: 60px;

        border-radius: 18px;

        margin-bottom: 24px;

    }

}

@media(max-width:576px) {

    .build-card {

        padding: 24px;

    }

    .build-card h3 {

        font-size: 1.3rem;

    }

    .build-card span {

        margin-top: 26px;

    }

}


/*======================================
Capabilities
=======================================*/

.capabilities {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

.capabilities::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    top: -280px;

    left: -220px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .06),

            transparent 70%);

    pointer-events: none;

}


/*======================================
Capabilities Layout
=======================================*/

.capabilities-wrapper {

    display: grid;

    grid-template-columns: 1fr 1.05fr;

    align-items: center;

    gap: 90px;

}

.section-heading.left {

    text-align: left;

    margin: 0 0 55px;

}

.section-heading.left .section-line {

    margin: 0 0 22px;

}

.section-heading.left p {

    margin: 0;

    max-width: 620px;

}


/*======================================
Capabilities Image
=======================================*/

.capabilities-image {

    position: relative;

    border-radius: 34px;

    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--line);

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

}

.capabilities-image img {

    width: 100%;

    display: block;

    object-fit: cover;

    transition: transform .8s ease;

}

.capabilities-image:hover img {

    transform: scale(1.04);

}

.capabilities-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(180deg,

            rgba(255, 255, 255, 0),

            rgba(20, 20, 20, .05));

    pointer-events: none;

}

/*======================================
Capability List
=======================================*/

.capability-list {

    display: flex;

    flex-direction: column;

    gap: 22px;

}


/*======================================
Capability Item
=======================================*/

.capability-item {

    position: relative;

    padding: 32px 34px;

    border-radius: 26px;

    background: var(--surface);

    border: 1px solid var(--line);

    transition: var(--transition);

    overflow: hidden;

    cursor: pointer;

}

.capability-item::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 4px;

    height: 100%;

    background: var(--brand);

    transform: scaleY(0);

    transform-origin: top;

    transition: var(--transition);

}

.capability-item::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(135deg,

            rgba(124, 92, 255, .04),

            transparent 45%);

    opacity: 0;

    transition: var(--transition);

    pointer-events: none;

}

.capability-item:hover,

.capability-item.active {

    transform: translateX(12px);

    box-shadow: var(--shadow);

}

.capability-item:hover::before,

.capability-item.active::before {

    transform: scaleY(1);

}

.capability-item:hover::after,

.capability-item.active::after {

    opacity: 1;

}

.capability-item h3 {

    margin-bottom: 14px;

    font-size: 1.35rem;

}

.capability-item p {

    color: var(--muted);

    line-height: 1.85;

    max-width: 95%;

}


/*======================================
Capability Number
=======================================*/

.capability-item {

    counter-increment: capability;

}

.capability-list {

    counter-reset: capability;

}

.capability-item h3::before {

    content: "0" counter(capability);

    display: inline-block;

    margin-right: 18px;

    color: rgba(124, 92, 255, .55);

    font-size: .9rem;

    font-weight: 700;

    letter-spacing: .12em;

}

/*======================================
Capabilities Responsive
=======================================*/

@media(max-width:1200px) {

    .capabilities-wrapper {

        gap: 60px;

    }

}


@media(max-width:992px) {

    .capabilities {

        padding: 110px 0;

    }

    .capabilities-wrapper {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .capabilities-content {

        order: 2;

    }

    .capabilities-image {

        order: 1;

        max-width: 760px;

        margin: 0 auto;

    }

}


@media(max-width:768px) {

    .capabilities {

        padding: 90px 0;

    }

    .section-heading.left {

        text-align: center;

        margin-bottom: 45px;

    }

    .section-heading.left .section-line {

        margin: 0 auto 22px;

    }

    .section-heading.left p {

        margin: auto;

    }

    .capability-item {

        padding: 28px;

        border-radius: 22px;

        transform: none !important;

    }

    .capability-item h3 {

        font-size: 1.25rem;

    }

    .capability-item h3::before {

        display: block;

        margin: 0 0 10px;

    }

}


@media(max-width:576px) {

    .capabilities {

        padding: 80px 0;

    }

    .capability-item {

        padding: 24px;

    }

    .capability-item p {

        max-width: 100%;

    }

    .capabilities-image {

        border-radius: 24px;

    }

}

/*======================================
Capability Reveal
=======================================*/

.capability-item,

.capabilities-image {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.capabilities-image {

    transition-delay: .15s;

}

.capability-item.show,

.capabilities-image.show {

    opacity: 1;

    transform: translateY(0);

}

.capability-item:nth-child(2) {

    transition-delay: .1s;

}

.capability-item:nth-child(3) {

    transition-delay: .2s;

}

.capability-item:nth-child(4) {

    transition-delay: .3s;

}


/*======================================
Industries
=======================================*/

.industries {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

.industries::before {

    content: "";

    position: absolute;

    top: 120px;

    right: -260px;

    width: 650px;

    height: 650px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .05),

            transparent 72%);

    pointer-events: none;

}


/*======================================
Industry Grid
=======================================*/

.industry-grid {

    display: grid;

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

    gap: 32px;

    margin-top: 80px;

}


/*======================================
Industry Card
=======================================*/

.industry-card {

    position: relative;

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 30px;

    overflow: hidden;

    transition: var(--transition);

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

}

.industry-card:hover {

    transform: translateY(-10px);

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

}


/*======================================
Industry Image
=======================================*/

.industry-image {

    position: relative;

    overflow: hidden;

    aspect-ratio: 16/10;

    background: #f7f5ff;

}

.industry-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .9s ease;

}

.industry-card:hover .industry-image img {

    transform: scale(1.05);

}

.industry-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(to top,

            rgba(15, 15, 20, .08),

            transparent 45%);

    pointer-events: none;

}


/*======================================
Industry Content
=======================================*/

.industry-content {

    padding: 34px;

}

.industry-content h3 {

    margin-bottom: 16px;

    font-size: 1.45rem;

    color: var(--heading);

}

.industry-content p {

    color: var(--muted);

    line-height: 1.9;

}

/*======================================
Industry Hover
=======================================*/

.industry-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: var(--brand);

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--transition);

    z-index: 2;

}

.industry-card:hover::before {

    transform: scaleX(1);

}


/*======================================
Industry Responsive
=======================================*/

@media(max-width:992px) {

    .industries {

        padding: 110px 0;

    }

    .industry-grid {

        grid-template-columns: 1fr;

        gap: 28px;

    }

}

@media(max-width:768px) {

    .industries {

        padding: 90px 0;

    }

    .industry-content {

        padding: 28px;

    }

}

@media(max-width:576px) {

    .industry-content {

        padding: 24px;

    }

    .industry-content h3 {

        font-size: 1.3rem;

    }

}

/*======================================
Industry Reveal
=======================================*/

.industry-card {

    opacity: 1;

    transform: none;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease,
        opacity .6s ease;

}

.industry-card.show {

    opacity: 1;

    transform: translateY(0);

}


/*======================================
How We Work
=======================================*/

.how-we-work {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

.how-we-work::before {

    content: "";

    position: absolute;

    left: -260px;

    bottom: -220px;

    width: 620px;

    height: 620px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .05),

            transparent 70%);

    pointer-events: none;

}


/*======================================
Layout
=======================================*/

.how-work-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

}


/*======================================
Image
=======================================*/

.how-work-image {

    position: relative;

    overflow: hidden;

    border-radius: 32px;

    background: var(--surface);

    border: 1px solid var(--line);

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

}

.how-work-image img {

    width: 100%;

    display: block;

    object-fit: cover;

    transition: transform .9s ease;

}

.how-work-image:hover img {

    transform: scale(1.05);

}


/*======================================
Timeline
=======================================*/

.timeline {

    position: relative;

    margin-top: 50px;

}

.timeline::before {

    content: "";

    position: absolute;

    left: 28px;

    top: 0;

    bottom: 0;

    width: 2px;

    background: rgba(124, 92, 255, .18);

}

.timeline-item {

    position: relative;

    display: flex;

    gap: 28px;

    padding-bottom: 45px;

}

.timeline-item:last-child {

    padding-bottom: 0;

}

/*======================================
Timeline Number
=======================================*/

.timeline-number {

    position: relative;

    flex-shrink: 0;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--surface);

    border: 2px solid var(--brand);

    color: var(--brand);

    font-weight: 700;

    z-index: 2;

    transition: var(--transition);

}

.timeline-item:hover .timeline-number {

    background: var(--brand);

    color: #fff;

    transform: scale(1.08);

}


/*======================================
Timeline Content
=======================================*/

.timeline-content {

    padding-top: 10px;

}

.timeline-content h3 {

    margin-bottom: 12px;

    font-size: 1.35rem;

}

.timeline-content p {

    color: var(--muted);

    line-height: 1.9;

}


/*======================================
Reveal
=======================================*/

.timeline-item,

.how-work-image {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.timeline-item.show,

.how-work-image.show {

    opacity: 1;

    transform: translateY(0);

}


/*======================================
Responsive
=======================================*/

@media(max-width:992px) {

    .how-we-work {

        padding: 110px 0;

    }

    .how-work-wrapper {

        grid-template-columns: 1fr;

        gap: 60px;

    }

}

@media(max-width:768px) {

    .how-we-work {

        padding: 90px 0;

    }

    .timeline-item {

        gap: 20px;

    }

    .timeline-number {

        width: 50px;

        height: 50px;

        font-size: .9rem;

    }

    .timeline::before {

        left: 24px;

    }

}

@media(max-width:576px) {

    .timeline-content h3 {

        font-size: 1.2rem;

    }

}

/*======================================
Why Us
=======================================*/

.why-us {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

.why-us::before {

    content: "";

    position: absolute;

    top: -220px;

    right: -220px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .05),

            transparent 72%);

    pointer-events: none;

}


/*======================================
Layout
=======================================*/

.why-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

}


/*======================================
Image
=======================================*/

.why-image {

    position: relative;

    overflow: hidden;

    border-radius: 32px;

    border: 1px solid var(--line);

    background: var(--surface);

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

}

.why-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .9s ease;

}

.why-image:hover img {

    transform: scale(1.05);

}


/*======================================
Why List
=======================================*/

.why-list {

    display: flex;

    flex-direction: column;

    gap: 24px;

    margin-top: 55px;

}

.why-item {

    display: flex;

    align-items: flex-start;

    gap: 24px;

    padding: 28px 30px;

    border-radius: 24px;

    border: 1px solid var(--line);

    background: var(--surface);

    transition: var(--transition);

    position: relative;

    overflow: hidden;

}

.why-item::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 4px;

    height: 100%;

    background: var(--brand);

    transform: scaleY(0);

    transform-origin: top;

    transition: var(--transition);

}

.why-item:hover {

    transform: translateX(12px);

    box-shadow: var(--shadow);

}

.why-item:hover::before {

    transform: scaleY(1);

}


/*======================================
Icons
=======================================*/

.why-icon {

    flex-shrink: 0;

    width: 64px;

    height: 64px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(124, 92, 255, .08);

    color: var(--brand);

    font-size: 22px;

    transition: var(--transition);

}

.why-item:hover .why-icon {

    background: var(--brand);

    color: #fff;

    transform: rotate(-8deg);

}


/*======================================
Content
=======================================*/

.why-item h3 {

    margin-bottom: 10px;

    font-size: 1.3rem;

}

.why-item p {

    color: var(--muted);

    line-height: 1.9;

}

/*======================================
Reveal
=======================================*/

.why-item,

.why-image {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.why-item.show,

.why-image.show {

    opacity: 1;

    transform: translateY(0);

}


/*======================================
Responsive
=======================================*/

@media(max-width:992px) {

    .why-us {

        padding: 110px 0;

    }

    .why-wrapper {

        grid-template-columns: 1fr;

        gap: 60px;

    }

}

@media(max-width:768px) {

    .why-us {

        padding: 90px 0;

    }

    .why-item {

        padding: 24px;

        gap: 18px;

        transform: none !important;

    }

    .why-icon {

        width: 56px;

        height: 56px;

        border-radius: 18px;

        font-size: 20px;

    }

}

@media(max-width:576px) {

    .why-item {

        flex-direction: column;

        align-items: flex-start;

    }

    .why-item h3 {

        font-size: 1.2rem;

    }

}


/*======================================
Platform Hero
=======================================*/

.platform-hero {

    position: relative;

    overflow: hidden;

    padding: 180px 0 140px;

}

.platform-hero::before {

    content: "";

    position: absolute;

    top: -220px;

    right: -180px;

    width: 620px;

    height: 620px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .06),

            transparent 72%);

    pointer-events: none;

}

.platform-hero .container {

    position: relative;

    z-index: 2;

}


/*======================================
Platform Hero Content
=======================================*/

.platform-hero-content {

    max-width: 820px;

    margin: 0 auto;

    text-align: center;

}

.platform-hero-content h1 {

    max-width: 900px;

    margin: 30px auto;

}

.platform-hero-content .hero-description {

    max-width: 760px;

    margin: 0 auto;

    color: var(--muted);

    line-height: 1.9;

    font-size: 1.12rem;

}

.platform-hero .hero-actions {

    justify-content: center;

    margin-top: 45px;

}


/*======================================
Platform Hero Image
=======================================*/

.platform-hero-image {

    position: relative;

    margin: 90px auto 0;

    max-width: 1200px;

}

.platform-hero-image img {

    display: block;

    width: 100%;

    height: auto;

    transition: transform .9s ease;

}

.platform-hero-image:hover img {

    transform: translateY(-8px) scale(1.02);

}


/*======================================
Floating Glow
=======================================*/

.platform-hero-image::before {

    content: "";

    position: absolute;

    inset: 8%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .12),

            transparent 70%);

    filter: blur(70px);

    z-index: -1;

}


/*======================================
Reveal
=======================================*/

.platform-hero-content,

.platform-hero-image {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.platform-hero-content.show,

.platform-hero-image.show {

    opacity: 1;

    transform: translateY(0);

}


/*======================================
Responsive
=======================================*/

@media(max-width:992px) {

    .platform-hero {

        padding: 160px 0 110px;

    }

    .platform-hero-image {

        margin-top: 70px;

    }

}

@media(max-width:768px) {

    .platform-hero {

        padding: 140px 0 90px;

    }

    .platform-hero-content h1 {

        font-size: 3rem;

    }

    .platform-hero-content .hero-description {

        font-size: 1rem;

    }

    .platform-hero-image {

        margin-top: 55px;

    }

}

@media(max-width:576px) {

    .platform-hero-content h1 {

        font-size: 2.45rem;

    }

}


/*======================================
Platform Overview
=======================================*/

.platform-overview {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

.platform-overview::before {

    content: "";

    position: absolute;

    left: -220px;

    top: 80px;

    width: 620px;

    height: 620px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(124, 92, 255, .05),
            transparent 72%);

    pointer-events: none;

}


/*======================================
Layout
=======================================*/

.platform-overview-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

}


/*======================================
Image
=======================================*/

.platform-overview-image {

    position: relative;

    overflow: hidden;

    border-radius: 32px;

    background: var(--surface);

    border: 1px solid var(--line);

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

}

.platform-overview-image img {

    width: 100%;

    display: block;

    transition: transform .8s ease;

}

.platform-overview-image:hover img {

    transform: scale(1.04);

}

.platform-overview-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(to top,
            rgba(10, 10, 15, .06),
            transparent 45%);

    pointer-events: none;

}


/*======================================
Overview Grid
=======================================*/

.overview-grid {

    display: grid;

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

    gap: 24px;

    margin-top: 55px;

}


/*======================================
Overview Card
=======================================*/

.overview-card {

    position: relative;

    padding: 32px;

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 24px;

    transition: var(--transition);

    overflow: hidden;

}

.overview-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 4px;

    height: 100%;

    background: var(--brand);

    transform: scaleY(0);

    transform-origin: top;

    transition: var(--transition);

}

.overview-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow);

}

.overview-card:hover::before {

    transform: scaleY(1);

}


/*======================================
Icons
=======================================*/

.overview-card i {

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: rgba(124, 92, 255, .08);

    color: var(--brand);

    font-size: 22px;

    margin-bottom: 22px;

    transition: var(--transition);

}

.overview-card:hover i {

    background: var(--brand);

    color: #fff;

    transform: rotate(-8deg);

}


/*======================================
Typography
=======================================*/

.overview-card h3 {

    margin-bottom: 14px;

    font-size: 1.3rem;

}

.overview-card p {

    color: var(--muted);

    line-height: 1.85;

}


/*======================================
Reveal Animation
=======================================*/

.platform-overview-image,

.overview-card {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.platform-overview-image.show,

.overview-card.show {

    opacity: 1;

    transform: translateY(0);

}


/*======================================
Responsive
=======================================*/

@media(max-width:992px) {

    .platform-overview {

        padding: 110px 0;

    }

    .platform-overview-wrapper {

        grid-template-columns: 1fr;

        gap: 60px;

    }

}

@media(max-width:768px) {

    .platform-overview {

        padding: 90px 0;

    }

    .overview-grid {

        grid-template-columns: 1fr;

    }

    .overview-card {

        padding: 28px;

    }

}

@media(max-width:576px) {

    .overview-card {

        padding: 24px;

    }

}

.platform-map {

    position: relative;

    width: 100%;

    max-width: 1200px;

    min-height: 980px;

    margin: 90px auto 80px;

}

/*======================================*
Platform Core
*=======================================*/

.platform-core {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 220px;
    height: 220px;

    margin-left: -110px;
    margin-top: -110px;

    z-index: 20;

}

.core-ring {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 280px;
    height: 280px;

    margin-left: -140px;
    margin-top: -140px;

    border-radius: 50%;

    border: 1px solid rgba(124, 92, 255, .18);

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

    pointer-events: none;

}

.core-circle {

    position: relative;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .78),
            rgba(255, 255, 255, .56));

    backdrop-filter: blur(24px);

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

    border: 1px solid rgba(255, 255, 255, .75);

    box-shadow:
        0 25px 70px rgba(15, 23, 42, .10);

    transition:
        box-shadow .35s ease,
        scale .35s ease;

}

.core-circle::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        radial-gradient(circle at top,
            rgba(124, 92, 255, .16),
            transparent 70%);

    opacity: .9;

    pointer-events: none;

}

.core-circle:hover {

    scale: 1.03;

    box-shadow:
        0 35px 90px rgba(124, 92, 255, .16);

}

.core-circle i {

    position: relative;

    z-index: 2;

    font-size: 46px;

    color: var(--brand);

    margin-bottom: 18px;

}

.core-circle h3 {

    position: relative;

    z-index: 2;

    margin: 0 0 8px;

}

.core-circle span {

    position: relative;

    z-index: 2;

    color: var(--muted);

    font-size: .92rem;

}


/*======================================*
Platform Components
*=======================================*/

.component {

    position: absolute;

    width: 270px;

    padding: 32px;

    border-radius: 28px;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .76),
            rgba(255, 255, 255, .54));

    backdrop-filter: blur(24px);

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

    border: 1px solid rgba(255, 255, 255, .72);

    box-shadow:
        0 20px 60px rgba(15, 23, 42, .08);

    transition:
        scale .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.component::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        radial-gradient(circle at top right,
            rgba(124, 92, 255, .12),
            transparent 70%);

    opacity: 0;

    transition: .35s;

}

.component:hover {

    scale: 1.03;

    border-color: rgba(124, 92, 255, .18);

    box-shadow:
        0 30px 80px rgba(15, 23, 42, .12);

}

.component:hover::before {

    opacity: 1;

}

.component i {

    position: relative;

    z-index: 2;

    width: 60px;

    height: 60px;

    border-radius: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 18px;

    background: rgba(124, 92, 255, .10);

    color: var(--brand);

    font-size: 22px;

}

.component h4 {

    position: relative;

    z-index: 2;

    margin-bottom: 12px;

}

.component p {

    position: relative;

    z-index: 2;

    margin: 0;

    color: var(--muted);

    line-height: 1.8;

}


/*======================================*
Component Positions
*=======================================*/

.component-1 {

    left: 50%;

    top: 20px;

    margin-left: -135px;

}

.component-2 {

    right: 30px;

    top: 170px;

}

.component-3 {

    right: 30px;

    bottom: 170px;

}

.component-4 {

    left: 50%;

    bottom: 20px;

    margin-left: -135px;

}

.component-5 {

    left: 30px;

    bottom: 170px;

}

.component-6 {

    left: 30px;

    top: 170px;

}


/*======================================*
Animation
*=======================================*/

@keyframes corePulse {

    0% {

        opacity: .35;

        scale: 1;

    }

    50% {

        opacity: 1;

        scale: 1.08;

    }

    100% {

        opacity: .35;

        scale: 1;

    }

}

/*======================================
Deployment
=======================================*/

.deployment {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

.deployment::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    width: 700px;

    height: 700px;

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

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(124, 92, 255, .05),
            transparent 72%);

    pointer-events: none;

}


/*======================================
Deployment Flow
=======================================*/

.deployment-flow {

    margin-top: 90px;

    display: grid;

    grid-template-columns: 1fr 90px 1fr 90px 1fr;

    align-items: center;

    gap: 20px;

}


/*======================================
Deployment Card
=======================================*/

.deployment-card {

    position: relative;

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 28px;

    padding: 40px 35px;

    text-align: center;

    transition: var(--transition);

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

    overflow: hidden;

}

.deployment-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: var(--brand);

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--transition);

}

.deployment-card:hover {

    transform: translateY(-10px);

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

}

.deployment-card:hover::before {

    transform: scaleX(1);

}


/*======================================
Featured Card
=======================================*/

.deployment-card.featured {

    transform: scale(1.06);

    border-color: rgba(124, 92, 255, .25);

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

}

.deployment-card.featured:hover {

    transform: scale(1.08) translateY(-10px);

}


/*======================================
Icon
=======================================*/

.deployment-icon {

    width: 78px;

    height: 78px;

    margin: 0 auto 28px;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(124, 92, 255, .08);

    color: var(--brand);

    font-size: 28px;

    transition: var(--transition);

}

.deployment-card:hover .deployment-icon {

    background: var(--brand);

    color: #fff;

    transform: rotate(-8deg);

}


/*======================================
Typography
=======================================*/

.deployment-card h3 {

    margin-bottom: 16px;

}

.deployment-card p {

    color: var(--muted);

    line-height: 1.9;

}


/*======================================
Arrow
=======================================*/

.deployment-arrow {

    position: relative;

    height: 2px;

    background: rgba(124, 92, 255, .18);

}

.deployment-arrow span {

    position: absolute;

    right: -2px;

    top: 50%;

    transform: translateY(-50%);

    width: 14px;

    height: 14px;

    border-top: 2px solid var(--brand);

    border-right: 2px solid var(--brand);

    transform:
        translateY(-50%) rotate(45deg);

}

.deployment-arrow::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 0;

    height: 100%;

    background: var(--brand);

    animation: deploymentFlow 4s linear infinite;

}


/*======================================
Bottom Note
=======================================*/

.deployment-note {

    max-width: 850px;

    margin: 80px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding: 28px 34px;

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 22px;

    text-align: center;

}

.deployment-note i {

    font-size: 22px;

    color: var(--brand);

}

.deployment-note p {

    color: var(--muted);

    line-height: 1.8;

}


/*======================================
Reveal
=======================================*/

.deployment-card,

.deployment-arrow,

.deployment-note {

    opacity: 0;

    transform: translateY(40px);

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

}

.deployment-card.show,

.deployment-arrow.show,

.deployment-note.show {

    opacity: 1;

    transform: translateY(0);

}


/*======================================
Animation
=======================================*/

@keyframes deploymentFlow {

    0% {

        width: 0;

    }

    100% {

        width: 100%;

    }

}


/*======================================
Responsive
=======================================*/

@media(max-width:992px) {

    .deployment {

        padding: 110px 0;

    }

    .deployment-flow {

        grid-template-columns: 1fr;

        gap: 28px;

    }

    .deployment-arrow {

        width: 2px;

        height: 60px;

        margin: 0 auto;

    }

    .deployment-arrow span {

        left: 50%;

        top: auto;

        bottom: -2px;

        transform:
            translateX(-50%) rotate(135deg);

    }

    .deployment-arrow::before {

        width: 100%;

        height: 0;

        animation: deploymentVertical 4s linear infinite;

    }

    .deployment-card.featured {

        transform: none;

    }

}

@media(max-width:768px) {

    .deployment {

        padding: 90px 0;

    }

    .deployment-card {

        padding: 30px;

    }

    .deployment-note {

        flex-direction: column;

        text-align: center;

    }

}

@keyframes deploymentVertical {

    from {

        height: 0;

    }

    to {

        height: 100%;

    }

}

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

.platform-cta {

    position: relative;

    overflow: hidden;

    padding: 170px 0;

    background: #111114;

    isolation: isolate;

}


/*======================================
Background Effects
=======================================*/

.platform-cta::before {

    content: "";

    position: absolute;

    top: -220px;

    left: 50%;

    transform: translateX(-50%);

    width: 850px;

    height: 850px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .18),

            transparent 72%);

    filter: blur(60px);

    z-index: -2;

}

.platform-cta::after {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);

    background-size: 70px 70px;

    mask-image: radial-gradient(circle at center, #000 45%, transparent 100%);

    z-index: -1;

}

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

.platform-cta {

    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background: transparent;

}

.platform-cta-content {

    position: relative;

    max-width: 1100px;

    margin: auto;

    padding: 80px 70px;

    text-align: center;

    border-radius: 36px;

    overflow: hidden;

    background:

        linear-gradient(135deg,

            #17171d 0%,

            #1d1c28 100%);

    border: 1px solid rgba(255, 255, 255, .08);

    box-shadow:

        0 40px 100px rgba(0, 0, 0, .18);

}


/*======================================
Background Decorations
=======================================*/

.platform-cta-content::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -220px;

    top: -220px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .22),

            transparent 72%);

}

.platform-cta-content::after {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(255, 255, 255, .04) 1px,

            transparent 1px),

        linear-gradient(90deg,

            rgba(255, 255, 255, .04) 1px,

            transparent 1px);

    background-size: 42px 42px;

    mask-image:

        radial-gradient(circle, #000 45%, transparent 95%);

    opacity: .45;

}


/*======================================
Floating AI Circles
=======================================*/

.platform-cta-content .circle {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, .08);

}

.circle-1 {

    width: 150px;

    height: 150px;

    left: -70px;

    bottom: -70px;

}

.circle-2 {

    width: 90px;

    height: 90px;

    right: 140px;

    top: 45px;

}

.circle-3 {

    width: 40px;

    height: 40px;

    right: 90px;

    bottom: 70px;

    background: rgba(124, 92, 255, .18);

    border: none;

}


/*======================================
Content
=======================================*/

.platform-cta-content>* {

    position: relative;

    z-index: 2;

}

.cta-overline {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    color: rgba(255, 255, 255, .75);

    font-size: .82rem;

    text-transform: uppercase;

    letter-spacing: .18em;

    margin-bottom: 24px;

}

.cta-overline::before {

    content: "";

    width: 40px;

    height: 1px;

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

}

.platform-cta h2 {

    color: #fff;

    max-width: 760px;

    margin: 0 auto 22px;

}

.platform-cta p {

    max-width: 680px;

    margin: auto;

    color: rgba(255, 255, 255, .72);

    line-height: 1.9;

}

.platform-cta-actions {

    display: flex;

    justify-content: center;

    gap: 18px;

    margin-top: 42px;

}


/*======================================
Buttons
=======================================*/

.platform-cta-actions {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin-top: 50px;

}

.platform-cta .contact-btn {

    background: var(--brand);

    color: #fff;

}

.platform-cta .contact-btn:hover {

    transform: translateY(-4px);

}

.platform-cta .hero-link {

    color: #fff;

}

.platform-cta .hero-link:hover {

    color: var(--brand);

}


/*======================================
Reveal
=======================================*/

.platform-cta-content {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.platform-cta-content.show {

    opacity: 1;

    transform: translateY(0);

}


/*======================================
Responsive
=======================================*/

@media(max-width:768px) {

    .platform-cta {

        padding: 120px 0;

    }

    .platform-cta-actions {

        flex-direction: column;

        align-items: stretch;

    }

    .platform-cta-actions a {

        justify-content: center;

    }

}

.platform-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(500px circle at var(--glow-x, 50%) var(--glow-y, 50%),

            rgba(124, 92, 255, .18),

            transparent 70%);

    transition: background .15s linear;

    z-index: -1;

}

/*======================================
Solutions Hero
=======================================*/

.solutions-hero {

    position: relative;

    overflow: hidden;

    padding: 170px 0 120px;

}

.solutions-hero::before {

    content: "";

    position: absolute;

    top: -180px;

    left: -180px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .05),

            transparent 72%);

    pointer-events: none;

}

.solutions-hero::after {

    content: "";

    position: absolute;

    right: -250px;

    bottom: -250px;

    width: 700px;

    height: 700px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(170, 130, 255, .06),

            transparent 72%);

    pointer-events: none;

}

.solutions-hero .container {

    position: relative;

    z-index: 2;

}


/*======================================
Layout
=======================================*/

.solutions-wrapper {

    display: grid;

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

    gap: 80px;

    align-items: center;

}


/*======================================
Content
=======================================*/

.solutions-content {

    max-width: 650px;

}

.solutions-content h1 {

    margin: 28px 0;

}

.solutions-content .hero-description {

    color: var(--muted);

    font-size: 1.08rem;

    line-height: 1.9;

    max-width: 580px;

}

.solutions-content .hero-actions {

    margin-top: 42px;

}


/*======================================
Hero Image
=======================================*/

.solutions-image {

    position: relative;

}

.solutions-image img {

    display: block;

    width: 100%;

    height: auto;

    transition: transform .9s ease;

}

.solutions-image:hover img {

    transform: translateY(-10px) scale(1.02);

}


/*======================================
Floating Decorations
=======================================*/

.solutions-image::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    top: -30px;

    right: -20px;

    border-radius: 50%;

    border: 1px solid rgba(124, 92, 255, .15);

}

.solutions-image::after {

    content: "";

    position: absolute;

    width: 70px;

    height: 70px;

    bottom: 40px;

    left: -20px;

    border-radius: 20px;

    background: rgba(124, 92, 255, .08);

    backdrop-filter: blur(10px);

}


/*======================================
Reveal
=======================================*/

.solutions-content,

.solutions-image {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.solutions-content.show,

.solutions-image.show {

    opacity: 1;

    transform: translateY(0);

}


/*======================================
Responsive
=======================================*/

@media(max-width:992px) {

    .solutions-hero {

        padding: 150px 0 100px;

    }

    .solutions-wrapper {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .solutions-content {

        max-width: 100%;

        text-align: center;

        margin: auto;

    }

    .solutions-content .hero-description {

        margin: auto;

    }

    .solutions-content .hero-actions {

        justify-content: center;

    }

}

@media(max-width:768px) {

    .solutions-hero {

        padding: 135px 0 90px;

    }

    .solutions-content h1 {

        font-size: 3rem;

    }

    .solutions-content .hero-description {

        font-size: 1rem;

    }

}

@media(max-width:576px) {

    .solutions-content h1 {

        font-size: 2.4rem;

    }

}

/*======================================
Solutions Overview
=======================================*/

.solutions-overview {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

.solutions-overview::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    top: -260px;

    right: -260px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .05),

            transparent 72%);

}


/*======================================
Solution Block
=======================================*/

.solution-block {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

    margin-top: 110px;

}

.solution-block.reverse .solution-image {

    order: 2;

}

.solution-block.reverse .solution-content {

    order: 1;

}


/*======================================
Image
=======================================*/

.solution-image {

    position: relative;

}

.solution-image img {

    width: 100%;

    display: block;

    transition: transform .8s ease;

}

.solution-image:hover img {

    transform: scale(1.03);

}

.solution-image::before {

    content: "";

    position: absolute;

    inset: 8%;

    border: 1px solid rgba(124, 92, 255, .12);

    border-radius: 26px;

    z-index: -1;

}


/*======================================
Content
=======================================*/

.solution-content {

    max-width: 560px;

}


/*======================================
Number
=======================================*/

.solution-number {

    font-size: 5rem;

    font-weight: 700;

    color: rgba(124, 92, 255, .12);

    line-height: 1;

    margin-bottom: 18px;

}


/*======================================
Typography
=======================================*/

.solution-content h3 {

    margin-bottom: 20px;

}

.solution-content p {

    color: var(--muted);

    line-height: 1.9;

    margin-bottom: 28px;

}


/*======================================
List
=======================================*/

.solution-content ul {

    list-style: none;

    display: grid;

    gap: 18px;

}

.solution-content li {

    display: flex;

    align-items: center;

    gap: 14px;

    color: var(--heading);

    font-weight: 500;

}

.solution-content li::before {

    content: "";

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--brand);

    flex-shrink: 0;

}


/*======================================
Reveal
=======================================*/

.solution-image,

.solution-content {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.solution-image.show,

.solution-content.show {

    opacity: 1;

    transform: none;

}


/*======================================
Responsive
=======================================*/

@media(max-width:992px) {

    .solution-block,

    .solution-block.reverse {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .solution-block.reverse .solution-image,

    .solution-block.reverse .solution-content {

        order: unset;

    }

    .solution-content {

        max-width: 100%;

    }

}

@media(max-width:768px) {

    .solutions-overview {

        padding: 90px 0;

    }

    .solution-block {

        margin-top: 80px;

    }

    .solution-number {

        font-size: 3.5rem;

    }

}

/*======================================
Business Challenges
=======================================*/

.business-challenges {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

    background:
        radial-gradient(circle at top,
            rgba(124, 92, 255, .05),
            transparent 55%);

}

.business-challenges::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 850px;

    height: 850px;

    border-radius: 50%;

    background:

        radial-gradient(circle,
            rgba(124, 92, 255, .04),
            transparent 72%);

    pointer-events: none;

}


/*======================================
Challenge Grid
=======================================*/

.challenge-grid {

    position: relative;

    display: grid;

    grid-template-columns: 320px 1fr 320px;

    grid-template-rows: auto auto auto;

    column-gap: 120px;

    row-gap: 36px;

    align-items: center;

    justify-content: center;

    max-width: 1200px;

    margin: 90px auto 0;

}


/*======================================
SVG Network
=======================================*/

.challenge-network {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 0;

}


/*======================================
Center Hub
=======================================*/

.challenge-center {

    position: absolute;

    left: 50%;

    top: 50%;

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

    z-index: 5;

}


/*======================================
Card Positions
=======================================*/

.top-left {

    grid-column: 1;

    grid-row: 1;

}

.middle-left {

    grid-column: 1;

    grid-row: 2;

}

.bottom-left {

    grid-column: 1;

    grid-row: 3;

}

.top-right {

    grid-column: 3;

    grid-row: 1;

}

.middle-right {

    grid-column: 3;

    grid-row: 2;

}

.bottom-right {

    grid-column: 3;

    grid-row: 3;

}


/*======================================
Challenge Card Base
=======================================*/

.challenge-card {

    position: relative;

    width: 100%;

    min-height: 220px;

    z-index: 2;

}


/*======================================
Card Content
=======================================*/

.challenge-card h3 {

    margin: 18px 0 14px;

}

.challenge-card p {

    margin: 0;

    line-height: 1.8;

}


/*======================================
Center Column Spacer
=======================================*/

.challenge-grid::before {

    content: "";

    grid-column: 2;

    grid-row: 1 / span 3;

    width: 340px;

    height: 100%;

}


/*======================================
Responsive
=======================================*/

@media(max-width:1150px) {

    .challenge-grid {

        grid-template-columns: 1fr;

        row-gap: 28px;

    }

    .challenge-grid::before {

        display: none;

    }

    .challenge-center {

        position: relative;

        left: auto;

        top: auto;

        transform: none;

        order: -1;

        margin: 0 auto 30px;

    }

    .challenge-network {

        display: none;

    }

    .top-left,
    .middle-left,
    .bottom-left,
    .top-right,
    .middle-right,
    .bottom-right {

        grid-column: auto;

        grid-row: auto;

    }

}


@media(max-width:768px) {

    .business-challenges {

        padding: 90px 0;

    }

}

/*======================================
Glass Challenge Cards
=======================================*/

.challenge-card {

    position: relative;

    padding: 34px;

    border-radius: 28px;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .72),
            rgba(255, 255, 255, .45));

    border: 1px solid rgba(255, 255, 255, .65);

    backdrop-filter: blur(22px);

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

    box-shadow:
        0 25px 60px rgba(18, 28, 45, .08),
        inset 0 1px rgba(255, 255, 255, .8);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease,
        background .45s ease;

}


/*======================================
Glass Reflection
=======================================*/

.challenge-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(120deg,

            transparent 20%,

            rgba(255, 255, 255, .45),

            transparent 80%);

    transform: translateX(-130%);

    transition: 1s;

}


/*======================================
Gradient Border
=======================================*/

.challenge-card::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background:

        linear-gradient(135deg,

            rgba(124, 92, 255, .5),

            transparent,

            rgba(124, 92, 255, .18));

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: 0;

    transition: .4s;

}


/*======================================
Card Hover
=======================================*/

.challenge-card:hover {

    transform:

        translateY(-12px);

    background:

        linear-gradient(145deg,

            rgba(255, 255, 255, .82),

            rgba(255, 255, 255, .62));

    border-color:

        rgba(124, 92, 255, .25);

    box-shadow:

        0 30px 70px rgba(124, 92, 255, .12);

}

.challenge-card:hover::before {

    transform: translateX(130%);

}

.challenge-card:hover::after {

    opacity: 1;

}


/*======================================
Icons
=======================================*/

.challenge-icon {

    width: 68px;

    height: 68px;

    border-radius: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 24px;

    color: var(--brand);

    background:

        rgba(255, 255, 255, .55);

    border: 1px solid rgba(255, 255, 255, .75);

    backdrop-filter: blur(14px);

    box-shadow:

        0 14px 35px rgba(124, 92, 255, .08);

    transition: .4s;

}

.challenge-card:hover .challenge-icon {

    background: var(--brand);

    color: #fff;

    transform:

        rotate(-8deg) scale(1.08);

}


/*======================================
Center Hub
=======================================*/

.center-circle {

    position: relative;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    text-align: center;

    color: #fff;

    background:

        linear-gradient(145deg,

            #23233a,

            #171722);

    border: 1px solid rgba(255, 255, 255, .08);

    box-shadow:

        0 45px 90px rgba(0, 0, 0, .18);

}


/*======================================
Outer Ring
=======================================*/

.center-circle::before {

    content: "";

    position: absolute;

    inset: -16px;

    border-radius: 50%;

    border: 1px dashed rgba(124, 92, 255, .3);

    animation: hubRotate 22s linear infinite;

}


/*======================================
Glow
=======================================*/

.center-circle::after {

    content: "";

    position: absolute;

    width: 170%;

    height: 170%;

    background:

        conic-gradient(transparent,

            rgba(124, 92, 255, .28),

            transparent);

    animation: hubGlow 8s linear infinite;

}

.center-circle>* {

    position: relative;

    z-index: 2;

}

.center-circle i {

    font-size: 46px;

    color: #ad8dff;

    margin-bottom: 18px;

}

.center-circle h3 {

    color: #fff;

    margin-bottom: 8px;

}

.center-circle span {

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

}


/*======================================
Pulse Ring
=======================================*/

.pulse-ring {

    position: absolute;

    inset: -10px;

    border-radius: 50%;

    border: 2px solid rgba(124, 92, 255, .2);

    animation: pulseRing 3s infinite;

}


/*======================================
Flow Particles
=======================================*/

.flow {

    position: absolute;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #a88cff;

    box-shadow:

        0 0 18px rgba(124, 92, 255, .7);

}


/*======================================
Orbit Nodes
=======================================*/

.orbit {

    position: absolute;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #fff;

    box-shadow:

        0 0 18px rgba(124, 92, 255, .5);

}


/*======================================
Animations
=======================================*/

@keyframes hubRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes hubGlow {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes pulseRing {

    0% {

        transform: scale(.92);

        opacity: 1;

    }

    100% {

        transform: scale(1.18);

        opacity: 0;

    }

}

/*======================================
Implementation Process
=======================================*/

.implementation-process {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

.implementation-process::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    left: 50%;

    top: 50%;

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

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .05),

            transparent 72%);

    pointer-events: none;

}


/*======================================
Process Track
=======================================*/

.process-track {

    position: relative;

    margin-top: 90px;

    display: grid;

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

    gap: 40px;

}


/*======================================
Connection Line
=======================================*/

.process-line {

    position: absolute;

    top: 42px;

    left: 10%;

    width: 80%;

    height: 2px;

    background: rgba(124, 92, 255, .12);

}

.process-line::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 0;

    height: 100%;

    background: var(--brand);

    animation: processFlow 6s linear infinite;

}


/*======================================
Step
=======================================*/

.process-step {

    position: relative;

    padding-top: 80px;

    transition: var(--transition);

}

.process-step:hover {

    transform: translateY(-8px);

}


/*======================================
Step Number
=======================================*/

.step-number {

    position: absolute;

    top: 0;

    left: 0;

    width: 84px;

    height: 84px;

    border-radius: 50%;

    background: var(--surface);

    border: 2px solid var(--line);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--brand);

    transition: var(--transition);

    z-index: 2;

}

.process-step.active .step-number,

.process-step:hover .step-number {

    background: var(--brand);

    border-color: var(--brand);

    color: #fff;

    box-shadow: 0 18px 40px rgba(124, 92, 255, .25);

}


/*======================================
Typography
=======================================*/

.process-step h3 {

    margin-bottom: 18px;

}

.process-step p {

    color: var(--muted);

    line-height: 1.9;

}


/*======================================
Reveal
=======================================*/

.process-step {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.process-step.show {

    opacity: 1;

    transform: none;

}


/*======================================
Animation
=======================================*/

@keyframes processFlow {

    from {

        width: 0;

    }

    to {

        width: 100%;

    }

}


/*======================================
Responsive
=======================================*/

@media(max-width:992px) {

    .process-track {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .process-line {

        left: 42px;

        top: 0;

        width: 2px;

        height: 100%;

    }

    .process-line::before {

        width: 100%;

        height: 0;

        animation: processVertical 6s linear infinite;

    }

    .process-step {

        padding-top: 0;

        padding-left: 120px;

        min-height: 90px;

    }

    .step-number {

        left: 0;

        top: 0;

    }

}

@media(max-width:768px) {

    .implementation-process {

        padding: 90px 0;

    }

}

@keyframes processVertical {

    from {

        height: 0;

    }

    to {

        height: 100%;

    }

}

/*======================================
Industries Hero
=======================================*/

.industries-hero {

    position: relative;

    overflow: hidden;

    padding: 180px 0 120px;

    background:
        linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);

}


/*======================================
Background Grid
=======================================*/

.hero-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(15, 23, 42, .04) 1px, transparent 1px),

        linear-gradient(90deg, rgba(15, 23, 42, .04) 1px, transparent 1px);

    background-size: 60px 60px;

    mask-image: radial-gradient(circle at center, #000 45%, transparent 100%);

    opacity: .55;

    pointer-events: none;

}


/*======================================
Floating Glow
=======================================*/

.industries-hero::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    right: -180px;

    top: -180px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .08),

            transparent 70%);

    pointer-events: none;

}

.industries-hero::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    left: -180px;

    bottom: -220px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .05),

            transparent 72%);

}


/*======================================
Layout
=======================================*/

.industries-hero-wrapper {

    display: grid;

    grid-template-columns: 1fr 1.05fr;

    align-items: center;

    gap: 80px;

    position: relative;

    z-index: 2;

}


/*======================================
Content
=======================================*/

.industries-content {

    max-width: 620px;

}


/*======================================
Kicker
=======================================*/

.hero-kicker {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 28px;

}

.hero-kicker span {

    width: 54px;

    height: 2px;

    background: var(--brand);

    border-radius: 20px;

}

.hero-kicker p {

    margin: 0;

    font-size: .82rem;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: var(--brand);

    font-weight: 600;

}


/*======================================
Typography
=======================================*/

.industries-content h1 {

    margin-bottom: 28px;

    max-width: 620px;

}

.industries-content p {

    max-width: 560px;

    color: var(--muted);

    line-height: 1.9;

    margin-bottom: 42px;

}


/*======================================
Actions
=======================================*/

.industries-content .hero-actions {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

}


/*======================================
Visual
=======================================*/

.industries-visual {

    position: relative;

}

.industries-visual img {

    width: 100%;

    display: block;

    animation: industryFloat 8s ease-in-out infinite;

    user-select: none;

}


/*======================================
Floating Cards
=======================================*/

.industries-visual::before {

    content: "Healthcare";

    position: absolute;

    top: 10%;

    left: -20px;

    padding: 12px 18px;

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

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .8);

    border-radius: 50px;

    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);

    color: #394150;

    font-size: .82rem;

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

}

.industries-visual::after {

    content: "Finance";

    position: absolute;

    bottom: 12%;

    right: -20px;

    padding: 12px 18px;

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

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .8);

    border-radius: 50px;

    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);

    font-size: .82rem;

    color: #394150;

    animation: tagFloat 6s ease-in-out infinite reverse;

}


/*======================================
Animations
=======================================*/

@keyframes industryFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-14px);

    }

}

@keyframes tagFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}


/*======================================
Responsive
=======================================*/

@media(max-width:1100px) {

    .industries-hero {

        padding: 150px 0 90px;

    }

    .industries-hero-wrapper {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .industries-content {

        max-width: 100%;

        text-align: center;

        margin: auto;

    }

    .hero-kicker {

        justify-content: center;

    }

    .industries-content p {

        margin-inline: auto;

    }

    .industries-content .hero-actions {

        justify-content: center;

    }

}

@media(max-width:768px) {

    .industries-hero {

        padding: 130px 0 80px;

    }

    .industries-visual::before,

    .industries-visual::after {

        display: none;

    }

}


/*======================================
Industry Directory
=======================================*/

.industry-directory {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fbfbfd 100%);

}

.industry-directory::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    right: -280px;

    top: -220px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .06),

            transparent 72%);

    pointer-events: none;

}

.industry-directory::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    left: -220px;

    bottom: -220px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .04),

            transparent 72%);

    pointer-events: none;

}


/*======================================
Heading
=======================================*/

.industry-directory .section-heading {

    max-width: 760px;

    margin: auto;

    text-align: center;

}

.industry-directory .section-heading h2 {

    margin: 24px 0;

}

.industry-directory .section-heading p {

    max-width: 640px;

    margin: auto;

}


/*======================================
Grid
=======================================*/

.industry-grid {

    position: relative;

    display: grid;

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

    gap: 34px;

    margin-top: 90px;

}


/*======================================
Industry Card
=======================================*/

.industry-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 300px;

    padding: 38px;

    border-radius: 28px;

    background: #fff;

    border: 1px solid #eceff4;

    overflow: hidden;

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease,

        background .45s ease;

}


/*======================================
Glass Highlight
=======================================*/

.industry-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(135deg,

            rgba(255, 255, 255, .45),

            transparent 40%,

            rgba(124, 92, 255, .03));

    opacity: 0;

    transition: .45s;

}


/*======================================
Accent Border
=======================================*/

.industry-card::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 4px;

    background: var(--brand);

    transition: .45s ease;

}


/*======================================
Number
=======================================*/

.industry-number {

    font-size: 3rem;

    font-weight: 700;

    line-height: 1;

    color: #d8dceb;

    margin-bottom: 28px;

    transition: .45s;

}


/*======================================
Content
=======================================*/

.industry-content {

    flex: 1;

}

.industry-content h3 {

    margin-bottom: 16px;

}

.industry-content p {

    margin: 0;

    color: var(--muted);

    line-height: 1.85;

}


/*======================================
Bottom Link
=======================================*/

.industry-card a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 36px;

    color: var(--brand);

    font-weight: 600;

    width: max-content;

    transition: .35s;

}

.industry-card a i {

    transition: .35s;

}

/*======================================
Hover Effects
=======================================*/

.industry-card:hover {

    transform: translateY(-12px);

    background: #ffffff;

    border-color: rgba(124, 92, 255, .18);

    box-shadow:

        0 28px 70px rgba(20, 28, 45, .08),

        0 10px 24px rgba(124, 92, 255, .08);

}

.industry-card:hover::before {

    opacity: 1;

}

.industry-card:hover::after {

    width: 100%;

}


/*======================================
Number Hover
=======================================*/

.industry-card:hover .industry-number {

    color: var(--brand);

    transform: translateY(-4px);

}


/*======================================
Heading Hover
=======================================*/

.industry-card h3 {

    transition: .35s;

}

.industry-card:hover h3 {

    color: var(--brand);

}


/*======================================
Paragraph
=======================================*/

.industry-card p {

    transition: .35s;

}

.industry-card:hover p {

    color: #465162;

}


/*======================================
Link
=======================================*/

.industry-card:hover a {

    gap: 18px;

}

.industry-card:hover a i {

    transform: translateX(6px);

}


/*======================================
Card Shine
=======================================*/

.industry-card .shine {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

}

.industry-card .shine::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 220%;

    left: -220px;

    top: -60%;

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .55),

            transparent);

    transform: rotate(18deg);

    transition: 1.1s;

}

.industry-card:hover .shine::before {

    left: 130%;

}


/*======================================
Floating Dot
=======================================*/

.industry-card .corner-dot {

    position: absolute;

    right: 22px;

    top: 22px;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #e7e9ef;

    transition: .35s;

}

.industry-card:hover .corner-dot {

    background: var(--brand);

    box-shadow:

        0 0 18px rgba(124, 92, 255, .45);

}


/*======================================
Subtle Border Glow
=======================================*/

.industry-card {

    isolation: isolate;

}

.industry-card:hover {

    background:

        linear-gradient(180deg,

            #ffffff,

            #fcfbff);

}


/*======================================
Responsive
=======================================*/

@media(max-width:1100px) {

    .industry-grid {

        grid-template-columns: 1fr;

        gap: 26px;

    }

}


@media(max-width:768px) {

    .industry-directory {

        padding: 90px 0;

    }

    .industry-grid {

        margin-top: 60px;

        gap: 20px;

    }

    .industry-card {

        min-height: auto;

        padding: 30px;

        border-radius: 22px;

    }

    .industry-number {

        font-size: 2.4rem;

        margin-bottom: 20px;

    }

    .industry-content h3 {

        margin-bottom: 12px;

    }

    .industry-card a {

        margin-top: 26px;

    }

}


@media(max-width:520px) {

    .industry-card {

        padding: 24px;

    }

    .industry-number {

        font-size: 2rem;

    }

}


/*======================================
Resource Library
=======================================*/

.resource-library {

    position: relative;

    padding: 140px 0;

    background:
        linear-gradient(180deg, #fbfbfd 0%, #ffffff 100%);

    overflow: hidden;

}

.resource-library::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    left: -280px;

    top: -260px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .05),

            transparent 72%);

    pointer-events: none;

}

.resource-library::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -220px;

    bottom: -220px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .05),

            transparent 72%);

    pointer-events: none;

}


/*======================================
Heading
=======================================*/

.resource-library .section-heading {

    max-width: 760px;

    margin: auto;

    text-align: center;

}

.resource-library .section-heading p {

    max-width: 650px;

    margin: 22px auto 0;

}


/*======================================
Filter
=======================================*/

.resource-filter {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin: 70px 0 60px;

}

.filter-btn {

    padding: 14px 24px;

    border: none;

    border-radius: 50px;

    background: #fff;

    border: 1px solid var(--line);

    color: var(--muted);

    font-weight: 600;

    cursor: pointer;

    transition: .35s;

}

.filter-btn:hover,

.filter-btn.active {

    background: var(--brand);

    color: #fff;

    border-color: var(--brand);

    box-shadow:

        0 15px 35px rgba(124, 92, 255, .18);

}


/*======================================
Grid
=======================================*/

.resource-grid {

    display: grid;

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

    gap: 30px;

}


/*======================================
Featured Card
=======================================*/

.resource-card.featured {

    grid-column: span 2;

}


/*======================================
Cards
=======================================*/

.resource-card {

    position: relative;

    display: flex;

    flex-direction: column;

    padding: 36px;

    border-radius: 28px;

    background: #fff;

    border: 1px solid #eceff4;

    transition: .4s;

    overflow: hidden;

    box-shadow:

        0 18px 45px rgba(15, 23, 42, .05);

}

.resource-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(135deg,

            rgba(124, 92, 255, .05),

            transparent 50%);

    opacity: 0;

    transition: .4s;

}

.resource-card:hover {

    transform: translateY(-10px);

    border-color: rgba(124, 92, 255, .16);

    box-shadow:

        0 30px 70px rgba(15, 23, 42, .08);

}

.resource-card:hover::before {

    opacity: 1;

}


/*======================================
Tag
=======================================*/

.resource-tag {

    display: inline-flex;

    align-items: center;

    width: max-content;

    padding: 8px 18px;

    border-radius: 40px;

    background: rgba(124, 92, 255, .08);

    color: var(--brand);

    font-size: .78rem;

    font-weight: 700;

    margin-bottom: 24px;

}


/*======================================
Content
=======================================*/

.resource-card h3 {

    margin-bottom: 18px;

}

.resource-card p {

    color: var(--muted);

    line-height: 1.85;

    margin-bottom: 32px;

}


/*======================================
Meta
=======================================*/

.resource-meta {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

    margin-top: auto;

    margin-bottom: 24px;

}

.resource-meta span {

    padding: 8px 16px;

    border-radius: 30px;

    background: #f7f8fb;

    color: #687281;

    font-size: .82rem;

}


/*======================================
Link
=======================================*/

.resource-card a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--brand);

    font-weight: 600;

    width: max-content;

    transition: .35s;

}

.resource-card a i {

    transition: .35s;

}

.resource-card:hover a {

    gap: 18px;

}

.resource-card:hover a i {

    transform: translateX(6px);

}


/*======================================
Responsive
=======================================*/

@media(max-width:1100px) {

    .resource-grid {

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

    }

    .resource-card.featured {

        grid-column: span 2;

    }

}

@media(max-width:768px) {

    .resource-library {

        padding: 90px 0;

    }

    .resource-grid {

        grid-template-columns: 1fr;

    }

    .resource-card.featured {

        grid-column: auto;

    }

    .resource-card {

        padding: 30px;

    }

    .resource-filter {

        margin: 50px 0;

    }

}


/*======================================*
*About Hero*
*=======================================*/

.about-hero {

    position: relative;

    padding: 170px 0 140px;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fbfbfd 55%,
            #ffffff 100%);

}

.about-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(rgba(124, 92, 255, .045) 1px, transparent 1px),

        linear-gradient(90deg, rgba(124, 92, 255, .045) 1px, transparent 1px);

    background-size: 72px 72px;

    mask-image: radial-gradient(circle, #000 55%, transparent 100%);

    opacity: .65;

    pointer-events: none;

}

.about-hero::after {

    content: "";

    position: absolute;

    width: 680px;

    height: 680px;

    right: -240px;

    top: -260px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .08),

            transparent 70%);

    filter: blur(20px);

    pointer-events: none;

}


/*======================================*
*Hero Wrapper*
*=======================================*/

.about-hero-wrapper {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 90px;

    align-items: center;

}


/*======================================*
*Content*
*=======================================*/

.about-content {

    max-width: 620px;

}

.about-content h1 {

    margin: 26px 0;

    max-width: 650px;

}

.about-content p {

    max-width: 560px;

    margin-bottom: 42px;

}


/*======================================*
*Kicker*
*=======================================*/

.hero-kicker {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 8px;

}

.hero-kicker span {

    width: 42px;

    height: 2px;

    border-radius: 10px;

    background: var(--brand);

}

.hero-kicker p {

    margin: 0;

    font-size: .82rem;

    letter-spacing: .22em;

    text-transform: uppercase;

    color: var(--brand);

    font-weight: 700;

}


/*======================================*
*Buttons*
*=======================================*/

.hero-actions {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

    align-items: center;

}

.hero-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--heading);

    font-weight: 600;

    transition: .35s;

}

.hero-link i {

    transition: .35s;

}

.hero-link:hover {

    color: var(--brand);

    gap: 18px;

}

.hero-link:hover i {

    transform: translateX(5px);

}

/*======================================*
*About Values Visual*
*=======================================*/

.about-visual {

    display: flex;

    justify-content: center;

    align-items: center;

}

.about-values-system {

    position: relative;

    width: 560px;

    height: 560px;

}


/*======================================*
*Rings*
*=======================================*/

.about-ring {

    position: absolute;

    left: 50%;

    top: 50%;

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

    border-radius: 50%;

    pointer-events: none;

}

.about-ring-one {

    width: 190px;

    height: 190px;

    border: 1px solid rgba(124, 92, 255, .20);

}

.about-ring-two {

    width: 330px;

    height: 330px;

    border: 1px dashed rgba(124, 92, 255, .14);

}

.about-ring-three {

    width: 500px;

    height: 500px;

    border: 1px solid rgba(124, 92, 255, .08);

}


/*======================================*
*Center Core*
*=======================================*/

.about-core {

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:

        linear-gradient(180deg,

            rgba(255, 255, 255, .98),

            rgba(248, 249, 252, .92));

    backdrop-filter: blur(22px);

    border: 1px solid rgba(255, 255, 255, .7);

    box-shadow:

        0 30px 80px rgba(15, 23, 42, .10),

        inset 0 1px rgba(255, 255, 255, .9);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    z-index: 20;

}

.about-core::before {

    content: "";

    position: absolute;

    inset: -10px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .15),

            transparent 72%);

    z-index: -1;

}

.about-core-icon {

    width: 68px;

    height: 68px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 16px;

    background:

        linear-gradient(135deg,

            rgba(124, 92, 255, .10),

            rgba(124, 92, 255, .03));

}

.about-core-icon i {

    color: var(--brand);

    font-size: 1.9rem;

}

.about-core h3 {

    margin: 0;

}

.about-core span {

    margin-top: 8px;

    font-size: .82rem;

    color: var(--muted);

}


/*======================================*
*Value Cards*
*=======================================*/

.about-value {

    position: absolute;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 135px;

    padding: 15px 24px;

    border-radius: 60px;

    background:

        rgba(255, 255, 255, .72);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .85);

    box-shadow:

        0 18px 45px rgba(15, 23, 42, .08);

    font-weight: 600;

    color: #182330;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        color .35s ease;

    z-index: 15;

}

.about-value:hover {

    transform: translateY(-8px);

    color: var(--brand);

    box-shadow:

        0 28px 55px rgba(15, 23, 42, .14);

}


/*======================================*
*Positions*
*=======================================*/

.about-value-top {

    left: 50%;

    top: -4px;

    transform: translateX(-50%);

}

.about-value-right {

    right: -10px;

    top: 50%;

    transform: translateY(-50%);

}

.about-value-bottom {

    left: 50%;

    bottom: -4px;

    transform: translateX(-50%);

}

.about-value-left {

    left: -10px;

    top: 50%;

    transform: translateY(-50%);

}

.about-value-bottom-left {

    left: 40px;

    bottom: 85px;

}

/*======================================*
*Animations*
*=======================================*/

@keyframes aboutRotateClockwise {

    from {

        transform: translate(-50%, -50%) rotate(0deg);

    }

    to {

        transform: translate(-50%, -50%) rotate(360deg);

    }

}

@keyframes aboutRotateCounter {

    from {

        transform: translate(-50%, -50%) rotate(360deg);

    }

    to {

        transform: translate(-50%, -50%) rotate(0deg);

    }

}

.about-ring-one {

    animation: aboutRotateClockwise 24s linear infinite;

}

.about-ring-two {

    animation: aboutRotateCounter 38s linear infinite;

}

.about-ring-three {

    animation: aboutRotateClockwise 55s linear infinite;

}


@keyframes aboutFloat {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0px);

    }

}

.about-value {

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

}

.about-value-top {

    animation-delay: 0s;

}

.about-value-right {

    animation-delay: .8s;

}

.about-value-bottom {

    animation-delay: 1.5s;

}

.about-value-left {

    animation-delay: 2.2s;

}

.about-value-bottom-left {

    animation-delay: 3s;

}


/*======================================*
*Responsive*
*=======================================*/

@media(max-width:1100px) {

    .about-hero-wrapper {

        gap: 60px;

    }

    .about-values-system {

        width: 500px;

        height: 500px;

    }

    .about-ring-three {

        width: 440px;

        height: 440px;

    }

}

@media(max-width:992px) {

    .about-hero {

        padding: 140px 0 100px;

    }

    .about-hero-wrapper {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .about-content {

        margin: auto;

    }

    .about-content p {

        margin-left: auto;

        margin-right: auto;

    }

    .hero-actions {

        justify-content: center;

    }

    .about-visual {

        margin-top: 50px;

    }

}

@media(max-width:768px) {

    .about-values-system {

        width: 360px;

        height: 360px;

    }

    .about-ring-one {

        width: 120px;

        height: 120px;

    }

    .about-ring-two {

        width: 220px;

        height: 220px;

    }

    .about-ring-three {

        width: 320px;

        height: 320px;

    }

    .about-core {

        width: 120px;

        height: 120px;

    }

    .about-core-icon {

        width: 50px;

        height: 50px;

        margin-bottom: 10px;

    }

    .about-core h3 {

        font-size: 1rem;

    }

    .about-core span {

        display: none;

    }

    .about-value {

        min-width: 95px;

        padding: 10px 14px;

        font-size: .72rem;

    }

    .about-value-right {

        right: -8px;

    }

    .about-value-left {

        left: -8px;

    }

    .about-value-bottom-left {

        left: 6px;

        bottom: 48px;

    }

}


/*======================================*
*Our Story*
*=======================================*/

.our-story {

    position: relative;

    padding: 140px 0;

    background: #fff;

    overflow: hidden;

}

.our-story::before {

    content: "";

    position: absolute;

    left: -220px;

    bottom: -220px;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .07),

            transparent 70%);

    pointer-events: none;

}


/*======================================*
*Layout*
*=======================================*/

.story-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

}


/*======================================*
*Image*
*=======================================*/

.story-image {

    position: relative;

}

.story-image img {

    width: 100%;

    display: block;

    border-radius: 28px;

    object-fit: cover;

    box-shadow:

        0 35px 80px rgba(15, 23, 42, .12);

}

.story-image::before {

    content: "";

    position: absolute;

    inset: -18px;

    border: 1px solid rgba(124, 92, 255, .10);

    border-radius: 36px;

    z-index: -1;

}

.story-image::after {

    content: "";

    position: absolute;

    right: -25px;

    bottom: -25px;

    width: 170px;

    height: 170px;

    border-radius: 24px;

    background:

        linear-gradient(135deg,

            rgba(124, 92, 255, .12),

            rgba(124, 92, 255, .03));

    z-index: -2;

}


/*======================================*
*Content*
*=======================================*/

.story-content {

    max-width: 560px;

}

.story-content span {

    display: block;

    margin: 18px 0;

    text-transform: uppercase;

    letter-spacing: .2em;

    color: var(--brand);

    font-size: .82rem;

    font-weight: 700;

}

.story-content h2 {

    margin-bottom: 24px;

}

.story-content p {

    margin-bottom: 22px;

}


/*======================================*
*Stats*
*=======================================*/

.story-stats {

    display: grid;

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

    gap: 20px;

    margin-top: 45px;

}

.story-stat {

    padding: 28px 22px;

    border-radius: 22px;

    background: #fff;

    border: 1px solid #eceff4;

    transition: .35s;

}

.story-stat:hover {

    transform: translateY(-8px);

    border-color: rgba(124, 92, 255, .20);

    box-shadow:

        0 20px 45px rgba(15, 23, 42, .08);

}

.story-stat h3 {

    color: var(--brand);

    margin-bottom: 8px;

    font-size: 2rem;

}

.story-stat span {

    margin: 0;

    font-size: .9rem;

    letter-spacing: 0;

    text-transform: none;

    color: var(--muted);

    font-weight: 500;

}


/*======================================*
*Responsive*
*=======================================*/

@media(max-width:992px) {

    .story-wrapper {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .story-content {

        max-width: 100%;

    }

}

@media(max-width:768px) {

    .our-story {

        padding: 90px 0;

    }

    .story-stats {

        grid-template-columns: 1fr;

    }

    .story-stat {

        text-align: center;

    }

}

/*======================================*
*Reveal*
*=======================================*/

.story-image,
.story-content,
.story-stat {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.story-image.show,
.story-content.show,
.story-stat.show {

    opacity: 1;

    transform: none;

}

.story-stat:nth-child(2) {

    transition-delay: .12s;

}

.story-stat:nth-child(3) {

    transition-delay: .24s;

}

/*======================================*
*Our Values*
*=======================================*/

.about-values-section {

    position: relative;

    padding: 140px 0;

    background: #fbfbfd;

    overflow: hidden;

}

.about-values-section::before {

    content: "";

    position: absolute;

    left: -220px;

    top: -220px;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .07),

            transparent 70%);

    pointer-events: none;

}


/*======================================*
*Grid*
*=======================================*/

.values-grid {

    display: grid;

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

    gap: 30px;

    margin-top: 80px;

    align-items: center;

}


/*======================================*
*Cards*
*=======================================*/

.value-card {

    position: relative;

    padding: 40px;

    background: #fff;

    border: 1px solid #eceff4;

    border-radius: 30px;

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        border-color .4s ease;

    overflow: hidden;

}

.value-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at top right,

            rgba(124, 92, 255, .08),

            transparent 65%);

    opacity: 0;

    transition: .4s;

}

.value-card:hover {

    transform: translateY(-12px);

    border-color: rgba(124, 92, 255, .18);

    box-shadow:

        0 28px 60px rgba(15, 23, 42, .08);

}

.value-card:hover::before {

    opacity: 1;

}


/*======================================*
*Featured*
*=======================================*/

.featured {

    min-height: 420px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background:

        linear-gradient(180deg,

            #ffffff,

            #f7f5ff);

}

.featured-icon {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

    background:

        linear-gradient(135deg,

            rgba(124, 92, 255, .12),

            rgba(124, 92, 255, .03));

}

.featured-icon i {

    font-size: 2rem;

    color: var(--brand);

}

.featured h3 {

    margin-bottom: 20px;

}


/*======================================*
*Numbers*
*=======================================*/

.value-number {

    font-size: 3rem;

    font-weight: 700;

    color: #e0e4ef;

    margin-bottom: 28px;

    line-height: 1;

}

.value-card h3 {

    margin-bottom: 18px;

}

.value-card p {

    margin: 0;

}


/*======================================*
*Placement*
*=======================================*/

.value-card:nth-child(1) {

    transform: translateY(-35px);

}

.value-card:nth-child(2) {

    transform: translateY(20px);

}

.value-card:nth-child(4) {

    transform: translateY(20px);

}

.value-card:nth-child(5) {

    transform: translateY(-35px);

}

.value-card:hover {

    transform: translateY(-12px);

}


/*======================================*
*Reveal*
*=======================================*/

.value-card {

    opacity: 0;

    transform: translateY(50px);

}

.value-card.show {

    opacity: 1;

    transform: none;

}


/*======================================*
*Responsive*
*=======================================*/

@media(max-width:992px) {

    .values-grid {

        grid-template-columns: 1fr;

    }

    .value-card:nth-child(n) {

        transform: none;

    }

    .featured {

        min-height: auto;

    }

}

@media(max-width:768px) {

    .about-values-section {

        padding: 90px 0;

    }

    .values-grid {

        margin-top: 60px;

        gap: 24px;

    }

    .value-card {

        padding: 30px;

    }

    .value-number {

        font-size: 2.3rem;

    }

}


/*======================================*
*Leadership Philosophy*
*=======================================*/

.leadership-philosophy {

    position: relative;

    padding: 140px 0;

    background: #fff;

    overflow: hidden;

}

.leadership-philosophy::before {

    content: "";

    position: absolute;

    right: -250px;

    top: -220px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .06),

            transparent 72%);

    pointer-events: none;

}


/*======================================*
*Layout*
*=======================================*/

.leadership-layout {

    display: grid;

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

    gap: 90px;

    align-items: center;

}


/*======================================*
*Left*
*=======================================*/

.leadership-intro {

    max-width: 560px;

}

.leadership-intro span {

    display: block;

    margin: 18px 0;

    text-transform: uppercase;

    letter-spacing: .18em;

    color: var(--brand);

    font-size: .82rem;

    font-weight: 700;

}

.leadership-intro h2 {

    margin-bottom: 24px;

}

.leadership-intro p {

    margin-bottom: 40px;

}


/*======================================*
*Stack*
*=======================================*/

.philosophy-stack {

    display: flex;

    flex-direction: column;

    gap: 26px;

}


/*======================================*
*Cards*
*=======================================*/

.philosophy-card {

    position: relative;

    display: flex;

    gap: 26px;

    align-items: flex-start;

    padding: 34px;

    border-radius: 28px;

    background: #fff;

    border: 1px solid #eceff4;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

    overflow: hidden;

}

.philosophy-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at top right,

            rgba(124, 92, 255, .08),

            transparent 70%);

    opacity: 0;

    transition: .35s;

}

.philosophy-card:hover {

    transform: translateY(-10px);

    border-color: rgba(124, 92, 255, .18);

    box-shadow:

        0 28px 55px rgba(15, 23, 42, .08);

}

.philosophy-card:hover::before {

    opacity: 1;

}


/*======================================*
*Icon*
*=======================================*/

.philosophy-icon {

    flex-shrink: 0;

    width: 70px;

    height: 70px;

    border-radius: 22px;

    display: flex;

    justify-content: center;

    align-items: center;

    background:

        linear-gradient(135deg,

            rgba(124, 92, 255, .12),

            rgba(124, 92, 255, .04));

}

.philosophy-icon i {

    color: var(--brand);

    font-size: 1.5rem;

}


/*======================================*
*Content*
*=======================================*/

.philosophy-card h3 {

    margin-bottom: 14px;

}

.philosophy-card p {

    margin: 0;

}


/*======================================*
*Reveal*
*=======================================*/

.philosophy-card {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.philosophy-card.show {

    opacity: 1;

    transform: none;

}


/*======================================*
*Responsive*
*=======================================*/

@media(max-width:992px) {

    .leadership-layout {

        grid-template-columns: 1fr;

        gap: 60px;

    }

}

@media(max-width:768px) {

    .leadership-philosophy {

        padding: 90px 0;

    }

    .philosophy-card {

        flex-direction: column;

        padding: 28px;

    }

}


/*======================================*
*Contact Hero*
*=======================================*/

.contact-hero {

    position: relative;

    padding: 170px 0 130px;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fbfbfd 100%);

}

.contact-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(rgba(124, 92, 255, .045) 1px, transparent 1px),

        linear-gradient(90deg, rgba(124, 92, 255, .045) 1px, transparent 1px);

    background-size: 72px 72px;

    mask-image: radial-gradient(circle, #000 55%, transparent 100%);

    opacity: .65;

}

.contact-hero::after {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    right: -250px;

    top: -220px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .08),

            transparent 70%);

}


/*======================================*
*Layout*
*=======================================*/

.contact-hero-wrapper {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 90px;

    align-items: center;

}


/*======================================*
*Left*
*=======================================*/

.contact-content {

    max-width: 620px;

}

.contact-content h1 {

    margin: 28px 0;

}

.contact-content p {

    margin-bottom: 40px;

}


/*======================================*
*Quick Contact*
*=======================================*/

.contact-quick {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.contact-quick div {

    display: flex;

    align-items: center;

    gap: 16px;

    font-weight: 500;

    color: var(--heading);

}

.contact-quick i {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        linear-gradient(135deg,

            rgba(124, 92, 255, .12),

            rgba(124, 92, 255, .03));

    color: var(--brand);

}


/*======================================*
*Floating Cards*
*=======================================*/

.contact-floating {

    display: flex;

    flex-direction: column;

    gap: 24px;

}

.floating-card {

    position: relative;

    padding: 34px;

    border-radius: 28px;

    background:

        rgba(255, 255, 255, .75);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .85);

    box-shadow:

        0 25px 60px rgba(15, 23, 42, .08);

    transition:

        transform .35s,

        box-shadow .35s;

}

.floating-card:nth-child(2) {

    margin-left: 40px;

}

.floating-card:nth-child(3) {

    margin-right: 40px;

}

.floating-card:hover {

    transform: translateY(-10px);

    box-shadow:

        0 35px 70px rgba(15, 23, 42, .12);

}

.floating-card i {

    width: 64px;

    height: 64px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    font-size: 1.4rem;

    color: var(--brand);

    background:

        linear-gradient(135deg,

            rgba(124, 92, 255, .12),

            rgba(124, 92, 255, .03));

}

.floating-card h3 {

    margin-bottom: 14px;

}

.floating-card p {

    margin: 0;

}


/*======================================*
*Reveal*
*=======================================*/

.contact-content,
.floating-card {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.contact-content.show,
.floating-card.show {

    opacity: 1;

    transform: none;

}


/*======================================*
*Responsive*
*=======================================*/

@media(max-width:992px) {

    .contact-hero-wrapper {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .floating-card:nth-child(2),

    .floating-card:nth-child(3) {

        margin: 0;

    }

}

@media(max-width:768px) {

    .contact-hero {

        padding: 130px 0 90px;

    }

    .floating-card {

        padding: 28px;

    }

    .contact-quick div {

        align-items: flex-start;

    }

}


/*======================================*
*Contact Form*
*=======================================*/

.contact-form-section {

    padding: 140px 0;

    background: #fbfbfd;

}

.contact-form-wrapper {

    display: grid;

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

    gap: 70px;

    align-items: start;

}


/*======================================*
*Left*
*=======================================*/

.contact-information {

    max-width: 470px;

}

.contact-information span {

    display: block;

    margin: 18px 0;

    text-transform: uppercase;

    letter-spacing: .18em;

    color: var(--brand);

    font-size: .82rem;

    font-weight: 700;

}

.contact-information h2 {

    margin-bottom: 24px;

}

.contact-information>p {

    margin-bottom: 40px;

}


/*======================================*
*Info*
*=======================================*/

.info-list {

    display: flex;

    flex-direction: column;

    gap: 26px;

}

.info-item {

    display: flex;

    gap: 18px;

    align-items: flex-start;

}

.info-item i {

    width: 56px;

    height: 56px;

    border-radius: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: rgba(124, 92, 255, .08);

    color: var(--brand);

}

.info-item h3 {

    margin-bottom: 6px;

}

.info-item p {

    margin: 0;

}


/*======================================*
*Form*
*=======================================*/

.contact-form {

    padding: 45px;

    background: #fff;

    border-radius: 32px;

    border: 1px solid #eceff4;

    box-shadow:

        0 30px 70px rgba(15, 23, 42, .08);

}

.form-grid {

    display: grid;

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

    gap: 22px;

}

.form-group {

    margin-bottom: 22px;

}

.form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 600;

}

.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 16px 18px;

    border-radius: 16px;

    border: 1px solid #e6e9ef;

    background: #fafafa;

    transition: .3s;

    font-family: inherit;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--brand);

    background: #fff;

}

textarea {

    resize: vertical;

    min-height: 170px;

}

.contact-form .btn-primary {

    width: 100%;

    margin-top: 10px;

}


/*======================================*
*Responsive*
*=======================================*/

@media(max-width:992px) {

    .contact-form-wrapper {

        grid-template-columns: 1fr;

    }

}

@media(max-width:768px) {

    .contact-form-section {

        padding: 90px 0;

    }

    .contact-form {

        padding: 30px;

    }

    .form-grid {

        grid-template-columns: 1fr;

    }

}

/*======================================*
*Privacy Summary*
*=======================================*/

.privacy-summary {

    position: relative;

    padding: 140px 0;

    background: #fbfbfd;

    overflow: hidden;

}

.privacy-summary::before {

    content: "";

    position: absolute;

    left: -220px;

    bottom: -220px;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .07),

            transparent 72%);

}


/*======================================*
*Grid*
*=======================================*/

.privacy-grid {

    display: grid;

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

    gap: 28px;

    margin-top: 80px;

    align-items: center;

}


/*======================================*
*Cards*
*=======================================*/

.privacy-card {

    padding: 38px;

    border-radius: 30px;

    background: #fff;

    border: 1px solid #eceff4;

    transition: .35s;

    box-shadow:

        0 15px 35px rgba(15, 23, 42, .04);

}

.privacy-card:hover {

    transform: translateY(-10px);

    border-color: rgba(124, 92, 255, .18);

    box-shadow:

        0 30px 60px rgba(15, 23, 42, .08);

}


/*======================================*
*Featured*
*=======================================*/

.featured {

    text-align: center;

    min-height: 380px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.privacy-center {

    width: 90px;

    height: 90px;

    margin: auto auto 30px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background:

        linear-gradient(135deg,

            rgba(124, 92, 255, .12),

            rgba(124, 92, 255, .03));

}

.privacy-center i {

    font-size: 2rem;

    color: var(--brand);

}


/*======================================*
*Icons*
*=======================================*/

.privacy-icon {

    width: 64px;

    height: 64px;

    border-radius: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 22px;

    background: rgba(124, 92, 255, .08);

}

.privacy-icon i {

    color: var(--brand);

    font-size: 1.4rem;

}

.privacy-card h3 {

    margin-bottom: 16px;

}

.privacy-card p {

    margin: 0;

}


/*======================================*
*Reveal*
*=======================================*/

.privacy-card {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.privacy-card.show {

    opacity: 1;

    transform: none;

}


/*======================================*
*Responsive*
*=======================================*/

@media(max-width:992px) {

    .privacy-grid {

        grid-template-columns: 1fr;

    }

    .featured {

        min-height: auto;

    }

}

@media(max-width:768px) {

    .privacy-summary {

        padding: 90px 0;

    }

    .privacy-grid {

        margin-top: 60px;

    }

    .privacy-card {

        padding: 30px;

    }

}

/*======================================*
*Privacy Policy*
*=======================================*/

.privacy-policy {

    position: relative;

    padding: 140px 0;

    background: #ffffff;

    overflow: hidden;

}

.privacy-policy::before {

    content: "";

    position: absolute;

    right: -220px;

    top: -220px;

    width: 550px;

    height: 550px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(124, 92, 255, .06),

            transparent 72%);

    pointer-events: none;

}


/*======================================*
*Layout*
*=======================================*/

.policy-layout {

    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 80px;

    align-items: start;

}


/*======================================*
*Sidebar*
*=======================================*/

.policy-sidebar {

    position: sticky;

    top: 120px;

    padding: 32px;

    border-radius: 26px;

    background: #fbfbfd;

    border: 1px solid #eceff4;

}

.policy-sidebar h3 {

    margin-bottom: 24px;

}

.policy-sidebar nav {

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.policy-sidebar nav a {

    display: block;

    padding: 12px 16px;

    border-radius: 12px;

    color: var(--muted);

    font-weight: 500;

    transition: .3s;

}

.policy-sidebar nav a:hover,

.policy-sidebar nav a.active {

    background: rgba(124, 92, 255, .08);

    color: var(--brand);

}


/*======================================*
*Content*
*=======================================*/

.policy-content {

    display: flex;

    flex-direction: column;

    gap: 45px;

}


/*======================================*
*Policy Blocks*
*=======================================*/

.policy-block {

    padding: 45px;

    background: #fff;

    border: 1px solid #eceff4;

    border-radius: 28px;

    transition:

        transform .35s,

        box-shadow .35s,

        border-color .35s;

}

.policy-block:hover {

    transform: translateY(-6px);

    border-color: rgba(124, 92, 255, .18);

    box-shadow:

        0 25px 55px rgba(15, 23, 42, .07);

}

.policy-block h2 {

    margin-bottom: 20px;

}

.policy-block p {

    margin-bottom: 18px;

}

.policy-block p:last-child {

    margin-bottom: 0;

}


/*======================================*
*Lists*
*=======================================*/

.policy-block ul {

    margin: 25px 0 0;

    padding-left: 22px;

}

.policy-block li {

    margin-bottom: 14px;

    line-height: 1.8;

    color: var(--muted);

}


/*======================================*
*Reveal*
*=======================================*/

.policy-block {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.policy-block.show {

    opacity: 1;

    transform: none;

}


/*======================================*
*Responsive*
*=======================================*/

@media(max-width:992px) {

    .policy-layout {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .policy-sidebar {

        position: relative;

        top: auto;

    }

    .policy-sidebar nav {

        display: grid;

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

        gap: 10px;

    }

}

@media(max-width:768px) {

    .privacy-policy {

        padding: 90px 0;

    }

    .policy-sidebar {

        padding: 24px;

    }

    .policy-sidebar nav {

        grid-template-columns: 1fr;

    }

    .policy-block {

        padding: 30px;

    }

}


/*======================================*
Team Section
*=======================================*/

.team-section{

    position:relative;

    padding:150px 0;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #fafbff
    );

}

.team-section::before{

    content:"";

    position:absolute;

    left:-180px;

    top:-180px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(124,92,255,.08),
    transparent 70%);

    pointer-events:none;

}

.team-section::after{

    content:"";

    position:absolute;

    right:-220px;

    bottom:-220px;

    width:620px;

    height:620px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(124,92,255,.06),
    transparent 72%);

    pointer-events:none;

}



/*======================================*
Grid
*=======================================*/

.team-grid{

    position:relative;

    display:grid;

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

    gap:40px;

    align-items:center;

    margin-top:90px;

}



/*======================================*
Card
*=======================================*/

.team-card{

    position:relative;

    overflow:hidden;

    padding:42px 34px;

    border-radius:34px;

    text-align:center;

    background:
    linear-gradient(

        180deg,

        rgba(255,255,255,.74),

        rgba(255,255,255,.58)

    );

    backdrop-filter:blur(22px);

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

    border:1px solid rgba(255,255,255,.72);

    box-shadow:

        0 30px 80px rgba(15,23,42,.08);

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}



/*======================================*
Glow
*=======================================*/

.team-glow{

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

    radial-gradient(circle at top,

    rgba(124,92,255,.18),

    transparent 65%);

    opacity:0;

    transition:.45s;

}

.team-card:hover .team-glow{

    opacity:1;

}



/*======================================*
Photo
*=======================================*/

.team-photo{

    position:relative;

    width:170px;

    height:170px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

    background:#fff;

    box-shadow:

        0 18px 45px rgba(15,23,42,.08);

}

.team-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .45s ease;

}

.team-card:hover img{

    transform:scale(1.08);

}



/*======================================*
Featured
*=======================================*/

.team-card.featured{

    padding:55px 42px;

    transform:translateY(-25px);

}

.team-card.featured .team-photo{

    width:220px;

    height:220px;

}



/*======================================*
Text
*=======================================*/

.team-info{

    margin-top:34px;

}

.team-info h3{

    margin-bottom:10px;

}

.team-info span{

    display:block;

    color:var(--brand);

    font-weight:600;

    margin-bottom:20px;

}

.team-info p{

    color:var(--muted);

    line-height:1.8;

}



/*======================================*
Social
*=======================================*/

.team-social{

    display:flex;

    justify-content:center;

    gap:16px;

    margin-top:30px;

}

.team-social a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(124,92,255,.08);

    color:var(--brand);

    transition:.35s;

}

.team-social a:hover{

    background:var(--brand);

    color:#fff;

}



/*======================================*
Hover
*=======================================*/

.team-card:hover{

    transform:translateY(-12px);

    border-color:

    rgba(124,92,255,.18);

    box-shadow:

        0 40px 90px rgba(15,23,42,.12);

}

.team-card.featured:hover{

    transform:

    translateY(-35px);

}



/*======================================*
Reveal
*=======================================*/

.team-card{

    opacity:0;

    transform:translateY(70px);

}

.team-card.show{

    opacity:1;

    transform:none;

}



/*======================================*
Responsive
*=======================================*/

@media(max-width:1100px){

.team-grid{

    grid-template-columns:1fr;

}

.team-card.featured{

    transform:none;

}

.team-card.featured:hover{

    transform:translateY(-12px);

}

}

@media(max-width:768px){

.team-section{

    padding:90px 0;

}

.team-grid{

    gap:28px;

    margin-top:60px;

}

.team-card{

    padding:32px;

}

.team-photo{

    width:140px;

    height:140px;

}

.team-card.featured .team-photo{

    width:170px;

    height:170px;

}

}