/* Field Ascend - Marketing Website Styles */
/* DemoCreator-inspired design with purple gradients */

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

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "HarmonyOS Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body {
    color: #000;
    line-height: 1.6;
}

main .btn { text-transform: capitalize; margin: 0; }

.video-container { position: relative; overflow: hidden; background-size: cover; }
.video-container video { position: absolute; width: 100%; height: auto; top: 0; left: 0; }
.video-container::before { content: ''; padding-top: var(--ratio, calc(9 / 16 * 100%)); display: block; }

.font-size-40 { font-size: 40px; }
.border-radius-8 { border-radius: 0.5rem; }
.border-radius-16 { border-radius: 1rem; }

.text-color1 { background: linear-gradient(90deg, #F15AFF 0%, #A957FE 18.41%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-color2 { background: linear-gradient(90deg, #F15AFF 52.3%, #A957FE 63.47%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-color3 { background: linear-gradient(90deg, #F15AFF 25.36%, #A957FE 65.4%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-color4 { background: linear-gradient(90deg, #F15AFF 56.19%, #A957FE 103.75%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-color5 { color: #010D14; }
.text-color6 { color: #7A00DA; }
a.text-color6:hover { color: #7A00DA; text-decoration: underline; }

.line-height-100 { line-height: 100%; }
.h-160 { height: 160px; }

.special-pagination.swiper-pagination { position: relative; bottom: 0px; }
.special-pagination.swiper-pagination .swiper-pagination-bullet { background-color: #C4C4C4; opacity: 1; margin: 0 4px; }
.special-pagination.swiper-pagination .swiper-pagination-bullet-active {
    border-radius: 19px; width: 61px;
    background: linear-gradient(270deg, #554EFF -3.41%, #BC39FF 47.17%, #FF743D 99.79%), #C4C4C4;
}

/* Navigation */
#marketing-nav {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
#marketing-nav .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#marketing-nav .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
#marketing-nav .logo img { height: 40px; }
#marketing-nav .logo h1 { color: #fff; font-size: 24px; font-weight: 700; margin: 0; }
#marketing-nav .nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
    list-style: none;
}
#marketing-nav .nav-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}
#marketing-nav .nav-links a:hover,
#marketing-nav .nav-links a.active {
    color: #F15AFF;
}
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(90deg, #A957FE 0%, #F15AFF 103.75%);
    color: #fff;
    padding: 16px 40px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    font-size: 18px;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(175, 95, 255, 0.3);
}
.btn-outline {
    border: 2px solid #7A00DA;
    color: #7A00DA;
    background: transparent;
    padding: 14px 40px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    font-size: 18px;
}
.btn-outline:hover {
    background: #7A00DA;
    color: #fff;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Part Banner */
.part-banner {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.00) 100%),
                linear-gradient(270deg, rgba(255, 39, 118, 0.40) 0%, rgba(140, 51, 255, 0.40) 100%), #FFF;
    padding: 120px 20px 80px;
}
.part-banner .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.part-banner h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}
.part-banner p {
    font-size: 1.25rem;
    margin-bottom: 30px;
    opacity: 0.8;
}
.part-banner .btn-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.jump-box {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.jump-box a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
    transition: all 0.3s;
}
.jump-box a:hover {
    color: #7A00DA;
    font-weight: 700;
}
.jump-box svg {
    opacity: 0.6;
}

/* Part High Quality */
.part-high-quality {
    background: radial-gradient(106.06% 46.74% at 0% 49.41%, rgba(148, 0, 218, 0.30) 0%, rgba(187, 0, 218, 0.00) 97.73%),
                linear-gradient(339deg, rgba(148, 0, 218, 0.20) 3.29%, rgba(187, 0, 218, 0.00) 24.01%),
                linear-gradient(234deg, rgba(0, 172, 255, 0.30) 3.02%, rgba(0, 172, 255, 0.00) 46.13%), #000;
    color: #fff;
    padding: 100px 20px;
}
.part-high-quality h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
}
.part-high-quality .subtitle {
    text-align: center;
    font-size: 1.25rem;
    opacity: 0.8;
    margin-bottom: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.part-high-quality-btns {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}
.part-high-quality-btn {
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(239, 245, 255, 0.1);
    padding: 16px 24px;
    cursor: pointer;
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 100%;
    transition: all 0.3s;
}
.part-high-quality-btn.active,
.part-high-quality-btn:hover {
    background: rgba(175, 95, 255, 0.2);
    border: 1px solid #AF5FFF;
    color: #fff;
}
.tag-style-1 {
    background: linear-gradient(282.71deg, #FF6682 23.89%, #FF7F56 72.3%);
    padding: 4px 6px;
    border-radius: 8px 0 8px 0;
    position: absolute;
    top: -14px;
    right: 0;
    font-style: italic;
    line-height: 100%;
    font-size: 12px;
    font-weight: bold;
}

/* Swiper Slides */
.part-high-quality-swiper .swiper-slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.part-high-quality-swiper .swiper-slide > div:first-child {
    order: 2;
}
.part-high-quality-swiper .swiper-slide > div:last-child {
    order: 1;
}

/* Part Edit Multiple */
.part-edit-multible {
    background: linear-gradient(180deg, #FFF 0%, #FFF 28%, rgba(255, 255, 255, 0.00) 100%),
                linear-gradient(270deg, rgba(255, 39, 118, 0.40) 0%, rgba(140, 51, 255, 0.40) 100%), #FFF;
    padding: 100px 20px;
}
.part-edit-multible h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
}
.part-edit-multible .subtitle {
    text-align: center;
    font-size: 1.25rem;
    opacity: 0.8;
    margin-bottom: 60px;
}
.nav-pills {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}
.nav-pills .nav-link {
    flex: 1;
    min-width: 200px;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #F15AFF;
    background: transparent;
    color: #000;
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0.6;
}
.nav-pills .nav-link.active {
    background: linear-gradient(90deg, #F15AFF 0%, #A957FE 100%);
    color: #fff;
    opacity: 1;
}
.progress-line {
    height: 3px;
    background-color: #E4E4E7;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 10px;
}
.nav-link.active .progress-line:after {
    content: '';
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #F15AFF 0%, #A957FE 103.75%);
    width: 100%;
    animation: progressBar 4s linear;
}
@keyframes progressBar {
    from { width: 0; }
    to { width: 100%; }
}
.tab-content {
    margin-top: 40px;
}
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}

/* Stats */
.part-real-num-box {
    padding: 80px 20px;
    background: #fff;
}
.part-real-num-box .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}
.part-real-num-box h3 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Part Boost */
.part-boost {
    background: radial-gradient(106.06% 46.74% at 0% 49.41%, rgba(148, 0, 218, 0.30) 0%, rgba(187, 0, 218, 0.00) 97.73%),
                linear-gradient(339deg, rgba(148, 0, 218, 0.20) 3.29%, rgba(187, 0, 218, 0.00) 24.01%),
                linear-gradient(234deg, rgba(0, 172, 255, 0.30) 3.02%, rgba(0, 172, 255, 0.00) 46.13%), #000;
    color: #fff;
    padding: 100px 20px;
}
.part-boost h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
}
.part-boost .subtitle {
    text-align: center;
    font-size: 1.25rem;
    opacity: 0.8;
    margin-bottom: 60px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.part-boost-check-btns {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}
.part-boost-check-btn {
    border-radius: 4px;
    border: 1px solid #AF5FFF;
    background: rgba(175, 95, 255, 0.20);
    padding: 16px 40px;
    color: rgba(255, 255, 255, 0.80);
    line-height: 100%;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 18px;
}
.part-boost-check-btn:hover,
.part-boost-check-btn.active {
    background-color: #7A00DA;
    border: 1px solid #7A00DA;
    color: #FFF;
}
.bar-item {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(239, 245, 255, 0.10);
    padding: 30px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s;
}
.bar-item.active {
    border: 1px solid #AF5FFF;
    background: rgba(175, 95, 255, 0.20);
}
.bar-item h4 {
    font-weight: 400;
    opacity: 0.8;
    font-size: 20px;
    margin-bottom: 0;
}
.bar-item.active h4 {
    opacity: 1;
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(90deg, #F15AFF 0%, #A957FE 103.75%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bar-content {
    display: none;
    padding-top: 15px;
    opacity: 0.8;
}
.bar-item.active .bar-content {
    display: block;
}
.bar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.arrow-circle {
    opacity: 0;
    width: 24px;
    height: 24px;
    transition: all 0.3s;
}
.bar-item.active .arrow-circle {
    opacity: 1;
}

/* Testimonials */
.part-teleprompter-unleath {
    background: linear-gradient(360deg, #FFF 0.14%, #FFF 28.1%, rgba(255, 255, 255, 0.00) 100%),
                linear-gradient(270deg, rgba(255, 39, 118, 0.40) 0%, rgba(140, 51, 255, 0.40) 100%), #FFF;
    padding: 100px 20px;
}
.multible-item {
    border-radius: 16px;
    background: #fff;
    transition: all 0.3s;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.multible-item:hover {
    filter: drop-shadow(0px 0px 48px rgba(200, 42, 255, 0.18));
    transform: translateY(-5px);
}
.multible-item h4 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Industries */
.part-further {
    padding: 100px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.00) 100%),
                linear-gradient(270deg, rgba(255, 39, 118, 0.40) 0%, rgba(140, 51, 255, 0.40) 100%), #FFF;
}
.part-further h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 60px;
    font-weight: 700;
}
.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.industry-item {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s;
}
.industry-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(123, 76, 255, 0.2);
}

/* CTA */
.part-bottom-wrapper {
    background: radial-gradient(44.63% 41.91% at 0% 50.15%, rgba(148, 0, 218, 0.35) 0%, rgba(187, 0, 218, 0.00) 97.73%),
                linear-gradient(312deg, rgba(148, 0, 218, 0.30) 4.39%, rgba(187, 0, 218, 0.00) 45.27%),
                linear-gradient(210deg, rgba(0, 172, 255, 0.40) 3.27%, rgba(0, 172, 255, 0.00) 39.6%), #000;
    color: #fff;
    padding: 100px 20px;
    text-align: center;
    border-radius: 16px;
    margin: 40px 20px;
}
.part-bottom-wrapper h2 {
    font-size: 3.5rem;
    margin-bottom: 30px;
    font-weight: 700;
}

/* Footer */
footer {
    background: #000;
    color: #fff;
    padding: 60px 20px 30px;
}
footer .container {
    text-align: center;
}
footer p {
    opacity: 0.8;
    margin-bottom: 15px;
}
footer .tagline {
    font-weight: 600;
    font-size: 1.1rem;
}
footer .social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    margin: 20px 0;
    transition: all 0.3s;
}
footer .social-link:hover {
    background: rgba(255, 255, 255, 0.2);
}
footer .footer-links {
    margin-top: 20px;
}
footer .footer-link {
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}
footer .footer-link:hover {
    opacity: 1;
    text-decoration: underline;
}
footer .separator {
    margin: 0 10px;
    opacity: 0.5;
}

/* Responsive */
@media (max-width: 991px) {
    .part-banner .row,
    .part-high-quality-swiper .swiper-slide {
        grid-template-columns: 1fr;
    }
    .part-banner h1 {
        font-size: 2.5rem;
    }
    .part-real-num-box .container {
        grid-template-columns: repeat(2, 1fr);
    }
    #marketing-nav .nav-links {
        display: none;
    }
    .mobile-menu-btn {
        display: block;
    }
    #marketing-nav.mobile-open .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.98);
        padding: 20px;
        gap: 15px;
    }
    .part-high-quality-swiper .swiper-slide > div:first-child {
        order: 1;
    }
    .part-high-quality-swiper .swiper-slide > div:last-child {
        order: 2;
    }
}

@media (max-width: 640px) {
    .part-banner h1 {
        font-size: 2rem;
    }
    .part-high-quality h2,
    .part-edit-multible h2,
    .part-boost h2,
    .part-further h2 {
        font-size: 2rem;
    }
    .part-bottom-wrapper h2 {
        font-size: 2.5rem;
    }
    .part-real-num-box .container {
        grid-template-columns: 1fr;
    }
    .part-real-num-box h3 {
        font-size: 2.5rem;
    }
}

/* Utility classes */
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.text-center { text-align: center; }
.text-white { color: #fff; }
.font-weight-bold { font-weight: 700; }
.img-fluid { max-width: 100%; height: auto; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.gap-3 { gap: 1rem; }