:root {
            --bg-color: #050505;
            --card-bg: #111111;
            --text-main: #ffffff;
            --text-muted: #9ca3af;
            --accent: #ccff00; 
            --border: #222222;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body { 
            font-family: 'Noto Sans SC', sans-serif; 
            background-color: var(--bg-color);
            color: var(--text-main); 
            overflow-x: hidden;
            line-height: 1.6;
        }

        h1, h2, h3, h4, .brand-font { font-family: 'Anton', sans-serif; letter-spacing: 1px; text-transform: uppercase; }

        a { text-decoration: none; color: inherit; transition: 0.3s; }
        ul { list-style: none; }

        /* --- 导航栏 --- */
        header {
            position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
            padding: 20px 40px;
            display: flex; justify-content: space-between; align-items: center;
            background: rgba(5, 5, 5, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .logo { 
            font-family: 'Noto Sans SC', sans-serif; 
            font-size: 24px; 
            font-weight: 900; 
            color: var(--text-main); 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            letter-spacing: 1px;
        }
        .logo i { color: var(--accent); font-size: 20px; }

        .nav-menu { display: flex; gap: 40px; }
        .nav-menu a { font-size: 14px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
        .nav-menu a:hover { color: var(--text-main); }

        .nav-btn {
            border: 1px solid var(--text-main);
            padding: 8px 24px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            background: transparent;
            color: var(--text-main);
        }
        .nav-btn:hover { background: var(--text-main); color: var(--bg-color); }


        .hero {
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 40px;
            overflow: hidden;

        }

        .hero-bg {
            position: absolute; 
            inset: 0; 
            z-index: 0; 
            background-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=2000&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            filter: brightness(0.5) contrast(1.1) grayscale(20%);
        }
        
        .hero::after {
            content: ""; position: absolute; inset: 0;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 0;
        }

        .hero-content { 
            max-width: 800px; 
            position: relative; 
            z-index: 1; 
        }
        
        .hero-subtitle { color: var(--accent); font-size: 14px; font-weight: 700; letter-spacing: 2px; margin-bottom: 20px; display: block; }
        
        .hero-title {
            font-size: clamp(60px, 10vw, 120px);
            line-height: 0.9;
            margin-bottom: 30px;
            color: var(--text-main);
            text-shadow: 0 10px 30px rgba(0,0,0,0.8);
        }

        .hero-desc {
            font-size: 18px; color: #e5e5e5; max-width: 500px; margin-bottom: 40px; border-left: 2px solid var(--accent); padding-left: 20px;
        }

        /* --- Projects --- */
        .section { padding: 100px 40px; position: relative; }
        .section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
        .section-title { font-size: 48px; line-height: 1; color: var(--text-main); }
        .section-intro { max-width: 400px; font-size: 14px; color: var(--text-muted); text-align: right; }

        .project-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .project-card {
            background-color: var(--card-bg);
            border: 1px solid var(--border);
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 380px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .project-card:hover {
            border-color: var(--accent);
            transform: translateY(-5px);
            background-color: #161616;
        }

        .card-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: flex-start; 
            margin-bottom: 20px; 
            border-bottom: 1px solid #222;
            padding-bottom: 15px;
        }
        
        .card-num { 
            font-family: 'Anton', sans-serif; 
            font-size: 32px; 
            color: var(--accent); 
            line-height: 1; 
            opacity: 0.5;
            transition: 0.3s;
        }
        .project-card:hover .card-num { opacity: 1; }

        .visual-block {
            border-left: 2px solid var(--accent);
            background: rgba(255, 255, 255, 0.03);
            padding: 15px;
            margin-bottom: auto;
            margin-top: 10px;
            font-style: italic;
            color: #d4d4d8;
            font-size: 13px;
            line-height: 1.6;
            min-height: 100px;
        }

        .visual-label {
            display: block;
            font-size: 10px;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            font-weight: 700;
            font-style: normal;
        }

        .card-content { margin-top: 20px; }
        .card-title { font-size: 24px; color: #fff; margin-bottom: 10px; line-height: 1.2; font-weight: 700; }
        .card-desc { font-size: 14px; color: #a1a1aa; line-height: 1.6; }

        /* --- Stats Bar --- */
        .stats-bar {
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            display: flex;
            background-color: var(--bg-color);
        }
        .stat-box {
            flex: 1; padding: 60px 40px;
            border-right: 1px solid var(--border);
            text-align: center;
        }
        .stat-box:last-child { border: none; }
        .stat-num { font-size: 64px; font-family: 'Anton'; color: var(--text-main); line-height: 1; }
        .stat-label { font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; }

        /* --- FAQ --- */
        .faq-container { max-width: 800px; margin: 0 auto; }
        .faq-item { border-bottom: 1px solid var(--border); }
        .faq-question { padding: 25px 0; font-size: 18px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--text-main); }
        .faq-question:hover { color: var(--accent); }
        .faq-answer { padding-bottom: 25px; color: #d1d5db; display: none; line-height: 1.7; }
        .faq-item.active .faq-answer { display: block; }
        .faq-icon { transition: 0.3s; color: var(--text-muted); }
        .faq-item.active .faq-icon { transform: rotate(180deg); color: var(--accent); }

        /* --- Contact Form --- */
        .contact-section { background-color: var(--card-bg); position: relative; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
        
        .contact-info h3 { font-size: 36px; margin-bottom: 30px; color: #fff; }
        .contact-list li { margin-bottom: 30px; display: flex; gap: 20px; align-items: center; }
        
        .icon-circle {
            width: 50px; height: 50px; border: 1px solid var(--border); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: var(--accent); font-size: 18px; flex-shrink: 0;
            background-color: #000;
        }
        
        .contact-list h5 { font-size: 12px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 2px; }
        .contact-list a { font-size: 18px; font-weight: 700; color: var(--text-main); }
        .contact-list a:hover { color: var(--accent); text-decoration: underline; }

        .consult-form { display: flex; flex-direction: column; gap: 20px; }
        
        .form-input, .form-select, .form-textarea { 
            width: 100%; 
            background-color: #080808; 
            border: 1px solid var(--border); 
            padding: 15px; 
            color: #ffffff; 
            font-family: inherit; 
            font-size: 14px;
            transition: 0.3s;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover, 
        input:-webkit-autofill:focus, 
        textarea:-webkit-autofill,
        textarea:-webkit-autofill:hover,
        textarea:-webkit-autofill:focus {
            -webkit-text-fill-color: #ffffff;
            -webkit-box-shadow: 0 0 0px 1000px #080808 inset;
            transition: background-color 5000s ease-in-out 0s;
        }

        .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); outline: none; background-color: #000; }
        .form-textarea { height: 120px; resize: vertical; }
        
        .submit-btn {
            background-color: var(--accent); color: #000; font-weight: 900; 
            padding: 15px; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
            transition: 0.3s;
        }
        .submit-btn:hover { background-color: #fff; color: #000; }

        /* --- Footer --- */
        footer { background-color: #000; padding: 80px 40px 40px; border-top: 1px solid var(--border); }
        .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; margin-bottom: 60px; }
        .footer-brand h2 { font-size: 32px; margin-bottom: 10px; color: var(--text-main); }
        .footer-brand p { color: var(--text-muted); font-size: 14px; max-width: 300px; }
        
        .footer-links { display: flex; gap: 60px; }
        .footer-col h4 { font-size: 14px; color: var(--accent); margin-bottom: 20px; }
        .footer-col a { display: block; margin-bottom: 10px; color: var(--text-muted); font-size: 14px; }
        .footer-col a:hover { color: var(--text-main); }

        .footer-bottom { 
            border-top: 1px solid var(--border); padding-top: 30px; 
            display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
        }
        .copyright { font-size: 12px; color: #555; }
        .legal-links { display: flex; gap: 30px; }
        .legal-links button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; transition: 0.3s; }
        .legal-links button:hover { color: var(--text-main); text-decoration: underline; }

        /* --- Modal --- */
        .modal {
            position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 2000;
            display: none; justify-content: center; align-items: center;
            backdrop-filter: blur(5px);
        }
        .modal.active { display: flex; }
        .modal-box {
            background-color: #111; border: 1px solid var(--border); width: 600px; max-width: 90%;
            padding: 40px; position: relative; max-height: 80vh; overflow-y: auto;
        }
        .close-btn { position: absolute; top: 20px; right: 20px; color: #fff; cursor: pointer; font-size: 24px; }
        .modal-title { font-size: 24px; color: var(--accent); margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
        .modal-text p { margin-bottom: 15px; font-size: 14px; color: #ccc; }
        .modal-text h4 { color: #fff; margin-top: 20px; margin-bottom: 10px; }

        
        #toast {
            position: fixed; bottom: 30px; right: 30px; 
            background-color: var(--accent); color: #000; padding: 15px 30px; font-weight: 700;
            transform: translateY(100px); opacity: 0; transition: 0.5s; z-index: 3000;
        }
        #toast.show { transform: translateY(0); opacity: 1; }

        @media (max-width: 1024px) {
            .project-grid { grid-template-columns: 1fr; }
            .hero-title { font-size: 60px; }
            .form-grid { grid-template-columns: 1fr; }
            .footer-top { flex-direction: column; }
            .nav-menu { display: none; }
        }