:root {

    --header-height: 76px;

    --page-width: 1240px;

    --ink: #151a2d;

    --text: #4f5565;

    --soft: #7c8292;

    --line: #e9ebf2;

    --white: #ffffff;

    --page-bg: #f8f9fc;

    --blue: #5574ff;

    --violet: #775bff;

    --mint: #35c7b3;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    padding-top: var(--header-height);

    background:
        linear-gradient(
            180deg,
            #fafbfe 0%,
            #f7f8fc 100%
        );

    color: var(--ink);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Microsoft YaHei",
        Arial,
        sans-serif;

    line-height: 1.75;

}


a {
    -webkit-tap-highlight-color: transparent;
}


/* ==================================================
   GLOBAL FIXED HEADER
================================================== */

.site-header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: var(--header-height);

    z-index: 10000;

    padding: 10px 22px;

    background:
        rgba(248,249,252,.82);

    backdrop-filter:
        blur(18px);

}


.header-shell {

    max-width: var(--page-width);

    height: 56px;

    margin: 0 auto;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

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

    border:
        1px solid rgba(225,228,239,.9);

    border-radius: 15px;

    box-shadow:
        0 8px 30px rgba(67,78,125,.06);

}


.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

    color: var(--ink);

    text-decoration: none;

}


.brand-mark {

    position: relative;

    display: block;

    width: 28px;

    height: 28px;

    flex: 0 0 28px;

}


.brand-mark:before,
.brand-mark i,
.brand-mark b {

    content: "";

    position: absolute;

    display: block;

    width: 16px;

    height: 16px;

    border-radius: 5px;

}


.brand-mark:before {

    top: 1px;

    left: 1px;

    background:
        linear-gradient(
            135deg,
            #8eddf1,
            #5f82ff
        );

    opacity: .9;

}


.brand-mark i {

    right: 1px;

    top: 7px;

    background:
        linear-gradient(
            135deg,
            #6e77ff,
            #8d5cf4
        );

    opacity: .82;

}


.brand-mark b {

    left: 3px;

    bottom: 1px;

    background:
        linear-gradient(
            135deg,
            #b3ebde,
            #7087ff
        );

    opacity: .72;

}


.brand-text {

    display: flex;

    flex-direction: column;

    min-width: 0;

}


.brand-text strong {

    color: var(--ink);

    font-size: 16px;

    font-weight: 650;

    line-height: 1.3;

}


.brand-text small {

    margin-top: 2px;

    color: #8b90a0;

    font-size: 10.5px;

    line-height: 1.2;

    white-space: nowrap;

}


.desktop-nav {

    display: flex;

    align-items: center;

    gap: 31px;

}


.desktop-nav a {

    position: relative;

    padding: 18px 0 16px;

    color: #343949;

    font-size: 14px;

    text-decoration: none;

    white-space: nowrap;

}


.desktop-nav a:after {

    content: "";

    position: absolute;

    left: 50%;

    right: 50%;

    bottom: 5px;

    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--violet)
        );

    transition:
        left .2s ease,
        right .2s ease;

}


.desktop-nav a:hover:after,
.desktop-nav a.active:after {

    left: 0;

    right: 0;

}


.desktop-nav a.active {

    color: #536ff4;

}


.menu-button {

    display: none;

    width: 40px;

    height: 40px;

    padding: 9px;

    border: 0;

    background: transparent;

    cursor: pointer;

}


.menu-button span {

    display: block;

    width: 21px;

    height: 1.5px;

    margin: 5px auto;

    border-radius: 5px;

    background: #252a39;

}


.mobile-nav {

    display: none;

    position: fixed;

    top: var(--header-height);

    left: 14px;

    right: 14px;

    z-index: 9999;

    padding: 9px 18px 17px;

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

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

    border-radius:
        0 0 16px 16px;

    box-shadow:
        0 20px 35px rgba(50,60,100,.08);

}


.mobile-nav.open {
    display: block;
}


.mobile-nav a {

    display: block;

    padding: 13px 3px;

    color: #303646;

    border-bottom:
        1px solid #eff0f4;

    font-size: 15px;

    text-decoration: none;

}


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

main {

    width: 100%;

}


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

.home-hero {

    position: relative;

    max-width: var(--page-width);

    min-height: 410px;

    margin: 24px auto 0;

    padding:
        74px 72px;

    display: flex;

    align-items: center;

    overflow: hidden;

    border:
        1px solid rgba(226,229,240,.7);

    border-radius: 34px;

    background:

        radial-gradient(
            circle at 15% 100%,
            rgba(105,161,255,.18),
            transparent 37%
        ),

        radial-gradient(
            circle at 84% 15%,
            rgba(144,119,255,.18),
            transparent 38%
        ),

        radial-gradient(
            circle at 100% 100%,
            rgba(82,218,197,.13),
            transparent 34%
        ),

        linear-gradient(
            120deg,
            #f7fbff 0%,
            #faf9ff 48%,
            #f7f5ff 100%
        );

}


.hero-content {

    position: relative;

    z-index: 5;

    width: 58%;

}


.hero-label {

    display: inline-flex;

    padding:
        6px 12px;

    margin-bottom: 22px;

    color: #6273d8;

    background:
        rgba(241,244,255,.85);

    border:
        1px solid rgba(214,221,255,.9);

    border-radius: 999px;

    font-size: 12px;

}


.home-hero h1 {

    max-width: 690px;

    margin: 0;

    color: #151b31;

    font-size: 49px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -1px;

}


.hero-text {

    max-width: 650px;

    margin:
        24px 0 0;

    color: #555d70;

    font-size: 17px;

}


.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;

}


.primary-button,
.secondary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    min-width: 145px;

    height: 46px;

    padding: 0 22px;

    border-radius: 12px;

    font-size: 14px;

    text-decoration: none;

    transition:
        transform .18s ease,
        box-shadow .18s ease;

}


.primary-button {

    color: white;

    background:
        linear-gradient(
            100deg,
            #5877ff,
            #7b5df6
        );

    box-shadow:
        0 10px 25px rgba(102,92,242,.22);

}


.secondary-button {

    color: #596ad1;

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

    border:
        1px solid rgba(105,122,230,.55);

}


.primary-button:hover,
.secondary-button:hover {

    transform:
        translateY(-1px);

}


/* ==================================================
   ABSTRACT DECORATION
================================================== */

.hero-decoration {

    position: absolute;

    top: 0;

    right: 0;

    width: 48%;

    height: 100%;

    pointer-events: none;

}


.hero-panel {

    position: absolute;

    display: block;

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

    border-radius: 28px;

    background:
        linear-gradient(
            140deg,
            rgba(154,184,255,.45),
            rgba(137,122,241,.2)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 18px 60px rgba(109,105,210,.09);

    backdrop-filter:
        blur(10px);

}


.panel-one {

    width: 170px;

    height: 245px;

    right: 220px;

    top: 74px;

    transform:
        rotate(8deg);

}


.panel-two {

    width: 105px;

    height: 220px;

    right: 140px;

    top: 105px;

    transform:
        rotate(5deg);

    opacity: .72;

}


.panel-three {

    width: 115px;

    height: 150px;

    right: 89px;

    top: 159px;

    opacity: .48;

}


.orbit {

    position: absolute;

    border:
        2px solid rgba(106,104,238,.2);

    border-radius: 50%;

    transform:
        rotate(-9deg);

}


.orbit-one {

    width: 470px;

    height: 155px;

    right: 58px;

    top: 142px;

}


.orbit-two {

    width: 365px;

    height: 95px;

    right: 95px;

    top: 174px;

    border-color:
        rgba(84,180,216,.12);

}


.dot {

    position: absolute;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #685cf5,
            #8f6cff
        );

    box-shadow:
        0 8px 20px rgba(90,84,231,.18);

}


.dot-one {

    left: 35px;

    top: 245px;

}


.dot-two {

    right: 80px;

    top: 140px;

    width: 10px;

    height: 10px;

    opacity: .35;

}


.dot-three {

    right: 44px;

    bottom: 70px;

    width: 12px;

    height: 12px;

    background:
        #42cbb6;

    opacity: .55;

}


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

.services-block {

    max-width:
        1080px;

    margin:
        0 auto;

    padding:
        34px 24px 52px;

}


.section-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin:
        0 0 24px;

}


.section-title span {

    width: 70px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c8cee9
        );

}


.section-title span:last-child {

    background:
        linear-gradient(
            90deg,
            #c8cee9,
            transparent
        );

}


.section-title h2 {

    margin: 0;

    color: var(--ink);

    font-size: 24px;

    font-weight: 650;

}


.service-cards {

    display: grid;

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

    gap: 22px;

}


.service-card {

    min-height: 154px;

    padding: 24px;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    color: inherit;

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

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

    border-radius: 15px;

    box-shadow:
        0 13px 35px rgba(72,82,120,.045);

    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.service-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 38px rgba(65,77,125,.08);

}


.service-icon {

    width: 55px;

    height: 55px;

    flex: 0 0 55px;

    display: grid;

    place-items: center;

    border-radius: 18px;

}


.service-icon svg {

    width: 29px;

    height: 29px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.video-icon {

    color: #6f61f1;

    background:
        linear-gradient(
            135deg,
            #f0e9ff,
            #e7e5ff
        );

}


.music-icon {

    color: #4e89e9;

    background:
        linear-gradient(
            135deg,
            #e7f0ff,
            #e6f1fb
        );

}


.content-icon {

    color: #25b8a3;

    background:
        linear-gradient(
            135deg,
            #e6faf5,
            #e4f5f0
        );

}


.service-card h3 {

    margin:
        3px 0 8px;

    color: var(--ink);

    font-size: 17px;

}


.service-card p {

    margin: 0;

    color: #707686;

    font-size: 13px;

    line-height: 1.75;

}


.process-strip {

    margin-top: 22px;

    padding: 20px 25px;

    display: grid;

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

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

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

    border-radius: 15px;

}


.process-item {

    min-width: 0;

    padding: 0 24px;

    display: flex;

    align-items: center;

    gap: 15px;

}


.process-item + .process-item {

    border-left:
        1px solid #ebedf4;

}


.process-number {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    color: #6374e5;

    background:
        #f2f4ff;

    border-radius:
        50%;

    font-size: 13px;

    font-weight: 650;

}


.process-item strong {

    display: block;

    font-size: 14px;

}


.process-item small {

    display: block;

    margin-top: 2px;

    color: #868b98;

    font-size: 11px;

}


/* ==================================================
   INNER PAGES
================================================== */

.inner-hero {

    position: relative;

    max-width: var(--page-width);

    min-height: 290px;

    margin: 24px auto 0;

    padding: 64px 72px;

    display: flex;

    align-items: center;

    overflow: hidden;

    border-radius: 30px;

    border:
        1px solid rgba(228,230,240,.8);

    background:

        radial-gradient(
            circle at 90% 20%,
            rgba(125,109,250,.13),
            transparent 35%
        ),

        radial-gradient(
            circle at 8% 90%,
            rgba(93,178,239,.11),
            transparent 30%
        ),

        #fbfbfe;

}


.inner-glow {

    position: absolute;

    width: 310px;

    height: 310px;

    right: -60px;

    top: -80px;

    border-radius: 50%;

    background:
        rgba(111,100,244,.08);

    filter:
        blur(10px);

}


.inner-content {

    position: relative;

    z-index: 2;

}


.page-label {

    margin-bottom: 13px;

    color: #747d97;

    font-size: 13px;

}


.inner-hero h1 {

    max-width: 820px;

    margin: 0;

    color: var(--ink);

    font-size: 39px;

    line-height: 1.3;

}


.inner-hero p {

    max-width: 720px;

    margin: 22px 0 0;

    color: #606777;

    font-size: 16px;

}


.inner-sections {

    max-width: 960px;

    margin: 0 auto;

    padding: 36px 22px 60px;

}


.detail-card {

    padding: 30px 32px;

    display: grid;

    grid-template-columns:
        65px 1fr;

    gap: 18px;

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

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

    border-radius: 15px;

}


.detail-card + .detail-card {

    margin-top: 17px;

}


.detail-number {

    color: #7786ef;

    font-size: 13px;

    font-weight: 650;

}


.detail-card h2 {

    margin: 0 0 7px;

    font-size: 21px;

}


.detail-card p {

    margin: 0;

    color: #737988;

    font-size: 14px;

}


.about-panel,
.contact-panel {

    padding: 34px 36px;

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

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

    border-radius: 16px;

}


.about-panel > span,
.contact-label {

    color: #8a8fa1;

    font-size: 11px;

    letter-spacing: 1.4px;

}


.about-panel h2 {

    margin: 8px 0 12px;

    font-size: 22px;

}


.about-panel p {

    max-width: 720px;

    margin: 0;

    color: #717787;

    font-size: 14px;

}


.contact-label {

    margin-bottom: 15px;

}


.contact-row {

    display: grid;

    grid-template-columns:
        110px 1fr;

    gap: 20px;

    padding: 15px 0;

    border-top:
        1px solid #eceef4;

}


.contact-row span {

    color: #878c9a;

    font-size: 13px;

}


.contact-row strong {

    color: #303645;

    font-size: 13px;

    font-weight: 550;

}


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

.site-footer {

    margin-top: 8px;

    border-top:
        1px solid #e8eaf0;

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

}


.footer-inner {

    max-width: var(--page-width);

    margin: 0 auto;

    padding: 27px 25px 35px;

    text-align: center;

    color: #838896;

    font-size: 12px;

}


.footer-company {

    margin-bottom: 3px;

}


.footer-records a {

    color: #777e8d;

    text-decoration: none;

}


.footer-dot {

    padding: 0 5px;

}


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

@media (max-width: 760px) {

    :root {

        --header-height: 70px;

    }


    body {

        padding-top:
            var(--header-height);

    }


    .site-header {

        height:
            var(--header-height);

        padding:
            8px 10px;

    }


    .header-shell {

        height: 54px;

        padding:
            0 13px;

        border-radius: 13px;

    }


    .brand-mark {

        width: 25px;

        height: 25px;

        flex-basis: 25px;

    }


    .brand-text strong {

        font-size: 14px;

    }


    .brand-text small {

        display: none;

    }


    .desktop-nav {

        display: none;

    }


    .menu-button {

        display: block;

    }


    .mobile-nav {

        top:
            var(--header-height);

    }


    .home-hero {

        min-height: 530px;

        margin:
            14px 10px 0;

        padding:
            52px 28px 190px;

        align-items:
            flex-start;

        border-radius: 24px;

    }


    .hero-content {

        width: 100%;

    }


    .hero-label {

        margin-bottom: 18px;

        font-size: 10.5px;

    }


    .home-hero h1 {

        font-size: 36px;

        line-height: 1.23;

    }


    .hero-text {

        margin-top: 19px;

        font-size: 15px;

    }


    .hero-actions {

        margin-top: 24px;

    }


    .primary-button,
    .secondary-button {

        min-width: 0;

        height: 43px;

        padding: 0 17px;

        font-size: 13px;

    }


    .hero-decoration {

        top: auto;

        bottom: 0;

        width: 100%;

        height: 185px;

    }


    .panel-one {

        width: 105px;

        height: 145px;

        right: 46%;

        top: 23px;

    }


    .panel-two {

        width: 68px;

        height: 130px;

        right: 31%;

        top: 34px;

    }


    .panel-three {

        width: 72px;

        height: 86px;

        right: 19%;

        top: 65px;

    }


    .orbit-one {

        width: 300px;

        height: 90px;

        right: 7%;

        top: 62px;

    }


    .orbit-two {

        width: 240px;

        height: 55px;

        right: 13%;

        top: 81px;

    }


    .dot-one {

        left: 32%;

        top: 105px;

    }


    .services-block {

        padding:
            31px 18px 42px;

    }


    .section-title {

        margin-bottom: 20px;

    }


    .section-title span {

        width: 35px;

    }


    .section-title h2 {

        font-size: 21px;

    }


    .service-cards {

        grid-template-columns:
            1fr;

        gap: 14px;

    }


    .service-card {

        min-height: 132px;

        padding: 21px;

    }


    .process-strip {

        grid-template-columns:
            1fr;

        gap: 0;

        padding: 8px 20px;

    }


    .process-item {

        padding:
            16px 2px;

    }


    .process-item + .process-item {

        border-left: 0;

        border-top:
            1px solid #ebedf4;

    }


    .inner-hero {

        min-height: 315px;

        margin:
            14px 10px 0;

        padding:
            45px 27px;

        border-radius: 23px;

    }


    .inner-hero h1 {

        font-size: 31px;

    }


    .inner-hero p {

        font-size: 15px;

    }


    .inner-sections {

        padding:
            25px 17px 45px;

    }


    .detail-card {

        padding: 24px;

        grid-template-columns:
            1fr;

        gap: 8px;

    }


    .about-panel,
    .contact-panel {

        padding:
            27px 23px;

    }


    .contact-row {

        grid-template-columns:
            1fr;

        gap: 3px;

    }

}