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

/**
 * 该站点全局 `commons.css` 使用 `html{font-size:100px}` 做 rem 适配。
 * Tailwind（CDN 版）大量使用 rem，会导致本页内容被整体放大。
 * 仅在 AI 页面恢复到浏览器常规根字号，避免影响其它页面。
 */
html.ai-page {
    font-size: 16px !important;
}

html.ai-page body {
    font-size: 16px;
}
header{
    font-size: 12px;
}

header .lang{
    font-size: 14px;
}
header .container{

}
footer{
    font-size: 12px;
}
.wrapper body,
.wrapper div,
.wrapper dl,
.wrapper dt,
.wrapper dd,
.wrapper ul,
.wrapper ol,
.wrapper li,
.wrapper h1,
.wrapper h2,
.wrapper h3,
.wrapper h4,
.wrapper h5,
.wrapper h6,
.wrapper pre,
.wrapper code,
.wrapper form,
.wrapper fieldset,
.wrapper legend,
.wrapper input,
.wrapper button,
.wrapper textarea,
.wrapper section,
.wrapper article,
.wrapper aside,
.wrapper p,
.wrapper a,
.wrapper blockquote,
.wrapper th,
.wrapper td {
    margin: auto;
    padding: auto;
    font-family: Microsoft Yahei, arial, SimSun, Tahoma, Helvetica, STHeiti, sans-serif;
    list-style: none;
    transition-property: color, border-color;
    outline: none;
    box-sizing: border-box;
}
.mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
}

body {
    font-family: var(--font-sans);
    scroll-behavior: smooth;
    background-color: #ffffff;
}

:root {
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
    --primary-blue: #2563eb;
    --accent-cyan: #06b6d4;
    --color-gray-900: oklch(21% 0.034 264.665);
    --font-weight-bold: 700;
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --spacing: 0.25rem;
    --leading-relaxed: 1.625;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --color-white: #fff;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html.ai-page body {
    font-family: var(--font-sans);
    scroll-behavior: smooth;
    background-color: #ffffff;

}

/* Tech Grid Background */
.tech-grid {
    background-image:
            radial-gradient(circle at 2px 2px, rgba(37, 99, 235, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
}

html.ai-page .reveal {
    opacity: 0;
    transform: translateY(40px);
    /* 覆盖 commons.css 中对 transition-property 的全局限制，确保渐入动效生效 */
    transition-property: opacity, transform !important;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
html.ai-page .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    border: 2px solid rgba(37, 99, 235, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    padding: 32px;
}

.step-number {
    font-family: var(--font-display);
    font-weight: 700;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(6, 182, 212, 0.1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.05em;
}

.system-screenshot {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    filter: brightness(0.98) contrast(1.02);
    cursor: zoom-in;
}

.system-screenshot:hover {
    transform: scale(1.08) translateY(-10px);
    filter: brightness(1.05) contrast(1.05);
    box-shadow: 0 30px 60px -12px rgba(37, 99, 235, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
    z-index: 20;
}

.nav-link-active {
    position: relative;
}
.nav-link-active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-blue);
    border-radius: 2px;
}

.glow-orb {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}

h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
.text-gray-900 {
     color: var(--color-gray-900);
 }
.font-bold
{
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
}
.text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
}
.mb-2 {
    margin-bottom: calc(var(--spacing) * 2) !important;
}
.mb-3 {
    margin-bottom: calc(var(--spacing) * 3) !important;
}
.mb-4 {
    margin-bottom: calc(var(--spacing) * 4) !important;
}
.mb-6 {
    margin-bottom: calc(var(--spacing) * 6) !important;
}
.mb-20 {
    margin-bottom: calc(var(--spacing) * 20) !important;
}
.p-4 {
    padding: calc(var(--spacing) * 4) !important;
}
.p-5 {
    padding: calc(var(--spacing) * 5) !important;
}
.p-8 {
    padding: calc(var(--spacing) * 8) !important;
}
.pb-0 {
    padding-bottom: 0 !important;
}
.p-lr-1 {
    padding: 0 calc(var(--spacing) * 2) !important;
}
.py-16 {
    padding-block: calc(var(--spacing) * 16) !important;
}
.py-20 {
    padding-block: calc(var(--spacing) * 20) !important;
}
.h3-l {
    margin-left: 0 !important;
}
.m-0 {
    margin: 0 !important;
}
.w-8 {
    width: calc(var(--spacing) * 8);
}
.h-8 {
    height: calc(var(--spacing) * 8);
}
.w-24 {
    width: calc(var(--spacing) * 24);
}
.w-36 {
    width: calc(var(--spacing) * 36);
}
.h-24 {
    height: calc(var(--spacing) * 24);
}
.leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
}
.text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-balance {
    text-wrap: balance;
}
.mx-auto {
    margin-inline: auto;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.max-w-\[200px\] {
    max-width: 200px;
}
.gap-3 {
    gap: calc(var(--spacing) * 3);
}
.gap-6 {
    gap: calc(var(--spacing) * 6);
}
.gap-16 {
    gap: calc(var(--spacing) * 16);
}
.items-center {
    align-items: center;
}
.flex {
    display: flex;
}
.grid {
    display: grid;
}
/* 传统写法（兼容性更好） */
.space-y-8 > *:not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-bottom: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
}
.space-y-32 > *:not(:last-child) {
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(var(--spacing) * 32) * var(--tw-space-y-reverse));
    margin-bottom: calc(calc(var(--spacing) * 32) * calc(1 - var(--tw-space-y-reverse)));
}
--tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
--tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
--tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
--tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

.shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.bg-white {
    background-color: var(--color-white);
}

.duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
}
.transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}
#footer_tel{
    background-color: var(--color-white);
}
.feature-highlight {
     border-left: 4px solid;
     border-image: linear-gradient(to bottom, #5279cf, #43a2d2) 1;
     margin: 20px 0;
     background: rgba(139, 92, 246, 0.05);
     padding: 15px 20px;
     border-radius: 0 8px 8px 0;
     position: relative;
}
.feature-item {
    cursor: pointer;
    margin-bottom: 15px;
    opacity: 1;
    border-left: none !important;
    background: transparent !important;
    position: relative;
}
.gtwenzi .feature-item:first-child::before {
    background: linear-gradient(268deg, rgba(225, 175, 204, 0) 0%, rgb(190 207 234) 100%);
    transform: translateX(5px);
}
.gtwenzi .feature-item:first-child::after {
    background: linear-gradient(to bottom, #5279cf, #43a2d2);
    transform: translateX(5px);
}
.feature-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    border-radius: 0 8px 8px 0;
    transition: transform 0.3s ease, background 0.3s ease;
    z-index: -1;
}
.feature-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: transparent;
    transition: transform 0.3s ease, background 0.3s ease;
    z-index: 0;
}
.feature-highlight{
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
    font-size: 14px;
}
.xiaoyiai-experience-btn {
    height: 38px;
    padding: 0 18px 0 12px;
    background: linear-gradient(82deg, #5279cf 0%, #43a2d2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.back-high {
    background: linear-gradient(161deg, #e0e9fc, #ffffff);
}
#tools{
    font-size: 14px;
}
.flex-procure section .content {
    padding: 0;
}
.flex-procure section .item {
    margin-bottom: 20px;
    padding-left: 50px;
    color: #122943;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 33px;
}
.flex-procure section .item .title {
    display: block;
    margin-bottom: 10px;
    color: #122943;
    font-size: 18px;
    font-weight: bolder;
}
.flex-procure section .item:nth-child(1) {
    background-image: url(../images/twelve_04.png);
}
.flex-procure section .item:nth-child(2) {
    background-image: url(../images/twelve_08.png);
}
.flex-procure section .item:nth-child(3) {
    background-image: url(../images/twelve_11.png);
}