/**
 * 前端样式 - Frontend Styles
 */

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 深色模式 */
html.dark {
    color-scheme: dark;
}

/* 毛玻璃效果 */
.backdrop-blur-lg {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.backdrop-blur-xl {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* 懒加载图片 */
.lazy-load {
    transition: filter 0.5s ease;
}

.lazy-load.loaded {
    filter: blur(0) !important;
}

/* 语言切换菜单 */
.language-switcher:hover .language-menu {
    display: block;
}

.language-menu {
    animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 渐变文字 */
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 卡片悬停效果 */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(243, 244, 246, 0.5);
}

html.dark ::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.7);
}

html.dark ::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.5);
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.7);
}

/* 响应式 */
@media (max-width: 768px) {
    .backdrop-blur-lg,
    .backdrop-blur-xl {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* 动画 */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

/* 加载动画 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    border-top-color: #3b82f6;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 淡入动画 */
.fade-in {
    animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 脉冲效果 */
.pulse-effect {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* 高斯模糊背景 */
.blur-bg {
    position: relative;
    overflow: hidden;
}

.blur-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 按钮效果 */
.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-glow:hover::before {
    width: 300px;
    height: 300px;
}

/* 首页登录 / 注册弹窗，样式仅作用于该区块。 */
#authModal {
    --auth-surface: #fff;
    --auth-input: #f8fafc;
    --auth-text: #182338;
    --auth-muted: #68768b;
    --auth-border: #e4e9f1;
    --auth-accent: #3563e9;
    padding: 24px;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#authModal .auth-dialog {
    position: relative;
    max-width: 920px;
    max-height: calc(100dvh - 48px);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 24px;
    background: var(--auth-surface);
    box-shadow: 0 32px 100px -24px rgba(15, 23, 42, .45);
}

#authModal .auth-close {
    position: absolute;
    z-index: 20;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--auth-border);
    border-radius: 50%;
    background: var(--auth-surface);
    color: var(--auth-muted);
    transition: background .2s, color .2s;
}

#authModal .auth-close:hover {
    background: var(--auth-input);
    color: var(--auth-text);
}

#authModal #authLeftSide {
    width: 40%;
    flex-shrink: 0;
}

#authModal #authLeftSide > .relative {
    padding: 40px 32px;
    gap: 64px;
}

#authModal #authLeftSide h2 {
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: -.5px;
}

#authModal #authLeftSide p {
    font-size: 15px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .8);
}

#authModal #loginBg > div:first-child {
    background: linear-gradient(155deg, rgba(26, 62, 148, .92), rgba(50, 94, 206, .8) 55%, rgba(78, 79, 174, .9));
}

#authModal #authLeftSide .space-y-4 > div {
    padding: 8px 0;
    background: transparent;
    transform: none;
    backdrop-filter: none;
}

#authModal #authLeftSide .space-y-4 > div > div {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    font-size: 11px;
}

#authModal .auth-form-panel {
    min-width: 0;
    padding: 38px 48px 32px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    color: var(--auth-text);
}

#authModal .auth-tabs {
    display: flex;
    gap: 28px;
    margin: 0 0 30px;
    border-bottom: 1px solid var(--auth-border);
}

#authModal .auth-tabs button {
    position: relative;
    padding: 0 2px 14px;
    color: var(--auth-muted);
    font-size: 14px;
    font-weight: 600;
    transition: color .2s;
}

#authModal .auth-tabs button[aria-pressed="true"] {
    color: var(--auth-accent);
}

#authModal .auth-tabs button[aria-pressed="true"]::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--auth-accent);
}

#authModal .auth-heading { margin-bottom: 28px; }
#authModal .auth-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--auth-muted);
    font-size: 12px;
    letter-spacing: 2px;
}
#authModal .auth-heading h3 {
    margin-bottom: 10px;
    color: var(--auth-text);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -1px;
}
#authModal .auth-heading-dot { margin-left: 3px; color: var(--auth-accent); }
#authModal .auth-heading p { color: var(--auth-muted); font-size: 13px; line-height: 1.8; }
#authModal form > div > label:not(.flex) { color: var(--auth-text); font-size: 13px; }
#authModal form > :not(:first-child) { margin-top: 20px; }

#authModal input:not([type="checkbox"]) {
    height: 50px;
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    background: var(--auth-input);
    color: var(--auth-text);
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
#authModal input::placeholder { color: #8b97a9; }
#authModal input:not([type="checkbox"]):hover { border-color: #b9c5d8; }
#authModal input:not([type="checkbox"]):focus {
    outline: none;
    border-color: var(--auth-accent);
    background: var(--auth-surface);
    box-shadow: 0 0 0 4px rgba(53, 99, 233, .1);
}
#authModal form .relative:focus-within > .pointer-events-none i { color: var(--auth-accent); }
#authModal input[type="checkbox"] { accent-color: var(--auth-accent); }
#authModal form .text-sm { font-size: 12px; }
#authModal form button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 20px;
    border-radius: 10px;
    background: #3563e9;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 6px 16px -6px rgba(53, 99, 233, .5);
    transition: background .2s, box-shadow .2s;
    transform: none;
}
#authModal form button[type="submit"]:hover { background: #2852ce; box-shadow: 0 8px 20px -6px rgba(53, 99, 233, .5); }
#authModal form button[type="submit"]:disabled { opacity: .65; cursor: wait; }
#authModal button:focus-visible, #authModal a:focus-visible, #authModal input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: 4px;
}

#authModal .auth-social { margin-top: 26px; }
#authModal .auth-divider { display: flex; align-items: center; gap: 16px; color: var(--auth-muted); font-size: 12px; }
#authModal .auth-divider::before, #authModal .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--auth-border); }
#authModal .auth-social-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
#authModal .auth-social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    background: var(--auth-surface);
    color: var(--auth-muted);
    font-size: 12px;
    cursor: not-allowed;
}
#authModal .auth-social-button i { font-size: 18px; }
#authModal .auth-social-note { margin-top: 14px; text-align: center; font-size: 11px; color: var(--auth-muted); line-height: 1.6; }

html.dark #authModal {
    --auth-surface: #141d2e;
    --auth-input: #1b2639;
    --auth-text: #edf2fb;
    --auth-muted: #a0aec3;
    --auth-border: #2e3b51;
    --auth-accent: #88aaff;
}
html.dark #authModal .auth-dialog { border-color: #334155; }

@media (min-width: 768px) {
    #authModal #authLeftSide { display: flex; }
}
@media (max-width: 767px) {
    #authModal { padding: 16px; }
    #authModal .auth-dialog { max-width: 460px; max-height: calc(100dvh - 32px); border-radius: 20px; }
    #authModal #authLeftSide { display: none; }
    #authModal .auth-form-panel { padding: 32px 28px 28px; }
    #authModal .auth-tabs { margin-right: 28px; }
    #authModal .auth-heading h3 { font-size: 30px; }
}
@media (max-width: 374px) {
    #authModal .auth-form-panel { padding: 30px 20px 24px; }
    #authModal .auth-social-options { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    #authModal *, #authModal *::before, #authModal *::after { animation: none; transition: none; }
}

/* 全局导航与页脚，统一浅色画布 + 深蓝品牌色。 */
:root {
    --site-brand: #2b5bd7;
    --site-brand-strong: #1e3f9e;
    --site-ink: #16203a;
    --site-muted: #64748b;
    --site-line: #e5e9f2;
    --site-surface: #ffffff;
}
html.dark {
    --site-brand: #7aa2ff;
    --site-brand-strong: #a8c1ff;
    --site-ink: #eef2fb;
    --site-muted: #9aa8c2;
    --site-line: #2c3a52;
    --site-surface: #101827;
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    border-bottom: 1px solid var(--site-line);
    background: color-mix(in srgb, var(--site-surface) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    line-height: 1.5;
}

/* Shared navigation also works on pages without Tailwind, such as checkout. */
.site-header .env-market-dropdown,
.site-header .language-switcher {
    position: relative;
}
.site-header .site-dropdown-menu.hidden {
    display: none;
}
.site-header button {
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}
.site-nav-dropdown-trigger {
    border: 0;
    background: transparent;
}
.site-mobile-toggle {
    background: transparent;
}

.site-nav-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: 1280px;
    height: 64px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: var(--site-ink);
    text-decoration: none;
}
.site-brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--site-brand), var(--site-brand-strong));
    color: #fff;
    font-size: 15px;
}
.site-brand-name { font-size: 17px; font-weight: 700; letter-spacing: -.2px; }

.site-nav-links {
    display: none;
    align-items: center;
    gap: 4px;
    margin-right: auto;
}
.site-nav-links > a,
.site-nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--site-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color .18s, background .18s;
}
.site-nav-links > a:hover,
.site-nav-dropdown-trigger:hover {
    background: color-mix(in srgb, var(--site-brand) 8%, transparent);
    color: var(--site-brand);
}
.site-nav-dropdown-trigger i { font-size: 10px; opacity: .7; }

.site-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 188px;
    padding: 6px;
    border: 1px solid var(--site-line);
    border-radius: 12px;
    background: var(--site-surface);
    box-shadow: 0 18px 44px -18px rgba(15, 23, 42, .35);
}
.site-nav-actions .site-dropdown-menu { left: auto; right: 0; }
.site-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--site-ink);
    font-size: 13.5px;
    text-decoration: none;
}
.site-dropdown-menu a:hover { background: color-mix(in srgb, var(--site-brand) 10%, transparent); color: var(--site-brand); }
.site-dropdown-menu a i { width: 16px; color: var(--site-muted); }

.site-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.site-icon-button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--site-line);
    border-radius: 10px;
    background: transparent;
    color: var(--site-muted);
    font-size: 14px;
    transition: color .18s, border-color .18s, background .18s;
}
.site-icon-button:hover {
    border-color: color-mix(in srgb, var(--site-brand) 40%, var(--site-line));
    background: color-mix(in srgb, var(--site-brand) 8%, transparent);
    color: var(--site-brand);
}
.site-login-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--site-brand), var(--site-brand-strong));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--site-brand) 80%, transparent);
    transition: transform .18s, box-shadow .18s, filter .18s;
}
.site-login-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.site-login-button i { font-size: 12px; }

.site-mobile-toggle {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--site-line);
    border-radius: 10px;
    color: var(--site-ink);
}
.site-mobile-menu {
    display: grid;
    gap: 2px;
    padding: 8px 14px 16px;
    border-top: 1px solid var(--site-line);
    background: var(--site-surface);
}
.site-mobile-menu[hidden] { display: none; }
.site-mobile-menu a {
    padding: 11px 12px;
    border-radius: 9px;
    color: var(--site-ink);
    font-size: 15px;
    text-decoration: none;
}
.site-mobile-menu a:hover { background: color-mix(in srgb, var(--site-brand) 9%, transparent); color: var(--site-brand); }

@media (min-width: 1024px) {
    .site-nav-links { display: flex; }
    .site-mobile-toggle, .site-mobile-menu { display: none !important; }
}
@media (max-width: 480px) {
    .site-login-button { padding: 0 12px; }
    .site-login-button span { display: none; }
}

.site-footer {
    border-top: 1px solid var(--site-line);
    background: color-mix(in srgb, var(--site-surface) 94%, var(--site-brand) 6%);
    color: var(--site-ink);
}
.site-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.site-footer-main {
    display: grid;
    gap: 48px;
    padding: 56px 0 40px;
}
.site-footer-logo { margin-bottom: 16px; }
.site-footer-brand > p {
    max-width: 380px;
    color: var(--site-muted);
    font-size: 14px;
    line-height: 1.85;
}
.site-footer-social { margin-top: 22px; }
.site-footer-social > span {
    display: block;
    margin-bottom: 10px;
    color: var(--site-muted);
    font-size: 12px;
    letter-spacing: 1.5px;
}
.site-social-links { display: flex; gap: 8px; }
.site-social-links a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--site-line);
    border-radius: 10px;
    background: var(--site-surface);
    color: var(--site-muted);
    font-size: 14px;
    transition: color .18s, border-color .18s, transform .18s;
}
.site-social-links a:hover {
    border-color: color-mix(in srgb, var(--site-brand) 45%, var(--site-line));
    color: var(--site-brand);
    transform: translateY(-2px);
}
.site-footer-contact {
    display: grid;
    gap: 8px;
    margin-top: 22px;
    font-size: 13.5px;
}
.site-footer-contact a, .site-footer-contact span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--site-muted);
    text-decoration: none;
}
.site-footer-contact a:hover { color: var(--site-brand); }
.site-footer-contact i { width: 14px; color: var(--site-brand); }

.site-footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; }
.site-footer-column { display: grid; align-content: start; gap: 11px; }
.site-footer-column h2 {
    margin-bottom: 3px;
    color: var(--site-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
}
.site-footer-column a {
    color: var(--site-muted);
    font-size: 13.5px;
    text-decoration: none;
    transition: color .18s;
}
.site-footer-column a:hover { color: var(--site-brand); }

.site-footer-resources { padding: 20px 0; border-top: 1px solid var(--site-line); }
.site-footer-resources > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.site-footer-resources > div > span { color: var(--site-muted); font-size: 12px; letter-spacing: 1.2px; }
.site-resource-links { display: flex; flex-wrap: wrap; gap: 8px; }
.site-resource-links a {
    padding: 4px 11px;
    border: 1px solid var(--site-line);
    border-radius: 999px;
    color: var(--site-muted);
    font-size: 12.5px;
    text-decoration: none;
}
.site-resource-links a:hover { border-color: color-mix(in srgb, var(--site-brand) 40%, var(--site-line)); color: var(--site-brand); }

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 0 28px;
    border-top: 1px solid var(--site-line);
    color: var(--site-muted);
    font-size: 12.5px;
}
.site-footer-bottom p { margin-bottom: 4px; color: var(--site-ink); font-size: 13px; }
.site-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-footer-legal a, .site-footer-legal span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--site-muted);
    text-decoration: none;
}

/* 首页数据与评价区域 */
.home-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.home-section-heading {
    max-width: 660px;
    margin: 0 auto 42px;
    text-align: center;
}
.home-section-heading h2 {
    margin: 12px 0 12px;
    color: var(--site-ink, #182338);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
    letter-spacing: -.045em;
}
.home-section-heading p {
    margin: 0;
    color: var(--site-muted, #68768b);
    font-size: 16px;
    line-height: 1.8;
}
.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #3563e9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.home-eyebrow-light { color: rgba(255, 255, 255, .76); }
.home-eyebrow i { font-size: 13px; }

.home-stats {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 92px 0 104px;
    background: #101a36;
}
.home-stats::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: radial-gradient(circle at 50% -30%, rgba(82, 125, 255, .28), transparent 48%), linear-gradient(135deg, #111a37 0%, #19254b 52%, #101a36 100%);
    content: '';
}
.home-stats::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .13;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 44px 44px;
    content: '';
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.home-stats-glow { position: absolute; z-index: -1; border-radius: 999px; filter: blur(2px); pointer-events: none; }
.home-stats-glow-one { top: 24%; left: -90px; width: 220px; height: 220px; background: rgba(47, 106, 255, .22); }
.home-stats-glow-two { right: -70px; bottom: -100px; width: 260px; height: 260px; background: rgba(145, 85, 255, .18); }
.home-stats-heading h2 { color: #fff; }
.home-stats-heading p { color: rgba(226, 232, 240, .72); }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.stats-card {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    background: rgba(255, 255, 255, .085);
    box-shadow: 0 18px 45px rgba(4, 10, 28, .16), inset 0 1px 0 rgba(255, 255, 255, .09);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.stats-card::after {
    position: absolute;
    right: -28px;
    bottom: -42px;
    width: 120px;
    height: 120px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .1;
    content: '';
}
.stats-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .13); }
.stats-card-topline { display: flex; align-items: center; justify-content: space-between; }
.stats-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: var(--stats-accent, #3563e9);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}
.stats-icon i { color: #fff !important; }
.stats-trend { color: rgba(255, 255, 255, .68); font-size: 11px; font-weight: 700; }
.stats-trend i { margin-right: 3px; font-size: 9px; }
.stats-value { margin-top: 26px; color: #fff; font-size: clamp(34px, 3.8vw, 48px); font-weight: 800; line-height: 1; letter-spacing: -.055em; }
.stats-value span { margin-left: 2px; color: rgba(255, 255, 255, .58); font-size: .55em; }
.stats-label { margin-top: 10px; color: rgba(226, 232, 240, .72); font-size: 14px; }
.stats-card-blue { --stats-accent: #5b8cff; color: #5b8cff; } .stats-card-green { --stats-accent: #37d6a1; color: #37d6a1; } .stats-card-purple { --stats-accent: #b28cff; color: #b28cff; } .stats-card-orange { --stats-accent: #ffb35c; color: #ffb35c; }

.home-testimonials {
    padding: 100px 0 112px;
    background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
}
html.dark .home-testimonials { background: linear-gradient(180deg, #111827 0%, #0f172a 100%); }
html.dark .home-section-heading h2 { color: #f8fafc; }
html.dark .home-section-heading p { color: #94a3b8; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 318px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid #e9edf5;
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 16px 45px rgba(25, 42, 80, .08);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
html.dark .testimonial-card { border-color: rgba(148, 163, 184, .16); background: rgba(30, 41, 59, .82); box-shadow: 0 16px 45px rgba(0, 0, 0, .15); }
.testimonial-card::before { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--testimonial-accent); content: ''; }
.testimonial-card:hover { transform: translateY(-7px); box-shadow: 0 24px 55px rgba(25, 42, 80, .14); }
.testimonial-card-blue { --testimonial-accent: #4b7cf3; } .testimonial-card-green { --testimonial-accent: #27b889; } .testimonial-card-purple { --testimonial-accent: #9065e8; }
.testimonial-quote-mark { position: absolute; top: 20px; right: 26px; color: var(--testimonial-accent); opacity: .13; font-size: 48px; }
.testimonial-rating { display: flex; align-items: center; gap: 3px; color: #f6ae2d; font-size: 13px; }
.testimonial-rating span { margin-left: 8px; color: #718096; font-size: 12px; font-weight: 700; }
html.dark .testimonial-rating span { color: #94a3b8; }
.testimonial-card blockquote { flex: 1; margin: 22px 0 28px; color: #435066; font-size: 15px; line-height: 1.9; }
html.dark .testimonial-card blockquote { color: #cbd5e1; }
.testimonial-author { display: flex; align-items: center; gap: 11px; padding-top: 18px; border-top: 1px solid #edf0f5; }
html.dark .testimonial-author { border-top-color: rgba(148, 163, 184, .16); }
.testimonial-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 14px; color: #fff; background: var(--testimonial-accent); font-size: 16px; font-weight: 800; }
.testimonial-author div:nth-child(2) { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.testimonial-author strong { color: #1b2941; font-size: 14px; }
html.dark .testimonial-author strong { color: #f8fafc; }
.testimonial-author span { color: #7b8799; font-size: 12px; }
.testimonial-verified { margin-left: auto; color: var(--testimonial-accent); font-size: 14px; }

@media (max-width: 900px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .testimonials-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}
@media (max-width: 640px) {
    .home-container { width: min(100% - 32px, 560px); }
    .home-stats { padding: 72px 0 80px; }
    .home-testimonials { padding: 76px 0 84px; }
    .stats-grid { gap: 12px; }
    .stats-card { min-height: 162px; padding: 18px; border-radius: 17px; }
    .stats-value { margin-top: 20px; font-size: 34px; }
    .stats-label { font-size: 12px; }
    .testimonial-card { min-height: 0; padding: 25px; }
}

@media (prefers-reduced-motion: reduce) {
    .stats-card, .testimonial-card { transition: none; }
}

.site-footer-legal a:hover { color: var(--site-brand); }
.site-footer-legal i { color: var(--site-brand); }

@media (min-width: 900px) {
    .site-footer-main { grid-template-columns: minmax(280px, 1fr) 1.6fr; gap: 64px; }
}

/* Login: scoped styles keep the rest of the site unchanged. */
.login-page {
    --login-bg: #f8f9fc; --login-surface: #fff; --login-text: #19263e;
    --login-muted: #67748a; --login-border: #e3e8f0; --login-accent: #315ee8;
    min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
    background: var(--login-bg); color: var(--login-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    -webkit-font-smoothing: antialiased;
}
html.dark .login-page {
    --login-bg: #101724; --login-surface: #172131; --login-text: #eef2fa;
    --login-muted: #a1adc1; --login-border: #354157; --login-accent: #8aaaff;
}
.login-page a { color: inherit; text-decoration: none; }
.login-page button, .login-page input { font: inherit; }
.login-page button { cursor: pointer; }
.login-page button:disabled { cursor: wait; opacity: .7; }
.login-page a, .login-page button, .login-page input { -webkit-tap-highlight-color: transparent; }
.login-page :focus-visible { outline: 3px solid var(--login-accent); outline-offset: 4px; }
.login-page [hidden] { display: none !important; }
.login-header, .login-footer { width: min(1280px, calc(100% - 96px)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.login-header { min-height: 104px; }
.login-brand { display: flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 750; letter-spacing: .02em; }
.login-brand-mark { display: grid; place-items: center; width: 42px; height: 44px; border-radius: 13px; background: #315ee8; color: #fff; box-shadow: 0 5px 12px #315ee826; }
.login-brand-mark svg { width: 28px; height: 28px; }
.login-brand small { display: block; margin-top: 3px; color: var(--login-muted); font-size: 9px; font-weight: 600; letter-spacing: .19em; }
.login-header-actions { display: flex; align-items: center; gap: 24px; color: var(--login-muted); font-size: 13px; }
.login-header-actions a:hover, .login-footer a:hover { color: var(--login-accent); }
.login-header-actions a span { margin-right: 5px; }
.login-theme { width: 38px; height: 38px; border: 1px solid var(--login-border); border-radius: 50%; background: var(--login-surface); color: var(--login-text); }
.login-layout { width: min(1184px, calc(100% - 96px)); margin: auto; display: grid; grid-template-columns: 1.08fr 1fr; min-height: 652px; border: 1px solid var(--login-border); border-radius: 24px; background: var(--login-surface); box-shadow: 0 20px 70px #23396208; }
.login-showcase { position: relative; min-width: 0; padding: 46px 44px 34px; border-radius: 23px 0 0 23px; overflow: hidden; background: radial-gradient(ellipse at 85% 85%, #c9d9ff 0, transparent 60%), linear-gradient(145deg, #f0f4ff, #e8efff); color: #1a2b4a; }
.login-showcase::before { position: absolute; inset: 0; content: ''; pointer-events: none; background-image: radial-gradient(#788fba35 .7px, transparent .7px); background-size: 20px 20px; mask-image: linear-gradient(transparent 20%, #000); }
.login-showcase-copy, .login-features { position: relative; }
.login-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: #4f668f; }
.login-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #4877ef; box-shadow: 0 0 0 4px #4877ef14; }
.login-showcase h1 { margin: 22px 0 16px; font-size: clamp(29px, 2.8vw, 39px); font-weight: 750; line-height: 1.5; letter-spacing: -.045em; }
.login-showcase h1 em { font-style: normal; color: #315ee8; }
.login-showcase-copy > p { max-width: 370px; font-size: 14px; color: #60718c; line-height: 1.9; }
.login-editor { position: relative; margin: 30px 5px 0 0; border: 1px solid #fff; border-radius: 11px; background: #f7f9ff; box-shadow: 0 20px 40px #3050a321, 0 3px 8px #3050a30a; transform: rotate(-2deg); color: #52617a; }
.login-editor-bar { height: 35px; display: flex; align-items: center; gap: 16px; padding: 0 12px; border-bottom: 1px solid #e9edf5; font-size: 9px; }
.login-window-dots { display: flex; gap: 4px; }
.login-window-dots b { width: 5px; height: 5px; border-radius: 50%; background: #c5cfe0; }
.login-window-dots b:first-child { background: #e4a899; }
.login-window-dots b:nth-child(2) { background: #e2cc8e; }
.login-editor-mode { margin-left: auto; color: #78859b; font-size: 7px; letter-spacing: .1em; }
.login-editor-body { display: flex; padding-right: 11px; }
.login-editor-rail { width: 35px; flex-shrink: 0; display: flex; align-items: center; flex-direction: column; gap: 13px; padding-top: 14px; font-size: 13px; color: #8390a8; }
.login-editor-rail .is-active { padding: 2px 5px; background: #e3eaff; border-radius: 4px; color: #315ee8; }
.login-editor-canvas { flex: 1; min-width: 0; margin: 11px 0; padding: 14px 18px 12px; border: 1px solid #e4e9f1; background: #fff; }
.login-preview-nav { display: flex; justify-content: space-between; align-items: center; font-size: 7px; }
.login-preview-nav strong { font-size: 15px; letter-spacing: -.04em; color: #27344d; }
.login-preview-nav strong span { color: #517deb; }
.login-preview-content { position: relative; margin-top: 24px; }
.login-preview-eyebrow { font-size: 6px; letter-spacing: .14em; color: #7988a3; }
.login-preview-content h2 { position: relative; z-index: 1; margin-top: 8px; font-size: 22px; line-height: 1.45; font-weight: 650; letter-spacing: -.04em; color: #27344d; }
.login-preview-content p { margin-top: 7px; font-size: 7px; color: #78859a; }
.login-preview-cta { display: inline-flex; align-items: center; gap: 16px; margin-top: 14px; border-radius: 4px; padding: 7px 9px; background: #385fcf; color: white; font-size: 7px; }
.login-preview-art { position: absolute; right: 0; top: 5px; width: 106px; height: 126px; }
.login-preview-art span { position: absolute; display: block; width: 78px; height: 78px; }
.login-preview-art span:first-child { top: 0; right: 0; border-radius: 50%; background: linear-gradient(140deg, #a7c0ff, #456ce6); box-shadow: inset -10px -8px 16px #234bc330, 0 10px 20px #3050a318; }
.login-preview-art span:nth-child(2) { width: 57px; height: 65px; bottom: 0; left: 0; border-radius: 8px; background: linear-gradient(135deg, #e0e8fc, #afc2ee); transform: rotate(-14deg); box-shadow: 5px 8px 18px #3050a320; }
.login-preview-art span:nth-child(3) { width: 44px; height: 44px; bottom: 1px; right: 0; border: 10px solid #f0c6a3; border-radius: 50%; box-shadow: 0 5px 10px #b8917130; }
.login-preview-tiles { display: flex; gap: 7px; margin-top: 19px; }
.login-preview-tiles span { flex: 1; height: 29px; border: 1px solid #edf0f5; border-radius: 4px; background: linear-gradient(120deg, #f2f5fb, #fcfdff); }
.login-editor-status { display: flex; justify-content: space-between; padding: 0 12px 9px; font-size: 7px; color: #78859b; }
.login-editor-status b { display: inline-block; width: 4px; height: 4px; margin-right: 3px; border-radius: 50%; background: #42a889; }
.login-editor-tag { position: absolute; right: -17px; bottom: 59px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; color: #fff; background: #315ee8; border: 1px solid #6087ff; border-radius: 8px; box-shadow: 0 7px 18px #315ee830; transform: rotate(2deg); font-size: 10px; }
.login-features { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 26px; color: #566b8c; font-size: 11px; }
.login-features li { display: flex; align-items: center; gap: 5px; }
.login-features li > span { color: #315ee8; }
.login-form-panel { display: grid; place-items: center; padding: 48px; }
.login-form-content { width: 100%; max-width: 356px; }
.login-form-eyebrow { color: var(--login-muted); font-size: 9px; letter-spacing: .19em; font-weight: 650; }
.login-form-content > h2 { margin: 14px 0 12px; font-size: 32px; letter-spacing: -.035em; line-height: 1.3; font-weight: 700; }
.login-form-content > h2 > span { color: var(--login-accent); margin-left: 4px; }
.login-description { color: var(--login-muted); font-size: 13px; line-height: 1.8; margin-bottom: 30px; }
.login-field { margin-bottom: 21px; }
.login-field > label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 600; }
.login-field input { display: block; width: 100%; height: 49px; padding: 0 14px; border: 1px solid var(--login-border); border-radius: 8px; background: var(--login-surface); color: var(--login-text); font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.login-field input::placeholder { color: var(--login-muted); opacity: .8; font-size: 13px; }
.login-field input:hover { border-color: #a3b5d1; }
.login-field input:focus { outline: none; border-color: var(--login-accent); box-shadow: 0 0 0 3px #5b80f11c; }
.login-field input[aria-invalid="true"] { border-color: #ce5e65; }
.login-field > small { display: block; margin-top: 7px; font-size: 11px; line-height: 1.5; color: var(--login-muted); }
.login-password-wrap { position: relative; }
.login-password-wrap input { padding-right: 49px; }
.login-password-toggle { position: absolute; right: 3px; top: 3px; width: 43px; height: 43px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--login-muted); }
.login-password-toggle:hover { color: var(--login-accent); background: #8096c00d; }
.login-password-toggle svg { width: 20px; height: 20px; }
.login-eye-slash { display: none; }
.login-password-toggle[aria-pressed="true"] .login-eye-slash { display: block; }
.login-field > .login-caps { color: #a76811; }
.login-remember { display: inline-flex; align-items: center; gap: 8px; color: var(--login-muted); font-size: 12px; cursor: pointer; min-height: 24px; margin-bottom: 20px; }
.login-remember input { width: 15px; height: 15px; accent-color: #315ee8; cursor: pointer; }
.login-submit { width: 100%; min-height: 49px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 16px; border: 1px solid #315ee8; border-radius: 8px; background: #315ee8; color: #fff; font-size: 13px !important; font-weight: 600 !important; box-shadow: 0 5px 12px #315ee820; transition: background .15s, transform .15s; }
.login-submit:hover:not(:disabled) { background: #244dcc; transform: translateY(-1px); }
.login-submit > span:last-child { font-size: 18px; font-weight: 400; }
.login-session-hint { margin: 12px 0 0; font-size: 10px; line-height: 1.7; color: var(--login-muted); text-align: center; }
.login-register { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--login-border); color: var(--login-muted); font-size: 12px; text-align: center; line-height: 1.8; }
.login-register a { margin-left: 5px; color: var(--login-accent); font-weight: 600; }
.login-register a:hover { text-decoration: underline; text-underline-offset: 4px; }
.login-error { padding: 12px 14px; margin: -8px 0 22px; border: 1px solid #efc3c7; border-radius: 8px; background: #fff4f4; color: #a13740; font-size: 12px; line-height: 1.7; }
.login-footer { min-height: 82px; padding-block: 20px; color: var(--login-muted); font-size: 11px; }
.login-footer > div { display: flex; align-items: center; gap: 17px; }
.login-footer > div > span { opacity: .35; }
.login-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html.dark .login-showcase { background: radial-gradient(ellipse at 85% 85%, #233b67 0, transparent 70%), #1b2a44; color: #edf2ff; }
html.dark .login-showcase h1 em { color: #94b2ff; }
html.dark .login-showcase-copy > p, html.dark .login-features, html.dark .login-eyebrow { color: #aabbd7; }
html.dark .login-features li > span { color: #94b2ff; }
html.dark .login-editor { background: #233149; border-color: #3d5171; }
html.dark .login-editor-bar { border-color: #3d5171; color: #cad5e9; }
html.dark .login-editor-mode, html.dark .login-editor-status { color: #aabbd7; }
html.dark .login-editor-rail { color: #9cb1d2; }
html.dark .login-error { background: #3b252e; border-color: #70414c; color: #ffb9be; }
html.dark .login-field > .login-caps { color: #e8b86e; }
@media (min-width: 1500px) {
    .login-layout { min-height: 704px; }
    .login-showcase { padding: 55px 48px 40px; }
    .login-editor { margin-top: 40px; }
    .login-features { margin-top: 35px; }
}
@media (max-width: 1050px) {
    .login-header, .login-footer, .login-layout { width: calc(100% - 48px); }
    .login-showcase { padding: 40px 28px 30px; }
    .login-form-panel { padding: 40px 32px; }
    .login-preview-art { transform: scale(.8); transform-origin: right center; }
    .login-preview-content h2 { font-size: 19px; }
    .login-features { gap: 10px; font-size: 10px; }
}
@media (max-width: 800px) {
    .login-header { min-height: 88px; }
    .login-layout { grid-template-columns: 1fr; min-height: 0; width: min(460px, calc(100% - 40px)); margin-block: 16px 32px; border-radius: 18px; }
    .login-showcase { display: none; }
    .login-form-panel { padding: 40px 34px; }
    .login-form-content { max-width: none; }
    .login-footer { margin-top: auto; font-size: 10px; }
    .login-footer-tagline { display: none; }
    .login-field input { font-size: 16px; }
}
@media (max-width: 380px) {
    .login-header, .login-footer { width: calc(100% - 32px); }
    .login-header-actions { gap: 12px; font-size: 11px; }
    .login-brand { font-size: 16px; gap: 8px; }
    .login-brand-mark { width: 35px; height: 38px; }
    .login-form-panel { padding: 32px 24px; }
    .login-footer > div { gap: 10px; }
}
/* Registration reuses the login design; these adjustments only affect its longer form. */
.register-page .login-form-panel { padding-block: 32px; }
.register-page .login-description { margin-bottom: 22px; }
.register-page .login-field { margin-bottom: 16px; }
.register-page .login-field > label { margin-bottom: 7px; }
.register-page .login-register { margin-top: 20px; padding-top: 18px; }
.register-page .login-showcase { display: flex; flex-direction: column; justify-content: center; }
.register-success-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-top: 28px; border-radius: 18px; background: #e9f7f0; color: #22805d; font-size: 28px; }
.register-page .register-success-link { color: #fff; }
html.dark .register-success-mark { background: #1f3e37; color: #80d8b2; }
@media (max-width: 800px) {
    .register-page .login-showcase { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .login-page *, .login-page *::before { transition: none !important; scroll-behavior: auto !important; }
}