/* ===== DESIGN TOKENS (Apple Design System) ===== */
        :root {
            --color-black: #1a2e4a;
            --color-light-gray: #ffffff;
            --color-near-black: #1d1d1f;
            --color-white: #ffffff;
            --color-blue: #0071e3;
            --color-blue-link-light: #0066cc;
            --color-blue-link-dark: #5aadff;
            --color-text-secondary: rgba(0,0,0,0.8);
            --color-dark-surface: #243555;
            --card-shadow: rgba(0,0,0,0.22) 3px 5px 30px 0px;
            --font-display: 'SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;
            --font-text: 'SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
            --max-width: 980px;
            --nav-height: 48px;
        }

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

        html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

        body {
            font-family: var(--font-text);
            font-size: 17px;
            font-weight: 400;
            line-height: 1.47;
            letter-spacing: -0.374px;
            color: var(--color-near-black);
            background: var(--color-black);
            overflow-x: hidden;
        }

        a { text-decoration: none; color: inherit; }

        /* ===== NAVIGATION ===== */
        .nav {
            position: fixed; top: 0; left: 0; right: 0;
            height: var(--nav-height);
            background: rgba(15,28,54,0.92);
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            z-index: 1000;
            display: flex; align-items: center; justify-content: center;
        }
        .nav-inner {
            width: 100%; max-width: var(--max-width);
            padding: 0 24px;
            display: flex; align-items: center; justify-content: space-between;
        }
        .nav-logo {
            font-family: var(--font-display);
            font-size: 17px; font-weight: 600;
            color: var(--color-white);
            letter-spacing: -0.374px;
            white-space: nowrap;
        }
        .nav-links {
            display: flex; align-items: center;
            gap: 32px; list-style: none;
        }
        .nav-links a {
            font-family: var(--font-text);
            font-size: 12px; font-weight: 400;
            color: rgba(255,255,255,0.75);
            transition: color 0.2s ease;
            white-space: nowrap;
        }
        .nav-links a:hover, .nav-links a.active { color: var(--color-white); }
        .nav-cta {
            color: var(--color-white) !important;
            background: var(--color-blue);
            padding: 5px 14px;
            border-radius: 980px;
            transition: opacity 0.2s ease !important;
        }
        .nav-cta:hover { opacity: 0.85; }
        .nav-hamburger {
            display: none; flex-direction: column;
            gap: 5px; cursor: pointer; padding: 4px;
        }
        .nav-hamburger span {
            display: block; width: 20px; height: 1.5px;
            background: var(--color-white);
            border-radius: 2px; transition: all 0.3s ease;
        }

        /* ===== MOBILE MENU ===== */
        .mobile-menu {
            display: none; position: fixed;
            top: var(--nav-height); left: 0; right: 0; bottom: 0;
            background: rgba(15,28,54,0.98);
            backdrop-filter: blur(20px);
            z-index: 999;
            padding: 40px 32px;
            flex-direction: column; gap: 8px;
        }
        .mobile-menu.open { display: flex; }
        .mobile-menu a {
            font-family: var(--font-display);
            font-size: 28px; font-weight: 600;
            color: var(--color-white);
            padding: 16px 0;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .mobile-menu a.mobile-cta { color: var(--color-blue); border-bottom: none; }

        /* ===== SECTION BASE ===== */
        section { padding: 120px 24px; position: relative; }
        .section-inner { max-width: var(--max-width); margin: 0 auto; }

        .section-title {
            font-family: var(--font-display);
            font-size: 56px; font-weight: 600;
            line-height: 1.07; letter-spacing: -0.28px;
            text-align: center; margin-bottom: 16px;
        }
        .section-subtitle {
            font-family: var(--font-display);
            font-size: 21px; font-weight: 400;
            line-height: 1.19; letter-spacing: 0.231px;
            text-align: center; margin-bottom: 48px;
        }
        .section-body {
            font-family: var(--font-text);
            font-size: 17px; font-weight: 400;
            line-height: 1.47; letter-spacing: -0.374px;
            text-align: center;
            max-width: 680px; margin: 0 auto 48px;
        }

        .section-dark { background: var(--color-black); color: var(--color-white); }
        .section-dark .section-subtitle { color: rgba(255,255,255,0.65); }
        .section-dark .section-body { color: rgba(255,255,255,0.65); }

        .section-light { background: var(--color-light-gray); color: var(--color-near-black); border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); }
        .section-light .section-subtitle { color: rgba(29,29,31,0.65); }
        .section-light .section-body { color: var(--color-text-secondary); }

        /* ===== BUTTONS ===== */
        .btn-blue {
            display: inline-flex; align-items: center; justify-content: center;
            font-family: var(--font-text);
            font-size: 17px; font-weight: 400;
            color: var(--color-white);
            background: var(--color-blue);
            padding: 8px 20px; border-radius: 8px;
            border: none; cursor: pointer;
            transition: opacity 0.2s ease; line-height: 1.47;
        }
        .btn-blue:hover { opacity: 0.85; }

        .btn-pill-outline {
            display: inline-flex; align-items: center;
            font-family: var(--font-text);
            font-size: 17px; font-weight: 400;
            color: var(--color-white);
            background: transparent;
            padding: 8px 22px; border-radius: 980px;
            border: 1px solid rgba(255,255,255,0.55);
            cursor: pointer;
            transition: border-color 0.2s ease; line-height: 1.47;
        }
        .btn-pill-outline:hover { border-color: var(--color-white); }

        .btn-pill-blue {
            display: inline-flex; align-items: center;
            font-family: var(--font-text);
            font-size: 17px; font-weight: 400;
            color: var(--color-white);
            background: var(--color-blue);
            padding: 8px 22px; border-radius: 980px;
            border: none; cursor: pointer;
            transition: opacity 0.2s ease; line-height: 1.47;
        }
        .btn-pill-blue:hover { opacity: 0.85; }

        .btn-group {
            display: flex; align-items: center;
            gap: 16px; justify-content: center; flex-wrap: wrap;
        }

        /* ===== HERO ===== */
        #hero {
            background: var(--color-black); color: var(--color-white);
            min-height: 100vh;
            display: flex; align-items: center;
            padding-top: calc(var(--nav-height) + 96px);
            padding-bottom: 96px;
            text-align: center;
        }
        .hero-inner { max-width: var(--max-width); margin: 0 auto; width: 100%; }
        .hero-eyebrow {
            font-family: var(--font-text);
            font-size: 14px; font-weight: 400;
            color: rgba(255,255,255,0.45);
            letter-spacing: 0.3px;
            margin-bottom: 24px;
        }
        .hero-title {
            font-family: var(--font-display);
            font-size: 80px; font-weight: 600;
            line-height: 1.02; letter-spacing: -1.5px;
            color: var(--color-white);
            margin-bottom: 24px;
        }
        .hero-title em {
            font-style: normal;
            background: linear-gradient(135deg, #ffffff 30%, rgba(255,255,255,0.5) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero-subtitle {
            font-family: var(--font-display);
            font-size: 21px; font-weight: 400;
            line-height: 1.47; letter-spacing: -0.374px;
            color: rgba(255,255,255,0.65);
            margin-bottom: 48px;
            max-width: 560px; margin-left: auto; margin-right: auto;
        }
        .hero-dots {
            display: inline-flex; align-items: center; gap: 8px;
            color: rgba(255,255,255,0.3); font-size: 10px;
        }
        .hero-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.3); display: inline-block; }

        /* ===== FEATURED (LLM) ===== */
        #featured { background: var(--color-light-gray); color: var(--color-near-black); }
        .featured-badge {
            display: block;
            font-family: var(--font-text);
            font-size: 12px; font-weight: 600;
            color: var(--color-blue);
            letter-spacing: 0.8px; text-transform: uppercase;
            text-align: center; margin-bottom: 16px;
        }
        .features-grid {
            display: grid; grid-template-columns: repeat(3,1fr);
            gap: 16px; margin-top: 48px;
        }
        .feature-card {
            background: var(--color-white);
            border-radius: 12px; padding: 32px;
            box-shadow: rgba(0,0,0,0.08) 0px 2px 20px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: rgba(0,0,0,0.14) 0px 8px 32px;
        }
        .feature-card-icon { font-size: 32px; margin-bottom: 16px; display: block; }
        .feature-card-title {
            font-family: var(--font-display);
            font-size: 17px; font-weight: 600;
            color: var(--color-near-black);
            margin-bottom: 12px; letter-spacing: -0.374px;
        }
        .feature-card-list { list-style: none; }
        .feature-card-list li {
            font-family: var(--font-text);
            font-size: 14px; font-weight: 400;
            color: var(--color-text-secondary);
            line-height: 1.9; letter-spacing: -0.224px;
        }
        .feature-card-list li::before { content: "·  "; color: var(--color-blue); font-weight: 700; }

        /* ===== SERVICES ===== */
        #services { background: var(--color-black); color: var(--color-white); }
        .services-grid {
            display: grid; grid-template-columns: repeat(3,1fr);
            gap: 12px; margin-top: 48px;
        }
        .service-card {
            background: var(--color-dark-surface);
            border-radius: 8px; padding: 32px 28px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .service-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--card-shadow);
        }
        .service-card.featured-service {
            background: linear-gradient(145deg, #1a3d6e 0%, #122d55 100%);
            border: 1px solid rgba(0,113,227,0.5);
        }
        .service-num {
            font-family: var(--font-text);
            font-size: 11px; font-weight: 400;
            color: rgba(255,255,255,0.25);
            letter-spacing: 1.5px; margin-bottom: 16px;
        }
        .service-icon { font-size: 34px; margin-bottom: 16px; display: block; }
        .service-title {
            font-family: var(--font-display);
            font-size: 21px; font-weight: 600;
            color: var(--color-white);
            line-height: 1.19; letter-spacing: 0.231px;
            margin-bottom: 12px;
        }
        .service-desc {
            font-family: var(--font-text);
            font-size: 14px; font-weight: 400;
            color: rgba(255,255,255,0.55);
            line-height: 1.65; letter-spacing: -0.224px;
        }

        /* ===== ADVANTAGES ===== */
        #advantages { background: var(--color-light-gray); color: var(--color-near-black); }
        .advantages-grid {
            display: grid; grid-template-columns: repeat(4,1fr);
            gap: 24px; margin-top: 48px;
        }
        .advantage-item { text-align: center; padding: 32px 16px; }
        .advantage-icon { font-size: 44px; margin-bottom: 24px; display: block; }
        .advantage-title {
            font-family: var(--font-display);
            font-size: 21px; font-weight: 600;
            color: var(--color-near-black);
            line-height: 1.19; letter-spacing: 0.231px; margin-bottom: 12px;
        }
        .advantage-desc {
            font-family: var(--font-text);
            font-size: 14px; font-weight: 400;
            color: var(--color-text-secondary);
            line-height: 1.65; letter-spacing: -0.224px;
        }

        /* ===== CASES ===== */
        #cases { background: var(--color-black); color: var(--color-white); }
        .cases-grid {
            display: grid; grid-template-columns: repeat(3,1fr);
            gap: 12px; margin-top: 48px;
        }
        .case-card {
            background: var(--color-dark-surface);
            border-radius: 8px; padding: 32px 28px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .case-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--card-shadow);
        }
        .case-tag {
            display: inline-block;
            font-family: var(--font-text);
            font-size: 11px; font-weight: 600;
            color: var(--color-blue-link-dark);
            letter-spacing: 0.6px; text-transform: uppercase;
            margin-bottom: 8px;
        }
        .case-client {
            font-family: var(--font-text);
            font-size: 12px; font-weight: 400;
            color: rgba(255,255,255,0.35);
            letter-spacing: -0.12px; margin-bottom: 8px;
        }
        .case-title {
            font-family: var(--font-display);
            font-size: 21px; font-weight: 600;
            color: var(--color-white);
            line-height: 1.19; letter-spacing: 0.231px; margin-bottom: 12px;
        }
        .case-result {
            font-family: var(--font-text);
            font-size: 14px; font-weight: 400;
            color: rgba(255,255,255,0.55);
            line-height: 1.65; letter-spacing: -0.224px;
        }

        /* ===== ABOUT ===== */
        #about { background: var(--color-light-gray); color: var(--color-near-black); }
        .about-stats {
            display: grid; grid-template-columns: repeat(4,1fr);
            gap: 32px; margin-top: 64px;
            padding-top: 48px;
            border-top: 1px solid rgba(29,29,31,0.1);
        }
        .stat-item { text-align: center; }
        .stat-number {
            font-family: var(--font-display);
            font-size: 40px; font-weight: 600;
            color: var(--color-near-black);
            line-height: 1.1; letter-spacing: -0.5px; display: block;
        }
        .stat-label {
            font-family: var(--font-text);
            font-size: 14px; font-weight: 400;
            color: var(--color-text-secondary);
            letter-spacing: -0.224px; margin-top: 6px; display: block;
        }

        /* ===== CONTACT ===== */
        #contact { background: var(--color-black); color: var(--color-white); }
        .contact-layout {
            display: grid; grid-template-columns: 1fr auto;
            gap: 80px; margin-top: 48px; align-items: center;
        }
        .contact-info-body {
            font-family: var(--font-text);
            font-size: 17px; font-weight: 400;
            color: rgba(255,255,255,0.6);
            line-height: 1.65; letter-spacing: -0.374px;
            margin-bottom: 40px;
        }
        .contact-details { list-style: none; display: flex; flex-direction: column; gap: 16px; }
        .contact-details li {
            font-family: var(--font-text);
            font-size: 17px; font-weight: 400;
            color: rgba(255,255,255,0.65);
            display: flex; align-items: flex-start; gap: 16px;
        }
        .detail-label {
            font-weight: 600; color: var(--color-white);
            min-width: 72px; flex-shrink: 0;
        }
        .detail-placeholder { color: rgba(255,255,255,0.3); }

        .contact-form {
            background: var(--color-dark-surface);
            border-radius: 12px; padding: 40px;
        }
        .form-group { margin-bottom: 24px; }
        .form-label {
            display: block;
            font-family: var(--font-text);
            font-size: 12px; font-weight: 600;
            color: rgba(255,255,255,0.5);
            letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 8px;
        }
        .form-input, .form-textarea {
            width: 100%;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px; padding: 10px 14px;
            font-family: var(--font-text);
            font-size: 17px; font-weight: 400;
            color: var(--color-white);
            letter-spacing: -0.374px; outline: none;
            transition: border-color 0.2s ease, background 0.2s ease;
            -webkit-appearance: none;
        }
        .form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,0.2); }
        .form-input:focus, .form-textarea:focus {
            border-color: var(--color-blue);
            background: rgba(0,113,227,0.06);
            box-shadow: 0 0 0 3px rgba(0,113,227,0.2);
        }
        .form-textarea { height: 110px; resize: vertical; min-height: 80px; }
        .form-submit { width: 100%; padding: 12px 20px; font-size: 17px; border-radius: 8px; }

        /* ===== QR CODE ===== */
        .contact-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .qr-placeholder {
            width: 180px; height: 180px;
            background: var(--color-dark-surface);
            border-radius: 12px;
            border: 1px solid rgba(90,173,255,0.2);
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }
        .qr-image { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
        .qr-fallback {
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 16px; padding: 20px;
            text-align: center;
        }
        .qr-hint {
            font-family: var(--font-text);
            font-size: 11px; color: rgba(90,173,255,0.6);
            line-height: 1.6; letter-spacing: 0;
        }
        .qr-label {
            font-family: var(--font-text);
            font-size: 13px; font-weight: 400;
            color: rgba(255,255,255,0.45);
            margin-top: 12px; letter-spacing: 0.3px;
        }

        /* ===== FOOTER ===== */
        footer {
            background: #0f1c36;
            border-top: 1px solid rgba(255,255,255,0.08);
            padding: 48px 24px;
        }
        .footer-inner { max-width: var(--max-width); margin: 0 auto; }
        .footer-top {
            display: flex; justify-content: space-between; align-items: flex-start;
            padding-bottom: 32px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            margin-bottom: 24px;
        }
        .footer-brand {
            font-family: var(--font-display);
            font-size: 17px; font-weight: 600;
            color: var(--color-white);
        }
        .footer-links { display: flex; gap: 32px; list-style: none; }
        .footer-links a {
            font-family: var(--font-text);
            font-size: 12px; font-weight: 400;
            color: rgba(255,255,255,0.45);
            transition: color 0.2s;
        }
        .footer-links a:hover { color: var(--color-white); }
        .footer-bottom { display: flex; justify-content: space-between; align-items: center; }
        .footer-copyright, .footer-icp {
            font-family: var(--font-text);
            font-size: 12px; font-weight: 400;
            color: rgba(255,255,255,0.28);
            letter-spacing: -0.12px;
        }

        /* ===== SCROLL ANIMATIONS ===== */
        .fade-up {
            opacity: 0; transform: translateY(20px);
            transition: opacity 0.65s ease, transform 0.65s ease;
        }
        .fade-up.visible { opacity: 1; transform: translateY(0); }
        .delay-1 { transition-delay: 0.1s; }
        .delay-2 { transition-delay: 0.2s; }
        .delay-3 { transition-delay: 0.3s; }
        .delay-4 { transition-delay: 0.4s; }
        .delay-5 { transition-delay: 0.5s; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1024px) {
            .hero-title { font-size: 64px; }
            .advantages-grid { grid-template-columns: repeat(2,1fr); }
        }
        @media (max-width: 768px) {
            section { padding: 96px 24px; }
            .section-title { font-size: 40px; }
            .hero-title { font-size: 44px; letter-spacing: -0.8px; }
            .hero-subtitle { font-size: 17px; }
            .services-grid { grid-template-columns: repeat(2,1fr); }
            .features-grid { grid-template-columns: 1fr; }
            .cases-grid { grid-template-columns: repeat(2,1fr); }
            .about-stats { grid-template-columns: repeat(2,1fr); }
            .contact-layout { grid-template-columns: 1fr; gap: 40px; justify-items: center; }
            .contact-qr { width: 100%; }
            .footer-top { flex-direction: column; gap: 24px; }
            .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
            .nav-links { display: none; }
            .nav-hamburger { display: flex; }
        }
        @media (max-width: 480px) {
            .hero-title { font-size: 34px; }
            .section-title { font-size: 32px; }
            .services-grid, .cases-grid { grid-template-columns: 1fr; }
            .advantages-grid { grid-template-columns: 1fr 1fr; }
            .contact-form { padding: 28px 20px; }
        }