:root { --bg-base: #f4f6fb; --bg-ink: #ffffff; --bg-card: #ffffff; --bg-card-solid: #ffffff; --bg-elevated: #ffffff; --neon-cyan: #d4a017; --neon-magenta: #e85d04; --neon-green: #0e7c7b; --neon-amber: #e5c441; --text-primary: #0e1424; --text-secondary: #4a5568; --text-muted: #8a94a8; --text-dim: #b4bccc; --line: rgba(212, 160, 23, 0.16); --line-strong: rgba(212, 160, 23, 0.40); --line-magenta: rgba(232, 93, 4, 0.32); --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: "SF Mono", "Cascadia Code", "Consolas", "Monaco", "Noto Sans SC", monospace; --font-cn: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --glow-cyan: 0 0 24px rgba(212, 160, 23, 0.30); --glow-magenta: 0 0 24px rgba(232, 93, 4, 0.28); --glow-green: 0 0 16px rgba(14, 124, 123, 0.25); --space-section: clamp(40px, 6vh, 80px); --max-width: 1600px; --gutter: clamp(24px, 4vw, 80px); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: #c4cdda #e8ecf3; } body { font-family: var(--font-cn); background: var(--bg-base); color: var(--text-primary); line-height: 1.6; font-size: 15px; overflow-x: hidden; min-height: 100vh; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea { font: inherit; color: inherit; } ul, ol { list-style: none; } img { max-width: 100%; display: block; } ::selection { background: var(--neon-cyan); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #e8ecf3; } ::-webkit-scrollbar-thumb { background: #c4cdda; border: 2px solid #e8ecf3; } ::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); } .bg-grid { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -4; background-image: linear-gradient(rgba(212, 160, 23, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 160, 23, 0.06) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; } .bg-glow { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -3; background: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(212, 160, 23, 0.12), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 30%, rgba(232, 93, 4, 0.10), transparent 60%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(14, 124, 123, 0.06), transparent 60%); pointer-events: none; } .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0; background: transparent; box-shadow: none; transition: all 0.4s var(--ease-out); } .nav::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(212, 160, 23, 0.4) 20%, rgba(232, 93, 4, 0.4) 50%, rgba(212, 160, 23, 0.4) 80%, transparent 100%); opacity: 0; transition: all 0.3s; } .nav.scrolled { background: #ffffff; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); } .nav.scrolled::before { height: 2px; opacity: 1; background: linear-gradient(90deg, transparent 0%, rgba(212, 160, 23, 0.4) 20%, rgba(232, 93, 4, 0.4) 50%, rgba(212, 160, 23, 0.4) 80%, transparent 100%); } .nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: stretch; justify-content: space-between; height: 64px; gap: 24px; } .logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: 0.08em; height: 100%; } .logo-mark { color: var(--neon-cyan); font-size: 16px; text-shadow: var(--glow-cyan); } .logo-text { color: var(--text-primary); } .logo-accent { color: var(--neon-magenta); text-shadow: var(--glow-magenta); } .logo-img { height: 56px; width: auto; display: block; object-fit: contain; } .footer-brand .logo-img { height: 60px; } .nav-menu { display: flex; align-items: stretch; margin-left: auto; gap: 2px; } .nav-menu > * { display: flex; align-items: center; } .nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 24px; height: 100%; font-family: var(--font-cn); font-size: 15px; font-weight: 500; color: #3a3a42; letter-spacing: 0.06em; transition: all 0.3s var(--ease-out); } .nav.scrolled .nav-link { color: #3a3a42; } .nav-link::before { content: ''; position: absolute; bottom: 0; left: 12px; right: 12px; height: 3px; background: linear-gradient(90deg, transparent, #d4a017, #f59e0b, transparent); -webkit-transform: scaleX(0); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--ease-out); } .nav-link.active { color: #d4a017; font-weight: 600; } .nav-link.active::before { -webkit-transform: scaleX(1); transform: scaleX(1); } .nav-item { position: relative; display: inline-flex; align-items: center; } .nav-item.has-sub > .nav-link::after { content: ''; display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: 6px; margin-top: -2px; opacity: 0.6; } .nav-item.has-sub > .nav-link.active::after { border-right-color: #d4a017; border-bottom-color: #d4a017; opacity: 1; } .sub-nav { position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%) translateY(4px); transform: translateX(-50%) translateY(4px); min-width: 160px; padding: 0; background: #ffffff; border: 1px solid #e8e8ef; border-radius: 8px; border-top: none; opacity: 0; visibility: hidden; transition: all 0.25s var(--ease-out); z-index: 101; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } .nav-item.has-sub:hover .sub-nav { opacity: 1; visibility: visible; -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } .sub-nav a { display: block; padding: 12px 20px; font-family: var(--font-cn); font-size: 13px; color: #5a5a62; transition: all 0.2s; } .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: #fff; background: linear-gradient(135deg, #d4a017, #b8860b); border-radius: 8px; letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 2px 12px rgba(212, 160, 23, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; transition: all 0.3s var(--ease-out); } .nav-cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s ease; } .nav-cta:hover::before { left: 100%; } .nav-cta:hover { box-shadow: 0 4px 20px rgba(212, 160, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); -webkit-transform: translateY(-1px); transform: translateY(-1px); } .nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; margin: 0; background: none; border: none; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: 0; flex-shrink: 0; } .nav-toggle span { display: block; width: 22px; height: 2px; background: #1a1a2e; border-radius: 2px; transition: all 0.3s; } .nav-toggle.active span:nth-child(1) { -webkit-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); background: #d4a017; } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { -webkit-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); background: #d4a017; } .nav-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.45); z-index: 98; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.32s ease, visibility 0.32s ease; transition: opacity 0.32s ease, visibility 0.32s ease; -webkit-tap-highlight-color: transparent; } body.nav-open { overflow: hidden; } body.nav-open .nav-overlay { opacity: 1; visibility: visible; } .nav-close { display: none; } .hero { position: relative; min-height: 100vh; padding: 120px var(--gutter) 30px; max-width: var(--max-width); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 40px; } .hero-bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; } .hero > *:not(.hero-bg) { position: relative; z-index: 1; } .hero-grid { display: none; } .hero-grid-far { display: none; } .hero-glow { display: none; } .hero-particles { display: none; } .hero-main { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; } .hero-platforms { display: flex; flex-direction: column; align-items: center; gap: 20px; } .platform-cloud { position: relative; width: 100%; height: 0; padding-bottom: 100%; max-width: 420px; } .platform-cloud::before { content: ''; position: absolute; top: 50%; left: 50%; width: 88%; height: 0; padding-bottom: 88%; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px solid rgba(212, 160, 23, 0.12); pointer-events: none; } .platform-cloud::after { content: ''; position: absolute; top: 50%; left: 50%; width: 96%; height: 0; padding-bottom: 96%; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px dashed rgba(212, 160, 23, 0.08); pointer-events: none; } .platform-orbit { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; -webkit-animation: orbit-spin 45s linear infinite; animation: orbit-spin 45s linear infinite; } .platform-card { position: absolute; width: 62px; height: 62px; margin: -31px 0 0 -31px; z-index: 3; cursor: pointer; } .pf-inner { width: 100%; height: 100%; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; gap: 3px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 14px; box-shadow: 0 4px 20px rgba(14, 20, 36, 0.06); padding: 4px 6px; -webkit-animation: counter-spin 45s linear infinite; animation: counter-spin 45s linear infinite; -webkit-transition: box-shadow 0.35s var(--ease-out); transition: box-shadow 0.35s var(--ease-out); } .platform-card:hover .pf-inner { box-shadow: 0 6px 28px rgba(212, 160, 23, 0.2); } .pf-logo-wrap { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 9px; flex-shrink: 0; } .pf-logo-wrap svg { width: 18px; height: 18px; } .pf-logo-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; display: block; } .pf-logo { width: 18px; height: 18px; } .pf-name { font-family: var(--font-cn); font-size: 10px; line-height: 1; color: var(--text-secondary); white-space: nowrap; } .platform-ring { position: absolute; top: 50%; left: 50%; width: 52%; height: 0; padding-bottom: 52%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px dashed rgba(212, 160, 23, 0.2); border-radius: 50%; pointer-events: none; z-index: 1; } .platform-ring::before { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; background: var(--neon-cyan); border-radius: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); box-shadow: 0 0 14px var(--neon-cyan), 0 0 28px rgba(212, 160, 23, 0.4); } .platform-center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; z-index: 4; pointer-events: none; } .center-label { font-family: var(--font-display); font-size: 42px; font-weight: 900; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; letter-spacing: 0.02em; } .center-sub { font-family: var(--font-cn); font-size: 12px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.08em; } .platforms-tag { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.05em; padding: 6px 14px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, 0.6); } @-webkit-keyframes orbit-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes orbit-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes counter-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes counter-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } .hero-content { display: flex; flex-direction: column; gap: 28px; } .hero-status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; align-self: flex-start; } .status-dot { width: 6px; height: 6px; background: var(--neon-green); border-radius: 50%; box-shadow: 0 0 8px var(--neon-green); animation: pulse-dot 2s ease-in-out infinite; } .hero-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(212, 160, 23, 0.04); font-family: var(--font-mono); font-size: 12px; color: var(--neon-cyan); letter-spacing: 0.08em; } .tag-meta { color: var(--text-muted); margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line); } .hero-title { font-family: var(--font-display); font-weight: 900; line-height: 1.0; letter-spacing: -0.01em; display: flex; flex-direction: column; gap: 6px; } .title-line { display: block; } .title-glitch { font-size: clamp(56px, 9vw, 120px); color: var(--text-primary); position: relative; text-shadow: 0 0 20px rgba(0, 200, 255, 0.15), 0 2px 12px rgba(212, 160, 23, 0.12); } .title-sub { font-size: clamp(14px, 1.4vw, 18px); color: var(--neon-cyan); letter-spacing: 0.4em; font-weight: 400; padding-left: 4px; opacity: 0.8; text-shadow: 0 0 8px rgba(0, 200, 255, 0.4); } .title-accent { font-size: clamp(56px, 9vw, 120px); color: var(--neon-magenta); text-shadow: 0 0 20px rgba(180, 80, 220, 0.25), 0 2px 12px rgba(232, 93, 4, 0.15); } .title-glitch, .title-accent { position: relative; } .hero-subtitle { font-family: var(--font-mono); font-size: clamp(15px, 1.4vw, 18px); color: var(--text-secondary); max-width: 640px; min-height: 56px; line-height: 1.7; } .type-prefix { color: var(--neon-cyan); margin-right: 8px; } .type-cursor { color: var(--neon-cyan); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } .btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.06em; transition: all 0.3s var(--ease-out); overflow: hidden; } .btn-bracket { color: var(--text-muted); transition: color 0.3s; } .btn-primary { color: #fff; background: var(--neon-cyan); border: 1px solid var(--neon-cyan); } .btn-primary:hover { background: transparent; color: var(--neon-cyan); box-shadow: var(--glow-cyan); } .btn-primary:hover .btn-bracket { color: var(--neon-cyan); } .btn-glow { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.6s var(--ease-out); } .btn-primary:hover .btn-glow { left: 100%; } .btn-ghost { color: var(--text-primary); background: transparent; border: 1px solid var(--line-strong); } .btn-ghost:hover { border-color: var(--neon-magenta); color: var(--neon-magenta); box-shadow: 0 0 0 1px var(--neon-magenta), var(--glow-magenta); } .btn-arrow { transition: transform 0.3s; } .btn-ghost:hover .btn-arrow { transform: translateX(4px); } .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; margin-top: 16px; } .stat { display: flex; flex-direction: column; gap: 6px; padding: 0 24px; border-right: 1px solid var(--line); position: relative; } .stat:last-child { border-right: none; } .stat-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; } .stat-value { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; color: var(--neon-green); line-height: 1; text-shadow: var(--glow-green); letter-spacing: -0.02em; } .stat-unit { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.12em; } .stat::before { content: ''; position: absolute; top: 0; left: 24px; width: 12px; height: 1px; background: var(--neon-cyan); } .hero-scroll-hint { position: absolute; bottom: 30px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.2em; } .scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--neon-cyan), transparent); animation: scroll-pulse 2s ease-in-out infinite; } @keyframes scroll-pulse { 0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 1; } 50% { transform: scaleY(0.5); transform-origin: bottom; opacity: 0.5; } } .section { max-width: var(--max-width); margin: 0 auto; padding: 40px var(--gutter); position: relative; content-visibility: auto; contain-intrinsic-size: 0 500px; } .section-head { margin-bottom: 30px; max-width: 720px; } .section-head-center { max-width: 880px; margin-left: auto; margin-right: auto; text-align: center; } .section-head-center .section-desc { margin-left: auto; margin-right: auto; } .section-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--text-muted); flex-wrap: nowrap; white-space: nowrap; justify-content: center; } .section-num { color: var(--neon-cyan); flex-shrink: 0; } .section-tag { color: var(--text-muted); flex-shrink: 0; } .section-head-center .section-meta { justify-content: center; } .section-title { font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 16px; color: var(--text-primary); } .title-prefix { color: var(--neon-cyan); font-weight: 400; margin-right: 12px; } .section-desc { font-size: 16px; color: var(--text-secondary); line-height: 1.7; max-width: 600px; } .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .service-card { position: relative; padding: 32px 26px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px; transition: all 0.4s var(--ease-out); overflow: hidden; display: flex; flex-direction: column; min-height: 420px; } .service-card::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(135deg, transparent 60%, rgba(212, 160, 23, 0.06) 100%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .service-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.85); } .service-card:hover::before { opacity: 1; } .card-corner { position: absolute; width: 12px; height: 12px; border-color: var(--neon-cyan); border-style: solid; border-width: 0; opacity: 0.6; transition: all 0.4s; } .card-corner.tl { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; } .card-corner.tr { top: 6px; right: 6px; border-top-width: 1px; border-right-width: 1px; } .card-corner.bl { bottom: 6px; left: 6px; border-bottom-width: 1px; border-left-width: 1px; } .card-corner.br { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; } .service-card:hover .card-corner, .case-card:hover .card-corner { opacity: 1; width: 16px; height: 16px; } .service-card[data-variant="magenta"] .card-corner { border-color: var(--neon-magenta); } .service-card[data-variant="green"] .card-corner { border-color: var(--neon-green); } .service-head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 24px; } .service-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; } .service-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: linear-gradient(135deg, #e85d04, #d45500); border-radius: 10px; color: #fff; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .service-card:hover .service-icon { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(212,160,23,0.4); } .featured-badge { font-family: var(--font-mono); font-size: 9px; padding: 2px 6px; background: var(--neon-magenta); color: #fff; letter-spacing: 0.1em; font-weight: 700; } .service-title { font-family: var(--font-cn); font-size: 19px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; letter-spacing: -0.01em; } .service-desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 18px; } .service-list { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); margin-bottom: auto; } .list-arrow { color: var(--neon-cyan); margin-right: 8px; } .service-card[data-variant="magenta"] .list-arrow { color: var(--neon-magenta); } .service-card[data-variant="green"] .list-arrow { color: var(--neon-green); } .service-foot { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--line); } .foot-tag { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.14em; } .cases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .case-card { position: relative; padding: 28px 24px; background: #ffffff; border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; transition: all 0.3s ease; display: flex; flex-direction: column; gap: 16px; overflow: hidden; } .case-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #d4a017, #f59e0b); opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); transform-origin: left; transition: all 0.3s ease; } .case-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); border-color: rgba(212, 160, 23, 0.3); box-shadow: 0 12px 32px rgba(0,0,0,0.08); } .case-card:hover::before { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } .case-meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; } .case-industry { padding: 3px 10px; border: 1px solid #f59e0b; color: #d4a017; background: rgba(212, 160, 23, 0.06); border-radius: 4px; white-space: nowrap; font-size: 11px; } .case-id { color: #9ca3af; white-space: nowrap; } .case-title { font-family: var(--font-cn); font-size: 19px; font-weight: 700; color: var(--text-primary); line-height: 1.4; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; } .case-challenge, .case-solution { display: flex; flex-direction: column; gap: 6px; } .case-label { font-family: var(--font-mono); font-size: 10px; color: var(--neon-cyan); letter-spacing: 0.14em; } .case-solution .case-label { color: var(--neon-magenta); } .case-challenge p, .case-solution p { font-size: 13px; color: var(--text-secondary); line-height: 1.65; } .case-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); margin-top: auto; } .metric { display: flex; flex-direction: column; gap: 4px; } .metric-value { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--neon-green); text-shadow: var(--glow-green); line-height: 1; letter-spacing: -0.01em; } .metric-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.08em; } .footer { border-top: 1px solid var(--line); background: #fafafc; margin-top: 60px; } .footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 50px var(--gutter) 28px; display: flex; flex-direction: column; gap: 36px; } .footer-main { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: start; } .footer-brand-col { display: flex; flex-direction: column; gap: 16px; } .footer-brand { display: flex; align-items: center; gap: 10px; } .footer-desc { font-family: var(--font-cn); font-size: 13px; color: var(--text-secondary); line-height: 1.7; max-width: 280px; } .footer-contact { display: flex; flex-direction: column; gap: 8px; } .fc-item { display: flex; flex-direction: column; gap: 2px; } .fc-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.08em; } .fc-value { font-family: var(--font-cn); font-size: 13px; color: var(--text-primary); } .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .footer-col { display: flex; flex-direction: column; gap: 14px; } .footer-col-title { font-family: var(--font-cn); font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; } .footer-col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col-list li { margin: 0; } .footer-col-list a { font-family: var(--font-cn); font-size: 13px; color: var(--text-secondary); text-decoration: none; transition: color 0.2s; } .footer-col-list a:hover { color: var(--neon-cyan); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); } .footer-copy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; } .footer-beian { color: var(--text-muted); text-decoration: none; } .footer-beian:hover { color: var(--neon-cyan); } .footer-friend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-cn); font-size: 12px; color: var(--text-dim); } .footer-friend a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; } .footer-friend a:hover { color: var(--neon-cyan); } .toast { position: fixed; bottom: 32px; left: 50%; -webkit-transform: translateX(-50%) translateY(120%); transform: translateX(-50%) translateY(120%); z-index: 1000; display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; background: var(--bg-elevated); border: 1px solid var(--neon-green); border-radius: 8px; box-shadow: var(--glow-green), 0 8px 32px rgba(0, 0, 0, 0.15); font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); transition: transform 0.5s var(--ease-out); pointer-events: none; max-width: 90vw; } .toast.show { transform: translateX(-50%) translateY(0); } .toast-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--neon-green); color: #fff; font-size: 13px; font-weight: 700; border-radius: 50%; } .reveal { opacity: 1; -webkit-transform: none; transform: none; filter: none; transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), filter 0.8s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); } .reveal.visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); filter: blur(0); } .core-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .core-card { position: relative; padding: 36px 30px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px; transition: all 0.4s var(--ease-out); display: flex; flex-direction: column; min-height: 360px; text-decoration: none; color: inherit; overflow: hidden; } .core-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.6), transparent); opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); transform-origin: left; transition: all 0.4s var(--ease-out); } .core-card:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); border-color: rgba(245, 158, 11, 0.3); background: rgba(255, 255, 255, 0.95); box-shadow: 0 16px 40px rgba(245, 158, 11, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); } .core-card:hover::before { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); background: linear-gradient(90deg, #d4a017, #f59e0b, #ef4444); } .core-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; } .core-head .core-title { margin: 0; } .core-icon-wrap { width: 44px; height: 44px; background: linear-gradient(135deg, #e85d04, #d45500); border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .core-card:hover .core-icon-wrap { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,93,4,0.4); } .core-icon { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .core-title { font-family: var(--font-cn); font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.01em; line-height: 1.2; } .core-sub { font-family: var(--font-mono); font-size: 11px; color: var(--neon-cyan); letter-spacing: 0.06em; margin-bottom: 16px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .core-card[data-variant="magenta"] .core-sub { color: var(--neon-magenta); } .core-card[data-variant="green"] .core-sub { color: var(--neon-green); } .core-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: auto; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-height: 6.8em; } .core-foot { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--line); } .services-grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .services-grid-6 .service-card { text-decoration: none; color: inherit; min-height: 380px; } .service-more { margin-top: auto; padding-top: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--neon-cyan); letter-spacing: 0.08em; transition: transform 0.25s; } .service-card[data-variant="magenta"] .service-more { color: var(--neon-magenta); } .service-card[data-variant="green"] .service-more { color: var(--neon-green); } .services-grid-6 .service-card:hover .service-more { transform: translateX(6px); } .scenarios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .scenario-card { position: relative; padding: 32px 28px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px; transition: all 0.4s var(--ease-out); display: flex; flex-direction: column; gap: 20px; overflow: hidden; } .scenario-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .scenario-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.6), transparent); opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); transform-origin: left; transition: all 0.4s var(--ease-out); } .scenario-card:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); border-color: rgba(245, 158, 11, 0.3); background: rgba(255, 255, 255, 0.95); box-shadow: 0 16px 40px rgba(245, 158, 11, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); } .scenario-card:hover::before { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); background: linear-gradient(90deg, #d4a017, #f59e0b, #ef4444); } .scenario-card:hover .card-corner { opacity: 1; width: 16px; height: 16px; } .scenario-card[data-variant="cyan"]::before { background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.6), transparent); } .scenario-card[data-variant="cyan"]:hover { border-color: rgba(212, 160, 23, 0.3); box-shadow: 0 16px 40px rgba(212, 160, 23, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); } .scenario-card[data-variant="cyan"]:hover::before { background: linear-gradient(90deg, #d4a017, #f59e0b); } .scenario-card[data-variant="cyan"] .card-corner { border-color: var(--neon-cyan); } .scenario-card[data-variant="magenta"]::before { background: linear-gradient(90deg, transparent, rgba(232, 93, 4, 0.6), transparent); } .scenario-card[data-variant="magenta"]:hover { border-color: rgba(232, 93, 4, 0.3); box-shadow: 0 16px 40px rgba(232, 93, 4, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); } .scenario-card[data-variant="magenta"]:hover::before { background: linear-gradient(90deg, #e85d04, #ef4444); } .scenario-card[data-variant="magenta"] .card-corner { border-color: var(--neon-magenta); } .scenario-card[data-variant="green"]::before { background: linear-gradient(90deg, transparent, rgba(14, 124, 123, 0.6), transparent); } .scenario-card[data-variant="green"]:hover { border-color: rgba(14, 124, 123, 0.3); box-shadow: 0 16px 40px rgba(14, 124, 123, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); } .scenario-card[data-variant="green"]:hover::before { background: linear-gradient(90deg, #0e7c7b, #10a37f); } .scenario-card[data-variant="green"] .card-corner { border-color: var(--neon-green); } .scenario-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e85d04, #d45500); border-radius: 10px; color: #fff; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .scenario-card:hover .scenario-icon { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(232,93,4,0.4); } .scenario-icon svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .scenario-title { font-family: var(--font-cn); font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .scenario-body { display: flex; flex-direction: column; gap: 18px; flex: 1; } .scenario-item { display: flex; flex-direction: column; gap: 6px; } .scenario-label { font-family: var(--font-mono); font-size: 11px; color: var(--neon-cyan); letter-spacing: 0.08em; } .scenario-card[data-variant="magenta"] .scenario-label { color: var(--neon-magenta); } .scenario-card[data-variant="green"] .scenario-label { color: var(--neon-green); } .scenario-item p { font-size: 13px; color: var(--text-secondary); line-height: 1.65; } .scenario-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; font-family: var(--font-mono); font-size: 12px; color: #b45309; background: transparent; border: 1px solid rgba(180,83,9,0.25); border-radius: 4px; transition: all 0.25s var(--ease-out); align-self: flex-start; letter-spacing: 0.06em; } .scenario-cta:hover { background: linear-gradient(135deg, #e85d04, #d45500); color: #fff; border-color: #e85d04; box-shadow: 0 2px 10px rgba(232,93,4,0.35); } .scenario-cta span { transition: transform 0.25s; } .scenario-cta:hover span { transform: translateX(4px); } .cases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cases-grid .case-card { text-decoration: none; color: inherit; min-height: 320px; gap: 16px; } .case-excerpt { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: auto; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .case-more { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--neon-cyan); letter-spacing: 0.06em; transition: transform 0.25s; } .case-card:hover .case-more { transform: translateX(6px); } .news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .news-wide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; max-width: 1600px; margin: 0 auto; } .news-wide-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; text-decoration: none; color: inherit; transition: all 0.3s ease; } .news-wide-card:hover { border-color: #d4a017; box-shadow: 0 4px 16px rgba(212, 160, 23, 0.12); } .news-wide-tag { display: inline-block; font-size: 11px; color: #d4a017; padding: 3px 10px; border: 1px solid #d4a017; font-weight: 500; } .news-wide-title { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.45; margin: 0; } .news-wide-meta { font-size: 12px; color: #64748b; } .news-wide-link { font-size: 12px; color: #d4a017; margin-top: 4px; } .news-wide-link::after { content: ' →'; } @media (max-width: 768px) { .news-wide-grid { grid-template-columns: 1fr; } } .news-card { position: relative; padding: 28px 26px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px; transition: all 0.4s var(--ease-out); display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; min-height: 280px; overflow: hidden; } .news-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.6), transparent); opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); transform-origin: left; transition: all 0.4s var(--ease-out); } .news-card:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); border-color: rgba(245, 158, 11, 0.3); background: rgba(255, 255, 255, 0.95); box-shadow: 0 16px 40px rgba(245, 158, 11, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); } .news-card:hover::before { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); background: linear-gradient(90deg, #d4a017, #f59e0b, #ef4444); } .news-card:hover .card-corner { opacity: 1; width: 16px; height: 16px; } .news-date { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); } .news-day { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--neon-cyan); line-height: 1; } .news-month { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.08em; } .news-title { font-family: var(--font-cn); font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1.45; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; } .news-excerpt { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: auto; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-height: 6.8em; } .news-more { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--neon-cyan); letter-spacing: 0.06em; transition: transform 0.25s; } .section-cta { text-align: center; margin-top: 36px; } .news-card:hover .news-more { transform: translateX(6px); } .news-card:hover .news-more { transform: translateX(6px); } .news-hero { position: relative; padding: 120px var(--gutter) 60px; max-width: var(--max-width); margin: 0 auto; } .news-hero-inner { max-width: 900px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; margin: 0 auto; } .news-hero-tag { display: inline-flex; align-items: center; gap: 8px; align-self: center; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(212, 160, 23, 0.06); font-family: var(--font-mono); font-size: 12px; color: var(--neon-cyan); letter-spacing: 0.08em; } .tag-bracket { color: var(--text-muted); } .tag-prefix { color: var(--neon-cyan); } .tag-sep { color: var(--neon-magenta); margin: 0 4px; } .news-hero-title { font-family: var(--font-display); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; display: flex; flex-direction: column; gap: 8px; } .news-hero-title .title-glow { font-size: clamp(48px, 6vw, 80px); color: var(--text-primary); } .news-hero-title .title-accent { font-size: clamp(36px, 4.5vw, 60px); color: var(--neon-magenta); } .news-hero-sub { font-family: var(--font-cn); font-size: 16px; color: var(--text-secondary); line-height: 1.7; max-width: 560px; } .news-stats { display: flex; gap: 48px; margin-top: 12px; padding-top: 32px; border-top: 1px solid var(--line); justify-content: center; } .news-stat { display: flex; flex-direction: column; gap: 6px; } .news-stat-num { font-family: var(--font-display); font-size: 40px; font-weight: 900; color: var(--neon-cyan); line-height: 1; } .news-stat-label { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.08em; } .news-hero-compact { padding: 60px var(--gutter) 40px; } .news-hero-compact .news-hero-inner { gap: 16px; } .news-hero-compact .news-hero-tag { padding: 4px 10px; font-size: 10px; } .news-hero-compact .news-hero-title .title-glow { font-size: clamp(32px, 5vw, 56px); } .news-hero-compact .news-hero-title .title-accent { font-size: clamp(24px, 3.5vw, 40px); } .news-hero-compact .news-hero-sub { font-size: 14px; max-width: 400px; } .news-list-section { padding: 40px var(--gutter) var(--space-section); max-width: var(--max-width); margin: 0 auto; } .news-list-compact { padding: 20px var(--gutter) 40px; } .news-list-compact .news-list-inner { gap: 24px; } .news-list-compact .news-card { padding: 16px 20px; min-height: auto; gap: 8px; } .news-list-compact .news-excerpt { display: none; } .news-list-compact .news-more { font-size: 12px; } .news-list-inner { display: flex; flex-direction: column; gap: 40px; } .news-list-head { display: flex; flex-direction: column; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--line); text-align: center; } .news-list-title { font-family: var(--font-display); font-size: 28px; font-weight: 900; color: var(--text-primary); letter-spacing: 0.02em; } .news-filter { display: flex; gap: 8px; flex-wrap: wrap; } .filter-btn { padding: 8px 18px; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); border: 1px solid var(--line); background: transparent; border-radius: 999px; letter-spacing: 0.06em; transition: all 0.25s var(--ease-out); cursor: pointer; } .filter-btn:hover { color: var(--neon-cyan); border-color: var(--line-strong); } .filter-btn.active { color: #fff; background: var(--neon-cyan); border-color: var(--neon-cyan); } .news-list-grid { gap: 24px; } .news-list-grid .news-card { min-height: 300px; padding: 30px 28px; gap: 16px; } .news-category-tag { display: inline-flex; align-self: flex-start; padding: 4px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--neon-magenta); border: 1px solid var(--neon-magenta); border-radius: 4px; letter-spacing: 0.1em; } .news-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; padding-top: 40px; border-top: 1px solid var(--line); } .page-btn { min-width: 44px; height: 44px; padding: 0 16px; font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); border: 1px solid var(--line); background: var(--bg-card); border-radius: 8px; letter-spacing: 0.04em; transition: all 0.25s var(--ease-out); cursor: pointer; } .page-btn:hover:not(:disabled):not(.active) { color: var(--neon-cyan); border-color: var(--line-strong); } .page-btn.active { color: #fff; background: var(--neon-cyan); border-color: var(--neon-cyan); } .page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .detail-layout { max-width: var(--max-width); margin: 0 auto; padding: 60px var(--gutter) var(--space-section); display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; } .breadcrumb { max-width: var(--max-width); margin: 0 auto; padding: 100px var(--gutter) 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; } .breadcrumb a { color: var(--text-secondary); transition: color 0.2s; } .breadcrumb a:hover { color: var(--neon-cyan); } .breadcrumb span { margin: 0 8px; color: var(--text-dim); } .breadcrumb .current { color: var(--neon-cyan); } .service-sidebar { position: sticky; top: 100px; padding: 24px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-card); } .sidebar-title { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.12em; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); } .sidebar-list { display: flex; flex-direction: column; gap: 2px; } .sidebar-link { display: block; padding: 12px 14px; font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); border-left: 2px solid transparent; transition: all 0.25s var(--ease-out); letter-spacing: 0.02em; } .sidebar-link:hover { color: var(--neon-cyan); background: rgba(212, 160, 23, 0.04); border-left-color: var(--neon-cyan); } .sidebar-link.active { color: var(--neon-cyan); background: rgba(212, 160, 23, 0.06); border-left-color: var(--neon-cyan); } .service-banner { position: relative; padding: 140px var(--gutter) 60px; margin: 0 auto; background: linear-gradient(180deg, #faf8f3 0%, #f7f4ed 30%, #f5f7fa 70%, #f4f6fb 100%); overflow: hidden; } .service-banner::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle, rgba(212, 160, 23, 0.10) 1px, transparent 1px), radial-gradient(circle, rgba(212, 160, 23, 0.07) 1px, transparent 1px), radial-gradient(circle, rgba(212, 160, 23, 0.05) 1px, transparent 1px); background-size: 100px 100px, 70px 70px, 50px 50px; background-position: 0 0, 15px 15px, 35px 35px; pointer-events: none; } .service-banner::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(ellipse 70% 50% at 30% 30%, rgba(212, 160, 23, 0.10), transparent 70%), radial-gradient(ellipse 60% 40% at 70% 70%, rgba(232, 93, 4, 0.08), transparent 65%); pointer-events: none; } .service-banner-grid { display: none; } .service-banner-inner { position: relative; max-width: 900px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin: 0 auto; z-index: 2; } .banner-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -0.01em; color: #1a1a2e; position: relative; text-shadow: 0 0 30px rgba(212, 160, 23, 0.25), 0 2px 10px rgba(232, 93, 4, 0.15); } .banner-title::before { content: attr(data-title); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(212, 160, 23, 0.3), rgba(232, 93, 4, 0.2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; opacity: 0; filter: blur(8px); transition: opacity 0.4s; } .service-banner:hover .banner-title::before { opacity: 1; } .banner-subtitle { font-family: var(--font-mono); font-size: clamp(12px, 1.2vw, 14px); color: #6b7280; letter-spacing: 0.25em; font-weight: 500; position: relative; } .banner-subtitle::before, .banner-subtitle::after { content: ''; position: absolute; top: 50%; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.4)); } .banner-subtitle::before { left: -40px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .banner-subtitle::after { right: -40px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: linear-gradient(90deg, rgba(212, 160, 23, 0.4), transparent); } .banner-desc { font-family: var(--font-cn); font-size: clamp(14px, 1.3vw, 16px); line-height: 1.8; color: #6b7280; max-width: 600px; position: relative; } .banner-desc::before { content: '['; position: absolute; left: -16px; top: -4px; font-family: var(--font-mono); font-size: 24px; color: rgba(212, 160, 23, 0.4); } .banner-desc::after { content: ']'; position: absolute; right: -16px; bottom: -4px; font-family: var(--font-mono); font-size: 24px; color: rgba(212, 160, 23, 0.4); } .banner-features { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 12px; } .banner-feature { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid rgba(212, 160, 23, 0.25); border-radius: 8px; font-size: 12px; color: #4b5563; font-family: var(--font-cn); letter-spacing: 0.02em; transition: all 0.3s ease; position: relative; overflow: hidden; } .banner-feature::before { content: ''; width: 6px; height: 6px; background: #d4a017; border-radius: 50%; box-shadow: 0 0 8px rgba(212, 160, 23, 0.6); } .banner-feature::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(135deg, rgba(212, 160, 23, 0.08), transparent); opacity: 0; transition: opacity 0.3s; } .banner-feature:hover { border-color: #d4a017; color: #d4a017; -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212, 160, 23, 0.15); } .banner-feature:hover::after { opacity: 1; } .service-banner-right { display: none; } @media (max-width: 900px) { .service-banner { padding: 140px var(--gutter) 30px; } .service-banner-inner { gap: 14px; } .banner-title { font-size: clamp(28px, 5vw, 48px); } .banner-subtitle::before, .banner-subtitle::after { display: none; } .banner-desc::before, .banner-desc::after { display: none; } .service-banner-grid { display: none; } } .detail-main { min-width: 0; } .detail-header { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .detail-eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--neon-cyan); letter-spacing: 0.14em; margin-bottom: 12px; } .detail-title { font-family: var(--font-cn); font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 12px; } .detail-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; } .article-body { font-size: 15px; line-height: 1.85; color: var(--text-secondary); } .article-body h2 { font-family: var(--font-cn); font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 40px 0 16px; padding-left: 14px; border-left: 3px solid var(--neon-cyan); letter-spacing: -0.01em; } .article-body h3 { font-family: var(--font-cn); font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 28px 0 12px; } .article-body p { margin-bottom: 18px; } .article-body strong, .article-body b { color: var(--text-primary); font-weight: 700; } .article-body em { font-style: normal; color: var(--neon-cyan); font-family: var(--font-mono); font-size: 14px; } .article-body ul, .article-body ol { margin: 16px 0 20px 20px; } .article-body li { margin-bottom: 8px; list-style: disc; color: var(--text-secondary); } .article-body blockquote { margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--neon-magenta); background: rgba(232, 93, 4, 0.05); font-style: italic; color: var(--text-primary); } .feature-block { margin: 36px 0; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-card); position: relative; } .feature-block::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--neon-cyan); } .feature-block-title { font-family: var(--font-cn); font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; letter-spacing: -0.01em; } .feature-block-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 16px; } .feature-sub-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .feature-sub-item { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.6); } .feature-sub-item h4 { font-family: var(--font-mono); font-size: 12px; color: var(--neon-cyan); margin-bottom: 6px; letter-spacing: 0.04em; } .feature-sub-item p { font-size: 12px; color: var(--text-secondary); line-height: 1.6; } .related-section { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter) var(--space-section); } .related-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.12em; } .related-head::after { content: ''; flex: 1; height: 1px; background: var(--line); } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .related-card { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-card); transition: all 0.3s var(--ease-out); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; } .related-card:hover { border-color: var(--line-strong); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .related-date { font-family: var(--font-mono); font-size: 10px; color: var(--neon-cyan); letter-spacing: 0.08em; } .related-title { font-family: var(--font-cn); font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.45; } .related-excerpt { font-size: 12px; color: var(--text-secondary); line-height: 1.6; } .detail-layout-single { grid-template-columns: 1fr; max-width: 1600px; } .about-hero { padding: 80px var(--gutter) 60px; max-width: 1600px; margin: 0 auto; text-align: center; } .about-hero-inner { max-width: 820px; margin: 0 auto; } .section-meta-center { justify-content: center; display: flex; margin-bottom: 18px; } .about-title { font-family: var(--font-cn); font-size: clamp(32px, 4vw, 48px); font-weight: 700; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 12px; } .about-subtitle { font-family: var(--font-mono); font-size: 14px; color: var(--neon-magenta); letter-spacing: 0.1em; margin-bottom: 24px; } .about-desc { font-family: var(--font-cn); font-size: 15.5px; color: var(--text-secondary); line-height: 1.9; max-width: 720px; margin: 0 auto; text-align: left; } .about-desc p { margin-bottom: 16px; } .about-desc p:last-child { margin-bottom: 0; } .about-section { max-width: 1600px; margin: 0 auto; padding: var(--space-section) var(--gutter); } .about-section .section-head-center { margin-bottom: 32px; } .about-section .section-sub { font-family: var(--font-cn); font-size: 14px; color: var(--text-secondary); margin-top: 8px; } .about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .about-card { position: relative; padding: 32px 28px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px; transition: all 0.3s var(--ease-out); min-height: 240px; display: flex; flex-direction: column; overflow: hidden; } .about-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.4), transparent); opacity: 0; transition: opacity 0.3s var(--ease-out); } .about-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); border-color: rgba(212, 160, 23, 0.3); box-shadow: 0 8px 24px rgba(212, 160, 23, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); } .about-card:hover::before { opacity: 1; } .about-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .about-card-head .about-card-title { margin: 0; } .about-card-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e85d04, #d45500); border-radius: 10px; color: #fff; flex-shrink: 0; } .about-card-icon svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .about-card-title { font-family: var(--font-cn); font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; letter-spacing: -0.01em; } .about-card-desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; flex: 1; font-family: var(--font-cn); } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .team-card { position: relative; padding: 24px; background: #ffffff; border: 1px solid #f0f0f5; border-radius: 8px; transition: all 0.25s ease; min-height: 180px; display: flex; flex-direction: column; } .team-card:hover { border-color: #d4a017; } .team-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .team-card-head .team-card-title { margin: 0; } .team-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: linear-gradient(135deg, #e85d04, #d45500); border-radius: 10px; color: #fff; flex-shrink: 0; } .team-card-icon svg { display: block; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .team-card-title { font-family: var(--font-cn); font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .team-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.65; flex: 1; font-family: var(--font-cn); } .jobs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; } .jobs-foot { max-width: 720px; margin: 32px auto 0; padding: 20px 24px; background: #fff7ed; border-left: 3px solid #f59e0b; border-radius: 6px; font-size: 14px; color: #4b5563; line-height: 1.7; } .jobs-foot strong { color: #b45309; } @media (max-width: 1100px) { .about-grid { grid-template-columns: repeat(2, 1fr); } .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .about-grid { grid-template-columns: 1fr; gap: 18px; } .about-card { padding: 22px 18px; } .about-card-title { font-size: 16px; } } .jobs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0 24px; } .job-card { position: relative; padding: 32px 28px 24px; background: #fff; border: 1px solid #e8e8ee; border-radius: 8px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; gap: 14px; min-height: 420px; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .job-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); border-color: #d4a017; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08); } .job-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .job-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: linear-gradient(135deg, #e85d04, #d45500); border-radius: 10px; color: #fff; flex-shrink: 0; } .job-icon svg { display: block; } .job-title { font-family: var(--font-cn); font-size: 20px; font-weight: 700; color: #0f172a; margin: 0; letter-spacing: 0.01em; } .job-meta { font-family: var(--font-cn); font-size: 13px; color: #6b7280; letter-spacing: 0.02em; } .job-desc { font-family: var(--font-cn); font-size: 13px; color: #4b5563; line-height: 1.6; margin: 4px 0 0; max-height: 80px; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .job-requirements { list-style: none; padding: 0; margin: 6px 0 0; max-height: 52px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .job-requirements li { position: relative; padding-left: 16px; font-family: var(--font-cn); font-size: 12px; color: #4b5563; line-height: 1.5; margin: 0; } .job-requirements li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #ef4444); } .job-apply { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; padding: 10px 20px; font-family: var(--font-mono); font-size: 12px; color: #b45309; background: transparent; border: 1px solid rgba(180,83,9,0.25); border-radius: 4px; letter-spacing: 0.06em; text-decoration: none; transition: all 0.25s var(--ease-out); } .job-apply:hover { background: linear-gradient(135deg, #e85d04, #d45500); color: #fff; border-color: #e85d04; box-shadow: 0 2px 10px rgba(232,93,4,0.35); -webkit-transform: translateY(-1px); transform: translateY(-1px); } .jobs-foot { margin-top: 28px; padding: 18px 20px; background: #fff7ed; border-left: 3px solid #f59e0b; border-radius: 4px; font-size: 14px; color: #4b5563; line-height: 1.7; } .jobs-foot strong { color: #b45309; } @media (max-width: 1100px) { .jobs-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .jobs-grid { grid-template-columns: 1fr; gap: 18px; } .job-card { padding: 26px 22px 22px; } .job-title { font-size: 18px; } } @media (max-width: 1100px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .services-grid-6 { grid-template-columns: repeat(2, 1fr); } .core-grid { grid-template-columns: repeat(2, 1fr); } .scenarios-grid { grid-template-columns: repeat(2, 1fr); } .cases-grid { grid-template-columns: repeat(2, 1fr); } .news-grid { grid-template-columns: repeat(2, 1fr); } .detail-layout { grid-template-columns: 1fr; gap: 32px; } .service-sidebar { position: static; } .related-grid { grid-template-columns: repeat(2, 1fr); } .feature-sub-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; } .services-grid-6 { grid-template-columns: 1fr; } .core-grid { grid-template-columns: 1fr; } .scenarios-grid { grid-template-columns: 1fr; } .cases-grid { grid-template-columns: 1fr; } .news-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } .feature-sub-list { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; } .about-grid { grid-template-columns: 1fr; } .jobs-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .nav-cta { display: none; } .nav-toggle { display: flex; } .nav-inner { height: 64px; gap: 0; align-items: center; } .logo { margin-right: auto; height: 100%; display: flex; align-items: center; } .logo-img { height: 42px; } .hero { padding-top: 100px; } .service-banner { padding-top: 100px; } .news-hero { padding-top: 100px; } .hero-main { grid-template-columns: 1fr; gap: 40px; } .hero-platforms { order: -1; } .platform-cloud { max-width: 320px; } .center-label { font-size: 32px; } .platform-card { width: 52px; height: 52px; margin: -26px 0 0 -26px; } .pf-logo-wrap { width: 26px; height: 26px; border-radius: 7px; } .pf-logo-wrap svg { width: 15px; height: 15px; } .pf-name { font-size: 9px; } .pf-inner { gap: 2px; padding: 3px 4px; border-radius: 10px; } .section-meta { gap: 10px; letter-spacing: 0.06em; } .section-head { margin-bottom: 40px; } .section-head-center { max-width: 100%; } .nav-menu { position: fixed; top: 0; right: 0; width: 280px; max-width: 78vw; height: 100vh; margin: 0; padding: 80px 0 24px; background: #ffffff; display: flex; flex-direction: column; gap: 0; z-index: 99; -webkit-transform: translateX(100%); transform: translateX(100%); transition: -webkit-transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12); overflow-y: auto; -webkit-overflow-scrolling: touch; will-change: transform; } .nav-menu.open { -webkit-transform: translateX(0); transform: translateX(0); } .nav-menu > * { display: block; width: 100%; } .nav-menu .nav-item, .nav-menu > a.nav-link { width: 100%; border-bottom: 1px solid #f2f2f6; } .nav-menu .nav-link { display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: 16px 24px; height: auto; min-height: 52px; font-size: 16px; font-weight: 500; color: #2a2a35; letter-spacing: 0.02em; text-decoration: none; position: relative; transition: background 0.2s, color 0.2s; -webkit-tap-highlight-color: transparent; } .nav-menu .nav-link:active { background: #f7f7fa; } .nav-menu .nav-link.active { color: #d4a017; font-weight: 600; background: linear-gradient(90deg, rgba(212, 160, 23, 0.06), transparent); } .nav-menu .nav-link.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #d4a017, #e85d04); -webkit-transform: none; transform: none; } .nav-menu .nav-item.has-sub > .nav-link::after { display: none; } .nav-menu .sub-nav { display: none; } .nav-close { display: flex; position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; padding: 0; margin: 0; background: #f5f5f8; border: none; border-radius: 50%; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .nav-close span { position: absolute; display: block; width: 18px; height: 2px; background: #4a4a55; border-radius: 2px; } .nav-close span:nth-child(1) { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .nav-close span:nth-child(2) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .nav-close:active { background: #eaeaef; } .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 24px 0; } .stat { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 18px; } .stat:nth-child(odd) { border-right: 1px solid var(--line); } .stat:nth-child(3), .stat:nth-child(4) { border-bottom: none; padding-bottom: 0; padding-top: 18px; } .core-grid { grid-template-columns: 1fr; } .scenarios-grid { grid-template-columns: 1fr; } .cases-grid { grid-template-columns: 1fr; } .news-grid { grid-template-columns: 1fr; } .feature-sub-list { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } .footer-main { grid-template-columns: 1fr; gap: 36px; } .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 24px; } } @media (max-width: 600px) { :root { --gutter: 16px; } .services-grid { grid-template-columns: 1fr; } .services-grid-6 { grid-template-columns: 1fr; } .cases-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; } .about-grid { grid-template-columns: 1fr; } .hero { padding-top: 90px; min-height: auto; } .service-banner { padding-top: 90px; } .news-hero { padding-top: 90px; } .platform-cloud { max-width: 260px; } .center-label { font-size: 26px; } .platform-card { width: 44px; height: 44px; margin: -22px 0 0 -22px; } .pf-logo-wrap { width: 22px; height: 22px; border-radius: 6px; } .pf-logo-wrap svg { width: 13px; height: 13px; } .pf-name { font-size: 8px; } .pf-inner { gap: 1px; padding: 2px 3px; border-radius: 8px; } .footer-inner { flex-direction: column; align-items: flex-start; } .footer-main { grid-template-columns: 1fr; gap: 32px; } .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; } .footer-desc { max-width: 100%; } .title-glitch, .title-accent { font-size: clamp(36px, 10vw, 64px); } .section-meta { gap: 8px; font-size: 10px; letter-spacing: 0.04em; } .section-head { margin-bottom: 28px; } .detail-layout { padding: 20px var(--gutter) var(--space-section); } .feature-block { padding: 20px; } .nav-inner { height: 52px; } .logo-img { height: 34px; } .nav-toggle { width: 36px; height: 36px; } .nav-toggle span { width: 20px; } .nav-menu { width: 260px; padding-top: 68px; } .nav-menu .nav-link { padding: 14px 20px; min-height: 48px; font-size: 15px; } .case-card { padding: 20px 16px; min-height: auto; } .core-card { padding: 20px 16px; min-height: auto; } .news-card { padding: 20px 16px; min-height: auto; } .job-card { padding: 20px 16px; min-height: auto; } .team-card { padding: 20px 16px; } .service-card { padding: 24px 20px; } .section-title { font-size: clamp(22px, 6vw, 32px); } .banner-title { font-size: clamp(24px, 7vw, 36px); } img { max-width: 100%; height: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; filter: none; } } .feat-card { padding: 0 0 18px 0 !important; gap: 0 !important; min-height: 0; min-width: 0; overflow: visible; display: flex; flex-direction: column; cursor: default; } .feat-card::before { display: none; } .feat-card .card-corner { display: none; } .shot-wrap { position: relative; min-width: 0; padding: 12px 12px 0; background: #f4f6f9; border-radius: 7px 7px 0 0; border-bottom: 1px solid #e2e6ec; display: flex; justify-content: center; } .shot-bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #e4e7ed; border-bottom: 1px solid #d4d8df; font-size: 9.5px; color: #4a5568; letter-spacing: .3px; font-weight: 500; } .shot-bar i { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; } .shot-bar i:nth-child(1) { background: #ed6a5e; } .shot-bar i:nth-child(2) { background: #f5bd4f; } .shot-bar i:nth-child(3) { background: #61c454; } .ic.p { background: #7C3AED; } .ic.b { background: #6366F1; } .ic.g { background: #10B981; } .ic.o { background: #F59E0B; } .ic.pp { background: #EC4899; } .ic.dk { background: #1f2937; } .feat-body { padding: 14px 20px 0; display: flex; flex-direction: column; flex: 1; } .feat-num { font-size: 10px; color: #9ca3af; font-family: var(--font-mono); letter-spacing: .08em; margin-bottom: 6px; } .feat-tag { border-color: #7C3AED; color: #6d28d9; background: #f5f3ff; } .feat-title-link { color: inherit; text-decoration: none; } .feat-title-link:hover { color: #7C3AED; } .case-more.feat-scroll { display: inline-flex; align-items: center; gap: 5px; background: none; -webkit-text-fill-color: #d4a017; color: #d4a017; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; align-self: flex-start; transition: gap .2s; } .case-more.feat-scroll:hover { gap: 9px; color: #b8860b; -webkit-text-fill-color: #b8860b; } .feat-cta-wrap { text-align: center; margin-top: 32px; } .feat-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; font-size: 15px; font-weight: 600; background: linear-gradient(135deg, #d4a017, #e5c441); color: #0e1424; border-radius: 8px; transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 16px rgba(212,160,23,.3); cursor: pointer; } .feat-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,160,23,.45); } 50% { transform: translateY(4px) } } .feat-cta-sub { font-size: 12.5px; color: #6b7280; margin-top: 10px; } .feat-card { padding: 0 0 18px 0 !important; gap: 0 !important; min-height: 0; min-width: 0; overflow: visible; display: flex; flex-direction: column; cursor: default; }
.feat-card::before { display: none; } .feat-card .card-corner { display: none; }


.shot-bar i { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; }
.shot-bar i:nth-child(1) { background: #ed6a5e; } .shot-bar i:nth-child(2) { background: #f5bd4f; } .shot-bar i:nth-child(3) { background: #61c454; }
.shot-body { width: 100%; display: flex; justify-content: center; }
.shot-img { max-width: 90%; max-height: 220px; width: auto; height: auto; object-fit: contain; display: block; border-radius: 4px; }
.feat-body { padding: 14px 20px 0; display: flex; flex-direction: column; flex: 1; }
.feat-num { font-size: 10px; color: #9ca3af; font-family: var(--font-mono); letter-spacing: .08em; margin-bottom: 6px; }
.feat-tag { border-color: #d4a017; color: #b8860b; background: rgba(212,160,23,.06); }
.feat-title-link { color: inherit; text-decoration: none; } .feat-title-link:hover { color: #d4a017; }
.case-more.feat-scroll { display: inline-flex; align-items: center; gap: 5px; background: none; color: #d4a017; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; align-self: flex-start; transition: gap .2s; }
.case-more.feat-scroll:hover { gap: 9px; color: #b8860b; }
.feat-cta-wrap { text-align: center; margin-top: 32px; }
.feat-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; font-size: 15px; font-weight: 600; background: linear-gradient(135deg, #d4a017, #e5c441); color: #0e1424; border-radius: 8px; transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 16px rgba(212,160,23,.3); cursor: pointer; }
.feat-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,160,23,.45); }
.feat-cta-arrow { display: inline-block; animation: bounceDown 1.2s infinite; }
@keyframes bounceDown { 0%,100% { transform: translateY(0) } 50% { transform: translateY(4px) } }
.feat-cta-sub { font-size: 12.5px; color: #6b7280; margin-top: 10px; }

/* Apple-style typography baseline */
/* esecond shared site styles */
:root {
  --fs-base: clamp(14px, 1vw + 12px, 16px);
  --fs-xs: clamp(11px, 0.7vw + 8px, 12px);
  --fs-sm: clamp(12px, 0.85vw + 9px, 14px);
  --fs-md: clamp(13px, 1vw + 10px, 16px);
  --fs-lg: clamp(14px, 1.1vw + 11px, 18px);
}

body {
  font-size: var(--fs-base);
  line-height: 1.58;
}

.hero-title .title-accent,
.hero-title .title-glitch {
  letter-spacing: -0.025em;
}

.hero-subtitle,
.section-desc,
.about-desc,
.job-desc,
.about-card-desc,
.team-card-desc {
  font-size: var(--fs-md);
}

.nav-link,
.sub-nav a,
.btn,
.job-meta,
.about-card-title,
.team-card-title,
.job-title {
  font-size: var(--fs-sm);
}

.section-title,
.about-title,
.banner-title {
  font-size: clamp(28px, 4.2vw, 56px);
}

.nav-cta,
.hero-status,
.hero-tag,
.section-meta,
.stat-label,
.related-date,
.hero-scroll-hint,
.about-subtitle,
.feature-sub-item h4,
.related-head,
.job-apply,
.platforms-tag {
  font-family: var(--font-cn);
  font-size: var(--fs-base);
  line-height: 1.6;
}

/* Unified footer layout */
@media (min-width: 901px) {
  .footer-main {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    align-items: start;
    gap: clamp(48px, 7vw, 120px);
  }

  .footer-brand-col {
    min-width: 0;
  }

  .footer-desc {
    max-width: none;
    white-space: nowrap;
  }

  .footer-cols {
    display: flex;
    width: auto;
    justify-content: flex-end;
    gap: clamp(32px, 4vw, 64px);
  }

  .footer-cols .footer-col {
    flex: 0 0 auto;
    min-width: 110px;
    text-align: left;
  }
}

@media (max-width: 900px) {
  .footer-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 24px;
  }

  .footer-cols .footer-col {
    min-width: 0;
    text-align: left;
  }

  .footer-desc {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}