:root {
            --c-bg:           #030309;
            --c-bg-alt:       #07070f;
            --c-bg-card:      rgba(10, 10, 24, 0.75);
            --c-bg-section:   rgba(7, 7, 15, 0.65);
            --c-fg:           #c8d4f0;
            --c-fg-2:         rgba(200, 212, 240, 0.5);
            --c-fg-3:         rgba(200, 212, 240, 0.22);
            --c-accent:       #4a8fff;
            --c-accent-dim:   rgba(74, 143, 255, 0.12);
            --c-accent-glow:  rgba(74, 143, 255, 0.06);
            --c-accent-purple: #9370db;
            --c-accent-cyan:   #00ffff;
            --c-accent-magenta: #ff00ff;
            --c-border:       rgba(74, 143, 255, 0.1);
            --c-border-hover: rgba(74, 143, 255, 0.38);

            --f-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
            --f-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

            --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
            --dur-enter: 0.55s;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html {
            scroll-snap-type: y mandatory;
            overflow-y: scroll;
            height: 100vh;
        }

        body {
            background: var(--c-bg);
            color: var(--c-fg);
            font-family: var(--f-display);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
            min-height: 100vh;
        }

        /* ─── Canvas ──────────────────────────────────────────────────────── */
        #bg { position: fixed; inset: 0; z-index: 0; }

        .scanline {
            position: fixed; inset: 0; z-index: 1; pointer-events: none;
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.018) 3px, rgba(0,0,0,0.018) 4px);
        }
        .vignette {
            position: fixed; inset: 0; z-index: 1; pointer-events: none;
            background: radial-gradient(ellipse at 50% 35%, transparent 15%, rgba(0,0,0,0.82) 100%);
        }

        /* ─── Frame Corners ────────────────────────────────────────────────── */
        .frame-corner { position: fixed; z-index: 5; width: 22px; height: 22px; opacity: 0.28; pointer-events: none; }
        .frame-corner::before, .frame-corner::after { content: ''; position: absolute; background: var(--c-accent); }
        .frame-corner::before { width: 100%; height: 1px; }
        .frame-corner::after  { width: 1px; height: 100%; }
        .corner-tl { top: 12px; left: 12px; }
        .corner-tl::before { top: 0; left: 0; }
        .corner-tl::after  { top: 0; left: 0; }
        .corner-tr { top: 12px; right: 12px; }
        .corner-tr::before { top: 0; right: 0; }
        .corner-tr::after  { top: 0; right: 0; }
        .corner-bl { bottom: 12px; left: 12px; }
        .corner-bl::before { bottom: 0; left: 0; }
        .corner-bl::after  { bottom: 0; left: 0; }
        .corner-br { bottom: 12px; right: 12px; }
        .corner-br::before { bottom: 0; right: 0; }
        .corner-br::after  { bottom: 0; right: 0; }

        /* ─── Topbar ───────────────────────────────────────────────────────── */
        .topbar {
            position: fixed; top: 0; left: 0; right: 0; z-index: 20;
            display: flex; align-items: center; justify-content: space-between;
            padding: 11px 28px;
            border-bottom: 1px solid var(--c-border);
            background: rgba(3, 3, 9, 0.8);
            backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        }
        .topbar-logo {
            font-family: var(--f-mono); font-size: 11px; letter-spacing: 5px;
            color: var(--c-fg-3); text-transform: uppercase;
        }
        .topbar-center {
            display: flex; align-items: center; gap: 10px;
            font-family: var(--f-mono); font-size: 10px; letter-spacing: 3px;
            color: var(--c-fg-3); text-transform: uppercase;
        }
        .topbar-dot {
            width: 4px; height: 4px; border-radius: 50%;
            background: var(--c-accent); box-shadow: 0 0 8px var(--c-accent);
            animation: pulse-dot 2.4s ease-in-out infinite; flex-shrink: 0;
        }
        @keyframes pulse-dot {
            0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--c-accent); }
            50%      { opacity: 0.2; box-shadow: 0 0 2px var(--c-accent); }
        }
        .topbar-right { display: flex; align-items: center; gap: 20px; }
        .topbar-nav { display: flex; gap: 16px; list-style: none; }
        .topbar-nav a {
            font-family: var(--f-mono); font-size: 9px; letter-spacing: 2px;
            color: var(--c-fg-3); text-decoration: none; text-transform: uppercase;
            transition: all 0.2s; padding: 4px 8px; border-radius: 2px;
        }
        .topbar-nav a:hover { color: var(--c-accent); background: var(--c-accent-dim); }
        .topbar-nav a.active { color: var(--c-fg); background: var(--c-accent-dim); border-bottom: 1px solid var(--c-accent); }
        .topbar-ver {
            font-family: var(--f-mono); font-size: 10px; letter-spacing: 2px;
            color: var(--c-fg-3); border: 1px solid var(--c-border);
            padding: 3px 10px;
        }

        /* ─── Screen Sections ───────────────────────────────────────────────── */
        .screen {
            position: relative; z-index: 2;
            min-height: 100vh;
            scroll-snap-align: start;
            scroll-snap-stop: always;
            display: flex; align-items: center; justify-content: center;
            padding: 80px 40px 40px;
            opacity: 1;
            transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* ─── Hero Screen ──────────────────────────────────────────────────── */
        .hero-label {
            font-family: var(--f-mono); font-size: 10px; letter-spacing: 8px;
            color: var(--c-fg-3); text-transform: uppercase; margin-bottom: 20px;
        }
        .hero-title-wrap { position: relative; margin-bottom: 12px; }
        .hero-title-zh {
            font-family: var(--f-display);
            font-size: clamp(58px, 10vw, 100px);
            font-weight: 200; letter-spacing: 24px; line-height: 1;
            background: linear-gradient(135deg, var(--c-accent-cyan) 0%, var(--c-accent) 50%, var(--c-accent-purple) 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; text-indent: 24px; display: block;
            position: relative;
        }
        .hero-title-zh::before,
        .hero-title-zh::after {
            content: attr(data-text);
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(135deg, var(--c-accent-cyan) 0%, var(--c-accent) 50%, var(--c-accent-purple) 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            text-indent: 24px;
        }
        .hero-title-zh::before {
            animation: glitch-1 4s infinite linear;
            clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%);
            opacity: 0.7;
        }
        .hero-title-zh::after {
            animation: glitch-2 4s infinite linear;
            clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
            opacity: 0.5;
        }
        @keyframes glitch-1 {
            0%, 92% { transform: translate(0); }
            93% { transform: translate(-3px, 1px); }
            94% { transform: translate(3px, -1px); }
            95% { transform: translate(-2px, 0); }
            96% { transform: translate(2px, 1px); }
            97% { transform: translate(0); }
            100% { transform: translate(0); }
        }
        @keyframes glitch-2 {
            0%, 90% { transform: translate(0); }
            91% { transform: translate(3px, -1px); }
            92% { transform: translate(-3px, 1px); }
            93% { transform: translate(2px, 0); }
            94% { transform: translate(-2px, -1px); }
            95% { transform: translate(0); }
            100% { transform: translate(0); }
        }
        .hero-title-en {
            font-family: var(--f-mono); font-size: 13px; letter-spacing: 14px;
            color: var(--c-fg-3); margin-top: 14px;
        }
        .hero-rule {
            width: 1px; height: 36px;
            background: linear-gradient(to bottom, var(--c-border), transparent);
            margin: 20px auto;
        }
        .semantics {
            display: flex; gap: 1px; background: var(--c-border);
            border: 1px solid var(--c-border); border-radius: 2px; overflow: hidden;
            width: 100%; max-width: 520px; margin: 0 auto;
        }
        .semantics-item {
            flex: 1; background: var(--c-bg-card); backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px); padding: 20px 28px; text-align: center;
        }
        .semantics-char {
            font-size: 28px; font-weight: 300; color: var(--c-accent);
            letter-spacing: 10px; margin-bottom: 8px; text-indent: 10px;
        }
        .semantics-meaning {
            font-family: var(--f-mono); font-size: 11px; color: var(--c-fg-2);
            letter-spacing: 2px; font-weight: 300; line-height: 2;
        }
        .edge-strip { margin-top: 32px; }
        .edge-badge {
            display: inline-flex; align-items: center; gap: 10px;
            font-family: var(--f-mono); font-size: 11px; letter-spacing: 5px;
            color: var(--c-accent); text-transform: uppercase;
            padding: 7px 20px; border: 1px solid var(--c-border);
            background: var(--c-accent-glow); position: relative;
        }
        .edge-badge::before, .edge-badge::after {
            content: ''; position: absolute; width: 5px; height: 5px;
            border-color: var(--c-accent); border-style: solid;
        }
        .edge-badge::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
        .edge-badge::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
        .edge-badge-icon {
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--c-accent); box-shadow: 0 0 6px var(--c-accent);
            animation: pulse-dot 2s ease-in-out infinite; flex-shrink: 0;
        }
        .edge-desc {
            font-family: var(--f-mono); font-size: 11px; letter-spacing: 2px;
            color: var(--c-fg-3); font-weight: 300; margin-top: 14px; line-height: 2;
        }
        .typing-wrap { margin-top: 24px; min-height: 24px; }
        .typing-text {
            font-family: var(--f-mono); font-size: 11px; letter-spacing: 3px;
            color: var(--c-accent); text-transform: uppercase;
            border-right: 2px solid var(--c-accent);
            padding-right: 4px;
            white-space: nowrap; overflow: hidden;
            animation: typing 3s steps(28) 1s forwards, blink-caret 0.7s step-end infinite;
            width: 0;
        }
        @keyframes typing { from { width: 0; } to { width: 100%; } }
        @keyframes blink-caret {
            0%, 100% { border-color: var(--c-accent); }
            50% { border-color: transparent; }
        }
        .cta-row { margin-top: 32px; display: flex; justify-content: center; gap: 3px; }
        .btn {
            font-family: var(--f-mono); font-size: 10px; letter-spacing: 4px;
            text-transform: uppercase; text-decoration: none;
            padding: 11px 28px; border: 1px solid var(--c-border);
            background: transparent; color: var(--c-fg-2);
            cursor: pointer; transition: all 0.25s ease;
            position: relative; overflow: hidden;
        }
        .btn::before {
            content: ''; position: absolute; inset: 0;
            background: var(--c-accent-dim); opacity: 0; transition: opacity 0.25s ease;
        }
        .btn:hover { color: var(--c-fg); border-color: var(--c-border-hover); }
        .btn:hover::before { opacity: 1; }
        .btn-primary {
            background: var(--c-accent-dim); color: var(--c-accent);
            border-color: rgba(74, 143, 255, 0.28);
        }
        .btn-primary:hover {
            background: rgba(74, 143, 255, 0.18); color: #fff;
            border-color: rgba(74, 143, 255, 0.55);
            box-shadow: 0 0 24px rgba(74, 143, 255, 0.12);
        }
        .scroll-hint {
            position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
            display: flex; flex-direction: column; align-items: center; gap: 6px;
        }
        .scroll-hint-text {
            font-family: var(--f-mono); font-size: 9px; letter-spacing: 3px;
            color: var(--c-fg-3); text-transform: uppercase;
        }
        .scroll-hint-arrow {
            width: 16px; height: 16px;
            border-right: 1px solid var(--c-fg-3); border-bottom: 1px solid var(--c-fg-3);
            transform: rotate(45deg); animation: scroll-bounce 1.6s ease-in-out infinite;
        }
        @keyframes scroll-bounce {
            0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.4; }
            50% { transform: rotate(45deg) translateY(4px); opacity: 0.8; }
        }

        /* ─── Section Header ────────────────────────────────────────────────── */
        .section-header { text-align: center; margin-bottom: 40px; }
        .section-header-label {
            font-family: var(--f-mono); font-size: 9px; letter-spacing: 6px;
            color: var(--c-fg-3); text-transform: uppercase; margin-bottom: 10px;
            display: flex; align-items: center; justify-content: center; gap: 14px;
        }
        .section-header-label::before, .section-header-label::after {
            content: ''; display: block; width: 28px; height: 1px; background: var(--c-border);
        }
        .section-header-title {
            font-family: var(--f-display);
            font-size: clamp(18px, 3vw, 26px); font-weight: 200;
            letter-spacing: 8px; color: var(--c-fg);
        }
        .section-header-icon {
            font-size: 32px;
            margin-bottom: 12px;
            background: linear-gradient(135deg, var(--c-accent-cyan), var(--c-accent), var(--c-accent-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ─── Stats Screen ──────────────────────────────────────────────────── */
        .stats-grid {
            display: flex; flex-direction: column; gap: 1px;
            background: var(--c-border); border: 1px solid var(--c-border);
            border-radius: 2px; overflow: hidden; max-width: 1000px;
        }
        .stats-grid-row {
            display: flex; gap: 1px; background: var(--c-border);
        }
        .stat-item {
            flex: 1; background: var(--c-bg-section); backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px); padding: 24px 12px;
            text-align: center; min-width: 0;
            position: relative; overflow: hidden;
            transition: background 0.3s;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .stat-item:hover { background: rgba(10, 15, 30, 0.9); }
        .stat-item::before {
            content: ''; position: absolute; inset: -20%;
            background: radial-gradient(circle at center, var(--c-accent-dim) 0%, transparent 70%);
            opacity: 0; transition: opacity 0.4s;
            animation: pulse-glow 3s ease-in-out infinite;
        }
        .stat-item:hover::before { opacity: 1; }
        @keyframes pulse-glow {
            0%, 100% { transform: scale(0.8); }
            50% { transform: scale(1.1); }
        }
        .stat-icon {
            font-size: 22px;
            margin-bottom: 6px;
            background: linear-gradient(135deg, var(--c-accent-cyan), var(--c-accent), var(--c-accent-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .stat-value {
            font-family: var(--f-mono);
            font-size: clamp(22px, 3.5vw, 40px);
            font-weight: 300;
            background: linear-gradient(135deg, var(--c-accent-cyan), var(--c-accent), var(--c-accent-purple));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            letter-spacing: 2px; line-height: 1; margin-bottom: 8px;
        }
        .stat-label {
            font-family: var(--f-mono); font-size: 8px; letter-spacing: 2px;
            color: var(--c-fg-3); text-transform: uppercase;
        }

        /* ─── Services/Features Grid ───────────────────────────────────────── */
        .grid-4 {
            display: grid; grid-template-columns: repeat(4, 1fr);
            gap: 1px; background: var(--c-border);
            border: 1px solid var(--c-border); border-radius: 2px;
            overflow: hidden; max-width: 1200px;
        }
        .grid-3 {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 1px; background: var(--c-border);
            border: 1px solid var(--c-border); border-radius: 2px;
            overflow: hidden; max-width: 1200px;
        }
        .grid-2 {
            display: grid; grid-template-columns: repeat(2, 1fr);
            gap: 1px; background: var(--c-border);
            border: 1px solid var(--c-border); border-radius: 2px;
            overflow: hidden; max-width: 1200px;
        }
        .card {
            background: var(--c-bg-section); backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px); padding: 32px 24px;
            text-align: center; transition: all 0.4s ease;
            position: relative; overflow: hidden;
            border: 1px solid transparent;
        }
        .card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
            background: linear-gradient(to right, transparent, var(--c-accent), transparent);
            opacity: 0; transition: opacity 0.4s;
            transform: translateX(-100%);
        }
        .card::after {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(74, 143, 255, 0.08) 0%, transparent 60%);
            opacity: 0; transition: opacity 0.3s;
            pointer-events: none;
        }
        .card:hover {
            background: rgba(10, 15, 30, 0.95);
            transform: translateY(-2px);
            border-color: rgba(74, 143, 255, 0.3);
        }
        .card:hover::before { opacity: 1; transform: translateX(0); transition: transform 0.6s ease-out; }
        .card:hover::after { opacity: 1; }
        .card-icon {
            font-family: var(--f-mono); font-size: 32px;
            background: linear-gradient(135deg, var(--c-accent-cyan), var(--c-accent), var(--c-accent-purple));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            margin-bottom: 16px;
        }
        .card-title {
            font-family: var(--f-display); font-size: 15px; font-weight: 400;
            letter-spacing: 4px; color: var(--c-fg); margin-bottom: 10px;
        }
        .card-desc {
            font-family: var(--f-mono); font-size: 11px; color: var(--c-fg-3);
            letter-spacing: 1px; line-height: 2;
        }
        .card-tag {
            display: inline-block; margin-top: 14px;
            font-family: var(--f-mono); font-size: 9px; letter-spacing: 2px;
            color: var(--c-accent); border: 1px solid var(--c-border);
            padding: 4px 10px; text-transform: uppercase;
        }

        /* ─── Tech Stack ────────────────────────────────────────────────────── */
        .tech-group {
            max-width: 1000px; margin: 0 auto;
            background: var(--c-bg-section); border: 1px solid var(--c-border);
            border-radius: 2px; overflow: hidden;
        }
        .tech-group-header {
            display: flex; align-items: center; padding: 11px 20px;
            border-bottom: 1px solid var(--c-border); gap: 12px;
        }
        .tech-group-dot {
            width: 5px; height: 5px; border-radius: 50%;
            background: var(--c-accent); box-shadow: 0 0 6px var(--c-accent);
            flex-shrink: 0;
        }
        .tech-group-name {
            font-family: var(--f-mono); font-size: 9px; letter-spacing: 4px;
            color: var(--c-fg-3); text-transform: uppercase;
        }
        .tech-items {
            display: flex; flex-wrap: wrap; gap: 1px; background: var(--c-border);
        }
        .tech-item {
            background: var(--c-bg-alt); padding: 12px 20px;
            font-family: var(--f-mono); font-size: 10px; letter-spacing: 2px;
            color: var(--c-fg-2); text-transform: uppercase;
            border-right: 1px solid var(--c-border);
            transition: all 0.2s; white-space: nowrap;
            position: relative;
        }
        .tech-item:hover { color: var(--c-accent); background: rgba(74, 143, 255, 0.08); transform: translateY(-1px); }

        /* ─── Partners ──────────────────────────────────────────────────────── */
        .partners-row {
            display: flex; flex-wrap: wrap;
            background: var(--c-border); gap: 1px;
            max-width: 1000px; border: 1px solid var(--c-border); border-radius: 2px; overflow: hidden;
        }
        .partner-item {
            flex: 1; min-width: 140px; padding: 24px 20px; text-align: center;
            background: var(--c-bg-section);
            font-family: var(--f-mono); font-size: 11px; letter-spacing: 2px;
            color: var(--c-fg-3); text-transform: uppercase;
            transition: all 0.3s; white-space: nowrap;
        }
        .partner-item:hover { color: var(--c-accent); background: rgba(74, 143, 255, 0.06); transform: translateY(-2px); }

        /* ─── Footer Screen ─────────────────────────────────────────────────── */
        .footer-screen {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            text-align: center;
        }
        .footer-title {
            font-family: var(--f-display);
            font-size: clamp(20px, 3vw, 28px); font-weight: 200;
            letter-spacing: 6px; color: var(--c-fg); margin-bottom: 12px;
        }
        .footer-sub {
            font-family: var(--f-mono); font-size: 11px; letter-spacing: 3px;
            color: var(--c-fg-3); margin-bottom: 32px; line-height: 2;
        }
        .footer-links { display: flex; justify-content: center; gap: 3px; }
        .footer-link {
            font-family: var(--f-mono); font-size: 10px; letter-spacing: 3px;
            text-transform: uppercase; text-decoration: none;
            padding: 10px 24px; border: 1px solid var(--c-border);
            color: var(--c-fg-2); background: var(--c-bg-section);
            backdrop-filter: blur(8px); transition: all 0.25s ease;
        }
        .footer-link:hover {
            color: var(--c-accent); border-color: rgba(74, 143, 255, 0.4);
            background: var(--c-accent-glow);
        }
        .footer-bottom {
            position: absolute; bottom: 0; left: 0; right: 0;
            padding: 16px 28px; border-top: 1px solid var(--c-border);
            background: rgba(3, 3, 9, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap;
            font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--c-fg-3);
        }
        .footer-bottom a {
            color: var(--c-fg-3); text-decoration: none; transition: color 0.2s;
            padding: 0 16px;
        }
        .footer-bottom a:not(:last-child) { border-right: 1px solid var(--c-border); }
        .footer-bottom a:hover { color: var(--c-accent); }
        .footer-bottom .footer-copy { color: var(--c-fg-2); padding: 0 16px; border-right: 1px solid var(--c-border); }
        .footer-bottom .footer-copy a { color: var(--c-fg-2); padding: 0; border: none; }
        .footer-bottom .footer-copy a:hover { color: var(--c-accent); }

        /* ─── Scrollbar ────────────────────────────────────────────────────── */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--c-bg); }
        ::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--c-accent-cyan); }

        /* ─── Mobile ─────────────────────────────────────────────────────── */
        @media (max-width: 768px) {
            .topbar-nav { display: none; }
            .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
            .grid-2 { grid-template-columns: 1fr; }
            .hero-title-zh { letter-spacing: 12px; text-indent: 12px; }
            .stats-grid { flex-wrap: wrap; }
            .stat-item { min-width: 50%; }
            .screen { padding: 100px 20px 40px; }
        }
        @media (max-width: 480px) {
            .grid-4, .grid-3 { grid-template-columns: 1fr; }
        }

.icp-info {
    width: 100%;
    text-align: center;
    margin-top: 8px;
    color: var(--c-bg);
    font-size: 9px;
}