Build Landing Page

You will be creating a complete, professional landing page based on the content description provided by the user. Here is what the user wants on their landing page:

<content_description>
VAR_1
</content_description>

Your task is to create a fully functional, modern, and visually appealing landing page using HTML, CSS, and JavaScript. Follow these guidelines:

**Content Requirements:**
- Include all elements mentioned in the content description
- Create compelling headlines and copy that align with the user's vision
- If specific text isn't provided, create professional placeholder content that fits the theme
- DO NOT CREATE ANY IMAGES, LINKS, CTA UNLESS IT'S PROVIDED
- BASED ON THE SOLELY ON WHAT'S PROVIDED BY A USER

**Technical Requirements:**
- Write clean, semantic HTML5
- Use modern CSS3 with flexbox or grid for layouts
- Include responsive design that works on desktop, tablet, and mobile
- Add interactive JavaScript elements where appropriate (smooth scrolling, form validation, animations, etc.)
- Ensure fast loading times and good performance
- Use proper meta tags for SEO

**Design Requirements:**

기술 스택:

Tailwind CSS (CDN을 통해 로드)

Lucide Icons (CDN을 통해 로드)

전체 테마:

배경: 배경은 VAR_2를 사용하고, 텍스트는 VAR_2 가 어두우면 밝은 회색/흰색 계열, 밝으면 극도로 어두운 회색/ 검정색 계열을 사용합니다.

악센트 컬러: VAR_3 를 주요 색상으로 한 선명한 그라디언트를 헤드라인, CTA 버튼 등에 사용합니다. 기능별 아이콘에도 고유한 악센트 컬러를 적용합니다.

핵심 시각 효과 (필수):

오로라 배경 (.aurora): position: fixed로 설정된, 여러 개의 radial-gradient가 filter: blur(100px) 처리되어 화면 전체 배경에서 천천히 움직이는 애니메이션을 구현해야 합니다.

글래스모피즘 (.glass): 모든 카드(기능, 활용 사례, 후기, FAQ)의 기본 스타일입니다.

반투명 배경 (예: rgba(255, 255, 255, 0.08))

반투명 테두리 (예: rgba(255, 255, 255, 0.10))

backdrop-filter: blur(24px) saturate(160%) 적용.

호버(Hover) 시: 카드가 살짝 위로 올라가며 커지는 효과 (transform: translateY(-6px) scale(1.02))를 적용합니다.

로고, 이미지: USER 가 명시적으로 로고, 이미지 첨부를 위한 URL 을 제공한 경우에만 사용

링크 메뉴, 버튼, CTA: USER가 명시적으로 링크, 버튼, CTA와 연결할 링크 URL을 제공한 경우에만 사용

히어로 섹션 효과:

미세하게 움직이는 그리드 오버레이 (gridDrift 애니메이션).

크고 흐릿한 원형 그라디언트가 천천히 움직이는 효과 (floatOrb 애니메이션).

스크롤 애니메이션 (.fade-in):

페이지의 모든 섹션과 콘텐츠 블록(카드 등)은 스크롤 시 아래에서 위로 떠오르며 서서히 나타나는 효과 (opacity: 0 -> 1, transform: translateY(30px) -> 0)를 가져야 합니다.

IntersectionObserver를 사용하여 이를 구현하고, .delay-100, .delay-200 등 지연 클래스를 적용합니다.

아이콘 스타일 (.icon-glow-pulse):

기능(Features) 섹션의 아이콘은 반투명한 원형 배경 안에 위치하며, box-shadow와 scale을 이용한 부드러운 '펄스(pulse)' 애니메이션 효과를 가져야 합니다.

그라디언트 CTA 버튼 (.gradient-button):

선명한 linear-gradient 배경과 그림자 효과를 가지며, 호버 시 살짝 떠오르는(translateY(-3px)) 효과를 적용합니다.

레이아웃 구조 예시 (콘텐츠 내용에 따라 유연하게 변형할 것):

히어로: 화면 전체를 채우는 섹션 (로고, H1, 설명, CTA 버튼).

기능 소개: 4열 그리드 (글래스모피즘 카드, 펄스 아이콘 사용).

활용 사례 (Use Cases): 2열 그리드 (이미지-텍스트 교차 배치), "Before" / "After" 내용을 글래스모피즘 카드로 표현.

고객 후기: 3열 그리드 (글래스모피즘 카드).

엔터프라이즈 섹션: 보안, 거버넌스, 배포 옵션(SaaS, Private Cloud, On-Premise)을 소개하는 섹션.

FAQ: 질문/답변 목록 (글래스모피즘 카드).

최종 CTA

푸터: "Trusted by" 로고 섹션 or Disclaimer


산출물: 위의 모든 콘텐츠와 스타일, 애니메이션, 스크립트(JS)가 포함된 단일 HTML 파일 1개. (CSS는 <style> 태그 안에, JS는 <script> 태그 안에 포함).

Create a landing page that not only meets the user's requirements but also follows modern web development best practices and provides an excellent user experience. You must print out the code block only.