:root {
    --color-emerald-100: #D0FAE5;
    --color-emerald-400: #00D492;
    --color-emerald-500: #00BC7D;
    --muted: #F9F9F9;
    --info: #0085DE;
    --chart-1: #f54900;
    --chart-2: #006989;
    --chart-3: #0F4D63;
    --chart-4: #FFB900;
    --chart-5: #FE9A00;
    --sidebar: #F6F6F6;
    --blur-2xl: 40px;
    --tw-ease: initial;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --tw-shadow-color: initial;
    --tw-inset-shadow: 0 0 #0000;
    --tw-inset-shadow-color: initial;
    --tw-inset-shadow-alpha: 100%;
    --tw-inset-ring-shadow: 0 0 #0000;
    --primary-foreground: #F9F9F9;
    --radius: 1rem;
    --tw-border-style: solid;
    --primary: #070707;
    --spacing: .25rem;
    color-scheme: light;
    /*--background: #f4f7fb;*/
    --background: #FBF9FF;
    --background-secondary: hsla(0, 0%, 100%, .72);
    --foreground: #0B0B0B;
    --muted-foreground: #475569;
    --line: rgba(148, 163, 184, .18);
    --font-sans: "Public Sans", sans-serif;
    --font-display: "Inter", "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-serif: "Lora Variable", "Lora", "Source Serif Pro", "Source Serif 4", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", "Source Han Serif SC", "Source Han Serif TC", "Source Han Serif", "Songti SC", "STSong", "STSongti-SC-Regular", "PingFang SC", "SimSun", "NSimSun", "瀹嬩綋", "FangSong", "浠垮畫", "KaiTi", "妤蜂綋", Georgia, "Times New Roman", Cambria, "Liberation Serif", serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-mono {
    font-family: var(--font-mono);
}

.font-din {
    font-family: DINBol, sans-serif;
}


.font-hero {
    font-family: Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
}

.section-fade {
    animation: fade-up .8s ease-out both
}

.logo-track {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    -webkit-animation: logo-marquee 28s linear infinite;
    -moz-animation: logo-marquee 28s linear infinite;
    -o-animation: logo-marquee 28s linear infinite;
    animation: logo-marquee 28s linear infinite
}

.logo-track-reverse {
    animation-direction: reverse
}

@-webkit-keyframes logo-marquee {
    from {
  -webkit-transform: translatex(0);
  transform: translatex(0)
    }

    to {
  -webkit-transform: translatex(-50%);
  transform: translatex(-50%)
    }
}

@-moz-keyframes logo-marquee {
    from {
  -moz-transform: translatex(0);
  transform: translatex(0)
    }

    to {
  -moz-transform: translatex(-50%);
  transform: translatex(-50%)
    }
}

@-o-keyframes logo-marquee {
    from {
  -o-transform: translatex(0);
  transform: translatex(0)
    }

    to {
  -o-transform: translatex(-50%);
  transform: translatex(-50%)
    }
}

@keyframes logo-marquee {
    from {
  -webkit-transform: translatex(0);
  -moz-transform: translatex(0);
  -o-transform: translatex(0);
  transform: translatex(0)
    }

    to {
  -webkit-transform: translatex(-50%);
  -moz-transform: translatex(-50%);
  -o-transform: translatex(-50%);
  transform: translatex(-50%)
    }
}

.hero-section {
    min-height: 660px;
    background: #eeebff
}

.hero-video {
    -o-object-position: center center;
    object-position: center center
}

.hero-video-overlay {
    background: linear-gradient(180deg, #eeebff, #fefdff00 75%, #fff)
}

.trust-title-reveal {
    display: inline-flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    isolation: isolate
}

.trust-title-line {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(26px) scale(.98);
    filter: blur(10px);
    animation: trust-title-rise 1.5s cubic-bezier(.2, .7, .2, 1) forwards;
    will-change: transform, opacity, filter
}

.trust-title-line-primary {
    animation-delay: .18s
}

.trust-title-line-accent {
    margin-left: 2px;
    animation-delay: .52s
}

.trust-title-line-accent:after {
    content: "";
    position: absolute;
    inset: -8px -18px;
    background: linear-gradient(105deg, transparent 12%, hsla(0, 0%, 100%, .15) 42%, hsla(0, 0%, 100%, .72) 50%, hsla(0, 0%, 100%, .18) 58%, transparent 88%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-36%) skewX(-16deg);
    animation: trust-title-shimmer 3.8s ease-in-out 1.35s infinite;
    pointer-events: none
}

.trust-title-glow {
    position: absolute;
    left: 50%;
    top: -18px;
    z-index: 0;
    height: 112px;
    width: 356px;
    transform: translateX(-50%);
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(174, 121, 255, .22) 0, rgba(76, 152, 255, .14) 42%, rgba(76, 152, 255, 0) 76%);
    filter: blur(34px);
    opacity: 0;
    animation: trust-title-glow-in 1.9s ease-out .24s forwards, trust-title-glow-breathe 6s ease-in-out 2.4s infinite;
    pointer-events: none
}

.trust-subtitle-reveal {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(8px);
    animation: trust-subtitle-rise 1.2s ease-out .9s forwards
}

.trust-card-art-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none
}

.trust-card-panel {
    --trust-mx: 72%;
    --trust-my: 28%;
    transition: transform .32s ease, box-shadow .32s ease, filter .32s ease;
    will-change: transform, box-shadow
}

.trust-card-spotlight {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(240px circle at var(--trust-mx) var(--trust-my), hsla(0, 0%, 100%, .46), hsla(0, 0%, 100%, .12) 28%, hsla(0, 0%, 100%, 0) 62%);
    mix-blend-mode: screen;
    transition: opacity .26s ease
}

.trust-card-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(102, 124, 255, .12), inset 0 0 0 1px hsla(0, 0%, 100%, .55);
    filter: saturate(1.04)
}

.trust-card-panel:hover .trust-card-spotlight {
    opacity: 1
}

.trust-card-art {
    opacity: .94;
    filter: saturate(1.04);
    transform-origin: center;
    animation: trust-card-art-float 8.5s ease-in-out infinite;
    will-change: transform, opacity, filter
}

.trust-card-art-glow {
    opacity: .34;
    filter: blur(14px) saturate(1.18);
    mix-blend-mode: screen;
    transform-origin: center;
    animation: trust-card-art-glow 7.2s ease-in-out infinite;
    will-change: transform, opacity
}

.trust-card-aura {
    right: -18px;
    height: 168px;
    width: 168px;
    filter: blur(34px);
    opacity: .34;
    animation: trust-card-aura-breathe 7s ease-in-out infinite
}

.trust-card-aura,
.trust-card-sweep {
    position: absolute;
    top: -18px;
    border-radius: 9999px
}

.trust-card-sweep {
    right: 34px;
    height: 230px;
    width: 72px;
    filter: blur(12px);
    opacity: 0;
    mix-blend-mode: screen;
    transform: rotate(18deg) translate3d(36px, -10px, 0);
    animation: trust-card-sweep 6.8s ease-in-out infinite
}

.trust-card-aura-blue {
    background: radial-gradient(circle, rgba(76, 152, 255, .22) 0, rgba(124, 99, 255, .16) 42%, rgba(76, 152, 255, 0) 76%)
}

.trust-card-aura-pink {
    background: radial-gradient(circle, rgba(191, 64, 255, .16) 0, rgba(248, 143, 255, .14) 42%, rgba(191, 64, 255, 0) 76%)
}

.trust-card-aura-blue.trust-card-sweep {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), rgba(140, 190, 255, .28), hsla(0, 0%, 100%, 0))
}

.trust-card-aura-pink.trust-card-sweep {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), rgba(239, 171, 255, .24), hsla(0, 0%, 100%, 0))
}

.trust-card-panel:hover .trust-card-aura {
    opacity: .54;
    transform: scale(1.18)
}

.trust-card-panel:hover .trust-card-art {
    opacity: 1;
    filter: saturate(1.08) brightness(1.03)
}

.trust-card-panel:hover .trust-card-art-glow {
    opacity: .56;
    filter: blur(16px) saturate(1.26)
}

.trust-card-panel:hover .trust-card-sweep {
    opacity: .82;
    animation-duration: 3.2s
}

.playground-title-reveal {
    display: inline-flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    isolation: isolate
}

.playground-title-line {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(28px) scale(.97);
    filter: blur(12px);
    will-change: transform, opacity, filter
}

.playground-title-line-primary {
    animation-delay: .16s
}

.playground-title-line-accent {
    margin-left: 2px;
    animation-delay: .52s
}

.playground-title-line-accent:after {
    content: "";
    position: absolute;
    inset: -8px -20px;
    background: linear-gradient(106deg, transparent 10%, hsla(0, 0%, 100%, .1) 36%, hsla(0, 0%, 100%, .76) 50%, hsla(0, 0%, 100%, .14) 62%, transparent 88%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-42%) skewX(-16deg);
    animation: playground-title-shimmer 3.9s ease-in-out 1.4s infinite;
    pointer-events: none
}

.playground-title-glow {
    position: absolute;
    left: 50%;
    top: -20px;
    z-index: 0;
    height: 118px;
    width: 348px;
    transform: translateX(-50%);
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(201, 80, 255, .18) 0, rgba(92, 116, 255, .16) 44%, rgba(92, 116, 255, 0) 76%);
    filter: blur(34px);
    opacity: 0;
    pointer-events: none
}

.playground-subtitle-reveal {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(8px)
}

.playground-image-shell {
    position: relative;
    isolation: isolate
}

.playground-image-glow {
    position: absolute;
    inset: 34px 62px auto;
    z-index: 0;
    height: 220px;
    border-radius: 9999px;
    background: radial-gradient(circle at 25% 45%, rgba(92, 116, 255, .18), transparent 34%), radial-gradient(circle at 68% 35%, rgba(201, 80, 255, .16), transparent 30%);
    filter: blur(46px);
    opacity: 0;
    pointer-events: none
}

.playground-image-reveal {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    opacity: 0;
    transform: perspective(1800px) rotateX(12deg) rotate(-5deg) scale(.92);
    filter: blur(10px);
    will-change: transform, opacity, filter
}

.playground-section-visible .playground-title-line {
    animation: playground-title-rise 1.7s cubic-bezier(.2, .7, .2, 1) forwards
}

.playground-section-visible .playground-title-glow {
    animation: playground-title-glow-in 1.9s ease-out .26s forwards, playground-title-glow-breathe 6.2s ease-in-out 2.2s infinite
}

.playground-section-visible .playground-subtitle-reveal {
    animation: playground-subtitle-rise 1.2s ease-out .92s forwards
}

.playground-section-visible .playground-image-glow {
    animation: playground-image-glow-in 1.7s ease-out .8s forwards, playground-image-glow-breathe 7s ease-in-out 2.5s infinite
}

.playground-section-visible .playground-image-reveal {
    animation: playground-image-enter 1.9s cubic-bezier(.18, .76, .2, 1) .48s forwards, playground-image-float 8s ease-in-out 2.6s infinite
}

.infra-title-reveal {
    display: inline-flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    isolation: isolate
}

.infra-title-line {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(28px) scale(.97);
    filter: blur(12px);
    will-change: transform, opacity, filter
}

.infra-title-line-primary {
    animation-delay: .16s
}

.infra-title-line-accent {
    margin-left: 2px;
    animation-delay: .52s
}

.infra-title-line-accent:after {
    content: "";
    position: absolute;
    inset: -8px -20px;
    background: linear-gradient(106deg, transparent 10%, hsla(0, 0%, 100%, .1) 36%, hsla(0, 0%, 100%, .78) 50%, hsla(0, 0%, 100%, .14) 62%, transparent 88%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-42%) skewX(-16deg);
    animation: infra-title-shimmer 3.9s ease-in-out 1.4s infinite;
    pointer-events: none
}

.infra-title-glow {
    position: absolute;
    left: 50%;
    top: -18px;
    z-index: 0;
    height: 118px;
    width: 370px;
    transform: translateX(-50%);
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(201, 80, 255, .18) 0, rgba(92, 116, 255, .16) 44%, rgba(92, 116, 255, 0) 76%);
    filter: blur(34px);
    opacity: 0;
    pointer-events: none
}

.infra-subtitle-reveal {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(8px)
}

.infra-card-reveal {
    opacity: 0;
    transform: translateY(36px) scale(.97);
    filter: blur(12px);
    will-change: transform, opacity, filter
}

.infra-section-visible .infra-title-line {
    animation: infra-title-rise 1.7s cubic-bezier(.2, .7, .2, 1) forwards
}

.infra-section-visible .infra-title-glow {
    animation: infra-title-glow-in 1.9s ease-out .26s forwards, infra-title-glow-breathe 6.2s ease-in-out 2.2s infinite
}

.infra-section-visible .infra-subtitle-reveal {
    animation: infra-subtitle-rise 1.2s ease-out .92s forwards
}

.infra-section-visible .infra-card-reveal {
    animation: infra-card-rise 1.05s cubic-bezier(.2, .72, .2, 1) forwards
}

.about-card-reveal,
.about-copy-reveal,
.about-hero-visual,
.about-image-reveal,
.about-panel-reveal,
.about-section-title,
.about-stat-reveal,
.about-title-reveal {
    opacity: 0;
    will-change: transform, opacity, filter
}

.about-section-title,
.about-title-reveal {
    transform: translateY(28px) scale(.98);
    filter: blur(10px)
}

.about-copy-reveal {
    transform: translateY(20px);
    filter: blur(8px)
}

.about-card-reveal,
.about-stat-reveal {
    transform: translateY(34px) scale(.97);
    filter: blur(10px)
}

.about-hero-visual,
.about-image-reveal,
.about-panel-reveal {
    transform: translateY(30px) scale(.98);
    filter: blur(12px)
}

.about-section-visible .about-section-title,
.about-section-visible .about-title-reveal {
    animation: about-title-rise 1.45s cubic-bezier(.2, .72, .2, 1) forwards
}

.about-section-visible .about-copy-reveal {
    animation: about-copy-rise 1s ease-out .16s forwards
}

.about-section-visible .about-card-reveal,
.about-section-visible .about-stat-reveal {
    animation: about-card-rise .95s cubic-bezier(.2, .72, .2, 1) forwards
}

.about-section-visible .about-hero-visual,
.about-section-visible .about-image-reveal,
.about-section-visible .about-panel-reveal {
    animation: about-visual-rise 1.2s cubic-bezier(.2, .72, .2, 1) .08s forwards
}

.dark {
    color-scheme: dark;
    --background: #07111f;
    --background-secondary: rgba(10, 17, 34, .72);
    --foreground: #f8fafc;
    --muted-foreground: rgba(226, 232, 240, .72);
    --line: hsla(0, 0%, 100%, .1)
}

* {
    scrollbar-width: thin;
    scrollbar-color: #797979 transparent;
    box-sizing: border-box
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: #e8e8e8;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #aeaeae;
}

html {
    scroll-behavior: smooth
}

body {
    min-width: 320px;
    font-family: var(--font-sans);
    color: var(--foreground);
    background: radial-gradient(circle at top, rgba(96, 165, 250, .12), transparent 32%), linear-gradient(180deg, var(--background) 0, color-mix(in srgb, var(--background) 92%, #fff 8%) 100%);
    transition: background-color .3s ease, color .3s ease, background .5s ease
}

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

@keyframes fade-up {
    0% {
  opacity: 0;
  transform: translateY(24px)
    }

    to {
  opacity: 1;
  transform: translateY(0)
    }
}

@keyframes hero-ambient-float {

    0%,
    to {
  transform: translateZ(0) scale(1)
    }

    50% {
  transform: translate3d(0, -12px, 0) scale(1.04)
    }
}

@keyframes hero-bg-drift {

    0%,
    to {
  transform: translateZ(0) scale(1)
    }

    50% {
  transform: translate3d(0, 10px, 0) scale(1.016)
    }
}

@keyframes hero-device-float {

    0%,
    to {
  transform: translateZ(0)
    }

    50% {
  transform: translate3d(0, -10px, 0)
    }
}

@keyframes hero-icon-idle {

    0%,
    to {
  transform: translateZ(0)
    }

    50% {
  transform: translate3d(0, -6px, 0)
    }
}

@keyframes hero-light-sweep {

    0%,
    to {
  transform: translate3d(-24px, -8px, 0);
  opacity: .2
    }

    50% {
  transform: translate3d(36px, 14px, 0);
  opacity: .58
    }
}

@keyframes hero-device-glow {

    0%,
    to {
  transform: scale(.98);
  opacity: .82
    }

    50% {
  transform: scale(1.08);
  opacity: 1
    }
}

@keyframes hero-icon-pulse {

    0%,
    to {
  transform: scale(.92);
  opacity: .52
    }

    50% {
  transform: scale(1.08);
  opacity: .92
    }
}

@keyframes trust-title-rise {
    0% {
  opacity: 0;
  transform: translateY(26px) scale(.98);
  filter: blur(10px)
    }

    60% {
  opacity: 1
    }

    to {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0)
    }
}

@keyframes trust-title-shimmer {

    0%,
    16% {
  opacity: 0;
  transform: translateX(-38%) skewX(-16deg)
    }

    28%,
    64% {
  opacity: 1
    }

    to {
  opacity: 0;
  transform: translateX(42%) skewX(-16deg)
    }
}

@keyframes trust-title-glow-in {
    0% {
  opacity: 0;
  transform: translateX(-50%) scale(.92)
    }

    to {
  opacity: 1;
  transform: translateX(-50%) scale(1)
    }
}

@keyframes trust-title-glow-breathe {

    0%,
    to {
  opacity: .72;
  transform: translateX(-50%) scale(1)
    }

    50% {
  opacity: 1;
  transform: translateX(-50%) scale(1.06)
    }
}

@keyframes trust-subtitle-rise {
    0% {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(8px)
    }

    to {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0)
    }
}

@keyframes trust-card-art-float {

    0%,
    to {
  transform: translateZ(0) scale(1);
  opacity: .9
    }

    50% {
  transform: translate3d(0, -5px, 0) scale(1.02);
  opacity: 1
    }
}

@keyframes trust-card-art-glow {

    0%,
    to {
  transform: translateZ(0) scale(.98);
  opacity: .2
    }

    50% {
  transform: translate3d(-3px, -4px, 0) scale(1.06);
  opacity: .44
    }
}

@keyframes trust-card-aura-breathe {

    0%,
    to {
  transform: scale(.96);
  opacity: .22
    }

    50% {
  transform: scale(1.12);
  opacity: .4
    }
}

@keyframes trust-card-sweep {

    0%,
    to {
  opacity: 0;
  transform: rotate(18deg) translate3d(38px, -12px, 0)
    }

    20% {
  opacity: .08
    }

    45%,
    62% {
  opacity: .46
    }

    to {
  opacity: 0;
  transform: rotate(18deg) translate3d(-154px, 20px, 0)
    }
}

@keyframes playground-title-rise {
    0% {
  opacity: 0;
  transform: translateY(28px) scale(.97);
  filter: blur(12px)
    }

    58% {
  opacity: 1
    }

    to {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0)
    }
}

@keyframes playground-title-shimmer {

    0%,
    18% {
  opacity: 0;
  transform: translateX(-42%) skewX(-16deg)
    }

    30%,
    62% {
  opacity: 1
    }

    to {
  opacity: 0;
  transform: translateX(44%) skewX(-16deg)
    }
}

@keyframes playground-title-glow-in {
    0% {
  opacity: 0;
  transform: translateX(-50%) scale(.92)
    }

    to {
  opacity: 1;
  transform: translateX(-50%) scale(1)
    }
}

@keyframes playground-title-glow-breathe {

    0%,
    to {
  opacity: .72;
  transform: translateX(-50%) scale(1)
    }

    50% {
  opacity: 1;
  transform: translateX(-50%) scale(1.05)
    }
}

@keyframes playground-subtitle-rise {
    0% {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(8px)
    }

    to {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0)
    }
}

@keyframes playground-image-enter {
    0% {
  opacity: 0;
  transform: perspective(1800px) rotateX(12deg) rotate(-5deg) scale(.92);
  filter: blur(10px)
    }

    68% {
  opacity: 1
    }

    to {
  opacity: 1;
  transform: perspective(1800px) rotateX(0deg) rotate(0deg) scale(1);
  filter: blur(0)
    }
}

@keyframes playground-image-float {

    0%,
    to {
  transform: perspective(1800px) rotateX(0deg) rotate(0deg) translateZ(0) scale(1)
    }

    50% {
  transform: perspective(1800px) rotateX(1deg) rotate(.45deg) translate3d(0, -6px, 0) scale(1.006)
    }
}

@keyframes playground-image-glow-in {
    0% {
  opacity: 0;
  transform: scale(.9)
    }

    to {
  opacity: 1;
  transform: scale(1)
    }
}

@keyframes playground-image-glow-breathe {

    0%,
    to {
  opacity: .66;
  transform: scale(1)
    }

    50% {
  opacity: 1;
  transform: scale(1.04)
    }
}

@keyframes infra-title-rise {
    0% {
  opacity: 0;
  transform: translateY(28px) scale(.97);
  filter: blur(12px)
    }

    58% {
  opacity: 1
    }

    to {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0)
    }
}

@keyframes infra-title-shimmer {

    0%,
    18% {
  opacity: 0;
  transform: translateX(-42%) skewX(-16deg)
    }

    30%,
    62% {
  opacity: 1
    }

    to {
  opacity: 0;
  transform: translateX(44%) skewX(-16deg)
    }
}

@keyframes infra-title-glow-in {
    0% {
  opacity: 0;
  transform: translateX(-50%) scale(.92)
    }

    to {
  opacity: 1;
  transform: translateX(-50%) scale(1)
    }
}

@keyframes infra-title-glow-breathe {

    0%,
    to {
  opacity: .72;
  transform: translateX(-50%) scale(1)
    }

    50% {
  opacity: 1;
  transform: translateX(-50%) scale(1.05)
    }
}

@keyframes infra-subtitle-rise {
    0% {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(8px)
    }

    to {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0)
    }
}

@keyframes infra-card-rise {
    0% {
  opacity: 0;
  transform: translateY(36px) scale(.97);
  filter: blur(12px)
    }

    65% {
  opacity: 1
    }

    to {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0)
    }
}

@keyframes about-title-rise {
    0% {
  opacity: 0;
  transform: translateY(28px) scale(.98);
  filter: blur(10px)
    }

    60% {
  opacity: 1
    }

    to {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0)
    }
}

@keyframes about-copy-rise {
    0% {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px)
    }

    to {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0)
    }
}

@keyframes about-card-rise {
    0% {
  opacity: 0;
  transform: translateY(34px) scale(.97);
  filter: blur(10px)
    }

    65% {
  opacity: 1
    }

    to {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0)
    }
}

@keyframes about-visual-rise {
    0% {
  opacity: 0;
  transform: translateY(30px) scale(.98);
  filter: blur(12px)
    }

    68% {
  opacity: 1
    }

    to {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0)
    }
}

@media (max-width: 1023px) {
    .hero-section {
  min-height: 640px
    }

    .hero-ambient,
    .hero-device-glow,
    .hero-float-icon,
    .hero-light-sweep {
  display: none
    }

    .hero-bg-motion,
    .hero-device-motion,
    .playground-image-reveal,
    .trust-card-art,
    .trust-card-art-glow {
  animation: none
    }

    .infra-title-glow,
    .playground-title-glow,
    .trust-title-glow {
  width: min(80vw, 320px)
    }
}


.font-din {
    font-family: DINBol, sans-serif;
}

.tooltip {
    position: relative;
    --scale: 0;
}

.tooltip::before,
.tooltip::after {
    position: absolute;
    bottom: calc(100% + .8rem);
    left: 50%;
    transform-origin: bottom center;
    transition: transform 0.2s;
}

.tooltip::before {
    content: attr(data-tooltip);
    display: inline-block;
    width: max-content;
    background-color: #0B0B0B;
    color: #fff;
    padding: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 3);
    font-size: .75rem;
    line-height: 1rem;
    border-radius: calc(1rem * .8);
    transform: translateX(-50%) scale(var(--scale));
}

.tooltip::after {
    content: '';
    border: .4rem solid transparent;
    border-top-color: #0B0B0B;
    transform: translateX(-50%) scale(var(--scale)) translateY(100%);
}

.tooltip:hover {
    --scale: 1;
}

[v-cloak] {
    display: none;
}

/* 鏌ョ湅璇︽儏锛氬弬鑰?Nexhina锛岀害涔濇垚瀹姐€佽兌鍥婂舰锛涙闈?hover锛屾墜鏈哄父鏄?*/
.model-card__detail-btn {
    display: flex !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
    margin-left: auto;
    margin-right: auto;
    border-radius: 999px !important;
}

@media (hover: hover) and (pointer: fine) {
    .model-card__detail-btn {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: auto !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  margin-left: 0;
  margin-right: 0;
    }

    .group:hover .model-card__detail-btn,
    .group:focus-visible .model-card__detail-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
    }

    .model-card--featured .model-card__detail-btn {
  left: 20px;
  right: 20px;
  bottom: 16px;
    }
}

/* theme / component color overrides */
.bg-primary {
    background-color: var(--primary);
}

.bg-clip-padding {
    background-clip: padding-box;
}

.bg-background {
    background-color: #FFFFFF
}

.bg-background\/60 {
    background-color: #FFFFFF
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-background\/60 {
        background: color-mix(in oklab, #ffffff 60%, transparent);

    }
}

.bg-background\/98 {
    background-color: var(--background)
}

.bg-black\/10 {
    background-color: #0000001a
}

.min-h-0 {
    min-height: calc(var(--spacing) * 0);
}

.min-h-screen {
    min-height: 100vh
}

.min-h-svh {
    min-height: 100 svh
}

.text-muted-foreground,
.text-muted-foreground\/0 {
    color: #616161;
}

.text-muted-foreground\/40 {
    color: rgba(97, 97, 97, .4);
}

.text-muted-foreground\/60 {
    color: rgba(97, 97, 97, .6);
}

.text-muted-foreground\/70 {
    color: rgba(97, 97, 97, .7);
}

.text-muted-foreground\/80 {
    color: rgba(97, 97, 97, .8);
}

.text-\[\#7d8593\] {
    color: #7d8593;
}

.text-\[\#24262b\] {
    color: #24262b;
}

.text-\[\#7b8698\] {
    color: #7b8698;
}

.text-\[\#8d96a5\] {
    color: #8d96a5;
}

.text-\[\#363B4E\],
.text-\[\#363b4e\] {
    color: #363b4e;
}

.bg-\[\#faf9ff\] {
    background-color: #faf9ff;
}

.bg-\[\#fff2e8\] {
    background-color: #fff2e8;
}

.bg-\[\#e9e8ff\] {
    background-color: #e9e8ff;
}

.bg-\[\#f1f2f4\] {
    background-color: #f1f2f4;
}

.size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
}

.size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4)
}

.size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
}

.size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
}

.size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8)
}

.size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9)
}

.size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
}

.size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10)
}

.size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
}

.size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12)
}

.size-\[17px\] {
    width: 17px;
    height: 17px
}

.is-centered {
    display: flex;
    align-items: center;
}

@media (hover: hover) {













    @supports (color: color-mix(in lab, red, red)) {
    }




    @supports (color: color-mix(in lab, red, red)) {
    }


    @supports (color: color-mix(in lab, red, red)) {
    }





}

.opacity-0 {
    opacity: 0
}

.origin-center {
    transform-origin: 50%
}

.ease-\[cubic-bezier\(0\.16\,1\,0\.3\,1\)\] {
    --tw-ease: cubic-bezier(.16, 1, .3, 1);
    transition-timing-function: cubic-bezier(.16, 1, .3, 1)
}

.bg-current {
    background-color: currentColor
}

.backdrop-blur-2xl {
    --tw-backdrop-blur: blur(var(--blur-2xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur);
    backdrop-filter: var(--tw-backdrop-blur);
}

.ring-\[0\.5px\] {
    box-shadow: 0 2px 16px -6px rgba(0, 0, 0, .3);
}

.rounded-2xl {
    border-radius: calc(var(--radius) * 1.8)
}

.rounded-4xl {
    border-radius: calc(var(--radius) * 2.6);
}

.inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
}

:where(.space-y-6>:not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}

[data-slot=tooltip-content],
[data-slot=tooltip-content] * {
    -ms-overflow-style: none;
    scrollbar-width: none
}

[data-slot=table] td,
.tabular-nums {
    font-variant-numeric: tabular-nums
}

.table-fixed {
    table-layout: fixed;
}

.bg-chart-1,
.bg-chart-1\/10 {
    background-color: var(--chart-1)
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-chart-1\/10 {
        background-color: color-mix(in oklab, var(--chart-1) 10%, transparent)
    }
}

.bg-chart-2,
.bg-chart-2\/10 {
    background-color: var(--chart-2)
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-chart-2\/10 {
        background-color: color-mix(in oklab, var(--chart-2) 10%, transparent)
    }
}

.bg-chart-3,
.bg-chart-3\/10 {
    background-color: var(--chart-3)
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-chart-3\/10 {
        background-color: color-mix(in oklab, var(--chart-3) 10%, transparent)
    }
}

.bg-chart-4,
.bg-chart-4\/10 {
    background-color: var(--chart-4)
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-chart-4\/10 {
        background-color: color-mix(in oklab, var(--chart-4) 10%, transparent)
    }
}

.bg-chart-5,
.bg-chart-5\/10 {
    background-color: var(--chart-5)
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-chart-5\/10 {
        background-color: color-mix(in oklab, var(--chart-5) 10%, transparent)
    }
}

.bg-info,
.bg-info\/10 {
    background-color: var(--info)
}

.font-din {
    font-family: DINBol, sans-serif;
}

.tooltip {
    position: relative;
    --scale: 0;
}

.tooltip::before,
.tooltip::after {
    position: absolute;
    bottom: calc(100% + .8rem);
    left: 50%;
    transform-origin: bottom center;
    transition: transform 0.2s;
}

.tooltip::before {
    content: attr(data-tooltip);
    display: inline-block;
    width: max-content;
    background-color: #0B0B0B;
    color: #fff;
    padding: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 3);
    font-size: .75rem;
    line-height: 1rem;
    border-radius: calc(1rem * .8);
    transform: translateX(-50%) scale(var(--scale));
}

.tooltip::after {
    content: '';
    border: .4rem solid transparent;
    border-top-color: #0B0B0B;
    transform: translateX(-50%) scale(var(--scale)) translateY(100%);
}

.tooltip:hover {
    --scale: 1;
}

[v-cloak] {
    display: none;
}

/* 閺屻儳婀呯拠锔藉剰閿涙艾寮懓?Nexhina閿涘瞼瀹虫稊婵囧灇鐎瑰鈧浇鍏岄崶濠傝埌閿涙稒顢戦棃?hover閿涘本澧滈張鍝勭埗閺?*/
.model-card__detail-btn {
    display: flex !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
    margin-left: auto;
    margin-right: auto;
    border-radius: 999px !important;
}

@media (hover: hover) and (pointer: fine) {
    .model-card__detail-btn {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 2;
        width: auto !important;
        opacity: 0;
        pointer-events: none;
        transform: translateY(6px);
        transition: opacity .2s ease, transform .2s ease;
        margin-left: 0;
        margin-right: 0;
    }

    .group:hover .model-card__detail-btn,
    .group:focus-visible .model-card__detail-btn {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .model-card--featured .model-card__detail-btn {
        left: 20px;
        right: 20px;
        bottom: 16px;
    }
}

/* 模型详情抽屉：分段 tab（显式 class，不依赖 Tailwind data-active 变体） */
#app [data-slot="tabs-list"] {
    display: inline-flex;
    width: 100%;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 2px;
    border-radius: 8px;
    background: #efedf6;
    box-sizing: border-box;
}

#app [data-slot="tabs-list"] > .pricing-detail-tab,
#app [data-slot="tabs-list"] > [data-slot="tabs-trigger"] {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #667085;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#app [data-slot="tabs-list"] > .pricing-detail-tab:hover,
#app [data-slot="tabs-list"] > [data-slot="tabs-trigger"]:hover {
    color: #24262b;
}

#app [data-slot="tabs-list"] > .pricing-detail-tab.is-tab-active,
#app [data-slot="tabs-list"] > [data-slot="tabs-trigger"].is-tab-active,
#app [data-slot="tabs-list"] > [data-slot="tabs-trigger"][data-active="true"] {
    color: #24262b !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(42, 46, 71, 0.08) !important;
}

/* @lobehub/icons 静态图：对接后台 icon 字段（如 DeepSeek.Color） */
.model-lobe-icon {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
    line-height: 1;
}

.model-lobe-icon--lg {
    width: 36px;
    height: 36px;
}

.model-lobe-icon--sm {
    width: 18px;
    height: 18px;
}