:root {
            --bg: #04101e;
            --bg-deep: #020a14;
            --panel: rgba(13, 26, 45, 0.72);
            --panel-solid: #0c1a2d;
            --primary: #9ef01a;
            --primary-soft: #65ff8f;
            --accent: #24d8ff;
            --text-main: #eaf2ff;
            --text-muted: #9db3d7;
            --text-dim: #6f86ad;
            --border: rgba(158, 240, 26, 0.14);
            --border-soft: rgba(255, 255, 255, 0.08);
            --radius: 20px;
            --container: 1200px;
            --space-section: clamp(4.5rem, 9vw, 8rem);
            --ease: cubic-bezier(0.22, 1, 0.36, 1);
            --mono: 'Space Grotesk', monospace;
        }

        * { box-sizing: border-box; }

        html { scroll-behavior: smooth; scroll-padding-top: 92px; }

        /* ---------- Scrollbar (Firefox 등 표준 속성만 지원하는 브라우저) ---------- */
        @supports not selector(::-webkit-scrollbar) {
            html { scrollbar-width: thin; scrollbar-color: rgba(158, 240, 26, 0.55) var(--bg-deep); }
        }

        /* ---------- Scrollbar (WebKit/Chromium) ---------- */
        ::-webkit-scrollbar { width: 11px; height: 11px; }
        ::-webkit-scrollbar-track {
            background: var(--bg-deep);
            border-left: 1px solid rgba(255, 255, 255, 0.04);
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--primary) 0%, #57e06a 55%, var(--accent) 100%);
            border-radius: 999px;
            border: 3px solid var(--bg-deep);
        }
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, var(--primary-soft) 0%, var(--primary) 55%, var(--accent) 100%);
            border-width: 2px;
        }
        ::-webkit-scrollbar-corner { background: var(--bg-deep); }

        body {
            margin: 0;
            font-family: 'Space Grotesk', 'Noto Sans KR', sans-serif;
            background:
                radial-gradient(1100px 600px at 85% -10%, rgba(36, 216, 255, 0.08), transparent 60%),
                radial-gradient(900px 700px at -10% 30%, rgba(158, 240, 26, 0.06), transparent 55%),
                var(--bg);
            color: var(--text-main);
            line-height: 1.65;
            letter-spacing: -0.01em;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        a { color: inherit; text-decoration: none; }
        img { display: block; }
        ul { margin: 0; padding: 0; list-style: none; }

        .container { width: min(92%, var(--container)); margin: 0 auto; }

        section { padding: var(--space-section) 0; position: relative; }

        /* ---------- Header ---------- */
        .main-header {
            position: fixed; inset: 0 0 auto 0; z-index: 100;
            display: flex; align-items: center; justify-content: space-between;
            padding: 1rem clamp(1.2rem, 4vw, 3rem);
            transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
        }
        .main-header.scrolled {
            background: rgba(4, 14, 26, 0.82);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
            padding-top: .65rem; padding-bottom: .65rem;
            border-bottom: 1px solid var(--border-soft);
        }
        .logo img { height: 34px; width: auto; }
        .main-nav .nav-list { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
        .main-nav a { font-weight: 500; font-size: .95rem; color: var(--text-muted); transition: color .25s; position: relative; }
        .main-nav a:hover { color: var(--text-main); }
        .main-nav a:not(.nav-cta)::after {
            content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            transition: width .3s var(--ease);
        }
        .main-nav a:not(.nav-cta):hover::after { width: 100%; }
        .nav-cta {
            padding: .55rem 1.25rem; border-radius: 999px;
            color: #04101e !important; font-weight: 700;
            background: linear-gradient(120deg, var(--primary), var(--primary-soft));
            box-shadow: 0 6px 24px rgba(158, 240, 26, 0.28);
            transition: transform .45s var(--ease), box-shadow .45s var(--ease);
        }
        .nav-cta:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 30px rgba(158, 240, 26, 0.4); }
        .menu-toggle {
            display: none; background: none; border: 1px solid var(--border-soft);
            color: var(--text-main); font-size: 1.3rem; border-radius: 10px;
            width: 44px; height: 44px; cursor: pointer;
        }

        /* ---------- Buttons ---------- */
        .cta-button, .ghost-button {
            display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
            padding: .9rem 1.9rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
            transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
        }
        .cta-button {
            background: linear-gradient(120deg, var(--primary), var(--primary-soft));
            color: #04101e; box-shadow: 0 10px 32px rgba(158, 240, 26, 0.3);
        }
        .cta-button:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 40px rgba(158, 240, 26, 0.42); }
        .ghost-button {
            border: 1px solid rgba(36, 216, 255, 0.45); color: var(--accent);
            background: rgba(36, 216, 255, 0.06);
        }
        .ghost-button:hover { transform: translateY(-3px) scale(1.03); background: rgba(36, 216, 255, 0.14); }

        /* ---------- Typography ---------- */
        .eyebrow {
            display: inline-flex; align-items: center; gap: .55rem;
            font-family: var(--mono); font-size: .82rem; font-weight: 600;
            letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
        }
        .eyebrow::before {
            content: ""; width: 26px; height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
        }
        h1, h2, h3 { line-height: 1.25; margin: 0; letter-spacing: -0.02em; word-break: keep-all; }
        h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 700; }
        .hero-title-nowrap { display: inline-block; white-space: nowrap; }
        h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; }
        .heading-accent {
            background: linear-gradient(110deg, var(--primary) 20%, var(--primary-soft) 80%);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .heading-accent-blue {
            background: linear-gradient(110deg, var(--accent) 20%, #7be8ff 80%);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .section-header { max-width: 760px; margin: 0 auto 3.2rem; text-align: center; display: grid; gap: 1rem; justify-items: center; }
        .section-header-wide { max-width: min(100%, 1080px); }
        .subhead { color: var(--text-muted); font-size: 1.05rem; margin: 0; word-break: keep-all; }
        .subhead-nowrap { display: block; width: 100%; max-width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }

        /* ---------- Reveal ---------- */
        .fade-element { opacity: 0; transform: translateY(34px) scale(.97); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform; }
        .fade-delay-0 { transition-delay: 0ms; }
        .fade-delay-1 { transition-delay: 90ms; }
        .fade-delay-2 { transition-delay: 180ms; }
        .fade-delay-3 { transition-delay: 270ms; }
        .fade-delay-4 { transition-delay: 360ms; }
        .fade-delay-5 { transition-delay: 450ms; }
        .fade-delay-6 { transition-delay: 540ms; }
        .fade-element.fade-settled { will-change: auto; }
        .fade-element.visible { opacity: 1; transform: none; }

        /* ---------- Hero ---------- */
        .hero {
            min-height: 100svh; display: flex; align-items: center;
            padding-top: clamp(7rem, 14vh, 9rem); overflow: hidden;
        }
        .hero-content-layer { width: 100%; position: relative; z-index: 2; }
        .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
        .hero-layout {
            display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
            gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; z-index: 2;
        }
        .hero-copy { display: grid; gap: 1.4rem; justify-items: start; }
        .hero-lead { color: var(--text-muted); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 34rem; margin: 0; word-break: keep-all; }
        .hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; }

        .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; width: 100%; margin-top: .8rem; }
        .stat-card {
            position: relative; padding: 1.1rem 1.2rem; border-radius: 16px;
            background: var(--panel); border: 1px solid var(--border-soft);
            backdrop-filter: blur(8px); overflow: hidden;
        }
        .stat-card::before {
            content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
            background: linear-gradient(180deg, var(--primary), var(--accent));
        }
        .stat-card .value { display: block; font-family: var(--mono); font-size: 1.55rem; font-weight: 700; color: var(--primary); }
        .stat-card .label { display: block; font-size: .8rem; color: var(--text-dim); line-height: 1.5; margin-top: .3rem; word-break: keep-all; }

        .hero-scene-wrap { position: relative; display: flex; justify-content: center; min-width: 0; perspective: 1100px; }
        .hero-scene {
            width: clamp(320px, 34vw, 460px); max-width: 100%; height: auto;
            will-change: transform; transform-style: preserve-3d;
            animation: sceneIn 1.2s var(--ease) backwards;
        }
        @keyframes sceneIn { from { opacity: 0; transform: scale(.9) translateY(20px); } }

        .hero-copy > * { animation: heroIn .9s var(--ease) backwards; }
        .hero-copy > *:nth-child(1) { animation-delay: .05s; }
        .hero-copy > *:nth-child(2) { animation-delay: .15s; }
        .hero-copy > *:nth-child(3) { animation-delay: .25s; }
        .hero-copy > *:nth-child(4) { animation-delay: .35s; }
        .hero-copy > *:nth-child(5) { animation-delay: .45s; }
        @keyframes heroIn { from { opacity: 0; transform: translateY(28px); } }

        .hero-orb { position: absolute; border-radius: 50%; pointer-events: none; }
        .hero-orb-1 { width: 420px; height: 420px; left: -120px; top: 6%; background: radial-gradient(circle, rgba(158, 240, 26, 0.17), transparent 70%); animation: orbFloat 14s ease-in-out infinite alternate; }
        .hero-orb-2 { width: 480px; height: 480px; right: -140px; bottom: -12%; background: radial-gradient(circle, rgba(36, 216, 255, 0.15), transparent 70%); animation: orbFloat 18s ease-in-out infinite alternate-reverse; }
        @keyframes orbFloat { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(60px, -50px, 0) scale(1.18); } }

        .scroll-progress {
            position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 300;
            transform-origin: 0 50%; transform: scaleX(0);
            background: linear-gradient(90deg, var(--primary), var(--accent));
            pointer-events: none;
        }

        /* ---------- Badge marquee ---------- */
        .badge-belt {
            position: relative; z-index: 2; padding: 1.1rem 0; margin-top: clamp(2rem, 5vh, 3.5rem);
            border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
            background: rgba(4, 12, 22, 0.55); overflow: hidden; width: 100%;
        }
        .badge-track { display: flex; gap: 2.6rem; width: max-content; animation: marquee 36s linear infinite; }
        .badge-track span {
            font-family: var(--mono); font-size: .85rem; letter-spacing: .12em;
            color: var(--text-dim); white-space: nowrap; display: inline-flex; align-items: center; gap: .6rem;
        }
        .badge-track span::before { content: "◆"; font-size: .55rem; color: var(--primary); }
        .badge-belt:hover .badge-track { animation-play-state: paused; }
        @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* ---------- SVG divider ---------- */
        .svg-divider { height: 80px; position: relative; overflow: hidden; }
        .svg-divider svg { position: absolute; inset: 0; width: 100%; height: 100%; }

        /* ---------- Cards (common) ---------- */
        .card {
            position: relative; padding: 1.8rem 1.7rem; border-radius: var(--radius);
            background: var(--panel); border: 1px solid var(--border-soft);
            backdrop-filter: blur(8px);
            transition: transform .6s var(--ease), opacity .9s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
            overflow: hidden;
        }
        .card:hover { transform: translateY(-8px) scale(1.012); border-color: var(--border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
        .card::after {
            content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
            background: radial-gradient(420px 200px at 50% 0%, rgba(158, 240, 26, 0.08), transparent 70%);
            transition: opacity .4s;
        }
        .card:hover::after { opacity: 1; }
        .card h3 { font-size: 1.18rem; margin: 1rem 0 .6rem; }
        .card p { color: var(--text-muted); font-size: .94rem; margin: 0; word-break: keep-all; }
        .card .icon-frame {
            width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
            background: rgba(158, 240, 26, 0.06); border: 1px solid var(--border);
        }
        .card .icon-frame svg { width: 40px; height: 40px; }

        .pill {
            display: inline-block; margin-top: 1rem; padding: .3rem .8rem; border-radius: 999px;
            font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
            color: var(--accent); border: 1px solid rgba(36, 216, 255, 0.3); background: rgba(36, 216, 255, 0.07);
        }

        /* ---------- Features ---------- */
        .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }

        /* ---------- Services ---------- */
        .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
        .service-card h3 { display: flex; align-items: center; gap: .7rem; }
        .service-list { display: grid; gap: .55rem; margin-top: 1rem; }
        .service-list li {
            position: relative; padding-left: 1.2rem; color: var(--text-muted);
            font-size: .92rem; line-height: 1.6; word-break: keep-all;
        }
        .service-list li::before {
            content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px;
            border-radius: 2px; transform: rotate(45deg);
            background: linear-gradient(135deg, var(--primary), var(--accent));
        }

        /* ---------- Process ---------- */
        .process-block { position: relative; }
        .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; position: relative; }
        .process-line { position: absolute; left: 0; right: 0; top: 56px; height: 4px; pointer-events: none; }
        .process-line svg { width: 100%; height: 100%; overflow: visible; }
        .step-card { text-align: left; }
        .step-badge { position: relative; width: 64px; height: 64px; }
        .step-badge svg { width: 64px; height: 64px; }
        .step-badge .step-no {
            position: absolute; inset: 0; display: grid; place-items: center;
            font-family: var(--mono); font-weight: 700; font-size: 1.05rem; color: var(--primary);
        }
        .process-divider { height: 1px; margin: var(--space-section) auto; width: min(92%, var(--container));
            background: linear-gradient(90deg, transparent, rgba(158, 240, 26, 0.35), rgba(36, 216, 255, 0.35), transparent); }

        /* ---------- Contact ---------- */
        .contact-section::before {
            content: ""; position: absolute; inset: 0; pointer-events: none;
            background: radial-gradient(700px 400px at 80% 20%, rgba(158, 240, 26, 0.06), transparent 60%);
        }
        .contact-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; position: relative; }
        .contact-copy { display: grid; gap: 1.2rem; justify-items: start; }
        .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; width: 100%; margin-top: .4rem; }
        .contact-item h3 { font-size: .85rem; font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 .4rem; }
        .contact-item p { margin: 0; color: var(--text-muted); font-size: .94rem; word-break: keep-all; }
        .contact-item a:hover { color: var(--primary); }
        .contact-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .6rem; }
        .contact-cta {
            position: relative; padding: 2rem 1.8rem; border-radius: var(--radius);
            background: linear-gradient(160deg, rgba(158, 240, 26, 0.08), rgba(36, 216, 255, 0.05)), var(--panel-solid);
            border: 1px solid var(--border); overflow: hidden;
        }
        .contact-cta h3 { display: flex; align-items: center; gap: .7rem; font-size: 1.25rem; margin: 0 0 .6rem; }
        .contact-cta > p { color: var(--text-muted); margin: 0 0 1.1rem; }
        .cta-list { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
        .cta-list li { position: relative; padding-left: 1.6rem; color: var(--text-main); font-size: .95rem; }
        .cta-list li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 700; }

        /* ---------- Footer ---------- */
        footer { padding: 2.2rem 0; border-top: 1px solid var(--border-soft); text-align: center; }
        footer p { margin: 0; color: var(--text-dim); font-size: .85rem; font-family: var(--mono); letter-spacing: .08em; }

        /* ---------- SVG animations (CSS-driven) ---------- */
        .draw-path { stroke-dasharray: 600; stroke-dashoffset: 600; }
        .visible .draw-path { animation: draw 1.6s var(--ease) forwards; }
        @keyframes draw { to { stroke-dashoffset: 0; } }

        .ring-progress { stroke-dasharray: 188.5; stroke-dashoffset: 188.5; transform: rotate(-90deg); transform-origin: 50% 50%; }
        .visible .ring-progress { animation: ringDraw 1.4s var(--ease) forwards; }
        @keyframes ringDraw { to { stroke-dashoffset: 47; } }

        /* ---------- Responsive ---------- */
        @media (max-width: 1024px) {
            .hero-layout { grid-template-columns: 1fr; gap: clamp(1.4rem, 4vw, 2.4rem); }
            .hero-scene-wrap { display: none; }
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .services-grid { grid-template-columns: repeat(2, 1fr); }
            .process-grid { grid-template-columns: repeat(2, 1fr); }
            .process-line { display: none; }
            .contact-layout { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .menu-toggle { display: grid; place-items: center; }
            .main-nav .nav-list {
                position: fixed; top: 64px; right: 4%; left: 4%;
                flex-direction: column; align-items: stretch; gap: 0;
                background: rgba(6, 16, 30, 0.97); border: 1px solid var(--border-soft);
                border-radius: 16px; padding: .6rem; display: none;
                box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
            }
            .main-nav .nav-list.open { display: flex; }
            .main-nav .nav-list a { display: block; padding: .85rem 1rem; border-radius: 10px; }
            .main-nav .nav-list a:hover { background: rgba(255, 255, 255, 0.05); }
            .main-nav .nav-list .nav-cta { text-align: center; margin-top: .4rem; }
            .hero { padding-top: 6.5rem; }
            .hero-stats { grid-template-columns: 1fr; }
            .contact-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 520px) {
            h1 { font-size: clamp(1.5rem, 7vw, 2.1rem); }
            .features-grid, .services-grid, .process-grid { grid-template-columns: 1fr; }
        }