:root {
    color: #1d2733;
    font-synthesis: none;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --blue: #319bff;
    --blue-dark: #1687f5;
    --cyan: #6ee7f3;
    --text: #1d2733;
    --muted: #667382;
    --light: #f6fbff;
    --line: #e9eef5;
    --shadow: 0 12px 34px #1c5c961f;
    background: #fff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif
}

* {
    box-sizing: border-box
}

body {
    background: #fff;
    min-width: 320px;
    margin: 0;
    padding-top: 66px
}

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

h1, h2, h3, p {
    margin-top: 0
}

.home-page {
    min-height: 100vh;
    overflow-x: hidden
}

.top-nav {
    z-index: 1000;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: #fffffffa;
    justify-content: space-between;
    align-items: center;
    height: 66px;
    padding: 0 clamp(20px, 8vw, 92px);
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 1px #0000000a, 0 10px 26px #1e5a8c14
}

.brand {
    color: #15aeea;
    align-items: center;
    gap: 0;
    font-size: 20px;
    font-weight: 900;
    display: inline-flex
}

.brand span {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

.brand img {
    object-fit: contain;
    width: 220px;
    height: 54px
}

.top-nav nav {
    color: #607181;
    gap: 34px;
    font-size: 16px;
    font-weight: 800;
    display: flex
}

.top-nav nav a:hover {
    color: var(--blue)
}

.nav-actions {
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 900;
    display: flex
}

.nav-primary {
    color: #fff;
    background: #3aa0ff;
    border-radius: 6px;
    padding: 10px 18px
}

.nav-login {
    color: #6b7785
}

.hero-carousel {
    width: 100%;
    margin-top: 0;
    padding: 0;
    position: relative;
    overflow: hidden
}

.carousel-track {
    will-change: transform;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    display: flex
}

.carousel-slide {
    flex: 0 0 100%;
    min-width: 0
}

.carousel-dots {
    z-index: 10;
    gap: 8px;
    display: flex;
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translate(-50%)
}

.carousel-dots button {
    cursor: pointer;
    background: #ffffff73;
    border: none;
    border-radius: 999px;
    width: 8px;
    height: 8px;
    padding: 0;
    transition: all .3s
}

.carousel-dots button.active {
    background: #fff;
    width: 24px
}

.carousel-arrow {
    z-index: 10;
    color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #ffffff40;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 1;
    transition: background .2s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.carousel-arrow:hover {
    background: #ffffff73
}

.carousel-arrow.left {
    left: 16px
}

.carousel-arrow.right {
    right: 16px
}

.hero {
    background: radial-gradient(circle at 88% 46%, #47d6e14d, #0000 18rem), linear-gradient(110deg, #c9fbff 0%, #effcff 48%, #fff 100%);
    grid-template-columns:1fr 1fr;
    min-height: 420px;
    padding: 82px clamp(24px, 8vw, 112px) 86px;
    display: grid;
    position: relative
}

.hero-copy {
    z-index: 2;
    max-width: 560px;
    position: relative
}

.hero h1 {
    color: #fff;
    letter-spacing: -.04em;
    background: linear-gradient(90deg, #3bcbe6, #3aa0ff);
    border-radius: 8px;
    margin-bottom: 22px;
    padding: 9px 18px;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.12;
    display: inline-block
}

.hero p {
    color: #244255;
    max-width: 480px;
    margin-bottom: 28px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.8
}

.hero-stats {
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 520px;
    margin-bottom: 28px;
    display: grid
}

.hero-stats article {
    background: #ffffffc7;
    border: 1px solid #2f9bff24;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 10px 24px #1e80b414
}

.hero-stats strong {
    color: #2f9bff;
    font-size: 25px;
    line-height: 1.1;
    display: block
}

.hero-stats span {
    color: #5b6c7c;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 800;
    display: block
}

.outline-button, .white-button {
    color: #1aa8c4;
    white-space: nowrap;
    border: 1px solid #26c2d9;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    min-width: 138px;
    min-height: 42px;
    padding: 0 22px;
    font-weight: 800;
    display: inline-flex
}

.hero-ai {
    place-items: center;
    min-height: 300px;
    display: grid;
    position: relative
}

.hero-ai strong {
    z-index: 2;
    color: #21bfd6;
    text-shadow: 0 20px 40px #00abcf3d;
    font-size: clamp(90px, 16vw, 210px);
    font-weight: 950;
    position: relative
}

.ai-ring {
    filter: blur(.2px);
    background: repeating-radial-gradient(circle, #22b8d02e 0 3px, #0000 3px 9px), radial-gradient(circle, #ffffffb3, #7decf652, #0000 68%);
    border-radius: 50%;
    width: min(420px, 80vw);
    height: min(420px, 80vw);
    position: absolute
}

.entry-strip {
    z-index: 5;
    grid-template-columns:repeat(4, 1fr);
    gap: 18px;
    width: min(1100px, 100% - 48px);
    margin: -38px auto 48px;
    display: grid;
    position: relative
}

.entry-strip article, .plans article, .solutions article, .feature-grid article, .process-grid article, .industry-grid article, .review-grid article {
    box-shadow: var(--shadow);
    background: #fff;
    border-radius: 10px
}

.entry-strip article {
    color: #2d4052;
    place-items: center;
    gap: 8px;
    min-height: 86px;
    font-weight: 900;
    display: grid
}

.entry-strip span, .feature-grid span, .process-grid span {
    color: #fff;
    background: #3aa0ff;
    border-radius: 8px;
    place-items: center;
    width: 32px;
    height: 32px;
    display: grid
}

section {
    padding: 54px clamp(24px, 8vw, 112px)
}

section h2 {
    color: #27313c;
    text-align: center;
    margin-bottom: 10px;
    font-size: clamp(26px, 4vw, 38px)
}

section > p, .plans-section > p, .solutions-section > p, .samples-section > p, .process-section > p, .industries-section > p, .why-section > p, .reviews-section > p {
    color: #7b8794;
    text-align: center;
    margin-bottom: 34px
}

.plans {
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: min(760px, 100%);
    margin: 0 auto;
    display: grid
}

.plans article {
    text-align: center;
    border: 1px solid #e9eef5;
    padding: 28px 24px
}

.plans article.featured {
    border: 2px solid #2f9bff;
    position: relative;
    transform: translateY(-8px)
}

.plan-badge {
    color: #fff;
    white-space: nowrap;
    background: #2f9bff;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 900;
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translate(-50%)
}

.plans h3 {
    margin-bottom: 12px
}

.original-price {
    color: #c0c8d2;
    margin-bottom: 4px;
    font-size: 13px;
    text-decoration: line-through
}

.price strong {
    color: #2f9bff;
    font-size: 34px
}

.price span {
    color: #9aa7b4
}

.plans ul {
    color: #647384;
    text-align: left;
    gap: 10px;
    margin: 20px 0;
    padding: 0;
    font-size: 13px;
    list-style: none;
    display: grid
}

.plans li:before {
    content: "✓ ";
    color: #2f9bff
}

.plans li.restriction {
    color: #e84545
}

.plans li.restriction:before {
    color: #2f9bff
}

.plans a {
    color: #fff;
    background: #2f9bff;
    border-radius: 7px;
    padding: 11px;
    font-weight: 900;
    display: block
}

.solutions {
    grid-template-columns:repeat(3, 1fr);
    gap: 22px;
    width: min(1050px, 100%);
    margin: 0 auto;
    display: grid
}

.solution-card {
    min-height: 220px;
    padding: 34px
}

.solution-card.pink {
    background: #ffe9ee
}

.solution-card.blue {
    background: #dff1ff
}

.solution-card.green {
    background: #e7f8e7;
    position: relative
}

.solution-card.green:after {
    content: "NEW";
    color: #fff;
    background: #ff8c1a;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 900;
    position: absolute;
    top: -8px;
    right: -8px
}

.solution-card span {
    color: #2f9bff;
    font-size: 26px
}

.solution-card p, .industry-grid p, .review-grid p {
    color: #6b7a8a;
    line-height: 1.7
}

.solution-card ul {
    color: #5f7284;
    margin: 18px 0 0;
    padding: 0;
    list-style: none
}

.solution-card li:before {
    content: "✓ ";
    color: #27b36a
}

.blue-section {
    color: #fff;
    background: #3b9df5
}

.blue-section h2, .blue-section > p {
    color: #fff
}

.blue-section > p {
    opacity: .82
}

.feature-grid {
    grid-template-columns:repeat(3, 1fr);
    gap: 22px;
    width: min(1100px, 100%);
    margin: 0 auto;
    display: grid
}

.feature-grid article {
    gap: 16px;
    min-height: 112px;
    padding: 24px;
    display: flex
}

.feature-grid h3 {
    color: #26313b;
    margin-bottom: 8px
}

.feature-grid p {
    color: #7a8795;
    margin: 0;
    line-height: 1.6
}

.samples-section {
    background: #fff
}

.sample-tabs {
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
    display: flex
}

.sample-tabs button {
    cursor: pointer;
    color: #667382;
    background: #f0f4f8;
    border: none;
    border-radius: 999px;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 700;
    transition: all .2s
}

.sample-tabs button.active {
    color: #fff;
    background: #2f9bff
}

.video-row {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 8px 16px 20px;
    display: flex;
    overflow-x: auto
}

.video-row::-webkit-scrollbar {
    display: none
}

.video-row article {
    scroll-snap-align: start;
    cursor: pointer;
    border-radius: 16px;
    flex: 0 0 180px;
    justify-content: center;
    align-items: center;
    height: 320px;
    transition: transform .2s;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px #0000002e
}

.video-row article:hover {
    transform: translateY(-4px)
}

.video-row article img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.play-btn {
    color: #fff;
    z-index: 2;
    background: #2f9bff;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    font-size: 18px;
    display: flex;
    box-shadow: 0 4px 16px #2f9bff80
}

.video-row span {
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 4px #00000080;
    font-size: 13px;
    font-weight: 900;
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0
}

.process-grid {
    grid-template-columns:repeat(3, 1fr);
    gap: 24px;
    width: min(980px, 100%);
    margin: 0 auto 28px;
    display: grid
}

.process-grid article {
    text-align: center;
    background: #fff;
    border-radius: 16px;
    padding: 48px 32px 32px;
    position: relative
}

.process-grid em {
    color: #2f9bff;
    background: #2f9bff1f;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 15px;
    font-style: normal;
    font-weight: 900;
    position: absolute;
    top: 18px;
    left: 18px
}

.process-icon {
    background: linear-gradient(135deg, #4db8ff, #2f9bff);
    border-radius: 18px;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    box-shadow: 0 10px 28px #2f9bff59
}

.process-grid h3 {
    color: #1d2733;
    margin-bottom: 10px;
    font-size: 22px
}

.process-grid p {
    color: #8a96a3;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.7
}

.process-grid ul {
    text-align: left;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.process-grid li {
    color: #4a5568;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    display: flex
}

.process-grid li:before {
    content: "";
    background: #2f9bff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") 50%/14px no-repeat;
    border-radius: 50%;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex
}

.white-button {
    color: #2f9bff;
    background: #fff;
    border-color: #0000;
    width: fit-content;
    min-width: 178px;
    margin: 0 auto;
    display: flex
}

.industries-section, .deliverables-section, .why-section {
    background: #fff
}

.industry-grid {
    grid-template-columns:repeat(5, 1fr);
    gap: 16px;
    width: min(1120px, 100%);
    margin: 0 auto;
    display: grid
}

.industry-grid article {
    overflow: hidden
}

.industry-image {
    justify-content: center;
    align-items: center;
    height: 180px;
    display: flex;
    overflow: hidden
}

.industry-icon {
    filter: drop-shadow(0 4px 12px #0003);
    font-size: 56px
}

.industry-grid h3, .industry-grid p {
    padding: 0 16px
}

.industry-grid h3 {
    color: #1d2733;
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 16px
}

.industry-grid p {
    padding-bottom: 16px;
    font-size: 13px;
    line-height: 1.7
}

.deliverables-section {
    background: linear-gradient(#fff 0%, #f3f9ff 100%)
}

.deliverables-grid {
    grid-template-columns:repeat(4, 1fr);
    gap: 18px;
    width: min(1100px, 100%);
    margin: 0 auto;
    display: grid
}

.deliverables-grid article {
    box-shadow: var(--shadow);
    background: #fff;
    border: 1px solid #e7f0fb;
    border-radius: 14px;
    padding: 26px 24px
}

.deliverables-grid span {
    color: #2f9bff;
    background: #e9f5ff;
    border-radius: 10px;
    place-items: center;
    width: 34px;
    height: 34px;
    font-weight: 950;
    display: grid
}

.deliverables-grid h3 {
    margin: 18px 0 10px
}

.deliverables-grid p {
    color: #6b7a8a;
    margin: 0;
    line-height: 1.7
}

.stats {
    grid-template-columns:repeat(4, 1fr);
    gap: 18px;
    width: min(1100px, 100%);
    margin: 0 auto 26px;
    display: grid
}

.stats article {
    box-shadow: var(--shadow);
    text-align: center;
    background: #fff;
    border-radius: 8px;
    padding: 24px
}

.stats strong {
    color: #2f9bff;
    font-size: 28px;
    display: block
}

.stats span {
    color: #8793a0
}

.compare-table {
    width: min(1100px, 100%);
    box-shadow: var(--shadow);
    border-radius: 12px;
    margin: 0 auto;
    overflow: hidden
}

.table-head, .table-row {
    grid-template-columns:180px 1fr 1fr;
    display: grid
}

.table-head {
    color: #fff;
    background: #2f9bff;
    font-weight: 900
}

.table-head strong:last-child {
    background: #606060
}

.table-head span, .table-head strong, .table-row span, .table-row p {
    margin: 0;
    padding: 16px 18px
}

.table-row {
    background: #fff;
    border-bottom: 1px solid #edf1f5
}

.table-row span {
    color: #4e5b68;
    font-weight: 900
}

.table-row p {
    color: #667382
}

.reviews-section {
    background: #3b9df5
}

.review-grid {
    grid-template-columns:repeat(3, 1fr);
    gap: 22px;
    width: min(1100px, 100%);
    margin: 0 auto;
    display: grid
}

.review-grid article {
    padding: 24px
}

.review-grid span {
    color: #fff;
    background: #3b9df5;
    border-radius: 999px;
    place-items: center;
    width: 42px;
    height: 42px;
    display: grid
}

.review-grid small {
    color: #ffc400;
    letter-spacing: .2em
}

.final-cta {
    color: #fff;
    background: radial-gradient(circle at 88% 28%, #ffffff52, #0000 18rem), linear-gradient(100deg, #2f9bff, #41c7ee);
    justify-content: space-between;
    align-items: center;
    gap: 34px;
    display: flex
}

.final-cta div {
    max-width: 820px
}

.final-cta span {
    background: #fff3;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 900;
    display: inline-flex
}

.final-cta h2 {
    color: #fff;
    text-align: left;
    margin: 18px 0 14px;
    font-size: clamp(28px, 4vw, 42px)
}

.final-cta p {
    color: #ffffffdb;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8
}

.final-cta a {
    color: #2f9bff;
    background: #fff;
    border-radius: 999px;
    flex: none;
    padding: 15px 26px;
    font-weight: 950;
    box-shadow: 0 14px 30px #135d992e
}

.footer {
    color: #fff;
    background: #202131;
    padding: 46px clamp(24px, 8vw, 112px) 24px
}

.footer-main {
    grid-template-columns:minmax(280px, .9fr) minmax(0, 1.8fr);
    gap: 58px;
    display: grid
}

.footer-logo-row {
    align-items: center;
    gap: 12px;
    display: flex
}

.footer-brand img {
    object-fit: contain;
    width: 220px;
    height: 74px
}

.footer-brand strong {
    font-size: 22px
}

.footer-brand p {
    color: #ffffff9e
}

.qr-row {
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    display: inline-flex
}

.qr-row > div {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    display: flex
}

.qr-row small {
    color: #ffffffad;
    text-align: center;
    font-size: 12px
}

.qr-image {
    object-fit: cover;
    border-radius: 6px;
    width: 110px;
    height: 110px
}

.qr-code {
    background: linear-gradient(90deg, #111 8px, #0000 8px) 0 0/16px 16px, linear-gradient(#111 8px, #0000 8px) 0 0/16px 16px, #fff;
    border: 6px solid #fff;
    border-radius: 4px;
    width: 78px;
    height: 78px;
    position: relative
}

.qr-code:before, .qr-code:after, .qr-code span {
    content: "";
    background: #fff;
    border: 5px solid #111;
    width: 18px;
    height: 18px;
    position: absolute
}

.qr-code:before {
    top: 4px;
    left: 4px
}

.qr-code:after {
    top: 4px;
    right: 4px
}

.qr-code span {
    bottom: 4px;
    left: 4px
}

.qr-code--blue {
    filter: hue-rotate(165deg) saturate(1.2)
}

.footer-links {
    grid-template-columns:repeat(5, 1fr);
    gap: 22px;
    display: grid
}

.footer-links h4 {
    margin-top: 0
}

.footer-links a {
    color: #ffffff9e;
    margin: 10px 0;
    display: block
}

.footer-bottom {
    color: #ffffff6b;
    border-top: 1px solid #ffffff14;
    justify-content: space-between;
    gap: 18px;
    margin-top: 34px;
    padding-top: 18px;
    font-size: 12px;
    display: flex
}

.slide-2 {
    color: #fff;
    background: linear-gradient(120deg, #14c8d4 0%, #3ae0e8 40%, #5dd8f0 100%);
    grid-template-columns:1fr 1fr;
    align-items: center;
    min-height: 420px;
    padding: 82px clamp(24px, 8vw, 112px) 86px;
    display: grid
}

.slide2-copy h2 {
    color: #fff;
    text-align: left;
    margin-bottom: 14px;
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 950;
    line-height: 1.15
}

.slide2-copy p {
    color: #ffffffe6;
    text-align: left;
    margin-bottom: 28px;
    font-size: 18px;
    font-weight: 700
}

.slide2-tags {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
    display: flex
}

.slide2-tags span {
    color: #fff;
    background: #ffffff26;
    border: 1.5px solid #fffc;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 800
}

.slide2-btn {
    color: #14c8d4;
    background: #fff;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    padding: 13px 32px;
    font-size: 15px;
    font-weight: 900;
    display: inline-flex;
    box-shadow: 0 10px 28px #0000001f
}

.slide2-visual {
    justify-content: center;
    align-items: center;
    display: flex
}

.slide2-screen {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #fff3;
    border-radius: 16px;
    width: min(420px, 100%);
    padding: 16px;
    box-shadow: 0 20px 60px #00000026
}

.screen-bar {
    background: #ffffff80;
    border-radius: 999px;
    width: 60%;
    height: 12px;
    margin-bottom: 14px
}

.screen-grid {
    grid-template-columns:repeat(3, 1fr);
    gap: 10px;
    display: grid
}

.screen-card {
    background: #ffffff59;
    border-radius: 10px;
    height: 90px
}

@media (width <= 900px) {
    .top-nav, .hero, .footer-main {
        display: block
    }

    .top-nav {
        height: auto;
        padding: 14px 20px
    }

    .top-nav nav, .nav-actions {
        flex-wrap: wrap;
        margin-top: 12px
    }

    .entry-strip, .plans, .solutions, .feature-grid, .process-grid, .industry-grid, .deliverables-grid, .stats, .review-grid, .footer-links, .video-row article {
        flex: 0 0 150px;
        height: 266px
    }

    .hero-stats {
        grid-template-columns:1fr
    }

    .final-cta {
        display: block
    }

    .final-cta a {
        margin-top: 24px;
        display: inline-flex
    }

    .footer-bottom {
        flex-direction: column
    }

    .hero {
        padding-top: 52px
    }

    .table-head, .table-row {
        grid-template-columns:1fr
    }
}