diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css
new file mode 100644
index 0000000..17afe53
--- /dev/null
+++ b/src/main/resources/static/css/main.css
@@ -0,0 +1,5298 @@
+@charset "UTF-8";
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  line-height: 1.6;
+  color: #1A1A2E;
+  background-color: #FFFFFF;
+  overflow-x: hidden;
+}
+
+ul, ol {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.3s ease;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  border: none;
+  outline: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav,
+section, summary {
+  display: block;
+}
+
+::selection {
+  background-color: rgba(75, 155, 255, 0.2);
+  color: #1A1A2E;
+}
+
+::-moz-selection {
+  background-color: rgba(75, 155, 255, 0.2);
+  color: #1A1A2E;
+}
+
+body {
+  font-size: 16px;
+  font-weight: 400;
+  color: #1A1A2E;
+}
+
+h1, .h1 {
+  font-size: 56px;
+  font-weight: 800;
+  margin-bottom: 24px;
+}
+@media (max-width: 768px) {
+  h1, .h1 {
+    font-size: 40px;
+  }
+}
+@media (max-width: 480px) {
+  h1, .h1 {
+    font-size: 32px;
+  }
+}
+
+h2, .h2 {
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+@media (max-width: 768px) {
+  h2, .h2 {
+    font-size: 32px;
+  }
+}
+@media (max-width: 480px) {
+  h2, .h2 {
+    font-size: 24px;
+  }
+}
+
+h3, .h3 {
+  font-size: 40px;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+@media (max-width: 768px) {
+  h3, .h3 {
+    font-size: 24px;
+  }
+}
+
+h4, .h4 {
+  font-size: 32px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+h5, .h5 {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+h6, .h6 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+p {
+  margin-bottom: 16px;
+  line-height: 1.6;
+}
+p:last-child {
+  margin-bottom: 0;
+}
+
+.text-gradient {
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-gradient-accent {
+  background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-gradient-warm {
+  background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-primary {
+  color: #4B9BFF;
+}
+
+.text-secondary {
+  color: #2E7FF7;
+}
+
+.text-dark {
+  color: #1A1A2E;
+}
+
+.text-gray {
+  color: #64748B;
+}
+
+.text-light {
+  color: #94A3B8;
+}
+
+.text-white {
+  color: #FFFFFF;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.font-regular {
+  font-weight: 400;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.text-xs {
+  font-size: 12px;
+}
+
+.text-sm {
+  font-size: 14px;
+}
+
+.text-base {
+  font-size: 16px;
+}
+
+.text-lg {
+  font-size: 20px;
+}
+
+.text-xl {
+  font-size: 24px;
+}
+
+.lead {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 1.8;
+  color: #64748B;
+}
+
+.caption {
+  font-size: 14px;
+  color: #64748B;
+}
+
+.code {
+  font-family: "Fira Code", "Courier New", monospace;
+  font-size: 14px;
+  background: #F8FAFC;
+  padding: 2px 6px;
+  border-radius: 6px;
+}
+
+a {
+  color: #4B9BFF;
+}
+a:hover {
+  color: #2E7FF7;
+}
+
+blockquote {
+  padding: 16px;
+  margin: 16px 0;
+  border-left: 4px solid #4B9BFF;
+  background: #F8FAFC;
+  font-style: italic;
+}
+blockquote p {
+  margin-bottom: 0;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #E2E8F0;
+  margin: 32px 0;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-30px) rotate(10deg);
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%) rotate(45deg);
+  }
+  100% {
+    transform: translateX(100%) rotate(45deg);
+  }
+}
+@keyframes wave {
+  0% {
+    transform: rotate(0deg);
+  }
+  10% {
+    transform: rotate(14deg);
+  }
+  20% {
+    transform: rotate(-8deg);
+  }
+  30% {
+    transform: rotate(14deg);
+  }
+  40% {
+    transform: rotate(-4deg);
+  }
+  50% {
+    transform: rotate(10deg);
+  }
+  60% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+@keyframes popIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  80% {
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes popupFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+.animate-float {
+  animation: float 20s ease-in-out infinite;
+}
+
+.animate-bounce {
+  animation: bounce 2s infinite;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.animate-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.6s ease-out;
+}
+
+.animate-slide-up {
+  animation: slideInUp 0.8s ease-out;
+}
+
+.animate-slide-down {
+  animation: slideInDown 0.6s ease-out;
+}
+
+.animate-pop {
+  animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.delay-1 {
+  animation-delay: 0.1s;
+}
+
+.delay-2 {
+  animation-delay: 0.2s;
+}
+
+.delay-3 {
+  animation-delay: 0.3s;
+}
+
+.delay-4 {
+  animation-delay: 0.4s;
+}
+
+.delay-5 {
+  animation-delay: 0.5s;
+}
+
+.duration-fast {
+  animation-duration: 0.3s;
+}
+
+.duration-normal {
+  animation-duration: 0.6s;
+}
+
+.duration-slow {
+  animation-duration: 1s;
+}
+
+.duration-slower {
+  animation-duration: 2s;
+}
+
+.hover-grow {
+  transition: transform 0.3s ease;
+}
+.hover-grow:hover {
+  transform: scale(1.05);
+}
+
+.hover-lift {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.hover-lift:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+}
+
+.hover-rotate {
+  transition: transform 0.3s ease;
+}
+.hover-rotate:hover {
+  transform: rotate(5deg);
+}
+
+.hover-shine {
+  position: relative;
+  overflow: hidden;
+}
+.hover-shine::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
+  transform: rotate(45deg);
+  transition: transform 0.6s ease;
+  transform: translateX(-200%);
+}
+.hover-shine:hover::before {
+  transform: translateX(200%) rotate(45deg);
+}
+
+:root {
+  --primary-blue: #4B9BFF;
+  --secondary-blue: #2E7FF7;
+  --accent-cyan: #00D4FF;
+  --accent-yellow: #FFD93D;
+  --accent-orange: #FF6B6B;
+  --accent-green: #6BCF7F;
+  --accent-purple: #A78BFA;
+  --text-dark: #1A1A2E;
+  --text-gray: #64748B;
+  --text-light: #94A3B8;
+  --white: #FFFFFF;
+  --gray-bg: #F8FAFC;
+  --light-bg: #EFF6FF;
+  --border-gray: #E2E8F0;
+  --gradient-primary: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  --gradient-accent: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
+  --gradient-warm: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(75, 155, 255, 0.1);
+  --shadow-lg: 0 8px 24px rgba(75, 155, 255, 0.15);
+  --shadow-xl: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+
+.blind {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.global-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: var(--shadow-sm);
+  z-index: 1000;
+  height: 80px;
+  transition: all 0.3s ease;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80px;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+.header-left .logo {
+  height: 45px;
+  width: auto;
+}
+
+.logo-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 45px;
+  z-index: 10;
+}
+.logo a {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 100%;
+  text-decoration: none;
+}
+.logo img {
+  height: 45px;
+  width: auto;
+}
+
+.logo-text {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--primary-blue);
+  padding: 4px 12px;
+  background: var(--light-bg);
+  border-radius: 20px;
+  text-decoration: none;
+  display: inline-block;
+  transition: all 0.3s ease;
+}
+.logo-text:hover {
+  background: var(--primary-blue);
+  color: var(--white);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+.logo-text:visited {
+  color: var(--primary-blue);
+}
+
+.logo-link,
+.mobile-logo-link,
+.drawer-logo-link {
+  display: inline-block;
+  text-decoration: none;
+  transition: transform 0.3s ease;
+}
+.logo-link:hover,
+.mobile-logo-link:hover,
+.drawer-logo-link:hover {
+  transform: scale(1.05);
+}
+.logo-link img,
+.mobile-logo-link img,
+.drawer-logo-link img {
+  display: block;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.search-btn {
+  width: 40px;
+  height: 40px;
+  background: var(--gray-bg);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--text-gray);
+  transition: all 0.3s ease;
+}
+.search-btn:hover {
+  background: var(--light-bg);
+  color: var(--primary-blue);
+  transform: scale(1.1);
+}
+
+.desktop-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+@media (max-width: 768px) {
+  .desktop-header {
+    display: none;
+  }
+}
+
+.mobile-header {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+@media (max-width: 768px) {
+  .mobile-header {
+    display: flex;
+  }
+}
+
+.mobile-left .mobile-logo {
+  height: 32px;
+  width: auto;
+}
+
+.mobile-center {
+  flex: 1;
+  text-align: center;
+}
+.mobile-center .mobile-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-dark);
+  margin: 0;
+}
+
+.mobile-right .mobile-menu-btn {
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  padding: 8px;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+}
+.mobile-right .mobile-menu-btn:hover {
+  background: var(--gray-bg);
+}
+.mobile-right .mobile-menu-btn .hamburger-line {
+  width: 24px;
+  height: 2px;
+  background: var(--text-dark);
+  transition: all 0.3s ease;
+  border-radius: 1px;
+}
+.mobile-right .mobile-menu-btn.active .hamburger-line:nth-child(1) {
+  transform: rotate(45deg) translateY(6px);
+}
+.mobile-right .mobile-menu-btn.active .hamburger-line:nth-child(2) {
+  opacity: 0;
+}
+.mobile-right .mobile-menu-btn.active .hamburger-line:nth-child(3) {
+  transform: rotate(-45deg) translateY(-6px);
+}
+
+.mobile-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+.mobile-drawer.active {
+  visibility: visible;
+  opacity: 1;
+}
+.mobile-drawer.active .drawer-content {
+  transform: translateY(0);
+}
+.mobile-drawer .drawer-overlay {
+  display: none;
+}
+.mobile-drawer .drawer-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--white);
+  transform: translateY(100%);
+  transition: transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+.mobile-drawer .drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  border-bottom: 2px solid var(--border-gray);
+  background: var(--white);
+  box-shadow: var(--shadow-sm);
+  min-height: 60px;
+}
+.mobile-drawer .drawer-header .drawer-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.mobile-drawer .drawer-header .drawer-logo .logo {
+  height: 32px;
+  width: auto;
+}
+.mobile-drawer .drawer-header .drawer-logo .logo-text {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--primary-blue);
+}
+.mobile-drawer .drawer-header .drawer-close {
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-size: 18px;
+  color: var(--text-gray);
+  transition: all 0.3s ease;
+}
+.mobile-drawer .drawer-header .drawer-close:hover {
+  background: var(--white);
+  color: var(--text-dark);
+}
+.mobile-drawer .drawer-nav {
+  flex: 1;
+  padding: 0;
+  overflow-y: auto;
+  background: var(--white);
+}
+.mobile-drawer .drawer-nav .drawer-menu {
+  list-style: none;
+  margin: 0;
+  padding: 20px 0;
+}
+.mobile-drawer .drawer-nav .drawer-menu li {
+  margin-bottom: 8px;
+}
+.mobile-drawer .drawer-nav .drawer-menu li .drawer-link {
+  display: block;
+  padding: 16px 24px;
+  margin: 0 20px;
+  color: var(--text-dark);
+  text-decoration: none;
+  font-size: 18px;
+  font-weight: 500;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+}
+.mobile-drawer .drawer-nav .drawer-menu li .drawer-link:hover, .mobile-drawer .drawer-nav .drawer-menu li .drawer-link:active {
+  background: var(--light-bg);
+  color: var(--primary-blue);
+  transform: translateX(4px);
+  box-shadow: var(--shadow-sm);
+}
+.mobile-drawer .drawer-actions {
+  padding: 24px;
+  border-top: 2px solid var(--border-gray);
+  background: var(--white);
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
+}
+.mobile-drawer .drawer-actions .drawer-login-btn {
+  display: block;
+  text-align: center;
+  padding: 14px 20px;
+  color: var(--text-dark);
+  text-decoration: none;
+  border: 2px solid var(--primary-blue);
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 12px;
+  transition: all 0.3s ease;
+}
+.mobile-drawer .drawer-actions .drawer-login-btn:hover {
+  background: var(--light-bg);
+  color: var(--primary-blue);
+}
+.mobile-drawer .drawer-actions .drawer-signup-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 14px 20px;
+  background: var(--gradient-primary);
+  color: var(--white);
+  text-decoration: none;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 12px;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow-md);
+}
+.mobile-drawer .drawer-actions .drawer-signup-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.mobile-drawer .drawer-actions .drawer-search-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 14px 20px;
+  background: var(--gray-bg);
+  color: var(--text-dark);
+  border: none;
+  border-radius: 12px;
+  font-weight: 500;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.mobile-drawer .drawer-actions .drawer-search-btn:hover {
+  background: var(--light-bg);
+  color: var(--primary-blue);
+}
+
+.btn-mobilemenu {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  z-index: 501;
+}
+.btn-mobilemenu span {
+  display: block;
+  width: 24px;
+  height: 2px;
+  background: #1A1A2E;
+  position: relative;
+  transition: all all 0.15s ease;
+  text-indent: -9999px;
+}
+.btn-mobilemenu span::before, .btn-mobilemenu span::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 24px;
+  height: 2px;
+  background: #1A1A2E;
+  transition: all all 0.15s ease;
+}
+.btn-mobilemenu span::before {
+  top: -8px;
+}
+.btn-mobilemenu span::after {
+  top: 8px;
+}
+.btn-mobilemenu.on span {
+  background: transparent;
+}
+.btn-mobilemenu.on span::before {
+  top: 0;
+  transform: rotate(45deg);
+}
+.btn-mobilemenu.on span::after {
+  top: 0;
+  transform: rotate(-45deg);
+}
+
+.main-nav.m-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #FFFFFF;
+  z-index: 500;
+  right: -100%;
+  transition: none;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+.main-nav.m-nav .nav-header {
+  padding: 24px;
+  background: #F8FAFC;
+  border-bottom: 1px solid #E2E8F0;
+}
+.main-nav.m-nav .nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-grow: 1;
+}
+.main-nav.m-nav .nav-list .nav-item {
+  border-bottom: 1px solid #E2E8F0;
+}
+.main-nav.m-nav .nav-list .nav-item > a {
+  display: flex;
+  align-items: center;
+  padding: 24px;
+  color: #1A1A2E;
+  font-size: 18px;
+  font-weight: 500;
+  text-decoration: none;
+  position: relative;
+}
+.main-nav.m-nav .nav-list .nav-item.has-submenu > a::after {
+  content: "";
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid #64748B;
+  border-bottom: 2px solid #64748B;
+  transform: translateY(-50%) rotate(45deg);
+  transition: transform all 0.15s ease;
+}
+.main-nav.m-nav .nav-list .nav-item.expanded > a::after {
+  transform: translateY(-25%) rotate(-135deg);
+}
+.main-nav.m-nav .nav-list .nav-item .sub-menu {
+  display: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  background: #F8FAFC;
+}
+.main-nav.m-nav .nav-list .nav-item .sub-menu a {
+  display: block;
+  padding: 16px 24px 16px 48px;
+  color: #64748B;
+  font-size: 14px;
+  text-decoration: none;
+}
+.main-nav.m-nav .nav-list .nav-item .sub-menu a:hover {
+  background: #FFFFFF;
+  color: #4B9BFF;
+}
+.main-nav.m-nav .nav-list .nav-item.expanded .sub-menu {
+  display: block;
+}
+.main-nav.m-nav .info_wrap {
+  padding: 32px 24px;
+  background: #FFFFFF;
+  border-top: 1px solid #E2E8F0;
+  margin-top: auto;
+}
+
+.nav-menu {
+  display: flex;
+  list-style: none;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+  color: var(--text-dark);
+  font-weight: 500;
+  font-size: 15px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+.nav-link:hover {
+  background: var(--light-bg);
+  color: var(--primary-blue);
+  transform: translateY(-2px);
+}
+
+.nav-icon {
+  font-size: 18px;
+}
+
+.signup-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  background: var(--gradient-primary);
+  color: var(--white);
+  padding: 12px 24px;
+  border-radius: 50px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow-md);
+}
+.signup-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+body {
+  padding-top: 80px;
+}
+
+@media (max-width: 768px) {
+  .global-header {
+    height: 60px;
+  }
+  .global-header .container .header-content {
+    padding: 0 16px;
+    height: 60px;
+  }
+  body {
+    padding-top: 60px;
+  }
+}
+@media (max-width: 480px) {
+  .global-header .header-content {
+    padding: 0 12px;
+  }
+  .logo .logo-text {
+    display: none;
+  }
+}
+.global-footer {
+  background: #1A1A2E;
+  color: #FFFFFF;
+  padding: 80px 0 40px;
+}
+@media (max-width: 768px) {
+  .global-footer {
+    padding: 48px 0 32px;
+  }
+}
+
+.footer-top {
+  display: grid;
+  grid-template-columns: 2fr 3fr;
+  gap: 80px;
+  margin-bottom: 64px;
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 24px;
+}
+@media (max-width: 1024px) {
+  .footer-top {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+}
+
+.footer-brand {
+  max-width: 360px;
+}
+.footer-brand .footer-logo {
+  height: 48px;
+  margin-bottom: 24px;
+}
+.footer-brand .footer-desc {
+  font-size: 14px;
+  line-height: 1.8;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 24px;
+}
+.footer-brand .footer-newsletter {
+  margin-bottom: 32px;
+}
+.footer-brand .footer-newsletter h4 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+.footer-brand .footer-newsletter .newsletter-form {
+  display: flex;
+  gap: 8px;
+}
+.footer-brand .footer-newsletter .newsletter-form input {
+  flex: 1;
+  padding: 8px 16px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  color: #FFFFFF;
+  font-size: 14px;
+}
+.footer-brand .footer-newsletter .newsletter-form input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+.footer-brand .footer-newsletter .newsletter-form input:focus {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: #4B9BFF;
+  outline: none;
+}
+.footer-brand .footer-newsletter .newsletter-form button {
+  padding: 8px 24px;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  color: #FFFFFF;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+.footer-brand .footer-newsletter .newsletter-form button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+}
+
+.social-links {
+  display: flex;
+  gap: 16px;
+}
+.social-links a {
+  width: 44px;
+  height: 44px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #FFFFFF;
+  transition: all 0.3s ease;
+  font-size: 20px;
+}
+.social-links a:hover {
+  background: #4B9BFF;
+  transform: translateY(-3px);
+}
+.social-links a.facebook:hover {
+  background: #1877f2;
+}
+.social-links a.twitter:hover {
+  background: #1da1f2;
+}
+.social-links a.linkedin:hover {
+  background: #0077b5;
+}
+.social-links a.github:hover {
+  background: #333;
+}
+.social-links a.youtube:hover {
+  background: #ff0000;
+}
+
+.footer-links {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 40px;
+}
+@media (max-width: 1024px) {
+  .footer-links {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 768px) {
+  .footer-links {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+}
+
+.footer-column h4 {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 24px;
+  color: #FFFFFF;
+}
+.footer-column ul {
+  list-style: none;
+}
+.footer-column ul li {
+  margin-bottom: 16px;
+}
+.footer-column ul li a {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  transition: all 0.3s ease;
+  position: relative;
+}
+.footer-column ul li a::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 1px;
+  background: #00D4FF;
+  transition: all 0.3s ease;
+}
+.footer-column ul li a:hover {
+  color: #00D4FF;
+}
+.footer-column ul li a:hover::after {
+  width: 100%;
+}
+.footer-column .footer-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: rgba(107, 207, 127, 0.2);
+  color: #6BCF7F;
+  border-radius: 50px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-left: 8px;
+}
+
+.footer-bottom {
+  padding-top: 40px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  max-width: 1280px;
+  margin: 0 auto;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.footer-legal {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+@media (max-width: 768px) {
+  .footer-legal {
+    flex-direction: column;
+    gap: 24px;
+    text-align: center;
+  }
+}
+.footer-legal p {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 14px;
+  margin: 0;
+}
+.footer-legal .legal-links {
+  display: flex;
+  gap: 24px;
+}
+.footer-legal .legal-links a {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+.footer-legal .legal-links a:hover {
+  color: #FFFFFF;
+}
+
+.footer-decoration {
+  position: relative;
+  overflow: hidden;
+}
+.footer-decoration::before {
+  content: "";
+  position: absolute;
+  top: -100px;
+  right: -100px;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, rgba(75, 155, 255, 0.1) 0%, transparent 70%);
+  border-radius: 50%;
+}
+.footer-decoration::after {
+  content: "";
+  position: absolute;
+  bottom: -150px;
+  left: -150px;
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
+  border-radius: 50%;
+}
+
+.grid {
+  display: grid;
+  gap: 24px;
+}
+.grid-cols-1 {
+  grid-template-columns: 1fr;
+}
+.grid-cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+.grid-cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+.grid-cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+.grid-cols-5 {
+  grid-template-columns: repeat(5, 1fr);
+}
+.grid-cols-6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+.grid-cols-12 {
+  grid-template-columns: repeat(12, 1fr);
+}
+.grid-auto {
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+.grid-auto-sm {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+.grid-auto-lg {
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+}
+.grid.gap-0 {
+  gap: 0;
+}
+.grid.gap-sm {
+  gap: 8px;
+}
+.grid.gap-md {
+  gap: 16px;
+}
+.grid.gap-lg {
+  gap: 24px;
+}
+.grid.gap-xl {
+  gap: 32px;
+}
+@media (max-width: 1024px) {
+  .grid-md-cols-1 {
+    grid-template-columns: 1fr;
+  }
+  .grid-md-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 768px) {
+  .grid-sm-cols-1 {
+    grid-template-columns: 1fr;
+  }
+  .grid-sm-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.col-span-1 {
+  grid-column: span 1;
+}
+
+.col-span-2 {
+  grid-column: span 2;
+}
+
+.col-span-3 {
+  grid-column: span 3;
+}
+
+.col-span-4 {
+  grid-column: span 4;
+}
+
+.col-span-5 {
+  grid-column: span 5;
+}
+
+.col-span-6 {
+  grid-column: span 6;
+}
+
+.col-span-full {
+  grid-column: 1/-1;
+}
+
+.row-span-1 {
+  grid-row: span 1;
+}
+
+.row-span-2 {
+  grid-row: span 2;
+}
+
+.row-span-3 {
+  grid-row: span 3;
+}
+
+.api-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+}
+@media (max-width: 1024px) {
+  .api-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 768px) {
+  .api-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.experience-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+}
+@media (max-width: 768px) {
+  .experience-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.partners-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 40px;
+  align-items: center;
+}
+@media (max-width: 768px) {
+  .partners-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 32px;
+}
+@media (max-width: 768px) {
+  .feature-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.demo-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  align-items: start;
+}
+@media (max-width: 1024px) {
+  .demo-wrapper {
+    grid-template-columns: 1fr;
+  }
+}
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: 2fr 3fr;
+  gap: 80px;
+}
+@media (max-width: 1024px) {
+  .footer-grid {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+}
+.footer-grid .footer-links {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 40px;
+}
+@media (max-width: 1024px) {
+  .footer-grid .footer-links {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 768px) {
+  .footer-grid .footer-links {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+}
+
+.pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  align-items: center;
+}
+@media (max-width: 1024px) {
+  .pricing-grid {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+}
+
+.testimonial-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 24px;
+}
+@media (max-width: 768px) {
+  .testimonial-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 32px;
+  text-align: center;
+}
+@media (max-width: 1024px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.two-column {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 48px;
+  align-items: center;
+}
+@media (max-width: 1024px) {
+  .two-column {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+}
+.two-column.reverse {
+  direction: rtl;
+}
+.two-column.reverse > * {
+  direction: ltr;
+}
+@media (max-width: 1024px) {
+  .two-column.reverse {
+    direction: ltr;
+  }
+}
+
+.three-column {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32px;
+}
+@media (max-width: 1024px) {
+  .three-column {
+    grid-template-columns: 1fr;
+  }
+}
+
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+@media (max-width: 768px) {
+  .container {
+    padding: 0 16px;
+  }
+}
+.container-fluid {
+  max-width: 100%;
+  padding: 0 24px;
+}
+.container-narrow {
+  max-width: 960px;
+}
+.container-wide {
+  max-width: 1440px;
+}
+
+.section {
+  padding: 100px 0;
+}
+@media (max-width: 768px) {
+  .section {
+    padding: 64px 0;
+  }
+}
+.section-sm {
+  padding: 48px 0;
+}
+.section-lg {
+  padding: 150px 0;
+}
+.section-no-top {
+  padding-top: 0;
+}
+.section-no-bottom {
+  padding-bottom: 0;
+}
+
+.section-bg-gray {
+  background: #F8FAFC;
+}
+.section-bg-light {
+  background: #EFF6FF;
+}
+.section-bg-gradient {
+  background: linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%);
+}
+.section-bg-gradient-reverse {
+  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
+}
+.section-bg-primary {
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  color: #FFFFFF;
+}
+.section-bg-dark {
+  background: #1A1A2E;
+  color: #FFFFFF;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 64px;
+}
+@media (max-width: 768px) {
+  .section-header {
+    margin-bottom: 48px;
+  }
+}
+.section-header .section-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 16px;
+  background: #EFF6FF;
+  color: #4B9BFF;
+  border-radius: 50px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+.section-header .section-title {
+  font-size: 40px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  color: #1A1A2E;
+}
+@media (max-width: 768px) {
+  .section-header .section-title {
+    font-size: 32px;
+  }
+}
+.section-header .section-title .title-highlight {
+  background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.section-header .section-subtitle {
+  font-size: 18px;
+  color: #64748B;
+  line-height: 1.6;
+  max-width: 600px;
+  margin: 0 auto;
+}
+@media (max-width: 768px) {
+  .section-header .section-subtitle {
+    font-size: 16px;
+  }
+}
+
+.content-wrapper {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.content-wrapper .main-content {
+  flex: 1;
+  padding-top: 80px;
+}
+
+.page-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+.inner-content {
+  position: relative;
+  z-index: 1;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 32px;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 16px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: none;
+}
+.btn:hover {
+  transform: translateY(-3px);
+}
+.btn {
+  position: relative;
+  overflow: hidden;
+}
+.btn-sm {
+  padding: 8px 16px;
+  font-size: 14px;
+}
+.btn-md {
+  padding: 16px 24px;
+  font-size: 16px;
+}
+.btn-lg {
+  padding: 16px 32px;
+  font-size: 18px;
+}
+.btn-xl {
+  padding: 24px 40px;
+  font-size: 20px;
+}
+.btn-primary {
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  color: #FFFFFF;
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+}
+.btn-primary:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+.btn-primary:active {
+  transform: translateY(-1px);
+}
+.btn-secondary {
+  background: #FFFFFF;
+  color: #4B9BFF;
+  border: 2px solid #4B9BFF;
+}
+.btn-secondary:hover {
+  background: #EFF6FF;
+  transform: translateY(-3px);
+}
+.btn-accent {
+  background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
+  color: #FFFFFF;
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+}
+.btn-accent:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+.btn-warm {
+  background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
+  color: #FFFFFF;
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+}
+.btn-warm:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+.btn-success {
+  background: #6BCF7F;
+  color: #FFFFFF;
+}
+.btn-success:hover {
+  background: rgb(68.4897959184, 194.5102040816, 93.693877551);
+  transform: translateY(-3px);
+}
+.btn-danger {
+  background: #FF6B6B;
+  color: #FFFFFF;
+}
+.btn-danger:hover {
+  background: #ff3838;
+  transform: translateY(-3px);
+}
+.btn-ghost {
+  background: transparent;
+  color: #4B9BFF;
+  border: 2px solid transparent;
+}
+.btn-ghost:hover {
+  background: rgba(75, 155, 255, 0.1);
+  border-color: #4B9BFF;
+}
+.btn-outline {
+  background: transparent;
+  color: #1A1A2E;
+  border: 2px solid #E2E8F0;
+}
+.btn-outline:hover {
+  border-color: #4B9BFF;
+  color: #4B9BFF;
+  transform: translateY(-3px);
+}
+.btn:disabled, .btn.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.btn.loading {
+  color: transparent;
+  pointer-events: none;
+}
+.btn.loading::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 2px solid #FFFFFF;
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: spin 0.6s linear infinite;
+}
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border-radius: 50%;
+}
+.btn-icon.btn-sm {
+  width: 32px;
+  height: 32px;
+}
+.btn-icon.btn-lg {
+  width: 56px;
+  height: 56px;
+}
+.btn-block {
+  width: 100%;
+  justify-content: center;
+}
+.btn-group {
+  display: inline-flex;
+  gap: -1px;
+}
+.btn-group .btn {
+  border-radius: 0;
+}
+.btn-group .btn:first-child {
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+}
+.btn-group .btn:last-child {
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+
+.fab {
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  border: none;
+  border-radius: 50%;
+  color: #FFFFFF;
+  font-size: 24px;
+  cursor: pointer;
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+  transition: all 0.3s ease;
+  z-index: 300;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.fab:hover {
+  transform: scale(1.1);
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+.fab:hover .fab-label {
+  opacity: 1;
+  transform: translateX(-10px);
+}
+.fab .fab-label {
+  position: absolute;
+  right: 70px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #1A1A2E;
+  color: #FFFFFF;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  white-space: nowrap;
+  opacity: 0;
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+
+.btn-cta-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 32px;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 16px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: none;
+}
+.btn-cta-primary:hover {
+  transform: translateY(-3px);
+}
+.btn-cta-primary {
+  background: #FFFFFF;
+  color: #4B9BFF;
+  padding: 16px 40px;
+  font-size: 18px;
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+}
+.btn-cta-primary:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+.btn-cta-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 32px;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 16px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: none;
+}
+.btn-cta-secondary:hover {
+  transform: translateY(-3px);
+}
+.btn-cta-secondary {
+  background: transparent;
+  color: #FFFFFF;
+  border: 2px solid #FFFFFF;
+  padding: 16px 40px;
+  font-size: 18px;
+}
+.btn-cta-secondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-3px);
+}
+
+.card {
+  background: #FFFFFF;
+  border-radius: 20px;
+  padding: 32px;
+  transition: all 0.3s ease;
+}
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+}
+.card {
+  position: relative;
+  overflow: hidden;
+}
+.card::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(45deg, transparent 30%, rgba(75, 155, 255, 0.03) 50%, transparent 70%);
+  transform: rotate(45deg);
+  transition: all 0.5s ease;
+  opacity: 0;
+}
+.card:hover::before {
+  animation: shimmer 0.6s ease;
+  opacity: 1;
+}
+
+.api-card {
+  background: #FFFFFF;
+  border-radius: 20px;
+  padding: 32px;
+  transition: all 0.3s ease;
+}
+.api-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+}
+.api-card {
+  text-align: center;
+  border: 2px solid #E2E8F0;
+}
+.api-card:hover {
+  border-color: #4B9BFF;
+  transform: translateY(-8px);
+}
+.api-card-popular {
+  border-color: #FFD93D;
+  background: linear-gradient(180deg, rgba(255, 217, 61, 0.05) 0%, #FFFFFF 100%);
+}
+.api-card-new {
+  border-color: #6BCF7F;
+  background: linear-gradient(180deg, rgba(107, 207, 127, 0.05) 0%, #FFFFFF 100%);
+}
+.api-card .api-badge {
+  position: absolute;
+  top: -12px;
+  right: 20px;
+  padding: 4px 16px;
+  background: #FFD93D;
+  color: #1A1A2E;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.api-card .api-badge.new {
+  background: #6BCF7F;
+  color: #FFFFFF;
+}
+.api-card .api-badge.beta {
+  background: #A78BFA;
+  color: #FFFFFF;
+}
+.api-card .api-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 28px;
+  background: #EFF6FF;
+  color: #4B9BFF;
+  border-radius: 16px;
+  transition: all 0.3s ease;
+}
+.api-card:hover .api-icon {
+  transform: scale(1.1);
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  color: #FFFFFF;
+}
+.api-card .api-name {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  color: #1A1A2E;
+}
+.api-card .api-description {
+  color: #64748B;
+  line-height: 1.6;
+  margin-bottom: 24px;
+  font-size: 14px;
+}
+.api-card .api-features {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+.api-card .api-features .feature-tag {
+  padding: 4px 8px;
+  background: #F8FAFC;
+  color: #64748B;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+}
+.api-card .api-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #4B9BFF;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+.api-card .api-link:hover {
+  gap: 8px;
+  color: #2E7FF7;
+}
+
+.experience-card {
+  background: #FFFFFF;
+  border-radius: 20px;
+  padding: 32px;
+  transition: all 0.3s ease;
+}
+.experience-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+}
+.experience-card {
+  text-align: center;
+}
+.experience-card .card-icon {
+  width: 56px;
+  height: 56px;
+  margin: 0 auto 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  color: #FFFFFF;
+  border-radius: 16px;
+}
+.experience-card h3 {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  color: #1A1A2E;
+}
+.experience-card p {
+  color: #64748B;
+  line-height: 1.6;
+  margin-bottom: 24px;
+  font-size: 14px;
+}
+.experience-card .card-metric {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 24px;
+  border-top: 1px solid #E2E8F0;
+}
+.experience-card .card-metric .metric-value {
+  font-size: 24px;
+  font-weight: 800;
+  color: #4B9BFF;
+}
+.experience-card .card-metric .metric-label {
+  font-size: 12px;
+  color: #64748B;
+  font-weight: 500;
+}
+
+.feature-card {
+  background: #FFFFFF;
+  border-radius: 20px;
+  padding: 32px;
+  transition: all 0.3s ease;
+}
+.feature-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+}
+.feature-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+}
+.feature-card .feature-icon {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  color: #FFFFFF;
+  border-radius: 12px;
+  font-size: 24px;
+}
+.feature-card .feature-content {
+  flex: 1;
+}
+.feature-card .feature-content h4 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #1A1A2E;
+}
+.feature-card .feature-content p {
+  color: #64748B;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.testimonial-card {
+  background: #FFFFFF;
+  border-radius: 20px;
+  padding: 32px;
+  transition: all 0.3s ease;
+}
+.testimonial-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+}
+.testimonial-card {
+  position: relative;
+}
+.testimonial-card::before {
+  content: '"';
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  font-size: 60px;
+  color: #4B9BFF;
+  opacity: 0.1;
+  font-weight: 700;
+}
+.testimonial-card .testimonial-content {
+  position: relative;
+  z-index: 1;
+  font-size: 16px;
+  line-height: 1.8;
+  color: #1A1A2E;
+  margin-bottom: 24px;
+  font-style: italic;
+}
+.testimonial-card .testimonial-author {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.testimonial-card .testimonial-author .author-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.testimonial-card .testimonial-author .author-info .author-name {
+  font-weight: 600;
+  color: #1A1A2E;
+  margin-bottom: 2px;
+}
+.testimonial-card .testimonial-author .author-info .author-title {
+  font-size: 14px;
+  color: #64748B;
+}
+
+.pricing-card {
+  background: #FFFFFF;
+  border-radius: 20px;
+  padding: 32px;
+  transition: all 0.3s ease;
+}
+.pricing-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+}
+.pricing-card {
+  text-align: center;
+  position: relative;
+}
+.pricing-card.featured {
+  border: 2px solid #4B9BFF;
+  transform: scale(1.05);
+}
+.pricing-card.featured .pricing-badge {
+  position: absolute;
+  top: -14px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 16px;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  color: #FFFFFF;
+  border-radius: 50px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.pricing-card .pricing-header {
+  padding-bottom: 24px;
+  border-bottom: 1px solid #E2E8F0;
+  margin-bottom: 24px;
+}
+.pricing-card .pricing-header h3 {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 8px;
+  color: #1A1A2E;
+}
+.pricing-card .pricing-header .price {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 4px;
+}
+.pricing-card .pricing-header .price .currency {
+  font-size: 20px;
+  color: #64748B;
+}
+.pricing-card .pricing-header .price .amount {
+  font-size: 48px;
+  font-weight: 800;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.pricing-card .pricing-header .price .period {
+  font-size: 16px;
+  color: #64748B;
+}
+.pricing-card .pricing-features {
+  list-style: none;
+  margin-bottom: 24px;
+}
+.pricing-card .pricing-features li {
+  padding: 8px 0;
+  color: #64748B;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.pricing-card .pricing-features li::before {
+  content: "✓";
+  color: #6BCF7F;
+  font-weight: 700;
+}
+.pricing-card .pricing-features li.disabled {
+  opacity: 0.5;
+}
+.pricing-card .pricing-features li.disabled::before {
+  content: "×";
+  color: #94A3B8;
+}
+.pricing-card .pricing-cta {
+  margin-top: auto;
+}
+
+.form-group {
+  margin-bottom: 24px;
+}
+.form-group label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #1A1A2E;
+  margin-bottom: 8px;
+}
+.form-group label .required {
+  color: #FF6B6B;
+  margin-left: 2px;
+}
+.form-group .form-hint {
+  font-size: 12px;
+  color: #64748B;
+  margin-top: 4px;
+}
+.form-group .form-error {
+  font-size: 12px;
+  color: #FF6B6B;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.form-control {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 16px;
+  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
+  color: #1A1A2E;
+  background: #FFFFFF;
+  border: 2px solid #E2E8F0;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+.form-control::placeholder {
+  color: #94A3B8;
+}
+.form-control:focus {
+  outline: none;
+  border-color: #4B9BFF;
+  box-shadow: 0 0 0 3px rgba(75, 155, 255, 0.1);
+}
+.form-control:disabled {
+  background: #F8FAFC;
+  color: #64748B;
+  cursor: not-allowed;
+}
+.form-control-sm {
+  padding: 8px 16px;
+  font-size: 14px;
+}
+.form-control-lg {
+  padding: 16px 24px;
+  font-size: 18px;
+}
+.form-control.is-valid {
+  border-color: #6BCF7F;
+}
+.form-control.is-valid:focus {
+  box-shadow: 0 0 0 3px rgba(107, 207, 127, 0.1);
+}
+.form-control.is-invalid {
+  border-color: #FF6B6B;
+}
+.form-control.is-invalid:focus {
+  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
+}
+
+textarea.form-control {
+  min-height: 120px;
+  resize: vertical;
+}
+
+select.form-control {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M6 8L0 0h12z' fill='%2364748B'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 16px center;
+  background-size: 12px;
+  padding-right: 40px;
+}
+
+.form-check {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.form-check input[type=checkbox],
+.form-check input[type=radio] {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  cursor: pointer;
+}
+.form-check label {
+  margin-bottom: 0;
+  cursor: pointer;
+  user-select: none;
+}
+.form-check.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.form-check.disabled input,
+.form-check.disabled label {
+  cursor: not-allowed;
+}
+
+.form-switch {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.form-switch .switch {
+  position: relative;
+  width: 48px;
+  height: 24px;
+  background: #E2E8F0;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.form-switch .switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: #FFFFFF;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+.form-switch .switch.active {
+  background: #4B9BFF;
+}
+.form-switch .switch.active::after {
+  transform: translateX(24px);
+}
+
+.input-group {
+  display: flex;
+  width: 100%;
+}
+.input-group .input-group-text {
+  padding: 12px 16px;
+  font-size: 16px;
+  color: #64748B;
+  background: #F8FAFC;
+  border: 2px solid #E2E8F0;
+  border-radius: 8px 0 0 8px;
+  border-right: none;
+}
+.input-group .form-control {
+  border-radius: 0 8px 8px 0;
+}
+.input-group.input-group-append .input-group-text {
+  border-radius: 0 8px 8px 0;
+  border-right: 2px solid #E2E8F0;
+  border-left: none;
+}
+.input-group.input-group-append .form-control {
+  border-radius: 8px 0 0 8px;
+}
+
+.form-inline {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+}
+.form-inline .form-group {
+  margin-bottom: 0;
+}
+@media (max-width: 768px) {
+  .form-inline {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .form-inline .form-group {
+    margin-bottom: 16px;
+  }
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+}
+@media (max-width: 768px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 400;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+}
+.modal-backdrop.show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+}
+.modal.show {
+  opacity: 1;
+  visibility: visible;
+}
+.modal.show .modal-dialog {
+  transform: scale(1);
+}
+
+.modal-dialog {
+  position: relative;
+  background: #FFFFFF;
+  border-radius: 16px;
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+  max-width: 500px;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  transform: scale(0.95);
+  transition: all 0.3s ease;
+}
+.modal-dialog.modal-sm {
+  max-width: 400px;
+}
+.modal-dialog.modal-lg {
+  max-width: 800px;
+}
+.modal-dialog.modal-xl {
+  max-width: 1200px;
+}
+.modal-dialog.modal-fullscreen {
+  max-width: 100%;
+  max-height: 100%;
+  height: 100%;
+  margin: 0;
+  border-radius: 0;
+}
+
+.modal-header {
+  padding: 24px;
+  border-bottom: 1px solid #E2E8F0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.modal-header .modal-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1A1A2E;
+  margin: 0;
+}
+.modal-header .modal-close {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: #64748B;
+  font-size: 24px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.modal-header .modal-close:hover {
+  background: #F8FAFC;
+  color: #1A1A2E;
+}
+
+.modal-body {
+  padding: 24px;
+  flex: 1;
+  overflow-y: auto;
+  color: #1A1A2E;
+  line-height: 1.6;
+}
+
+.modal-footer {
+  padding: 24px;
+  border-top: 1px solid #E2E8F0;
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+}
+.modal-footer.modal-footer-center {
+  justify-content: center;
+}
+.modal-footer.modal-footer-between {
+  justify-content: space-between;
+}
+
+.modal-alert .modal-dialog {
+  max-width: 400px;
+}
+.modal-alert .modal-body {
+  text-align: center;
+  padding: 32px;
+}
+.modal-alert .modal-body .alert-icon {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 32px;
+  border-radius: 50%;
+}
+.modal-alert .modal-body .alert-icon.alert-success {
+  background: rgba(107, 207, 127, 0.1);
+  color: #6BCF7F;
+}
+.modal-alert .modal-body .alert-icon.alert-warning {
+  background: rgba(255, 217, 61, 0.1);
+  color: #FFD93D;
+}
+.modal-alert .modal-body .alert-icon.alert-danger {
+  background: rgba(255, 107, 107, 0.1);
+  color: #FF6B6B;
+}
+.modal-alert .modal-body .alert-icon.alert-info {
+  background: rgba(75, 155, 255, 0.1);
+  color: #4B9BFF;
+}
+.modal-alert .modal-body .alert-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #1A1A2E;
+}
+.modal-alert .modal-body .alert-message {
+  color: #64748B;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 0;
+  font-size: 14px;
+}
+.breadcrumb .breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #64748B;
+}
+.breadcrumb .breadcrumb-item a {
+  color: #64748B;
+  transition: all 0.3s ease;
+}
+.breadcrumb .breadcrumb-item a:hover {
+  color: #4B9BFF;
+}
+.breadcrumb .breadcrumb-item.active {
+  color: #1A1A2E;
+  font-weight: 500;
+}
+.breadcrumb .breadcrumb-item:not(:last-child)::after {
+  content: "/";
+  color: #94A3B8;
+  margin-left: 8px;
+}
+
+.nav-tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 2px solid #E2E8F0;
+  margin-bottom: 32px;
+}
+.nav-tabs .nav-item {
+  position: relative;
+}
+.nav-tabs .nav-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 24px;
+  color: #64748B;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  transition: all 0.3s ease;
+}
+.nav-tabs .nav-link:hover {
+  color: #1A1A2E;
+}
+.nav-tabs .nav-link.active {
+  color: #4B9BFF;
+  border-bottom-color: #4B9BFF;
+}
+.nav-tabs .nav-link .badge {
+  padding: 2px 6px;
+  background: #F8FAFC;
+  color: #64748B;
+  border-radius: 50px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.nav-pills {
+  display: flex;
+  gap: 8px;
+  padding: 4px;
+  background: #F8FAFC;
+  border-radius: 12px;
+}
+.nav-pills .nav-link {
+  padding: 8px 24px;
+  color: #64748B;
+  font-weight: 500;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+.nav-pills .nav-link:hover {
+  color: #1A1A2E;
+  background: rgba(255, 255, 255, 0.5);
+}
+.nav-pills .nav-link.active {
+  background: #FFFFFF;
+  color: #4B9BFF;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.sidebar-nav .nav-section {
+  margin-bottom: 32px;
+}
+.sidebar-nav .nav-section .nav-title {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #64748B;
+  padding: 8px 16px;
+  letter-spacing: 0.05em;
+}
+.sidebar-nav .nav-menu {
+  list-style: none;
+}
+.sidebar-nav .nav-menu .nav-item {
+  margin-bottom: 4px;
+}
+.sidebar-nav .nav-menu .nav-link {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 16px;
+  color: #1A1A2E;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+.sidebar-nav .nav-menu .nav-link .nav-icon {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  color: #64748B;
+}
+.sidebar-nav .nav-menu .nav-link:hover {
+  background: #F8FAFC;
+  color: #4B9BFF;
+}
+.sidebar-nav .nav-menu .nav-link:hover .nav-icon {
+  color: #4B9BFF;
+}
+.sidebar-nav .nav-menu .nav-link.active {
+  background: #EFF6FF;
+  color: #4B9BFF;
+  font-weight: 500;
+}
+.sidebar-nav .nav-menu .nav-link.active .nav-icon {
+  color: #4B9BFF;
+}
+.sidebar-nav .nav-menu .nav-submenu {
+  margin-left: 40px;
+  margin-top: 4px;
+  list-style: none;
+}
+.sidebar-nav .nav-menu .nav-submenu .nav-link {
+  font-size: 14px;
+  padding: 4px 16px;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.pagination .page-item.disabled .page-link {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.pagination .page-item.active .page-link {
+  background: #4B9BFF;
+  color: #FFFFFF;
+  border-color: #4B9BFF;
+}
+.pagination .page-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 8px;
+  background: #FFFFFF;
+  border: 1px solid #E2E8F0;
+  border-radius: 8px;
+  color: #1A1A2E;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+.pagination .page-link:hover {
+  background: #F8FAFC;
+  border-color: #4B9BFF;
+  color: #4B9BFF;
+}
+.pagination .page-link.page-prev, .pagination .page-link.page-next {
+  font-size: 18px;
+}
+.pagination .page-dots {
+  padding: 0 8px;
+  color: #64748B;
+}
+
+.partners {
+  padding: 80px 0;
+  background: #FFFFFF;
+}
+
+.final-cta {
+  position: relative;
+  padding: 150px 0;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  overflow: hidden;
+}
+
+.hero-section {
+  position: relative;
+  padding: 160px 0 100px;
+  background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);
+  overflow: hidden;
+}
+@media (max-width: 768px) {
+  .hero-section {
+    padding: 120px 0 60px;
+  }
+}
+
+.hero-patterns {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+.hero-patterns .pattern-circle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.1;
+}
+.hero-patterns .pattern-circle.pattern-1 {
+  width: 400px;
+  height: 400px;
+  background: #00D4FF;
+  border-radius: 50%;
+  opacity: 0.1;
+  position: absolute;
+  top: -200px;
+  right: -100px;
+  animation: float 20s ease-in-out infinite;
+}
+.hero-patterns .pattern-circle.pattern-2 {
+  width: 300px;
+  height: 300px;
+  background: #FFD93D;
+  border-radius: 50%;
+  opacity: 0.1;
+  position: absolute;
+  bottom: -150px;
+  left: -50px;
+  animation: float 15s ease-in-out infinite reverse;
+}
+.hero-patterns .pattern-dots {
+  position: absolute;
+  top: 50%;
+  left: 10%;
+  width: 100px;
+  height: 100px;
+  background-image: radial-gradient(circle, #A78BFA 2px, transparent 2px);
+  background-size: 20px 20px;
+  opacity: 0.3;
+}
+
+.hero-content {
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 24px;
+  background: #FFFFFF;
+  border: 2px solid #FFD93D;
+  border-radius: 50px;
+  margin-bottom: 24px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #1A1A2E;
+  animation: slideInDown 0.6s ease-out;
+}
+.hero-badge .badge-icon {
+  font-size: 20px;
+  animation: bounce 2s infinite;
+}
+
+.main-headline {
+  font-size: 56px;
+  font-weight: 800;
+  line-height: 1.2;
+  margin-bottom: 24px;
+  color: #1A1A2E;
+  animation: slideInUp 0.8s ease-out;
+}
+@media (max-width: 768px) {
+  .main-headline {
+    font-size: 40px;
+  }
+}
+@media (max-width: 480px) {
+  .main-headline {
+    font-size: 32px;
+  }
+}
+.main-headline .headline-highlight {
+  background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.sub-headline {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 1.6;
+  margin-bottom: 40px;
+  color: #64748B;
+  animation: slideInUp 0.9s ease-out;
+}
+@media (max-width: 768px) {
+  .sub-headline {
+    font-size: 16px;
+  }
+}
+
+.hero-buttons {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  margin-bottom: 64px;
+  animation: slideInUp 1s ease-out;
+}
+@media (max-width: 768px) {
+  .hero-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+.hero-buttons .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 32px;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 16px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: none;
+}
+.hero-buttons .btn:hover {
+  transform: translateY(-3px);
+}
+.hero-buttons .btn.btn-primary {
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  color: #FFFFFF;
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+}
+.hero-buttons .btn.btn-primary:hover {
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+.hero-buttons .btn.btn-secondary {
+  background: #FFFFFF;
+  color: #4B9BFF;
+  border: 2px solid #4B9BFF;
+}
+.hero-buttons .btn.btn-secondary:hover {
+  background: #EFF6FF;
+}
+@media (max-width: 480px) {
+  .hero-buttons .btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+.hero-stats {
+  display: flex;
+  justify-content: center;
+  gap: 64px;
+  animation: fadeIn 1.2s ease-out;
+}
+@media (max-width: 768px) {
+  .hero-stats {
+    flex-direction: column;
+    gap: 24px;
+  }
+}
+.hero-stats .stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.hero-stats .stat-item .stat-number {
+  font-size: 40px;
+  font-weight: 800;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.hero-stats .stat-item .stat-label {
+  font-size: 14px;
+  color: #64748B;
+  font-weight: 500;
+}
+
+.hero-image {
+  position: relative;
+  margin-top: 64px;
+  text-align: center;
+}
+.hero-image img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 16px;
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+.hero-image .hero-decoration {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+.hero-image .hero-decoration::before, .hero-image .hero-decoration::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+}
+.hero-image .hero-decoration::before {
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
+  top: -30px;
+  right: 10%;
+  animation: bounce 2s infinite;
+}
+.hero-image .hero-decoration::after {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
+  bottom: -20px;
+  left: 15%;
+  animation: bounce 2s infinite 0.5s;
+}
+
+.api-search-section {
+  padding: 64px 0;
+  background: linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%);
+  position: relative;
+}
+.api-search-section::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(75, 155, 255, 0.03) 0%, transparent 70%);
+  pointer-events: none;
+}
+.api-search-section .search-container {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+}
+.api-search-section .search-form {
+  margin-bottom: 32px;
+  animation: slideInUp 0.8s ease-out;
+}
+.api-search-section .search-wrapper {
+  display: flex;
+  gap: 16px;
+  padding: 0 24px;
+}
+@media (max-width: 768px) {
+  .api-search-section .search-wrapper {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+.api-search-section .search-input {
+  flex: 1;
+  padding: 16px 32px;
+  font-size: 16px;
+  border: 2px solid #E2E8F0;
+  border-radius: 50px;
+  background: #FFFFFF;
+  transition: all 0.3s ease;
+  outline: none;
+}
+.api-search-section .search-input::placeholder {
+  color: #94A3B8;
+}
+.api-search-section .search-input:focus {
+  border-color: #4B9BFF;
+  box-shadow: 0 0 0 4px rgba(75, 155, 255, 0.1);
+}
+@media (max-width: 768px) {
+  .api-search-section .search-input {
+    width: 100%;
+    padding: 16px 24px;
+  }
+}
+.api-search-section .search-button {
+  padding: 16px 40px;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  color: #FFFFFF;
+  border: none;
+  border-radius: 50px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+  white-space: nowrap;
+}
+.api-search-section .search-button i {
+  font-size: 20px;
+}
+.api-search-section .search-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+  background: linear-gradient(135deg, rgb(49.5, 140.8333333333, 255) 0%, rgb(21.4400921659, 111.9585253456, 246.0599078341) 100%);
+}
+.api-search-section .search-button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+@media (max-width: 768px) {
+  .api-search-section .search-button {
+    width: 100%;
+    justify-content: center;
+    padding: 16px 32px;
+  }
+}
+.api-search-section .hashtag-suggestions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 0 24px;
+  animation: fadeIn 0.8s ease-out 0.2s both;
+}
+@media (max-width: 768px) {
+  .api-search-section .hashtag-suggestions {
+    gap: 8px;
+    justify-content: flex-start;
+  }
+}
+.api-search-section .hashtag-label {
+  font-size: 14px;
+  color: #64748B;
+  font-weight: 500;
+}
+@media (max-width: 768px) {
+  .api-search-section .hashtag-label {
+    width: 100%;
+    margin-bottom: 4px;
+  }
+}
+.api-search-section .hashtag {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 24px;
+  background: #FFFFFF;
+  border: 1px solid #E2E8F0;
+  border-radius: 50px;
+  font-size: 14px;
+  color: #1A1A2E;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+.api-search-section .hashtag::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  transition: left 0.3s ease;
+  z-index: 0;
+}
+.api-search-section .hashtag:hover {
+  border-color: #4B9BFF;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  color: #FFFFFF;
+  position: relative;
+  z-index: 1;
+}
+.api-search-section .hashtag:hover::before {
+  left: 0;
+}
+@media (max-width: 768px) {
+  .api-search-section .hashtag {
+    padding: 4px 16px;
+    font-size: 12px;
+  }
+}
+
+.api-showcase {
+  padding: 100px 0;
+  background: #FFFFFF;
+}
+
+.info-section {
+  padding: 100px 0;
+  background: #FFFFFF;
+  position: relative;
+}
+.info-section::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent 0%, #E2E8F0 20%, #E2E8F0 80%, transparent 100%);
+}
+.info-section .info-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+}
+.info-section .image-container {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.info-section .image-placeholder {
+  position: relative;
+  width: 100%;
+  height: 300px;
+  background: linear-gradient(135deg, #EFF6FF 0%, rgba(75, 155, 255, 0.1) 100%);
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+  overflow: hidden;
+}
+.info-section .image-placeholder::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle at center, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
+  animation: rotate 20s linear infinite;
+}
+.info-section .image-placeholder::after {
+  content: "";
+  position: absolute;
+  bottom: -20px;
+  right: -20px;
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
+  border-radius: 50%;
+  opacity: 0.3;
+  filter: blur(40px);
+}
+.info-section .image-placeholder i {
+  font-size: 64px;
+  color: #4B9BFF;
+  z-index: 1;
+}
+.info-section .image-placeholder span {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1A1A2E;
+  z-index: 1;
+}
+@media (max-width: 768px) {
+  .info-section .image-placeholder {
+    height: 200px;
+  }
+  .info-section .image-placeholder i {
+    font-size: 48px;
+  }
+  .info-section .image-placeholder span {
+    font-size: 20px;
+  }
+}
+.info-section .info-content {
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+}
+.info-section .highlight-text {
+  font-size: 24px;
+  line-height: 1.8;
+  color: #1A1A2E;
+  margin-bottom: 48px;
+  font-weight: 500;
+}
+.info-section .highlight-text .text-accent {
+  color: #4B9BFF;
+  font-weight: 600;
+}
+@media (max-width: 1024px) {
+  .info-section .highlight-text {
+    font-size: 20px;
+  }
+}
+@media (max-width: 768px) {
+  .info-section .highlight-text {
+    font-size: 16px;
+    padding: 0 24px;
+    margin-bottom: 40px;
+  }
+}
+.info-section .action-buttons {
+  display: flex;
+  gap: 24px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+@media (max-width: 768px) {
+  .info-section .action-buttons {
+    flex-direction: column;
+    align-items: center;
+    padding: 0 24px;
+  }
+}
+.info-section .action-btn {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 32px;
+  background: #FFFFFF;
+  border: 2px solid #E2E8F0;
+  border-radius: 50px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  min-width: 280px;
+  position: relative;
+  overflow: hidden;
+}
+.info-section .action-btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  transition: width 0.3s ease;
+  z-index: 0;
+}
+.info-section .action-btn:hover {
+  border-color: #4B9BFF;
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+}
+.info-section .action-btn:hover::before {
+  width: 100%;
+}
+.info-section .action-btn:hover .btn-number {
+  background: #FFFFFF;
+  color: #4B9BFF;
+}
+.info-section .action-btn:hover .btn-text,
+.info-section .action-btn:hover i {
+  color: #FFFFFF;
+}
+.info-section .action-btn .btn-number {
+  position: relative;
+  z-index: 1;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  color: #FFFFFF;
+  border-radius: 50%;
+  font-weight: 700;
+  font-size: 16px;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+.info-section .action-btn .btn-text {
+  position: relative;
+  z-index: 1;
+  font-size: 16px;
+  font-weight: 500;
+  color: #1A1A2E;
+  transition: color 0.3s ease;
+}
+.info-section .action-btn i {
+  position: relative;
+  z-index: 1;
+  font-size: 14px;
+  color: #94A3B8;
+  margin-left: auto;
+  transition: all 0.3s ease;
+}
+@media (max-width: 768px) {
+  .info-section .action-btn {
+    min-width: 100%;
+    justify-content: flex-start;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.support-center {
+  padding: 100px 0;
+  background: #F8FAFC;
+}
+.support-center .section-header {
+  text-align: center;
+  margin-bottom: 64px;
+}
+.support-center .section-header .section-title {
+  font-size: 48px;
+  font-weight: 700;
+  color: #1A1A2E;
+  margin-bottom: 16px;
+}
+@media (max-width: 768px) {
+  .support-center .section-header .section-title {
+    font-size: 40px;
+  }
+}
+.support-center .section-header .section-title .title-highlight {
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.support-center .section-header .section-subtitle {
+  font-size: 20px;
+  color: #64748B;
+  line-height: 1.8;
+}
+@media (max-width: 768px) {
+  .support-center .section-header .section-subtitle {
+    font-size: 16px;
+  }
+}
+.support-center .support-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+@media (max-width: 1024px) {
+  .support-center .support-grid {
+    grid-template-columns: 1fr;
+    gap: 24px;
+    max-width: 500px;
+  }
+}
+@media (max-width: 768px) {
+  .support-center .support-grid {
+    gap: 16px;
+    padding: 0 16px;
+  }
+}
+.support-center .support-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40px 32px;
+  background: #FFFFFF;
+  border-radius: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+.support-center .support-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+.support-center .support-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+.support-center .support-card:hover::before {
+  transform: scaleX(1);
+}
+.support-center .support-card:hover .card-icon {
+  transform: scale(1.1) rotate(5deg);
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  color: #FFFFFF;
+}
+.support-center .support-card:hover .card-arrow {
+  transform: translateX(5px);
+  color: #4B9BFF;
+}
+.support-center .support-card .card-icon {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #EFF6FF;
+  border-radius: 50px;
+  margin-bottom: 24px;
+  transition: all 0.3s ease;
+}
+.support-center .support-card .card-icon i {
+  font-size: 36px;
+  color: #4B9BFF;
+}
+.support-center .support-card h3 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1A1A2E;
+  margin-bottom: 8px;
+  text-align: center;
+}
+.support-center .support-card p {
+  font-size: 16px;
+  color: #64748B;
+  text-align: center;
+  line-height: 1.8;
+  margin-bottom: 24px;
+}
+.support-center .support-card .card-arrow {
+  margin-top: auto;
+  color: #94A3B8;
+  transition: all 0.3s ease;
+}
+.support-center .support-card .card-arrow i {
+  font-size: 20px;
+}
+@media (max-width: 768px) {
+  .support-center .support-card {
+    padding: 32px 24px;
+  }
+  .support-center .support-card .card-icon {
+    width: 70px;
+    height: 70px;
+  }
+  .support-center .support-card .card-icon i {
+    font-size: 30px;
+  }
+  .support-center .support-card h3 {
+    font-size: 20px;
+  }
+  .support-center .support-card p {
+    font-size: 14px;
+  }
+}
+
+.api-stats-section {
+  padding: 100px 0;
+  background: linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%);
+  position: relative;
+  overflow: hidden;
+}
+.api-stats-section::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: -100px;
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(circle, #00D4FF 0%, transparent 70%);
+  opacity: 0.1;
+  border-radius: 50%;
+  transform: translateY(-50%);
+}
+.api-stats-section::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: -100px;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, #4B9BFF 0%, transparent 70%);
+  opacity: 0.08;
+  border-radius: 50%;
+  transform: translateY(-50%);
+}
+.api-stats-section .section-header {
+  text-align: center;
+  margin-bottom: 80px;
+  position: relative;
+  z-index: 1;
+}
+.api-stats-section .section-header .section-title {
+  font-size: 40px;
+  font-weight: 700;
+  color: #1A1A2E;
+  line-height: 1.8;
+  margin-bottom: 40px;
+}
+@media (max-width: 1024px) {
+  .api-stats-section .section-header .section-title {
+    font-size: 32px;
+  }
+}
+@media (max-width: 768px) {
+  .api-stats-section .section-header .section-title {
+    font-size: 24px;
+    padding: 0 24px;
+  }
+}
+.api-stats-section .section-header .section-title .title-highlight {
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: 800;
+}
+.api-stats-section .stats-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
+  max-width: 1100px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+@media (max-width: 1024px) {
+  .api-stats-section .stats-cards {
+    grid-template-columns: 1fr;
+    gap: 32px;
+    max-width: 400px;
+  }
+}
+@media (max-width: 768px) {
+  .api-stats-section .stats-cards {
+    padding: 0 24px;
+  }
+}
+.api-stats-section .stat-card {
+  background: #FFFFFF;
+  border-radius: 16px;
+  padding: 40px;
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+  border: 1px solid rgba(75, 155, 255, 0.1);
+  position: relative;
+  overflow: hidden;
+  transition: all 0.4s ease;
+}
+.api-stats-section .stat-card::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  border-radius: 16px;
+  opacity: 0;
+  z-index: -1;
+  transition: opacity 0.4s ease;
+}
+.api-stats-section .stat-card:hover {
+  transform: translateY(-10px) scale(1.02);
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+.api-stats-section .stat-card:hover::before {
+  opacity: 1;
+}
+.api-stats-section .stat-card:hover .stat-icon {
+  transform: rotate(360deg) scale(1.1);
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+}
+.api-stats-section .stat-card:hover .stat-icon i {
+  color: #FFFFFF;
+}
+.api-stats-section .stat-card:hover .stat-number {
+  background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.api-stats-section .stat-card .stat-icon {
+  width: 70px;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #EFF6FF;
+  border-radius: 50px;
+  margin-bottom: 24px;
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.api-stats-section .stat-card .stat-icon i {
+  font-size: 32px;
+  color: #4B9BFF;
+  transition: color 0.3s ease;
+}
+.api-stats-section .stat-card .stat-content .stat-number {
+  font-size: 48px;
+  font-weight: 800;
+  color: #1A1A2E;
+  margin-bottom: 8px;
+  transition: all 0.3s ease;
+  display: block;
+}
+@media (max-width: 768px) {
+  .api-stats-section .stat-card .stat-content .stat-number {
+    font-size: 40px;
+  }
+}
+.api-stats-section .stat-card .stat-content .stat-number[data-formatted]::after {
+  content: attr(data-formatted);
+}
+.api-stats-section .stat-card .stat-content .stat-label {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1A1A2E;
+  margin-bottom: 4px;
+}
+.api-stats-section .stat-card .stat-content .stat-description {
+  font-size: 14px;
+  color: #64748B;
+  line-height: 1.6;
+}
+.api-stats-section .stat-card:nth-child(1) .stat-icon {
+  background: rgba(0, 212, 255, 0.1);
+}
+.api-stats-section .stat-card:nth-child(1) .stat-icon i {
+  color: #00D4FF;
+}
+.api-stats-section .stat-card:nth-child(1):hover .stat-icon {
+  background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
+}
+.api-stats-section .stat-card:nth-child(2) .stat-icon {
+  background: rgba(107, 207, 127, 0.1);
+}
+.api-stats-section .stat-card:nth-child(2) .stat-icon i {
+  color: #6BCF7F;
+}
+.api-stats-section .stat-card:nth-child(2):hover .stat-icon {
+  background: linear-gradient(135deg, #6BCF7F 0%, rgb(68.4897959184, 194.5102040816, 93.693877551) 100%);
+}
+.api-stats-section .stat-card:nth-child(3) .stat-icon {
+  background: rgba(167, 139, 250, 0.1);
+}
+.api-stats-section .stat-card:nth-child(3) .stat-icon i {
+  color: #A78BFA;
+}
+.api-stats-section .stat-card:nth-child(3):hover .stat-icon {
+  background: linear-gradient(135deg, #A78BFA 0%, rgb(129.9090909091, 90.1074380165, 247.8925619835) 100%);
+}
+@media (max-width: 768px) {
+  .api-stats-section .stat-card {
+    padding: 32px;
+  }
+  .api-stats-section .stat-card .stat-icon {
+    width: 60px;
+    height: 60px;
+  }
+  .api-stats-section .stat-card .stat-icon i {
+    font-size: 28px;
+  }
+}
+
+@keyframes countUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.stat-number {
+  animation: countUp 0.6s ease-out forwards;
+}
+
+.login-page {
+  min-height: calc(100vh - 140px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--light-bg) 0%, var(--gray-bg) 100%);
+  padding: 40px 20px;
+  position: relative;
+  overflow: hidden;
+}
+.login-page::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  right: -20%;
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
+  opacity: 0.1;
+  border-radius: 50%;
+}
+.login-page::after {
+  content: "";
+  position: absolute;
+  bottom: -30%;
+  left: -10%;
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, var(--primary-blue) 0%, transparent 70%);
+  opacity: 0.1;
+  border-radius: 50%;
+}
+
+.login-container {
+  width: 100%;
+  max-width: 480px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+.login-card {
+  background: var(--white);
+  border-radius: 24px;
+  box-shadow: var(--shadow-xl);
+  padding: 48px 40px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+}
+@media (max-width: 480px) {
+  .login-card {
+    padding: 32px 24px;
+    border-radius: 16px;
+  }
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+.login-header .login-logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.login-header .login-logo img {
+  height: 48px;
+  width: auto;
+}
+.login-header .login-logo .logo-text {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--primary-blue);
+  padding: 6px 16px;
+  background: var(--light-bg);
+  border-radius: 24px;
+}
+.login-header .login-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-dark);
+  margin-bottom: 8px;
+}
+.login-header .login-subtitle {
+  font-size: 15px;
+  color: var(--text-gray);
+}
+
+.login-form {
+  margin-bottom: 24px;
+}
+.login-form .form-group {
+  margin-bottom: 20px;
+}
+.login-form .form-group:last-child {
+  margin-bottom: 0;
+}
+.login-form .form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-dark);
+  margin-bottom: 8px;
+}
+.login-form .form-input {
+  width: 100%;
+  padding: 14px 16px;
+  font-size: 15px;
+  border: 2px solid var(--border-gray);
+  border-radius: 12px;
+  background: var(--white);
+  transition: all 0.3s ease;
+  outline: none;
+}
+.login-form .form-input::placeholder {
+  color: var(--text-light);
+}
+.login-form .form-input:focus {
+  border-color: var(--primary-blue);
+  box-shadow: 0 0 0 4px rgba(75, 155, 255, 0.1);
+}
+.login-form .form-input.error {
+  border-color: var(--accent-orange);
+}
+.login-form .form-input.error:focus {
+  box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
+}
+.login-form .form-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+.login-form .form-checkbox input[type=checkbox] {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--primary-blue);
+  cursor: pointer;
+}
+.login-form .form-checkbox label {
+  font-size: 14px;
+  color: var(--text-gray);
+  cursor: pointer;
+  user-select: none;
+}
+
+.login-button {
+  width: 100%;
+  padding: 16px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--white);
+  background: var(--gradient-primary);
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow-md);
+}
+.login-button:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.login-button:active {
+  transform: translateY(0);
+}
+.login-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.login-links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 32px;
+  padding-top: 32px;
+  border-top: 1px solid var(--border-gray);
+  flex-wrap: wrap;
+}
+@media (max-width: 480px) {
+  .login-links {
+    gap: 12px;
+    margin-top: 24px;
+    padding-top: 24px;
+  }
+}
+.login-links a {
+  font-size: 14px;
+  color: var(--text-gray);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.login-links a:hover {
+  color: var(--primary-blue);
+}
+.login-links a i {
+  font-size: 16px;
+}
+.login-links .link-separator {
+  color: var(--border-gray);
+  font-size: 14px;
+}
+
+.login-alert {
+  margin-bottom: 20px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.login-alert.alert-error {
+  background: rgba(255, 107, 107, 0.1);
+  color: var(--accent-orange);
+  border: 1px solid rgba(255, 107, 107, 0.2);
+}
+.login-alert.alert-success {
+  background: rgba(107, 207, 127, 0.1);
+  color: var(--accent-green);
+  border: 1px solid rgba(107, 207, 127, 0.2);
+}
+.login-alert.alert-info {
+  background: rgba(75, 155, 255, 0.1);
+  color: var(--primary-blue);
+  border: 1px solid rgba(75, 155, 255, 0.2);
+}
+.login-alert i {
+  font-size: 18px;
+}
+
+.login-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 24px;
+  z-index: 10;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+.login-loading.active {
+  opacity: 1;
+  pointer-events: all;
+}
+.login-loading .spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--border-gray);
+  border-top-color: var(--primary-blue);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+@media (max-width: 768px) {
+  .container {
+    padding: 0 16px;
+  }
+}
+
+.d-none {
+  display: none !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+.d-grid {
+  display: grid !important;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.gap-xs {
+  gap: 4px;
+}
+
+.gap-sm {
+  gap: 8px;
+}
+
+.gap-md {
+  gap: 16px;
+}
+
+.gap-lg {
+  gap: 24px;
+}
+
+.gap-xl {
+  gap: 32px;
+}
+
+.m-0 {
+  margin: 0 !important;
+}
+
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.ml-0 {
+  margin-left: 0 !important;
+}
+
+.mr-0 {
+  margin-right: 0 !important;
+}
+
+.mx-0 {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.m-xs {
+  margin: 4px !important;
+}
+
+.mt-xs {
+  margin-top: 4px !important;
+}
+
+.mb-xs {
+  margin-bottom: 4px !important;
+}
+
+.ml-xs {
+  margin-left: 4px !important;
+}
+
+.mr-xs {
+  margin-right: 4px !important;
+}
+
+.mx-xs {
+  margin-left: 4px !important;
+  margin-right: 4px !important;
+}
+
+.my-xs {
+  margin-top: 4px !important;
+  margin-bottom: 4px !important;
+}
+
+.m-sm {
+  margin: 8px !important;
+}
+
+.mt-sm {
+  margin-top: 8px !important;
+}
+
+.mb-sm {
+  margin-bottom: 8px !important;
+}
+
+.ml-sm {
+  margin-left: 8px !important;
+}
+
+.mr-sm {
+  margin-right: 8px !important;
+}
+
+.mx-sm {
+  margin-left: 8px !important;
+  margin-right: 8px !important;
+}
+
+.my-sm {
+  margin-top: 8px !important;
+  margin-bottom: 8px !important;
+}
+
+.m-md {
+  margin: 16px !important;
+}
+
+.mt-md {
+  margin-top: 16px !important;
+}
+
+.mb-md {
+  margin-bottom: 16px !important;
+}
+
+.ml-md {
+  margin-left: 16px !important;
+}
+
+.mr-md {
+  margin-right: 16px !important;
+}
+
+.mx-md {
+  margin-left: 16px !important;
+  margin-right: 16px !important;
+}
+
+.my-md {
+  margin-top: 16px !important;
+  margin-bottom: 16px !important;
+}
+
+.m-lg {
+  margin: 24px !important;
+}
+
+.mt-lg {
+  margin-top: 24px !important;
+}
+
+.mb-lg {
+  margin-bottom: 24px !important;
+}
+
+.ml-lg {
+  margin-left: 24px !important;
+}
+
+.mr-lg {
+  margin-right: 24px !important;
+}
+
+.mx-lg {
+  margin-left: 24px !important;
+  margin-right: 24px !important;
+}
+
+.my-lg {
+  margin-top: 24px !important;
+  margin-bottom: 24px !important;
+}
+
+.m-xl {
+  margin: 32px !important;
+}
+
+.mt-xl {
+  margin-top: 32px !important;
+}
+
+.mb-xl {
+  margin-bottom: 32px !important;
+}
+
+.ml-xl {
+  margin-left: 32px !important;
+}
+
+.mr-xl {
+  margin-right: 32px !important;
+}
+
+.mx-xl {
+  margin-left: 32px !important;
+  margin-right: 32px !important;
+}
+
+.my-xl {
+  margin-top: 32px !important;
+  margin-bottom: 32px !important;
+}
+
+.m-2xl {
+  margin: 40px !important;
+}
+
+.mt-2xl {
+  margin-top: 40px !important;
+}
+
+.mb-2xl {
+  margin-bottom: 40px !important;
+}
+
+.ml-2xl {
+  margin-left: 40px !important;
+}
+
+.mr-2xl {
+  margin-right: 40px !important;
+}
+
+.mx-2xl {
+  margin-left: 40px !important;
+  margin-right: 40px !important;
+}
+
+.my-2xl {
+  margin-top: 40px !important;
+  margin-bottom: 40px !important;
+}
+
+.m-3xl {
+  margin: 48px !important;
+}
+
+.mt-3xl {
+  margin-top: 48px !important;
+}
+
+.mb-3xl {
+  margin-bottom: 48px !important;
+}
+
+.ml-3xl {
+  margin-left: 48px !important;
+}
+
+.mr-3xl {
+  margin-right: 48px !important;
+}
+
+.mx-3xl {
+  margin-left: 48px !important;
+  margin-right: 48px !important;
+}
+
+.my-3xl {
+  margin-top: 48px !important;
+  margin-bottom: 48px !important;
+}
+
+.m-4xl {
+  margin: 64px !important;
+}
+
+.mt-4xl {
+  margin-top: 64px !important;
+}
+
+.mb-4xl {
+  margin-bottom: 64px !important;
+}
+
+.ml-4xl {
+  margin-left: 64px !important;
+}
+
+.mr-4xl {
+  margin-right: 64px !important;
+}
+
+.mx-4xl {
+  margin-left: 64px !important;
+  margin-right: 64px !important;
+}
+
+.my-4xl {
+  margin-top: 64px !important;
+  margin-bottom: 64px !important;
+}
+
+.m-auto {
+  margin: auto !important;
+}
+
+.mt-auto {
+  margin-top: auto !important;
+}
+
+.mb-auto {
+  margin-bottom: auto !important;
+}
+
+.ml-auto {
+  margin-left: auto !important;
+}
+
+.mr-auto {
+  margin-right: auto !important;
+}
+
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+.p-0 {
+  padding: 0 !important;
+}
+
+.pt-0 {
+  padding-top: 0 !important;
+}
+
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+
+.pl-0 {
+  padding-left: 0 !important;
+}
+
+.pr-0 {
+  padding-right: 0 !important;
+}
+
+.px-0 {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.p-xs {
+  padding: 4px !important;
+}
+
+.pt-xs {
+  padding-top: 4px !important;
+}
+
+.pb-xs {
+  padding-bottom: 4px !important;
+}
+
+.pl-xs {
+  padding-left: 4px !important;
+}
+
+.pr-xs {
+  padding-right: 4px !important;
+}
+
+.px-xs {
+  padding-left: 4px !important;
+  padding-right: 4px !important;
+}
+
+.py-xs {
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+}
+
+.p-sm {
+  padding: 8px !important;
+}
+
+.pt-sm {
+  padding-top: 8px !important;
+}
+
+.pb-sm {
+  padding-bottom: 8px !important;
+}
+
+.pl-sm {
+  padding-left: 8px !important;
+}
+
+.pr-sm {
+  padding-right: 8px !important;
+}
+
+.px-sm {
+  padding-left: 8px !important;
+  padding-right: 8px !important;
+}
+
+.py-sm {
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+}
+
+.p-md {
+  padding: 16px !important;
+}
+
+.pt-md {
+  padding-top: 16px !important;
+}
+
+.pb-md {
+  padding-bottom: 16px !important;
+}
+
+.pl-md {
+  padding-left: 16px !important;
+}
+
+.pr-md {
+  padding-right: 16px !important;
+}
+
+.px-md {
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+}
+
+.py-md {
+  padding-top: 16px !important;
+  padding-bottom: 16px !important;
+}
+
+.p-lg {
+  padding: 24px !important;
+}
+
+.pt-lg {
+  padding-top: 24px !important;
+}
+
+.pb-lg {
+  padding-bottom: 24px !important;
+}
+
+.pl-lg {
+  padding-left: 24px !important;
+}
+
+.pr-lg {
+  padding-right: 24px !important;
+}
+
+.px-lg {
+  padding-left: 24px !important;
+  padding-right: 24px !important;
+}
+
+.py-lg {
+  padding-top: 24px !important;
+  padding-bottom: 24px !important;
+}
+
+.p-xl {
+  padding: 32px !important;
+}
+
+.pt-xl {
+  padding-top: 32px !important;
+}
+
+.pb-xl {
+  padding-bottom: 32px !important;
+}
+
+.pl-xl {
+  padding-left: 32px !important;
+}
+
+.pr-xl {
+  padding-right: 32px !important;
+}
+
+.px-xl {
+  padding-left: 32px !important;
+  padding-right: 32px !important;
+}
+
+.py-xl {
+  padding-top: 32px !important;
+  padding-bottom: 32px !important;
+}
+
+.p-2xl {
+  padding: 40px !important;
+}
+
+.pt-2xl {
+  padding-top: 40px !important;
+}
+
+.pb-2xl {
+  padding-bottom: 40px !important;
+}
+
+.pl-2xl {
+  padding-left: 40px !important;
+}
+
+.pr-2xl {
+  padding-right: 40px !important;
+}
+
+.px-2xl {
+  padding-left: 40px !important;
+  padding-right: 40px !important;
+}
+
+.py-2xl {
+  padding-top: 40px !important;
+  padding-bottom: 40px !important;
+}
+
+.p-3xl {
+  padding: 48px !important;
+}
+
+.pt-3xl {
+  padding-top: 48px !important;
+}
+
+.pb-3xl {
+  padding-bottom: 48px !important;
+}
+
+.pl-3xl {
+  padding-left: 48px !important;
+}
+
+.pr-3xl {
+  padding-right: 48px !important;
+}
+
+.px-3xl {
+  padding-left: 48px !important;
+  padding-right: 48px !important;
+}
+
+.py-3xl {
+  padding-top: 48px !important;
+  padding-bottom: 48px !important;
+}
+
+.p-4xl {
+  padding: 64px !important;
+}
+
+.pt-4xl {
+  padding-top: 64px !important;
+}
+
+.pb-4xl {
+  padding-bottom: 64px !important;
+}
+
+.pl-4xl {
+  padding-left: 64px !important;
+}
+
+.pr-4xl {
+  padding-right: 64px !important;
+}
+
+.px-4xl {
+  padding-left: 64px !important;
+  padding-right: 64px !important;
+}
+
+.py-4xl {
+  padding-top: 64px !important;
+  padding-bottom: 64px !important;
+}
+
+.w-25 {
+  width: 25%;
+}
+
+.w-50 {
+  width: 50%;
+}
+
+.w-75 {
+  width: 75%;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.h-25 {
+  height: 25%;
+}
+
+.h-50 {
+  height: 50%;
+}
+
+.h-75 {
+  height: 75%;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.vh-100 {
+  height: 100vh;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.position-absolute {
+  position: absolute;
+}
+
+.position-fixed {
+  position: fixed;
+}
+
+.position-sticky {
+  position: sticky;
+}
+
+.bg-primary {
+  background: #4B9BFF;
+}
+
+.bg-secondary {
+  background: #2E7FF7;
+}
+
+.bg-white {
+  background: #FFFFFF;
+}
+
+.bg-gray {
+  background: #F8FAFC;
+}
+
+.bg-light {
+  background: #EFF6FF;
+}
+
+.bg-gradient-primary {
+  background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+}
+
+.bg-gradient-accent {
+  background: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
+}
+
+.bg-gradient-warm {
+  background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
+}
+
+.border {
+  border: 1px solid #E2E8F0;
+}
+
+.border-0 {
+  border: none !important;
+}
+
+.border-top {
+  border-top: 1px solid #E2E8F0;
+}
+
+.border-bottom {
+  border-bottom: 1px solid #E2E8F0;
+}
+
+.border-left {
+  border-left: 1px solid #E2E8F0;
+}
+
+.border-right {
+  border-right: 1px solid #E2E8F0;
+}
+
+.border-primary {
+  border-color: #4B9BFF;
+}
+
+.rounded-0 {
+  border-radius: 0;
+}
+
+.rounded-sm {
+  border-radius: 6px;
+}
+
+.rounded {
+  border-radius: 8px;
+}
+
+.rounded-lg {
+  border-radius: 12px;
+}
+
+.rounded-xl {
+  border-radius: 16px;
+}
+
+.rounded-full {
+  border-radius: 50px;
+}
+
+.rounded-circle {
+  border-radius: 50%;
+}
+
+.shadow-none {
+  box-shadow: none !important;
+}
+
+.shadow-sm {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.shadow {
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+}
+
+.shadow-lg {
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+}
+
+.shadow-xl {
+  box-shadow: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+@media (max-width: 768px) {
+  .sm-hide {
+    display: none !important;
+  }
+}
+@media (max-width: 1024px) {
+  .md-hide {
+    display: none !important;
+  }
+}
+@media (min-width: 769px) {
+  .mobile-only {
+    display: none !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .desktop-only {
+    display: none !important;
+  }
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
+.transition {
+  transition: all 0.3s ease;
+}
+
+.transition-fast {
+  transition: all 0.15s ease;
+}
+
+.transition-slow {
+  transition: all 0.5s ease;
+}
+
+.transition-none {
+  transition: none;
+}
+
+/*# sourceMappingURL=main.css.map */
diff --git a/src/main/resources/static/css/main.css.map b/src/main/resources/static/css/main.css.map
new file mode 100644
index 0000000..1c08f95
--- /dev/null
+++ b/src/main/resources/static/css/main.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/base/_reset.scss","../sass/abstracts/_variables.scss","../sass/base/_typography.scss","../sass/abstracts/_mixins.scss","../sass/base/_animations.scss","../sass/layout/_header.scss","../sass/layout/_footer.scss","../sass/layout/_grid.scss","../sass/layout/_container.scss","../sass/components/_buttons.scss","../sass/components/_cards.scss","../sass/components/_forms.scss","../sass/components/_modals.scss","../sass/components/_navigation.scss","../sass/components/_partners.scss","../sass/components/_cta.scss","../sass/pages/_index.scss","../sass/pages/_login.scss","../sass/base/_utilities.scss"],"names":[],"mappings":";AAIA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE,aCqBoB;EDpBpB,aC4CmB;ED3CnB,OCJU;EDKV,kBCFM;EDGN;;;AAIF;EACE;;;AAIF;EACE;EACA;EACA,YC4EgB;;;ADxElB;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;;;AAIF;EACE,aChBiB;EDiBjB,aCbkB;;;ADiBpB;AAAA;AAAA;EAGE;;;AAIF;EACE;EACA,OCxEU;;;AD2EZ;EACE;EACA,OC7EU;;;ACXZ;EACE,WDuCe;ECtCf,aDgDoB;EC/CpB,ODQU;;;ACJZ;EACE,WDuCc;ECtCd,aD6CsB;EC5CtB,eDuDW;;AE7DT;EDGJ;IAMI,WDgCY;;;AE3CZ;EDKJ;IAUI,WD2BY;;;;ACvBhB;EACE,WDwBc;ECvBd,aD8BiB;EC7BjB,eDwCW;;AE5DT;EDiBJ;IAMI,WDiBY;;;AE1CZ;EDmBJ;IAUI,WDYW;;;;ACRf;EACE,WDSc;ECRd,aDgBiB;ECfjB,eD0BW;;AE5DT;ED+BJ;IAMI,WDEW;;;;ACEf;EACE,WDFc;ECGd,aDKqB;ECJrB,eDeW;;;ACZb;EACE,WDTa;ECUb,aDDqB;ECErB,eDSW;;;ACNb;EACE,WDhBa;ECiBb,aDPqB;ECQrB,eDGW;;;ACCb;EACE,eDDW;ECEX,aDRmB;;ACUnB;EACE;;;AAKJ;ECTE,YF1CiB;EE2CjB;EACA;EACA;;;ADUF;ECbE,YFzCgB;EE0ChB;EACA;EACA;;;ADcF;ECjBE,YFxCc;EEyCd;EACA;EACA;;;ADkBF;EACE,ODrFa;;;ACwFf;EACE,ODxFe;;;AC2FjB;EACE,ODpFU;;;ACuFZ;EACE,ODvFU;;;AC0FZ;EACE,OD1FW;;;AC6Fb;EACE,OD7FM;;;ACiGR;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE,aD3EoB;;;AC8EtB;EACE,aD9EmB;;;ACiFrB;EACE,aDjFqB;;;ACoFvB;EACE,aDpFiB;;;ACuFnB;EACE,aDvFsB;;;AC2FxB;EACE,WD5Ga;;;AC+Gf;EACE,WD/Ga;;;ACkHf;EACE,WDlHe;;;ACqHjB;EACE,WDpHa;;;ACuHf;EACE,WDvHa;;;AC2Hf;EACE,WD7Ha;EC8Hb,aDtHoB;ECuHpB,aD9GkB;EC+GlB,OD9JU;;;ACiKZ;EACE,WDvIa;ECwIb,ODnKU;;;ACsKZ;EACE,aDhJiB;ECiJjB,WD7Ia;EC8Ib,YDtKQ;ECuKR;EACA,eD7GiB;;;ACiHnB;EACE,OD1La;;AC4Lb;EACE,OD5La;;;ACiMjB;EACE,SDrIW;ECsIX;EACA;EACA,YDzLQ;EC0LR;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;;;AEpNF;EACE;IACE;;EAEF;IACE;;;AAKJ;EACE;IACE;;EAEF;IACE;;;AAKJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAKJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAKJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAKJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAKJ;EACE;IACE;;EAEF;IACE;;;AAKJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAKJ;EACE;IACE;;EAEF;IACE;;;AAKJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAKJ;EACE;IACE;;EAEF;IACE;;;AAKJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;AAKJ;EACE;IACE;IACA;;EAEF;IACE;;EAEF;IACE;IACA;;;AAKJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAKJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAKJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;EACA,YHjQQ;;;AGqQZ;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAMA;EACA;EACA;;AAGF;EACE;;;AClUJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQF;EACE;EACA;;AAEA;EACE;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;;;AAKJ;AAAA;AAAA;EAGE;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAOJ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;;AAQF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAKE;EACE;;AAEF;EACE;;AAEF;EACE;;;AAUV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAOV;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAMR;EACE;EACA,OJxZW;EIyZX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,YJ5dQ;EI6dR;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,YJxeM;EIyeN;;AAGF;EAAY;;AACZ;EAAW;;AAGb;EACE;;AACA;EAAY;EAAQ;;AACpB;EAAW;EAAQ;;;AAOvB;EAEE;EACA;EACA;EACA;EACA;EACA,YJ9fM;EI+fN,SJ1ac;EI2ad;EACA;EACA;EACA;EACA;;AAKA;EACE,SJvdS;EIwdT,YJ1gBM;EI2gBN;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA,SJxeK;EIyeL,OJ/hBI;EIgiBJ,WJlgBO;EImgBP,aJzfa;EI0fb;EACA;;AAGF;EACE;EACA;EACA,OJnfK;EIofL;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA,YJxjBE;;AI0jBF;EACE;EACA;EACA,OJhkBE;EIikBF,WJtiBK;EIuiBL;;AAEA;EACE,YJnkBJ;EIokBI,OJhlBG;;AIqlBT;EACE;;AAKN;EACE;EACA,YJjlBI;EIklBJ;EACA;;;AAQJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAqGJ;EACE;;;AAMF;EACE;IACE;;EAEA;IACE;IACA;;EAIJ;IACE;;;AAIJ;EAEI;IACE;;EAKF;IACE;;;AC5xBN;EACE,YLWU;EKVV,OLaM;EKZN;;AHEE;EGLJ;IAMI;;;;AAIJ;EACE;EACA;EACA,KL0DY;EKzDZ,eLwDY;EKvDZ,WLqEoB;EKpEpB;EACA;EACA;;AHXE;EGGJ;IAWI;IACA,KL8CU;;;;AKzCd;EACE;;AAEA;EACE;EACA,eLkCS;;AK/BX;EACE,WLIW;EKHX,aLuBgB;EKtBhB;EACA,eL2BS;;AKxBX;EACE,eLwBS;;AKtBT;EACE,WLJS;EKKT,aLMiB;EKLjB,eLiBO;;AKdT;EACE;EACA,KLWO;;AKTP;EACE;EACA;EACA;EACA;EACA,eLgBW;EKfX,OL9CA;EK+CA,WLtBO;;AKwBP;EACE;;AAGF;EACE;EACA,cLnEK;EKoEL;;AAIJ;EACE;EACA,YLrDW;EKsDX,OL/DA;EKgEA,eLHW;EKIX,aL3Be;EK4Bf,WLzCO;EK0CP,YLwBU;;AKtBV;EACE;EACA,YLxDE;;;AKgEZ;EACE;EACA,KL/BW;;AKiCX;EACE;EACA;EACA;EACA,eLzBe;EExDjB;EACA;EACA;EGiFE,OLzFI;EK0FJ,YLCc;EKAd,WL/DW;;AKiEX;EACE,YL1GS;EK2GT;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMN;EACE;EACA;EACA,KLvEY;;AE7DV;EGiIJ;IAMI;;;AHzIA;EGmIJ;IAUI;IACA;;;;AAKF;EACE,WLhHa;EKiHb,aLpGe;EKqGf,eLzFS;EK0FT,OL7II;;AKgJN;EACE;;AAEA;EACE,eLlGO;;AKoGP;EACE;EACA,WL/HO;EKgIP,YL9DU;EK+DV;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,YL7KI;EK8KJ,YLzEQ;;AK4EV;EACE,OLlLI;;AKoLJ;EACE;;AAQV;EACE;EACA;EACA,KLtIS;EKuIT;EACA;EACA,OLhMW;EKiMX,eLzHiB;EK0HjB,WLnKW;EKoKX,aLtJmB;EKuJnB,aL5IS;;;AKiJb;EACE,aL9IY;EK+IZ;EACA,WLhIoB;EKiIpB;EACA,cLpJW;EKqJX,eLrJW;;;AKwJb;EACE;EACA;EACA;;AHxNE;EGqNJ;IAMI;IACA,KL/JS;IKgKT;;;AAGF;EACE;EACA,WL/LW;EKgMX;;AAGF;EACE;EACA,KL3KS;;AK6KT;EACE;EACA,WLzMS;EK0MT,YLxIY;;AK0IZ;EACE,OLtOA;;;AK6OR;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClRJ;EACE;EACA,KN+DW;;AM5DX;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE,KNWS;;AMRX;EACE,KNQS;;AMLX;EACE,KNKS;;AMFX;EACE,KNES;;AE5DT;EI+DA;IACE;;EAGF;IACE;;;AJtEF;EI2EA;IACE;;EAGF;IACE;;;;AAMN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA,KNrEW;;AE3DT;EI6HJ;IAMI;;;AJrIA;EI+HJ;IAUI;;;;AAKJ;EACE;EACA;EACA,KNpFW;;AE7DT;EI8IJ;IAMI;;;;AAKJ;EACE;EACA;EACA,KN7FY;EM8FZ;;AJ7JE;EIyJJ;IAOI;;;;AAKJ;EACE;EACA;EACA,KN1GW;;AE9DT;EIqKJ;IAMI;;;;AAKJ;EACE;EACA;EACA,KNpHY;EMqHZ;;AJlLE;EI8KJ;IAOI;;;;AAKJ;EACE;EACA;EACA,KN7HY;;AEhEV;EI0LJ;IAMI;IACA,KNpIU;;;AMuIZ;EACE;EACA;EACA,KN1IU;;AE7DV;EIoMF;IAMI;;;AJ5MF;EIsMF;IAUI;IACA;;;;AAMN;EACE;EACA;EACA,KN7JW;EM8JX;;AJzNE;EIqNJ;IAOI;IACA,KNjKS;;;;AMsKb;EACE;EACA;EACA,KN1KW;;AE7DT;EIoOJ;IAMI;;;;AAKJ;EACE;EACA;EACA,KNpLW;EMqLX;;AJjPE;EI6OJ;IAOI;;;AJtPA;EI+OJ;IAWI;;;;AAKJ;EACE;EACA;EACA,KNlMY;EMmMZ;;AJjQE;EI6PJ;IAOI;IACA,KNzMS;;;AM4MX;EACE;;AAEA;EACE;;AJ5QF;EIwQF;IAQI;;;;AAMN;EACE;EACA;EACA,KN7NW;;AE5DT;EIsRJ;IAMI;;;;AClSJ;EACE,WPkFoB;EOjFpB;EACA;;ALCE;EKJJ;IAMI;;;AAIF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AAKJ;EACE;;ALtBE;EKqBJ;IAII;;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMF;EACE,YPtCM;;AOyCR;EACE,YPzCO;;AO4CT;EACE;;AAGF;EACE;;AAGF;EACE,YP9Ce;EO+Cf,OPxDI;;AO2DN;EACE,YP/DQ;EOgER,OP7DI;;;AOkER;EACE;EACA,ePbY;;AEjEV;EK4EJ;IAKI,ePjBU;;;AOoBZ;EACE;EACA;EACA,KP7BS;EO8BT;EACA,YP7EO;EO8EP,OP5FW;EO6FX,ePhBiB;EOiBjB,WPzDW;EO0DX,aP7CmB;EO8CnB,ePlCS;;AOqCX;EACE,WPzDY;EO0DZ,aPlDe;EOmDf,ePxCS;EOyCT,OP9FQ;;AEPR;EKiGF;IAOI,WPhEU;;;AOmEZ;EL9CF,YFzCgB;EE0ChB;EACA;EACA;;AKgDA;EACE,WP5EW;EO6EX,OP1GQ;EO2GR,aP7DiB;EO8DjB;EACA;;ALrHA;EKgHF;IAQI,WPpFW;;;;AO0FjB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,aPtDY;;;AO2DhB;EACE;EACA;;;AAIF;EACE;EACA;;;ACvJF;ENiCE;EACA;EACA,KF4BW;EE3BX;EACA,eFuCiB;EEtCjB,aFcqB;EEbrB,WFCe;EEAf;EACA,YFgEgB;EE/DhB;EACA;;AAEA;EACE;;AM9CJ;EAEE;EACA;;AAGA;EACE;EACA,WR+BW;;AQ5Bb;EACE;EACA,WR2Ba;;AQxBf;EACE;EACA,WRuBW;;AQpBb;EACE;EACA,WRmBW;;AQfb;EACE,YRLe;EQMf,ORfI;EQgBJ,YRDQ;;AQGR;EACE;EACA,YRHM;;AQMR;EACE;;AAIJ;EACE,YR7BI;EQ8BJ,OR1CW;EQ2CX;;AAEA;EACE,YRhCK;EQiCL;;AAIJ;EACE,YR9Bc;EQ+Bd,ORzCI;EQ0CJ,YR3BQ;;AQ6BR;EACE;EACA,YR7BM;;AQiCV;EACE,YRxCY;EQyCZ,ORpDI;EQqDJ,YRtCQ;;AQwCR;EACE;EACA,YRxCM;;AQ4CV;EACE,YRrEW;EQsEX,OR/DI;;AQiEJ;EACE;EACA;;AAIJ;EACE,YRhFY;EQiFZ,ORzEI;;AQ2EJ;EACE;EACA;;AAIJ;EACE;EACA,OR/FW;EQgGX;;AAEA;EACE;EACA,cRpGS;;AQwGb;EACE;EACA,ORjGQ;EQkGR;;AAEA;EACE,cR9GS;EQ+GT,OR/GS;EQgHT;;AAKJ;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;ENtDJ;EACA;EACA;EACA;EMqDI;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,eRvEmB;;AQyEnB;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;EACA;;AAIF;EACE;EACA;;AAEA;EACE;;AAEA;EACE,wBRvGW;EQwGX,2BRxGW;;AQ2Gb;EACE,yBR5GW;EQ6GX,4BR7GW;;;AQoHnB;EACE;EACA,QRhIW;EQiIX,ORjIW;EQkIX;EACA;EACA,YR/KiB;EQgLjB;EACA,eRxHqB;EQyHrB,OR3LM;EQ4LN,WR/Ja;EQgKb;EACA,YR9KU;EQ+KV,YRpGgB;EQqGhB,SR9Gc;EE5Ed;EACA;EACA;;AM2LA;EACE;EACA,YRpLQ;;AQsLR;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA,YRrNQ;EQsNR,ORnNI;EQoNJ;EACA,eRxJe;EQyJf,WR7LW;EQ8LX;EACA;EACA,YR9Hc;EQ+Hd;;;AAMF;EN7MA;EACA;EACA,KF4BW;EE3BX;EACA,eFuCiB;EEtCjB,aFcqB;EEbrB,WFCe;EEAf;EACA,YFgEgB;EE/DhB;EACA;;AAEA;EACE;;AMgMF;EAEE,YRlOI;EQmOJ,OR/OW;EQgPX;EACA,WR1MW;EQ2MX,YRtNQ;;AQwNR;EACE;EACA,YRzNM;;AQ6NV;EN3NA;EACA;EACA,KF4BW;EE3BX;EACA,eFuCiB;EEtCjB,aFcqB;EEbrB,WFCe;EEAf;EACA,YFgEgB;EE/DhB;EACA;;AAEA;EACE;;AM8MF;EAEE;EACA,ORjPI;EQkPJ;EACA;EACA,WRzNW;;AQ2NX;EACE;EACA;;;ACtQN;EPoDE,YFtCM;EEuCN,eFyBkB;EExBlB,SF0Da;EEzDb,YFkDgB;;AEhDhB;EACE;EACA,YF7BQ;;AS9BZ;EAEE;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAMA;EACA,YTuFc;EStFd;;AAGF;EACE;EACA;;;AAKJ;EPqBE,YFtCM;EEuCN,eFyBkB;EExBlB,SF0Da;EEzDb,YFkDgB;;AEhDhB;EACE;EACA,YF7BQ;;ASCZ;EAEE;EACA;;AAEA;EACE,cTnCW;ESoCX;;AAIF;EACE,cTtCY;ESuCZ;;AAIF;EACE,cT1CW;ES2CX;;AAIF;EACE;EACA;EACA;EACA;EACA,YTtDY;ESuDZ,OTjDQ;ESkDR,eTiBgB;EShBhB,WTxBW;ESyBX,aTVe;ESWf;;AAEA;EACE,YT5DS;ES6DT,OTtDE;;ASyDJ;EACE,YThEU;ESiEV,OT3DE;;ASgEN;EACE;EACA;EACA;EP7DF;EACA;EACA;EO6DE;EACA,YTpEO;ESqEP,OTnFW;ESoFX,eTTe;ESUf,YTkBc;;ASfhB;EACE;EACA,YTrEe;ESsEf,OT/EI;;ASmFN;EACE,WTxDW;ESyDX,aT9Ce;ES+Cf,eTpCS;ESqCT,OT1FQ;;AS6FV;EACE,OT7FQ;ES8FR,aThDiB;ESiDjB,eT1CS;ES2CT,WTrEW;;ASyEb;EACE;EACA;EACA,KTpDS;ESqDT,eTnDS;ESoDT;;AAEA;EACE;EACA,YT1GI;ES2GJ,OT9GM;ES+GN,eT7Cc;ES8Cd,WTtFS;ESuFT,aT1Ee;;AS+EnB;EACE;EACA;EACA,KTvES;ESwET,OTpIW;ESqIX,aTnFmB;ESoFnB,WTjGW;ESkGX,YThCc;;ASkCd;EACE,KT7EO;ES8EP,OT1IW;;;ASgJjB;EP/FE,YFtCM;EEuCN,eFyBkB;EExBlB,SF0Da;EEzDb,YFkDgB;;AEhDhB;EACE;EACA,YF7BQ;;ASqHZ;EAEE;;AAEA;EACE;EACA;EACA;EPtIF;EACA;EACA;EOsIE,WTjHW;ESkHX,YTtIe;ESuIf,OThJI;ESiJJ,eTlFe;;ASqFjB;EACE,WTzHW;ES0HX,aT/Ge;ESgHf,eTrGS;ESsGT,OT3JQ;;AS8JV;EACE,OT9JQ;ES+JR,aTjHiB;ESkHjB,eT3GS;ES4GT,WTtIW;;AS0Ib;EACE;EACA;EACA;EACA,aTpHS;ESqHT;;AAEA;EACE,WT9IS;ES+IT,aTpIkB;ESqIlB,OTzLS;;AS4LX;EACE,WTzJS;ES0JT,OTpLM;ESqLN,aT9Ie;;;ASoJrB;EPnJE,YFtCM;EEuCN,eFyBkB;EExBlB,SF0Da;EEzDb,YFkDgB;;AEhDhB;EACE;EACA,YF7BQ;;ASyKZ;EAEE;EACA;EACA,KT1IW;;AS4IX;EACE;EACA;EACA;EP5LF;EACA;EACA;EO4LE,YT3Le;ES4Lf,OTrMI;ESsMJ,eTxIe;ESyIf,WT1KW;;AS6Kb;EACE;;AAEA;EACE,WTnLS;ESoLT,aTzKiB;ES0KjB,eT/JO;ESgKP,OTpNM;;ASuNR;EACE,OTvNM;ESwNN,aT1Ke;ES2Kf,WT9LS;;;ASoMf;EPvLE,YFtCM;EEuCN,eFyBkB;EExBlB,SF0Da;EEzDb,YFkDgB;;AEhDhB;EACE;EACA,YF7BQ;;AS6MZ;EAEE;;AAEA;EACE;EACA;EACA,KTlLS;ESmLT,MTnLS;ESoLT;EACA,OTnPW;ESoPX;EACA,aTlMe;;ASqMjB;EACE;EACA;EACA,WTrNa;ESsNb,aTnMgB;ESoMhB,OTpPQ;ESqPR,eT/LS;ESgMT;;AAGF;EACE;EACA;EACA,KTvMS;;ASyMT;EACE;EACA;EACA,eT5LiB;ES6LjB;;AAIA;EACE,aT9Ne;ES+Nf,OTxQI;ESyQJ;;AAGF;EACE,WTjPO;ESkPP,OT7QI;;;ASoRZ;EP5OE,YFtCM;EEuCN,eFyBkB;EExBlB,SF0Da;EEzDb,YFkDgB;;AEhDhB;EACE;EACA,YF7BQ;;ASkQZ;EAEE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA,YTxRa;ESyRb,OTlSE;ESmSF,eTlOe;ESmOf,WT5QS;ES6QT,aT9Pa;ES+Pb;;AAIJ;EACE,gBTxPS;ESyPT;EACA,eT1PS;;AS4PT;EACE,WTnRS;ESoRT,aT1Qa;ES2Qb,eTjQO;ESkQP,OTtTM;;ASyTR;EACE;EACA;EACA;EACA,KT1QO;;AS4QP;EACE,WTjSO;ESkSP,OThUI;;ASmUN;EACE,WTlSQ;ESmSR,aT3RgB;EEWtB,YF1CiB;EE2CjB;EACA;EACA;;AOiRI;EACE,WT9SS;ES+ST,OT3UI;;ASgVV;EACE;EACA,eT7RS;;AS+RT;EACE;EACA,OTtVM;ESuVN,WT5TS;ES6TT;EACA;EACA,KTvSO;;ASySP;EACE;EACA,OTnWO;ESoWP,aTtTW;;ASyTb;EACE;;AAEA;EACE;EACA,OTtWG;;AS4WX;EACE;;;AC1XJ;EACE,eVgEW;;AU9DX;EACE;EACA,WVkCW;EUjCX,aV6CiB;EU5CjB,OVIQ;EUHR,eVuDS;;AUrDT;EACE,OVLU;EUMV;;AAIJ;EACE,WVqBW;EUpBX,OVNQ;EUOR,YV2CS;;AUxCX;EACE,WVeW;EUdX,OVlBY;EUmBZ,YVqCS;EUpCT;EACA;EACA,KVkCS;;;AU7Bb;EACE;EACA;EACA,WVIe;EUHf,aVHoB;EUIpB,OV3BU;EU4BV,YVzBM;EU0BN;EACA,eVkCiB;EUjCjB,YV+DgB;;AU7DhB;EACE,OVhCS;;AUmCX;EACE;EACA,cVhDW;EUiDX;;AAGF;EACE,YVxCM;EUyCN,OV5CQ;EU6CR;;AAIF;EACE;EACA,WVxBW;;AU2Bb;EACE;EACA,WV3BW;;AU+Bb;EACE,cVlEW;;AUoEX;EACE;;AAIJ;EACE,cV3EY;;AU6EZ;EACE;;;AAMN;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA,eVnCY;;;AUuCd;EACE;EACA;EACA,eV7CW;;AU+CX;AAAA;EAEE;EACA;EACA,cVpDS;EUqDT;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;;;AAMN;EACE;EACA;EACA,KV5EW;;AU8EX;EACE;EACA;EACA;EACA,YVjIU;EUkIV,eVpEiB;EUqEjB;EACA,YV5Cc;;AU8Cd;EACE;EACA;EACA;EACA;EACA;EACA;EACA,YVhJE;EUiJF,eV/EiB;EUgFjB,YVvDY;;AU0Dd;EACE,YVlKS;;AUoKT;EACE;;;AAOR;EACE;EACA;;AAEA;EACE;EACA,WV5Ia;EU6Ib,OVzKQ;EU0KR,YVvKM;EUwKN;EACA;EACA;;AAGF;EACE;;AAIA;EACE;EACA;EACA;;AAGF;EACE;;;AAMN;EACE;EACA;EACA,KVjJW;;AUmJX;EACE;;ARhNA;EQ0MJ;IAUI;IACA;;EAEA;IACE,eV5JO;;;;AUkKb;EACE;EACA;EACA,KVpKW;;AE7DT;EQ8NJ;IAMI;;;;ACxOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,SX2FuB;EW1FvB;EACA;EACA,YX+FgB;;AW7FhB;EACE;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA,SX0Ec;EWzEd;EACA;EACA;EACA,SXoCW;EWnCX;EACA;EACA,YXyEgB;;AWvEhB;EACE;EACA;;AAEA;EACE;;;AAMN;EACE;EACA,YXjCM;EWkCN,eX6BiB;EW5BjB,YXlBU;EWmBV;EACA;EACA;EACA;EACA;EACA;EACA,YXiDgB;;AW9ChB;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKJ;EACE,SXjBW;EWkBX;EACA;EACA;EACA;;AAEA;EACE,WX9CW;EW+CX,aXtCmB;EWuCnB,OXhFQ;EWiFR;;AAGF;EACE;EACA;ET7EF;EACA;EACA;ES6EE;EACA;EACA,eX1Be;EW2Bf,OX1FQ;EW2FR,WX5DW;EW6DX;EACA;;AAEA;EACE,YX7FI;EW8FJ,OXlGM;;;AWwGZ;EACE,SXnDW;EWoDX;EACA;EACA,OX5GU;EW6GV,aX9DmB;;;AWkErB;EACE,SX5DW;EW6DX;EACA;EACA,KXhEW;EWiEX;;AAEA;EACE;;AAGF;EACE;;;AAMF;EACE;;AAGF;EACE;EACA,SXlFS;;AWoFT;EACE;EACA;EACA;ETrIJ;EACA;EACA;ESqII,WX/GU;EWgHV,eX5EiB;;AW8EjB;EACE;EACA,OXzJO;;AW4JT;EACE;EACA,OXhKQ;;AWmKV;EACE;EACA,OXpKQ;;AWuKV;EACE;EACA,OX7KO;;AWiLX;EACE,WXzIS;EW0IT,aXjIiB;EWkIjB,eXvHO;EWwHP,OX5KM;;AW+KR;EACE,OX/KM;;;AYZZ;EACE;EACA;EACA,KZ4DW;EY3DX;EACA,WZkCa;;AYhCb;EACE;EACA;EACA,KZqDS;EYpDT,OZCQ;;AYCR;EACE,OZFM;EYGN,YZ0FY;;AYxFZ;EACE,OZhBO;;AYoBX;EACE,OZZM;EYaN,aZ2Be;;AYxBjB;EACE;EACA,OZhBO;EYiBP,aZiCO;;;AY3Bb;EACE;EACA,KZwBW;EYvBX;EACA,eZ0BW;;AYxBX;EACE;;AAGF;EACE;EACA;EACA,KZcS;EYbT;EACA,OZvCQ;EYwCR,aZDiB;EYEjB;EACA;EACA,YZkDc;;AYhDd;EACE,OZ/CM;;AYkDR;EACE,OZ5DS;EY6DT,qBZ7DS;;AYgEX;EACE;EACA,YZrDI;EYsDJ,OZzDM;EY0DN,eZSe;EYRf;EACA,aZpBiB;;;AY0BvB;EACE;EACA,KZjBW;EYkBX,SZnBW;EYoBX,YZnEQ;EYoER,eZPiB;;AYSjB;EACE;EACA,OZ3EQ;EY4ER,aZrCiB;EYsCjB,eZde;EYef,YZec;;AYbd;EACE,OZlFM;EYmFN;;AAGF;EACE,YZpFE;EYqFF,OZjGS;EYkGT,YZxEM;;;AY+EV;EACE,eZ1CS;;AY4CT;EACE,WZzES;EY0ET,aZ5DiB;EY6DjB;EACA,OZtGM;EYuGN;EACA;;AAIJ;EACE;;AAEA;EACE,eZ9DO;;AYiET;EACE;EACA;EACA,KZlEO;EYmEP;EACA,OZzHM;EY0HN,eZ1Da;EY2Db,YZ7BY;;AY+BZ;EACE;EACA;EVtHN;EACA;EACA;EUsHM,WZnGO;EYoGP,OZjII;;AYoIN;EACE,YZlIE;EYmIF,OZhJO;;AYkJP;EACE,OZnJK;;AYuJT;EACE,YZ1IG;EY2IH,OZzJO;EY0JP,aZzGa;;AY2Gb;EACE,OZ7JK;;AYmKX;EACE,aZnGQ;EYoGR,YZzGO;EY0GP;;AAEA;EACE,WZpIO;EYqIP;;;AAOR;EACE;EACA;EACA,KZxHW;;AY4HP;EACE;EACA;EACA;;AAKF;EACE,YZjMO;EYkMP,OZtLA;EYuLA,cZnMO;;AYwMb;EACE;EACA;EACA;EACA;EACA;EACA;EACA,YZnMI;EYoMJ;EACA,eZxIe;EYyIf,OZzMQ;EY0MR,WZ9KW;EY+KX,aZnKiB;EYoKjB,YZ9Gc;;AYgHd;EACE,YZ3MI;EY4MJ,cZzNS;EY0NT,OZ1NS;;AY6NX;EAEE,WZxLS;;AY4Lb;EACE;EACA,OZ3NQ;;;AabZ;EACE;EACA,YbaM;;;AcfR;EACE;EACA;EACA,YdqBiB;EcpBjB;;;ACJF;EACE;EACA;EACA;EACA;;AbCE;EaLJ;IAOI;;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;Eb4GF,Oa3G4B;Eb4G5B,Qa5G4B;Eb6G5B,YFlIY;EEmIZ;EACA;EACA;Ea/GI;EACA;EbmEJ;;Aa/DE;EbqGF,OapG4B;EbqG5B,QarG4B;EbsG5B,YFjIc;EEkId;EACA;EACA;EaxGI;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA,Wf2BoB;Ee1BpB;EACA;;;AAIF;EACE;EACA;EACA,KfFW;EeGX;EACA,YfrDM;EesDN;EACA,efUmB;EeTnB,efLW;EeMX,WfhCa;EeiCb,afpBqB;EeqBrB,Of9DU;EE2FV;;Aa1BA;EACE,WfnCW;EEwDb;;;AafF;EACE,WfrCc;EesCd,af/BsB;EegCtB,af7BkB;Ee8BlB,eftBW;EeuBX,Of7EU;EE+FV;;AAtGE;Ea+EJ;IASI,Wf/CY;;;AE3CZ;EaiFJ;IAaI,WfpDY;;;AeuDd;EblCA,YFzCgB;EE0ChB;EACA;EACA;;;AaqCF;EACE,WfhEa;EeiEb,afzDoB;Ee0DpB,aflDmB;EemDnB,ef1CY;Ee2CZ,OflGU;EemGV;;Ab3GE;EaqGJ;IASI,Wf1Ea;;;;Ae+EjB;EACE;EACA,KfzDW;Ee0DX;EACA,eftDY;EeuDZ;;AbxHE;EamHJ;IAQI;IACA;;;AAGF;EblGA;EACA;EACA,KF4BW;EE3BX;EACA,eFuCiB;EEtCjB,aFcqB;EEbrB,WFCe;EEAf;EACA,YFgEgB;EE/DhB;EACA;;AAEA;EACE;;AawFA;EACE,YfhHa;EeiHb,Of1HE;Ee2HF,Yf5GM;;Ae8GN;EACE,Yf7GI;;AeiHR;EACE,YfnIE;EeoIF,OfhJS;EeiJT;;AAEA;EACE,YftIG;;AEdP;EaiIF;IAwBI;IACA;;;;AAMN;EACE;EACA;EACA,KfhGY;EEyCZ;;AA1GE;Ea8JJ;IAOI;IACA,KfzGS;;;Ae4GX;EACE;EACA;EACA;;AAEA;EACE,WftIU;EeuIV,af9HkB;EEWtB,YF1CiB;EE2CjB;EACA;EACA;;AaoHE;EACE,WflJS;EemJT,Of9KM;Ee+KN,afxIe;;;Ae8IrB;EACE;EACA,Yf9HY;Ee+HZ;;AAEA;EACE;EACA;EACA,ef5He;Ee6Hf,Yf3KQ;;Ae8KV;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;AAGF;EACE;EACA;EACA,YftMU;EeuMV;EACA;Eb/HJ;;AamIE;EACE;EACA;EACA,YfhNY;EeiNZ;EACA;EACA;;;AAWN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE,ef9MS;EEwCX;;Aa0KA;EACE;EACA,KftNS;EeuNT;;AbnRA;EagRF;IAMI;IACA,Kf5NO;;;AegOX;EACE;EACA;EACA,Wf1Pa;Ee2Pb;EACA,efrNiB;EesNjB,YfvRI;EewRJ;EACA;;AAEA;EACE,Of7RO;;AegST;EACE,cf5SS;Ee6ST;;Ab3SF;Ea2RF;IAoBI;IACA;;;AAIJ;EACE;EACA,YfnSe;EeoSf,Of7SI;Ee8SJ;EACA,ef9OiB;Ee+OjB,WftRa;EeuRb,af3QmB;Ee4QnB;EACA;EACA;EACA;EACA,KfrQS;EesQT,YfxSQ;EeySR;;AAEA;EACE,Wf/RS;;AekSX;EACE;EACA,Yf/SM;EegTN;;AAGF;EACE;EACA,YfxTM;;AExBR;EaoTF;IAgCI;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA,KflSS;EemST;EACA;EACA;;AbjWA;Ea0VF;IAUI,KfzSO;Ie0SP;;;AAIJ;EACE,WfvUW;EewUX,OfnWQ;EeoWR,af7TiB;;AE/CjB;EayWF;IAMI;IACA,eftTO;;;Ae0TX;EACE;EACA;EACA;EACA,Yf9WI;Ee+WJ;EACA,ef/SiB;EegTjB,WfxVW;EeyVX,OfrXQ;EesXR;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,YftXa;EeuXb;EACA;;AAGF;EACE,cfjZS;EekZT;EACA,YfzXM;Ee0XN,OfxYE;EeyYF;EACA;;AAEA;EACE;;AbvZJ;EaoXF;IAwCI;IACA,Wf3XS;;;;AeqYf;EACE;EACA,Yf/ZM;;;AeuaR;EACE;EACA,YfzaM;Ee0aN;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAQF;EACE;EACA;EACA;EACA,KfzYU;;Ae4YZ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA,ef7YgB;Ee8YhB;EACA;EACA;EACA;EACA,KfhaS;EeiaT,YfpcQ;EeqcR;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,YfleY;EemeZ;EACA;EACA;;AAGF;EACE;EACA,OfhgBS;EeigBT;;AAGF;EACE,Wf5dS;Ee6dT,afpdiB;EeqdjB,Of9fM;Ee+fN;;AbtgBF;EakdF;IAwDI;;EAEA;IACE;;EAGF;IACE,Wf3eO;;;Aegfb;EACE;EACA;EACA;;AAGF;EACE,WftfW;EeufX,afvegB;EewehB,OfxhBQ;EeyhBR,efheU;EeieV,aflfiB;;AeofjB;EACE,OftiBS;EeuiBT,afrfiB;;AE9CnB;Ea0hBF;IAaI,WfngBS;;;AEtCX;Ea4hBF;IAiBI,WfzgBW;Ie0gBX;IACA,efhfQ;;;AeofZ;EACE;EACA,KfxfS;EeyfT;EACA;;AbvjBA;EamjBF;IAOI;IACA;IACA;;;AAIJ;EACE;EACA;EACA,KfvgBS;EewgBT;EACA,Yf3jBI;Ee4jBJ;EACA,ef5fiB;Ee6fjB;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,YflkBa;EemkBb;EACA;;AAGF;EACE,cf7lBS;Ee8lBT;EACA,YfnkBM;;AeqkBN;EACE;;AAGF;EACE,Yf1lBA;Ee2lBA,OfvmBO;;Ae0mBT;AAAA;EAEE,OfhmBA;;AeomBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YfnmBa;EeomBb,Of7mBE;Ee8mBF;EACA,afxkBa;EeykBb,WftlBW;EeulBX;EACA;;AAGF;EACE;EACA;EACA,Wf9lBW;Ee+lBX,afplBe;EeqlBf,Of7nBM;Ee8nBN;;AAGF;EACE;EACA;EACA,WfxmBS;EeymBT,OfnoBO;EeooBP;EACA;;Ab9oBF;EagkBF;IAkFI;IACA;;;;AAKN;EACE;IACE;;EAEF;IACE;;;AASJ;EACE;EACA,Yf7pBQ;;Ae+pBR;EACE;EACA,ef3mBU;;Ae6mBV;EACE,WfroBU;EesoBV,af/nBa;EegoBb,Of1qBM;Ee2qBN,eftnBO;;AE5DT;Ea8qBA;IAOI,Wf5oBQ;;;Ae+oBV;Eb3nBJ,YF1CiB;EE2CjB;EACA;EACA;;Aa6nBE;EACE,WfxpBS;EeypBT,OfvrBM;EewrBN,afzoBc;;AEvDhB;Ea6rBA;IAMI,Wf/pBS;;;AeoqBf;EACE;EACA;EACA,Kf7oBS;Ee8oBT;EACA;;Ab3sBA;EassBF;IAQI;IACA,KfppBO;IeqpBP;;;AbltBF;EawsBF;IAcI,Kf1pBO;Ie2pBP;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,YfvtBI;EewtBJ,efzpBe;Ee0pBf,Yf3sBQ;Ee4sBR;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,Yf5tBa;Ee6tBb;EACA;;AAGF;EACE;EACA,Yf3tBM;;Ae6tBN;EACE;;AAGF;EACE;EACA,Yf3uBW;Ee4uBX,OfrvBA;;AewvBF;EACE;EACA,OftwBO;;Ae0wBX;EACE;EACA;EACA;EACA;EACA;EACA,YflwBK;EemwBL,efpsBe;EeqsBf,efntBO;EeotBP;;AAEA;EACE;EACA,OfvxBO;;Ae2xBX;EACE,WfnvBS;EeovBT,af3uBiB;Ee4uBjB,OfrxBM;EesxBN,efluBO;EemuBP;;AAGF;EACE,Wf9vBW;Ee+vBX,Of3xBM;Ee4xBN;EACA,af9uBc;Ee+uBd,efzuBO;;Ae4uBT;EACE;EACA,OflyBO;EemyBP;;AAEA;EACE,WfzwBO;;AEtCX;Ea2tBF;IAyFI;;EAEA;IACE;IACA;;EAEA;IACE;;EAIJ;IACE,Wf1xBO;;Ee6xBT;IACE,WfjyBO;;;;Ae4yBf;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA,efhzBU;EeizBV;EACA;;AAEA;EACE,Wf90BU;Ee+0BV,afv0Ba;Eew0Bb,Ofl3BM;Eem3BN,afn0Bc;Eeo0Bd,ef5zBQ;;AE7DV;Eao3BA;IAQI,Wft1BQ;;;AExCZ;Eas3BA;IAYI,Wf31BO;Ie41BP;;;AAGF;Ebz0BJ,YF1CiB;EE2CjB;EACA;EACA;Eaw0BM,aft1BgB;;Ae21BtB;EACE;EACA;EACA,Kfj1BU;Eek1BV;EACA;EACA;EACA;;Abl5BA;Ea24BF;IAUI;IACA,Kf11BO;Ie21BP;;;Abz5BF;Ea64BF;IAgBI;;;AAIJ;EACE,Yfx5BI;Eey5BJ,ef11Be;Ee21Bf,Sfr2BU;Ees2BV,Yf54BQ;Ee64BR;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,Yf/5Ba;Eeg6Bb,ef12Ba;Ee22Bb;EACA;EACA;;AAGF;EACE;EACA,Yfh6BM;;Aek6BN;EACE;;AAGF;EACE;EACA,Yfh7BW;;Aek7BX;EACE,Of57BF;;Aeg8BF;Eb74BJ,YFzCgB;EE0ChB;EACA;EACA;;Aa+4BE;EACE;EACA;EACA;EACA;EACA;EACA,Yfz8BK;Ee08BL,ef34Be;Ee44Bf,ef15BO;Ee25BP;;AAEA;EACE;EACA,Of99BO;Ee+9BP;;AAKF;EACE,Wfz7BQ;Ee07BR,afl7BgB;Eem7BhB,Of99BI;Ee+9BJ,ef36BK;Ee46BL;EACA;;Abx+BJ;Eak+BE;IASI,Wfl8BM;;;Aes8BR;EACE;;AAIJ;EACE,Wf/8BO;Eeg9BP,aft8Be;Eeu8Bf,Ofh/BI;Eei/BJ,ef97BK;;Aei8BP;EACE,Wfz9BO;Ee09BP,Ofr/BI;Ees/BJ,afx8Ba;;Ae88Bf;EACE;;AAEA;EACE,OfxgCI;;Ae4gCR;EACE;;AAKF;EACE;;AAEA;EACE,OfnhCK;;AeuhCT;EACE;;AAKF;EACE;;AAEA;EACE,OfhiCM;;AeoiCV;EACE;;AbziCJ;Eai6BF;IA6II,Sfh/BO;;Eek/BP;IACE;IACA;;EAEA;IACE;;;;AAQV;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;;;AC9kCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAVF;IAWI;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;;AC5SJ;EACE,WjBkFoB;EiBjFpB;EACA;;AfCE;EeJJ;IAMI;;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EfhBE;EACA;EACA;;;AekBF;EfdE;EACA;EACA;;;AegBF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE,KjBxBW;;;AiB2Bb;EACE,KjB3BW;;;AiB8Bb;EACE,KjB9BW;;;AiBiCb;EACE,KjBjCW;;;AiBoCb;EACE,KjBpCW;;;AiBoDX;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAgBF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE,YjB/Pa;;;AiBkQf;EACE,YjBlQe;;;AiBqQjB;EACE,YjB3PM;;;AiB8PR;EACE,YjB9PQ;;;AiBiQV;EACE,YjBjQS;;;AiBoQX;EACE,YjB9PiB;;;AiBiQnB;EACE,YjBjQgB;;;AiBoQlB;EACE,YjBpQc;;;AiBwQhB;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,cjBxTa;;;AiB4Tf;EACE;;;AAGF;EACE,ejBzPiB;;;AiB4PnB;EACE,ejB5PiB;;;AiB+PnB;EACE,ejB/PiB;;;AiBkQnB;EACE,ejBlQiB;;;AiBqQnB;EACE,ejBpQmB;;;AiBuQrB;EACE,ejBvQqB;;;AiB2QvB;EACE;;;AAGF;EACE,YjBpUU;;;AiBuUZ;EACE,YjBvUU;;;AiB0UZ;EACE,YjB1UU;;;AiB6UZ;EACE,YjB7UU;;;AiBiVZ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;Af1ZE;Ee+ZF;IACE;;;Af9ZA;EemaF;IACE;;;AAKF;EADF;IAEI;;;;Af5aA;EegbJ;IAEI;;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE,YjBrXgB;;;AiBwXlB;EACE,YjBxXgB;;;AiB2XlB;EACE,YjB3XgB;;;AiB8XlB;EACE","file":"main.css"}
\ No newline at end of file
diff --git a/src/main/resources/static/css/main.min.css b/src/main/resources/static/css/main.min.css
new file mode 100644
index 0000000..7710ee3
--- /dev/null
+++ b/src/main/resources/static/css/main.min.css
@@ -0,0 +1 @@
+*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;line-height:1.6;color:#1a1a2e;background-color:#fff;overflow-x:hidden}ul,ol{list-style:none}a{text-decoration:none;color:inherit;transition:all .3s ease}img{max-width:100%;height:auto;display:block}button{font-family:inherit;font-size:inherit;line-height:inherit;cursor:pointer;background:rgba(0,0,0,0);border:none;padding:0}input,textarea,select{font-family:inherit;font-size:inherit;line-height:inherit;border:none;outline:none}table{border-collapse:collapse;border-spacing:0}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}::selection{background-color:rgba(75,155,255,.2);color:#1a1a2e}::-moz-selection{background-color:rgba(75,155,255,.2);color:#1a1a2e}body{font-size:16px;font-weight:400;color:#1a1a2e}h1,.h1{font-size:56px;font-weight:800;margin-bottom:24px}@media(max-width: 768px){h1,.h1{font-size:40px}}@media(max-width: 480px){h1,.h1{font-size:32px}}h2,.h2{font-size:48px;font-weight:700;margin-bottom:16px}@media(max-width: 768px){h2,.h2{font-size:32px}}@media(max-width: 480px){h2,.h2{font-size:24px}}h3,.h3{font-size:40px;font-weight:700;margin-bottom:16px}@media(max-width: 768px){h3,.h3{font-size:24px}}h4,.h4{font-size:32px;font-weight:600;margin-bottom:8px}h5,.h5{font-size:24px;font-weight:600;margin-bottom:8px}h6,.h6{font-size:20px;font-weight:600;margin-bottom:8px}p{margin-bottom:16px;line-height:1.6}p:last-child{margin-bottom:0}.text-gradient{background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.text-gradient-accent{background:linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.text-gradient-warm{background:linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.text-primary{color:#4b9bff}.text-secondary{color:#2e7ff7}.text-dark{color:#1a1a2e}.text-gray{color:#64748b}.text-light{color:#94a3b8}.text-white{color:#fff}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-regular{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.text-xs{font-size:12px}.text-sm{font-size:14px}.text-base{font-size:16px}.text-lg{font-size:20px}.text-xl{font-size:24px}.lead{font-size:20px;font-weight:400;line-height:1.8;color:#64748b}.caption{font-size:14px;color:#64748b}.code{font-family:"Fira Code","Courier New",monospace;font-size:14px;background:#f8fafc;padding:2px 6px;border-radius:6px}a{color:#4b9bff}a:hover{color:#2e7ff7}blockquote{padding:16px;margin:16px 0;border-left:4px solid #4b9bff;background:#f8fafc;font-style:italic}blockquote p{margin-bottom:0}hr{border:none;border-top:1px solid #e2e8f0;margin:32px 0}@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-30px) rotate(10deg)}}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes slideInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeInScale{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}@keyframes shimmer{0%{transform:translateX(-100%) rotate(45deg)}100%{transform:translateX(100%) rotate(45deg)}}@keyframes wave{0%{transform:rotate(0deg)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}@keyframes popIn{0%{opacity:0;transform:scale(0.5)}80%{transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}@keyframes popupFadeIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.animate-float{animation:float 20s ease-in-out infinite}.animate-bounce{animation:bounce 2s infinite}.animate-spin{animation:spin 1s linear infinite}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-fade-in{animation:fadeIn .6s ease-out}.animate-slide-up{animation:slideInUp .8s ease-out}.animate-slide-down{animation:slideInDown .6s ease-out}.animate-pop{animation:popIn .5s cubic-bezier(0.68, -0.55, 0.265, 1.55)}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.delay-5{animation-delay:.5s}.duration-fast{animation-duration:.3s}.duration-normal{animation-duration:.6s}.duration-slow{animation-duration:1s}.duration-slower{animation-duration:2s}.hover-grow{transition:transform .3s ease}.hover-grow:hover{transform:scale(1.05)}.hover-lift{transition:transform .3s ease,box-shadow .3s ease}.hover-lift:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(75,155,255,.15)}.hover-rotate{transition:transform .3s ease}.hover-rotate:hover{transform:rotate(5deg)}.hover-shine{position:relative;overflow:hidden}.hover-shine::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);transform:rotate(45deg);transition:transform .6s ease;transform:translateX(-200%)}.hover-shine:hover::before{transform:translateX(200%) rotate(45deg)}:root{--primary-blue: #4B9BFF;--secondary-blue: #2E7FF7;--accent-cyan: #00D4FF;--accent-yellow: #FFD93D;--accent-orange: #FF6B6B;--accent-green: #6BCF7F;--accent-purple: #A78BFA;--text-dark: #1A1A2E;--text-gray: #64748B;--text-light: #94A3B8;--white: #FFFFFF;--gray-bg: #F8FAFC;--light-bg: #EFF6FF;--border-gray: #E2E8F0;--gradient-primary: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);--gradient-accent: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);--gradient-warm: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 12px rgba(75, 155, 255, 0.1);--shadow-lg: 0 8px 24px rgba(75, 155, 255, 0.15);--shadow-xl: 0 16px 40px rgba(75, 155, 255, 0.2)}.blind{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.global-header{position:fixed;top:0;left:0;right:0;background:hsla(0,0%,100%,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);z-index:1000;height:80px;transition:all .3s ease}.header-content{display:flex;align-items:center;justify-content:space-between;height:80px;max-width:1280px;margin:0 auto;padding:0 20px}.header-left{display:flex;align-items:center}.header-left .logo{height:45px;width:auto}.logo-wrapper{display:flex;align-items:center;gap:12px}.logo{display:flex;align-items:center;gap:12px;height:45px;z-index:10}.logo a{display:flex;align-items:center;gap:12px;height:100%;text-decoration:none}.logo img{height:45px;width:auto}.logo-text{font-size:16px;font-weight:700;color:var(--primary-blue);padding:4px 12px;background:var(--light-bg);border-radius:20px;text-decoration:none;display:inline-block;transition:all .3s ease}.logo-text:hover{background:var(--primary-blue);color:var(--white);transform:translateY(-1px);box-shadow:var(--shadow-md)}.logo-text:visited{color:var(--primary-blue)}.logo-link,.mobile-logo-link,.drawer-logo-link{display:inline-block;text-decoration:none;transition:transform .3s ease}.logo-link:hover,.mobile-logo-link:hover,.drawer-logo-link:hover{transform:scale(1.05)}.logo-link img,.mobile-logo-link img,.drawer-logo-link img{display:block}.header-right{display:flex;align-items:center;gap:16px}.search-btn{width:40px;height:40px;background:var(--gray-bg);border:none;border-radius:50%;cursor:pointer;font-size:16px;color:var(--text-gray);transition:all .3s ease}.search-btn:hover{background:var(--light-bg);color:var(--primary-blue);transform:scale(1.1)}.desktop-header{display:flex;align-items:center;justify-content:space-between;width:100%}@media(max-width: 768px){.desktop-header{display:none}}.mobile-header{display:none;align-items:center;justify-content:space-between;width:100%}@media(max-width: 768px){.mobile-header{display:flex}}.mobile-left .mobile-logo{height:32px;width:auto}.mobile-center{flex:1;text-align:center}.mobile-center .mobile-title{font-size:18px;font-weight:700;color:var(--text-dark);margin:0}.mobile-right .mobile-menu-btn{width:40px;height:40px;background:rgba(0,0,0,0);border:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px;border-radius:8px;transition:background-color .3s ease}.mobile-right .mobile-menu-btn:hover{background:var(--gray-bg)}.mobile-right .mobile-menu-btn .hamburger-line{width:24px;height:2px;background:var(--text-dark);transition:all .3s ease;border-radius:1px}.mobile-right .mobile-menu-btn.active .hamburger-line:nth-child(1){transform:rotate(45deg) translateY(6px)}.mobile-right .mobile-menu-btn.active .hamburger-line:nth-child(2){opacity:0}.mobile-right .mobile-menu-btn.active .hamburger-line:nth-child(3){transform:rotate(-45deg) translateY(-6px)}.mobile-drawer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;visibility:hidden;opacity:0;transition:all .3s ease}.mobile-drawer.active{visibility:visible;opacity:1}.mobile-drawer.active .drawer-content{transform:translateY(0)}.mobile-drawer .drawer-overlay{display:none}.mobile-drawer .drawer-content{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:var(--white);transform:translateY(100%);transition:transform .3s ease;display:flex;flex-direction:column}.mobile-drawer .drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:2px solid var(--border-gray);background:var(--white);box-shadow:var(--shadow-sm);min-height:60px}.mobile-drawer .drawer-header .drawer-logo{display:flex;align-items:center;gap:12px}.mobile-drawer .drawer-header .drawer-logo .logo{height:32px;width:auto}.mobile-drawer .drawer-header .drawer-logo .logo-text{font-size:16px;font-weight:700;color:var(--primary-blue)}.mobile-drawer .drawer-header .drawer-close{width:40px;height:40px;background:rgba(0,0,0,0);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:18px;color:var(--text-gray);transition:all .3s ease}.mobile-drawer .drawer-header .drawer-close:hover{background:var(--white);color:var(--text-dark)}.mobile-drawer .drawer-nav{flex:1;padding:0;overflow-y:auto;background:var(--white)}.mobile-drawer .drawer-nav .drawer-menu{list-style:none;margin:0;padding:20px 0}.mobile-drawer .drawer-nav .drawer-menu li{margin-bottom:8px}.mobile-drawer .drawer-nav .drawer-menu li .drawer-link{display:block;padding:16px 24px;margin:0 20px;color:var(--text-dark);text-decoration:none;font-size:18px;font-weight:500;border-radius:12px;transition:all .3s ease}.mobile-drawer .drawer-nav .drawer-menu li .drawer-link:hover,.mobile-drawer .drawer-nav .drawer-menu li .drawer-link:active{background:var(--light-bg);color:var(--primary-blue);transform:translateX(4px);box-shadow:var(--shadow-sm)}.mobile-drawer .drawer-actions{padding:24px;border-top:2px solid var(--border-gray);background:var(--white);box-shadow:0 -4px 12px rgba(0,0,0,.05)}.mobile-drawer .drawer-actions .drawer-login-btn{display:block;text-align:center;padding:14px 20px;color:var(--text-dark);text-decoration:none;border:2px solid var(--primary-blue);border-radius:12px;font-weight:600;font-size:16px;margin-bottom:12px;transition:all .3s ease}.mobile-drawer .drawer-actions .drawer-login-btn:hover{background:var(--light-bg);color:var(--primary-blue)}.mobile-drawer .drawer-actions .drawer-signup-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;background:var(--gradient-primary);color:var(--white);text-decoration:none;border-radius:12px;font-weight:600;font-size:16px;margin-bottom:12px;transition:all .3s ease;box-shadow:var(--shadow-md)}.mobile-drawer .drawer-actions .drawer-signup-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.mobile-drawer .drawer-actions .drawer-search-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 20px;background:var(--gray-bg);color:var(--text-dark);border:none;border-radius:12px;font-weight:500;font-size:16px;cursor:pointer;transition:all .3s ease}.mobile-drawer .drawer-actions .drawer-search-btn:hover{background:var(--light-bg);color:var(--primary-blue)}.btn-mobilemenu{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:40px;height:40px;background:rgba(0,0,0,0);border:none;cursor:pointer;padding:8px;z-index:501}.btn-mobilemenu span{display:block;width:24px;height:2px;background:#1a1a2e;position:relative;transition:all all .15s ease;text-indent:-9999px}.btn-mobilemenu span::before,.btn-mobilemenu span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:#1a1a2e;transition:all all .15s ease}.btn-mobilemenu span::before{top:-8px}.btn-mobilemenu span::after{top:8px}.btn-mobilemenu.on span{background:rgba(0,0,0,0)}.btn-mobilemenu.on span::before{top:0;transform:rotate(45deg)}.btn-mobilemenu.on span::after{top:0;transform:rotate(-45deg)}.main-nav.m-nav{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:500;right:-100%;transition:none;overflow-y:auto;display:flex;flex-direction:column}.main-nav.m-nav .nav-header{padding:24px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.main-nav.m-nav .nav-list{list-style:none;margin:0;padding:0;flex-grow:1}.main-nav.m-nav .nav-list .nav-item{border-bottom:1px solid #e2e8f0}.main-nav.m-nav .nav-list .nav-item>a{display:flex;align-items:center;padding:24px;color:#1a1a2e;font-size:18px;font-weight:500;text-decoration:none;position:relative}.main-nav.m-nav .nav-list .nav-item.has-submenu>a::after{content:"";position:absolute;right:24px;top:50%;width:8px;height:8px;border-right:2px solid #64748b;border-bottom:2px solid #64748b;transform:translateY(-50%) rotate(45deg);transition:transform all .15s ease}.main-nav.m-nav .nav-list .nav-item.expanded>a::after{transform:translateY(-25%) rotate(-135deg)}.main-nav.m-nav .nav-list .nav-item .sub-menu{display:none;list-style:none;padding:0;margin:0;background:#f8fafc}.main-nav.m-nav .nav-list .nav-item .sub-menu a{display:block;padding:16px 24px 16px 48px;color:#64748b;font-size:14px;text-decoration:none}.main-nav.m-nav .nav-list .nav-item .sub-menu a:hover{background:#fff;color:#4b9bff}.main-nav.m-nav .nav-list .nav-item.expanded .sub-menu{display:block}.main-nav.m-nav .info_wrap{padding:32px 24px;background:#fff;border-top:1px solid #e2e8f0;margin-top:auto}.nav-menu{display:flex;list-style:none;gap:8px;margin:0;padding:0}.nav-link{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--text-dark);font-weight:500;font-size:15px;padding:8px 16px;border-radius:8px;transition:all .3s ease}.nav-link:hover{background:var(--light-bg);color:var(--primary-blue);transform:translateY(-2px)}.nav-icon{font-size:18px}.signup-btn{display:flex;align-items:center;gap:8px;text-decoration:none;background:var(--gradient-primary);color:var(--white);padding:12px 24px;border-radius:50px;font-weight:600;transition:all .3s ease;box-shadow:var(--shadow-md)}.signup-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}body{padding-top:80px}@media(max-width: 768px){.global-header{height:60px}.global-header .container .header-content{padding:0 16px;height:60px}body{padding-top:60px}}@media(max-width: 480px){.global-header .header-content{padding:0 12px}.logo .logo-text{display:none}}.global-footer{background:#1a1a2e;color:#fff;padding:80px 0 40px}@media(max-width: 768px){.global-footer{padding:48px 0 32px}}.footer-top{display:grid;grid-template-columns:2fr 3fr;gap:80px;margin-bottom:64px;max-width:1280px;margin-left:auto;margin-right:auto;padding:0 24px}@media(max-width: 1024px){.footer-top{grid-template-columns:1fr;gap:40px}}.footer-brand{max-width:360px}.footer-brand .footer-logo{height:48px;margin-bottom:24px}.footer-brand .footer-desc{font-size:14px;line-height:1.8;color:hsla(0,0%,100%,.7);margin-bottom:24px}.footer-brand .footer-newsletter{margin-bottom:32px}.footer-brand .footer-newsletter h4{font-size:18px;font-weight:600;margin-bottom:16px}.footer-brand .footer-newsletter .newsletter-form{display:flex;gap:8px}.footer-brand .footer-newsletter .newsletter-form input{flex:1;padding:8px 16px;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:8px;color:#fff;font-size:14px}.footer-brand .footer-newsletter .newsletter-form input::placeholder{color:hsla(0,0%,100%,.5)}.footer-brand .footer-newsletter .newsletter-form input:focus{background:hsla(0,0%,100%,.15);border-color:#4b9bff;outline:none}.footer-brand .footer-newsletter .newsletter-form button{padding:8px 24px;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);color:#fff;border-radius:8px;font-weight:600;font-size:14px;transition:all .3s ease}.footer-brand .footer-newsletter .newsletter-form button:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(75,155,255,.1)}.social-links{display:flex;gap:16px}.social-links a{width:44px;height:44px;background:hsla(0,0%,100%,.1);border-radius:12px;display:flex;justify-content:center;align-items:center;color:#fff;transition:all .3s ease;font-size:20px}.social-links a:hover{background:#4b9bff;transform:translateY(-3px)}.social-links a.facebook:hover{background:#1877f2}.social-links a.twitter:hover{background:#1da1f2}.social-links a.linkedin:hover{background:#0077b5}.social-links a.github:hover{background:#333}.social-links a.youtube:hover{background:red}.footer-links{display:grid;grid-template-columns:repeat(4, 1fr);gap:40px}@media(max-width: 1024px){.footer-links{grid-template-columns:repeat(2, 1fr)}}@media(max-width: 768px){.footer-links{grid-template-columns:1fr;text-align:center}}.footer-column h4{font-size:16px;font-weight:700;margin-bottom:24px;color:#fff}.footer-column ul{list-style:none}.footer-column ul li{margin-bottom:16px}.footer-column ul li a{color:hsla(0,0%,100%,.7);font-size:14px;transition:all .3s ease;position:relative}.footer-column ul li a::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;background:#00d4ff;transition:all .3s ease}.footer-column ul li a:hover{color:#00d4ff}.footer-column ul li a:hover::after{width:100%}.footer-column .footer-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:rgba(107,207,127,.2);color:#6bcf7f;border-radius:50px;font-size:12px;font-weight:600;margin-left:8px}.footer-bottom{padding-top:40px;border-top:1px solid hsla(0,0%,100%,.1);max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px}.footer-legal{display:flex;justify-content:space-between;align-items:center}@media(max-width: 768px){.footer-legal{flex-direction:column;gap:24px;text-align:center}}.footer-legal p{color:hsla(0,0%,100%,.5);font-size:14px;margin:0}.footer-legal .legal-links{display:flex;gap:24px}.footer-legal .legal-links a{color:hsla(0,0%,100%,.7);font-size:14px;transition:all .3s ease}.footer-legal .legal-links a:hover{color:#fff}.footer-decoration{position:relative;overflow:hidden}.footer-decoration::before{content:"";position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle, rgba(75, 155, 255, 0.1) 0%, transparent 70%);border-radius:50%}.footer-decoration::after{content:"";position:absolute;bottom:-150px;left:-150px;width:400px;height:400px;background:radial-gradient(circle, rgba(0, 212, 255, 0.05) 0%, transparent 70%);border-radius:50%}.grid{display:grid;gap:24px}.grid-cols-1{grid-template-columns:1fr}.grid-cols-2{grid-template-columns:repeat(2, 1fr)}.grid-cols-3{grid-template-columns:repeat(3, 1fr)}.grid-cols-4{grid-template-columns:repeat(4, 1fr)}.grid-cols-5{grid-template-columns:repeat(5, 1fr)}.grid-cols-6{grid-template-columns:repeat(6, 1fr)}.grid-cols-12{grid-template-columns:repeat(12, 1fr)}.grid-auto{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}.grid-auto-sm{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}.grid-auto-lg{grid-template-columns:repeat(auto-fit, minmax(350px, 1fr))}.grid.gap-0{gap:0}.grid.gap-sm{gap:8px}.grid.gap-md{gap:16px}.grid.gap-lg{gap:24px}.grid.gap-xl{gap:32px}@media(max-width: 1024px){.grid-md-cols-1{grid-template-columns:1fr}.grid-md-cols-2{grid-template-columns:repeat(2, 1fr)}}@media(max-width: 768px){.grid-sm-cols-1{grid-template-columns:1fr}.grid-sm-cols-2{grid-template-columns:repeat(2, 1fr)}}.col-span-1{grid-column:span 1}.col-span-2{grid-column:span 2}.col-span-3{grid-column:span 3}.col-span-4{grid-column:span 4}.col-span-5{grid-column:span 5}.col-span-6{grid-column:span 6}.col-span-full{grid-column:1/-1}.row-span-1{grid-row:span 1}.row-span-2{grid-row:span 2}.row-span-3{grid-row:span 3}.api-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px}@media(max-width: 1024px){.api-grid{grid-template-columns:repeat(2, 1fr)}}@media(max-width: 768px){.api-grid{grid-template-columns:1fr}}.experience-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px}@media(max-width: 768px){.experience-grid{grid-template-columns:1fr}}.partners-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:40px;align-items:center}@media(max-width: 768px){.partners-grid{grid-template-columns:repeat(2, 1fr)}}.feature-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:32px}@media(max-width: 768px){.feature-grid{grid-template-columns:1fr}}.demo-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}@media(max-width: 1024px){.demo-wrapper{grid-template-columns:1fr}}.footer-grid{display:grid;grid-template-columns:2fr 3fr;gap:80px}@media(max-width: 1024px){.footer-grid{grid-template-columns:1fr;gap:40px}}.footer-grid .footer-links{display:grid;grid-template-columns:repeat(4, 1fr);gap:40px}@media(max-width: 1024px){.footer-grid .footer-links{grid-template-columns:repeat(2, 1fr)}}@media(max-width: 768px){.footer-grid .footer-links{grid-template-columns:1fr;text-align:center}}.pricing-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;align-items:center}@media(max-width: 1024px){.pricing-grid{grid-template-columns:1fr;gap:32px}}.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));gap:24px}@media(max-width: 768px){.testimonial-grid{grid-template-columns:1fr}}.stats-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:32px;text-align:center}@media(max-width: 1024px){.stats-grid{grid-template-columns:repeat(2, 1fr)}}@media(max-width: 768px){.stats-grid{grid-template-columns:1fr}}.two-column{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}@media(max-width: 1024px){.two-column{grid-template-columns:1fr;gap:32px}}.two-column.reverse{direction:rtl}.two-column.reverse>*{direction:ltr}@media(max-width: 1024px){.two-column.reverse{direction:ltr}}.three-column{display:grid;grid-template-columns:repeat(3, 1fr);gap:32px}@media(max-width: 1024px){.three-column{grid-template-columns:1fr}}.container{max-width:1280px;margin:0 auto;padding:0 24px}@media(max-width: 768px){.container{padding:0 16px}}.container-fluid{max-width:100%;padding:0 24px}.container-narrow{max-width:960px}.container-wide{max-width:1440px}.section{padding:100px 0}@media(max-width: 768px){.section{padding:64px 0}}.section-sm{padding:48px 0}.section-lg{padding:150px 0}.section-no-top{padding-top:0}.section-no-bottom{padding-bottom:0}.section-bg-gray{background:#f8fafc}.section-bg-light{background:#eff6ff}.section-bg-gradient{background:linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%)}.section-bg-gradient-reverse{background:linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%)}.section-bg-primary{background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);color:#fff}.section-bg-dark{background:#1a1a2e;color:#fff}.section-header{text-align:center;margin-bottom:64px}@media(max-width: 768px){.section-header{margin-bottom:48px}}.section-header .section-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 16px;background:#eff6ff;color:#4b9bff;border-radius:50px;font-size:14px;font-weight:600;margin-bottom:16px}.section-header .section-title{font-size:40px;font-weight:700;margin-bottom:16px;color:#1a1a2e}@media(max-width: 768px){.section-header .section-title{font-size:32px}}.section-header .section-title .title-highlight{background:linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.section-header .section-subtitle{font-size:18px;color:#64748b;line-height:1.6;max-width:600px;margin:0 auto}@media(max-width: 768px){.section-header .section-subtitle{font-size:16px}}.content-wrapper{position:relative;min-height:100vh;display:flex;flex-direction:column}.content-wrapper .main-content{flex:1;padding-top:80px}.page-wrapper{position:relative;overflow:hidden}.inner-content{position:relative;z-index:1}.btn{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;border-radius:12px;font-weight:600;font-size:16px;text-decoration:none;transition:all .3s ease;cursor:pointer;border:none}.btn:hover{transform:translateY(-3px)}.btn{position:relative;overflow:hidden}.btn-sm{padding:8px 16px;font-size:14px}.btn-md{padding:16px 24px;font-size:16px}.btn-lg{padding:16px 32px;font-size:18px}.btn-xl{padding:24px 40px;font-size:20px}.btn-primary{background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);color:#fff;box-shadow:0 4px 12px rgba(75,155,255,.1)}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(75,155,255,.2)}.btn-primary:active{transform:translateY(-1px)}.btn-secondary{background:#fff;color:#4b9bff;border:2px solid #4b9bff}.btn-secondary:hover{background:#eff6ff;transform:translateY(-3px)}.btn-accent{background:linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);color:#fff;box-shadow:0 4px 12px rgba(75,155,255,.1)}.btn-accent:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(75,155,255,.2)}.btn-warm{background:linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);color:#fff;box-shadow:0 4px 12px rgba(75,155,255,.1)}.btn-warm:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(75,155,255,.2)}.btn-success{background:#6bcf7f;color:#fff}.btn-success:hover{background:hsl(132,51.0204081633%,51.568627451%);transform:translateY(-3px)}.btn-danger{background:#ff6b6b;color:#fff}.btn-danger:hover{background:#ff3838;transform:translateY(-3px)}.btn-ghost{background:rgba(0,0,0,0);color:#4b9bff;border:2px solid rgba(0,0,0,0)}.btn-ghost:hover{background:rgba(75,155,255,.1);border-color:#4b9bff}.btn-outline{background:rgba(0,0,0,0);color:#1a1a2e;border:2px solid #e2e8f0}.btn-outline:hover{border-color:#4b9bff;color:#4b9bff;transform:translateY(-3px)}.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn.loading{color:rgba(0,0,0,0);pointer-events:none}.btn.loading::after{content:"";position:absolute;width:16px;height:16px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #fff;border-radius:50%;border-top-color:rgba(0,0,0,0);animation:spin .6s linear infinite}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%}.btn-icon.btn-sm{width:32px;height:32px}.btn-icon.btn-lg{width:56px;height:56px}.btn-block{width:100%;justify-content:center}.btn-group{display:inline-flex;gap:-1px}.btn-group .btn{border-radius:0}.btn-group .btn:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}.btn-group .btn:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}.fab{position:fixed;bottom:32px;right:32px;width:60px;height:60px;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);border:none;border-radius:50%;color:#fff;font-size:24px;cursor:pointer;box-shadow:0 8px 24px rgba(75,155,255,.15);transition:all .3s ease;z-index:300;display:flex;justify-content:center;align-items:center}.fab:hover{transform:scale(1.1);box-shadow:0 16px 40px rgba(75,155,255,.2)}.fab:hover .fab-label{opacity:1;transform:translateX(-10px)}.fab .fab-label{position:absolute;right:70px;top:50%;transform:translateY(-50%);background:#1a1a2e;color:#fff;padding:8px 16px;border-radius:8px;font-size:14px;white-space:nowrap;opacity:0;transition:all .3s ease;pointer-events:none}.btn-cta-primary{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;border-radius:12px;font-weight:600;font-size:16px;text-decoration:none;transition:all .3s ease;cursor:pointer;border:none}.btn-cta-primary:hover{transform:translateY(-3px)}.btn-cta-primary{background:#fff;color:#4b9bff;padding:16px 40px;font-size:18px;box-shadow:0 8px 24px rgba(75,155,255,.15)}.btn-cta-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(75,155,255,.2)}.btn-cta-secondary{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;border-radius:12px;font-weight:600;font-size:16px;text-decoration:none;transition:all .3s ease;cursor:pointer;border:none}.btn-cta-secondary:hover{transform:translateY(-3px)}.btn-cta-secondary{background:rgba(0,0,0,0);color:#fff;border:2px solid #fff;padding:16px 40px;font-size:18px}.btn-cta-secondary:hover{background:hsla(0,0%,100%,.1);transform:translateY(-3px)}.card{background:#fff;border-radius:20px;padding:32px;transition:all .3s ease}.card:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(75,155,255,.15)}.card{position:relative;overflow:hidden}.card::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg, transparent 30%, rgba(75, 155, 255, 0.03) 50%, transparent 70%);transform:rotate(45deg);transition:all .5s ease;opacity:0}.card:hover::before{animation:shimmer .6s ease;opacity:1}.api-card{background:#fff;border-radius:20px;padding:32px;transition:all .3s ease}.api-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(75,155,255,.15)}.api-card{text-align:center;border:2px solid #e2e8f0}.api-card:hover{border-color:#4b9bff;transform:translateY(-8px)}.api-card-popular{border-color:#ffd93d;background:linear-gradient(180deg, rgba(255, 217, 61, 0.05) 0%, #FFFFFF 100%)}.api-card-new{border-color:#6bcf7f;background:linear-gradient(180deg, rgba(107, 207, 127, 0.05) 0%, #FFFFFF 100%)}.api-card .api-badge{position:absolute;top:-12px;right:20px;padding:4px 16px;background:#ffd93d;color:#1a1a2e;border-radius:20px;font-size:12px;font-weight:700;text-transform:uppercase}.api-card .api-badge.new{background:#6bcf7f;color:#fff}.api-card .api-badge.beta{background:#a78bfa;color:#fff}.api-card .api-icon{width:60px;height:60px;margin:0 auto 24px;display:flex;justify-content:center;align-items:center;font-size:28px;background:#eff6ff;color:#4b9bff;border-radius:16px;transition:all .3s ease}.api-card:hover .api-icon{transform:scale(1.1);background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);color:#fff}.api-card .api-name{font-size:20px;font-weight:700;margin-bottom:16px;color:#1a1a2e}.api-card .api-description{color:#64748b;line-height:1.6;margin-bottom:24px;font-size:14px}.api-card .api-features{display:flex;justify-content:center;gap:8px;margin-bottom:24px;flex-wrap:wrap}.api-card .api-features .feature-tag{padding:4px 8px;background:#f8fafc;color:#64748b;border-radius:20px;font-size:12px;font-weight:500}.api-card .api-link{display:inline-flex;align-items:center;gap:4px;color:#4b9bff;font-weight:600;font-size:14px;transition:all .3s ease}.api-card .api-link:hover{gap:8px;color:#2e7ff7}.experience-card{background:#fff;border-radius:20px;padding:32px;transition:all .3s ease}.experience-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(75,155,255,.15)}.experience-card{text-align:center}.experience-card .card-icon{width:56px;height:56px;margin:0 auto 24px;display:flex;justify-content:center;align-items:center;font-size:24px;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);color:#fff;border-radius:16px}.experience-card h3{font-size:20px;font-weight:700;margin-bottom:16px;color:#1a1a2e}.experience-card p{color:#64748b;line-height:1.6;margin-bottom:24px;font-size:14px}.experience-card .card-metric{display:flex;flex-direction:column;align-items:center;padding-top:24px;border-top:1px solid #e2e8f0}.experience-card .card-metric .metric-value{font-size:24px;font-weight:800;color:#4b9bff}.experience-card .card-metric .metric-label{font-size:12px;color:#64748b;font-weight:500}.feature-card{background:#fff;border-radius:20px;padding:32px;transition:all .3s ease}.feature-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(75,155,255,.15)}.feature-card{display:flex;align-items:flex-start;gap:24px}.feature-card .feature-icon{flex-shrink:0;width:48px;height:48px;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);color:#fff;border-radius:12px;font-size:24px}.feature-card .feature-content{flex:1}.feature-card .feature-content h4{font-size:18px;font-weight:600;margin-bottom:8px;color:#1a1a2e}.feature-card .feature-content p{color:#64748b;line-height:1.6;font-size:14px}.testimonial-card{background:#fff;border-radius:20px;padding:32px;transition:all .3s ease}.testimonial-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(75,155,255,.15)}.testimonial-card{position:relative}.testimonial-card::before{content:'"';position:absolute;top:16px;left:16px;font-size:60px;color:#4b9bff;opacity:.1;font-weight:700}.testimonial-card .testimonial-content{position:relative;z-index:1;font-size:16px;line-height:1.8;color:#1a1a2e;margin-bottom:24px;font-style:italic}.testimonial-card .testimonial-author{display:flex;align-items:center;gap:16px}.testimonial-card .testimonial-author .author-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}.testimonial-card .testimonial-author .author-info .author-name{font-weight:600;color:#1a1a2e;margin-bottom:2px}.testimonial-card .testimonial-author .author-info .author-title{font-size:14px;color:#64748b}.pricing-card{background:#fff;border-radius:20px;padding:32px;transition:all .3s ease}.pricing-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(75,155,255,.15)}.pricing-card{text-align:center;position:relative}.pricing-card.featured{border:2px solid #4b9bff;transform:scale(1.05)}.pricing-card.featured .pricing-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:4px 16px;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);color:#fff;border-radius:50px;font-size:12px;font-weight:700;text-transform:uppercase}.pricing-card .pricing-header{padding-bottom:24px;border-bottom:1px solid #e2e8f0;margin-bottom:24px}.pricing-card .pricing-header h3{font-size:24px;font-weight:700;margin-bottom:8px;color:#1a1a2e}.pricing-card .pricing-header .price{display:flex;align-items:baseline;justify-content:center;gap:4px}.pricing-card .pricing-header .price .currency{font-size:20px;color:#64748b}.pricing-card .pricing-header .price .amount{font-size:48px;font-weight:800;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.pricing-card .pricing-header .price .period{font-size:16px;color:#64748b}.pricing-card .pricing-features{list-style:none;margin-bottom:24px}.pricing-card .pricing-features li{padding:8px 0;color:#64748b;font-size:14px;display:flex;align-items:center;gap:8px}.pricing-card .pricing-features li::before{content:"✓";color:#6bcf7f;font-weight:700}.pricing-card .pricing-features li.disabled{opacity:.5}.pricing-card .pricing-features li.disabled::before{content:"×";color:#94a3b8}.pricing-card .pricing-cta{margin-top:auto}.form-group{margin-bottom:24px}.form-group label{display:block;font-size:14px;font-weight:500;color:#1a1a2e;margin-bottom:8px}.form-group label .required{color:#ff6b6b;margin-left:2px}.form-group .form-hint{font-size:12px;color:#64748b;margin-top:4px}.form-group .form-error{font-size:12px;color:#ff6b6b;margin-top:4px;display:flex;align-items:center;gap:4px}.form-control{width:100%;padding:12px 16px;font-size:16px;font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;color:#1a1a2e;background:#fff;border:2px solid #e2e8f0;border-radius:8px;transition:all .3s ease}.form-control::placeholder{color:#94a3b8}.form-control:focus{outline:none;border-color:#4b9bff;box-shadow:0 0 0 3px rgba(75,155,255,.1)}.form-control:disabled{background:#f8fafc;color:#64748b;cursor:not-allowed}.form-control-sm{padding:8px 16px;font-size:14px}.form-control-lg{padding:16px 24px;font-size:18px}.form-control.is-valid{border-color:#6bcf7f}.form-control.is-valid:focus{box-shadow:0 0 0 3px rgba(107,207,127,.1)}.form-control.is-invalid{border-color:#ff6b6b}.form-control.is-invalid:focus{box-shadow:0 0 0 3px rgba(255,107,107,.1)}textarea.form-control{min-height:120px;resize:vertical}select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M6 8L0 0h12z' fill='%2364748B'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:40px}.form-check{display:flex;align-items:center;margin-bottom:16px}.form-check input[type=checkbox],.form-check input[type=radio]{width:20px;height:20px;margin-right:8px;cursor:pointer}.form-check label{margin-bottom:0;cursor:pointer;user-select:none}.form-check.disabled{opacity:.5;cursor:not-allowed}.form-check.disabled input,.form-check.disabled label{cursor:not-allowed}.form-switch{display:flex;align-items:center;gap:16px}.form-switch .switch{position:relative;width:48px;height:24px;background:#e2e8f0;border-radius:50px;cursor:pointer;transition:all .3s ease}.form-switch .switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:all .3s ease}.form-switch .switch.active{background:#4b9bff}.form-switch .switch.active::after{transform:translateX(24px)}.input-group{display:flex;width:100%}.input-group .input-group-text{padding:12px 16px;font-size:16px;color:#64748b;background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px 0 0 8px;border-right:none}.input-group .form-control{border-radius:0 8px 8px 0}.input-group.input-group-append .input-group-text{border-radius:0 8px 8px 0;border-right:2px solid #e2e8f0;border-left:none}.input-group.input-group-append .form-control{border-radius:8px 0 0 8px}.form-inline{display:flex;align-items:flex-end;gap:16px}.form-inline .form-group{margin-bottom:0}@media(max-width: 768px){.form-inline{flex-direction:column;align-items:stretch}.form-inline .form-group{margin-bottom:16px}}.form-row{display:grid;grid-template-columns:repeat(2, 1fr);gap:24px}@media(max-width: 768px){.form-row{grid-template-columns:1fr}}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:400;opacity:0;visibility:hidden;transition:all .3s ease}.modal-backdrop.show{opacity:1;visibility:visible}.modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:all .3s ease}.modal.show{opacity:1;visibility:visible}.modal.show .modal-dialog{transform:scale(1)}.modal-dialog{position:relative;background:#fff;border-radius:16px;box-shadow:0 16px 40px rgba(75,155,255,.2);max-width:500px;width:100%;max-height:90vh;display:flex;flex-direction:column;transform:scale(0.95);transition:all .3s ease}.modal-dialog.modal-sm{max-width:400px}.modal-dialog.modal-lg{max-width:800px}.modal-dialog.modal-xl{max-width:1200px}.modal-dialog.modal-fullscreen{max-width:100%;max-height:100%;height:100%;margin:0;border-radius:0}.modal-header{padding:24px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between}.modal-header .modal-title{font-size:24px;font-weight:600;color:#1a1a2e;margin:0}.modal-header .modal-close{width:32px;height:32px;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,0);border:none;border-radius:8px;color:#64748b;font-size:24px;cursor:pointer;transition:all .3s ease}.modal-header .modal-close:hover{background:#f8fafc;color:#1a1a2e}.modal-body{padding:24px;flex:1;overflow-y:auto;color:#1a1a2e;line-height:1.6}.modal-footer{padding:24px;border-top:1px solid #e2e8f0;display:flex;gap:16px;justify-content:flex-end}.modal-footer.modal-footer-center{justify-content:center}.modal-footer.modal-footer-between{justify-content:space-between}.modal-alert .modal-dialog{max-width:400px}.modal-alert .modal-body{text-align:center;padding:32px}.modal-alert .modal-body .alert-icon{width:64px;height:64px;margin:0 auto 24px;display:flex;justify-content:center;align-items:center;font-size:32px;border-radius:50%}.modal-alert .modal-body .alert-icon.alert-success{background:rgba(107,207,127,.1);color:#6bcf7f}.modal-alert .modal-body .alert-icon.alert-warning{background:rgba(255,217,61,.1);color:#ffd93d}.modal-alert .modal-body .alert-icon.alert-danger{background:rgba(255,107,107,.1);color:#ff6b6b}.modal-alert .modal-body .alert-icon.alert-info{background:rgba(75,155,255,.1);color:#4b9bff}.modal-alert .modal-body .alert-title{font-size:24px;font-weight:600;margin-bottom:8px;color:#1a1a2e}.modal-alert .modal-body .alert-message{color:#64748b}.breadcrumb{display:flex;align-items:center;gap:8px;padding:16px 0;font-size:14px}.breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:8px;color:#64748b}.breadcrumb .breadcrumb-item a{color:#64748b;transition:all .3s ease}.breadcrumb .breadcrumb-item a:hover{color:#4b9bff}.breadcrumb .breadcrumb-item.active{color:#1a1a2e;font-weight:500}.breadcrumb .breadcrumb-item:not(:last-child)::after{content:"/";color:#94a3b8;margin-left:8px}.nav-tabs{display:flex;gap:4px;border-bottom:2px solid #e2e8f0;margin-bottom:32px}.nav-tabs .nav-item{position:relative}.nav-tabs .nav-link{display:flex;align-items:center;gap:8px;padding:16px 24px;color:#64748b;font-weight:500;border-bottom:2px solid rgba(0,0,0,0);margin-bottom:-2px;transition:all .3s ease}.nav-tabs .nav-link:hover{color:#1a1a2e}.nav-tabs .nav-link.active{color:#4b9bff;border-bottom-color:#4b9bff}.nav-tabs .nav-link .badge{padding:2px 6px;background:#f8fafc;color:#64748b;border-radius:50px;font-size:11px;font-weight:600}.nav-pills{display:flex;gap:8px;padding:4px;background:#f8fafc;border-radius:12px}.nav-pills .nav-link{padding:8px 24px;color:#64748b;font-weight:500;border-radius:8px;transition:all .3s ease}.nav-pills .nav-link:hover{color:#1a1a2e;background:hsla(0,0%,100%,.5)}.nav-pills .nav-link.active{background:#fff;color:#4b9bff;box-shadow:0 2px 4px rgba(0,0,0,.05)}.sidebar-nav .nav-section{margin-bottom:32px}.sidebar-nav .nav-section .nav-title{font-size:12px;font-weight:600;text-transform:uppercase;color:#64748b;padding:8px 16px;letter-spacing:.05em}.sidebar-nav .nav-menu{list-style:none}.sidebar-nav .nav-menu .nav-item{margin-bottom:4px}.sidebar-nav .nav-menu .nav-link{display:flex;align-items:center;gap:16px;padding:8px 16px;color:#1a1a2e;border-radius:8px;transition:all .3s ease}.sidebar-nav .nav-menu .nav-link .nav-icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center;font-size:18px;color:#64748b}.sidebar-nav .nav-menu .nav-link:hover{background:#f8fafc;color:#4b9bff}.sidebar-nav .nav-menu .nav-link:hover .nav-icon{color:#4b9bff}.sidebar-nav .nav-menu .nav-link.active{background:#eff6ff;color:#4b9bff;font-weight:500}.sidebar-nav .nav-menu .nav-link.active .nav-icon{color:#4b9bff}.sidebar-nav .nav-menu .nav-submenu{margin-left:40px;margin-top:4px;list-style:none}.sidebar-nav .nav-menu .nav-submenu .nav-link{font-size:14px;padding:4px 16px}.pagination{display:flex;align-items:center;gap:4px}.pagination .page-item.disabled .page-link{opacity:.5;cursor:not-allowed;pointer-events:none}.pagination .page-item.active .page-link{background:#4b9bff;color:#fff;border-color:#4b9bff}.pagination .page-link{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 8px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1a1a2e;font-size:14px;font-weight:500;transition:all .3s ease}.pagination .page-link:hover{background:#f8fafc;border-color:#4b9bff;color:#4b9bff}.pagination .page-link.page-prev,.pagination .page-link.page-next{font-size:18px}.pagination .page-dots{padding:0 8px;color:#64748b}.partners{padding:80px 0;background:#fff}.final-cta{position:relative;padding:150px 0;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);overflow:hidden}.hero-section{position:relative;padding:160px 0 100px;background:linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%);overflow:hidden}@media(max-width: 768px){.hero-section{padding:120px 0 60px}}.hero-patterns{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.hero-patterns .pattern-circle{position:absolute;border-radius:50%;opacity:.1}.hero-patterns .pattern-circle.pattern-1{width:400px;height:400px;background:#00d4ff;border-radius:50%;opacity:.1;position:absolute;top:-200px;right:-100px;animation:float 20s ease-in-out infinite}.hero-patterns .pattern-circle.pattern-2{width:300px;height:300px;background:#ffd93d;border-radius:50%;opacity:.1;position:absolute;bottom:-150px;left:-50px;animation:float 15s ease-in-out infinite reverse}.hero-patterns .pattern-dots{position:absolute;top:50%;left:10%;width:100px;height:100px;background-image:radial-gradient(circle, #A78BFA 2px, transparent 2px);background-size:20px 20px;opacity:.3}.hero-content{text-align:center;position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 24px}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 24px;background:#fff;border:2px solid #ffd93d;border-radius:50px;margin-bottom:24px;font-size:14px;font-weight:600;color:#1a1a2e;animation:slideInDown .6s ease-out}.hero-badge .badge-icon{font-size:20px;animation:bounce 2s infinite}.main-headline{font-size:56px;font-weight:800;line-height:1.2;margin-bottom:24px;color:#1a1a2e;animation:slideInUp .8s ease-out}@media(max-width: 768px){.main-headline{font-size:40px}}@media(max-width: 480px){.main-headline{font-size:32px}}.main-headline .headline-highlight{background:linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.sub-headline{font-size:20px;font-weight:400;line-height:1.6;margin-bottom:40px;color:#64748b;animation:slideInUp .9s ease-out}@media(max-width: 768px){.sub-headline{font-size:16px}}.hero-buttons{display:flex;gap:16px;justify-content:center;margin-bottom:64px;animation:slideInUp 1s ease-out}@media(max-width: 768px){.hero-buttons{flex-direction:column;align-items:center}}.hero-buttons .btn{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;border-radius:12px;font-weight:600;font-size:16px;text-decoration:none;transition:all .3s ease;cursor:pointer;border:none}.hero-buttons .btn:hover{transform:translateY(-3px)}.hero-buttons .btn.btn-primary{background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);color:#fff;box-shadow:0 4px 12px rgba(75,155,255,.1)}.hero-buttons .btn.btn-primary:hover{box-shadow:0 16px 40px rgba(75,155,255,.2)}.hero-buttons .btn.btn-secondary{background:#fff;color:#4b9bff;border:2px solid #4b9bff}.hero-buttons .btn.btn-secondary:hover{background:#eff6ff}@media(max-width: 480px){.hero-buttons .btn{width:100%;justify-content:center}}.hero-stats{display:flex;justify-content:center;gap:64px;animation:fadeIn 1.2s ease-out}@media(max-width: 768px){.hero-stats{flex-direction:column;gap:24px}}.hero-stats .stat-item{display:flex;flex-direction:column;align-items:center}.hero-stats .stat-item .stat-number{font-size:40px;font-weight:800;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.hero-stats .stat-item .stat-label{font-size:14px;color:#64748b;font-weight:500}.hero-image{position:relative;margin-top:64px;text-align:center}.hero-image img{max-width:100%;height:auto;border-radius:16px;box-shadow:0 16px 40px rgba(75,155,255,.2)}.hero-image .hero-decoration{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}.hero-image .hero-decoration::before,.hero-image .hero-decoration::after{content:"";position:absolute;border-radius:50%}.hero-image .hero-decoration::before{width:60px;height:60px;background:linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);top:-30px;right:10%;animation:bounce 2s infinite}.hero-image .hero-decoration::after{width:40px;height:40px;background:linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);bottom:-20px;left:15%;animation:bounce 2s infinite .5s}.api-search-section{padding:64px 0;background:linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%);position:relative}.api-search-section::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:600px;height:600px;background:radial-gradient(circle, rgba(75, 155, 255, 0.03) 0%, transparent 70%);pointer-events:none}.api-search-section .search-container{max-width:800px;margin:0 auto;text-align:center;position:relative;z-index:1}.api-search-section .search-form{margin-bottom:32px;animation:slideInUp .8s ease-out}.api-search-section .search-wrapper{display:flex;gap:16px;padding:0 24px}@media(max-width: 768px){.api-search-section .search-wrapper{flex-direction:column;gap:8px}}.api-search-section .search-input{flex:1;padding:16px 32px;font-size:16px;border:2px solid #e2e8f0;border-radius:50px;background:#fff;transition:all .3s ease;outline:none}.api-search-section .search-input::placeholder{color:#94a3b8}.api-search-section .search-input:focus{border-color:#4b9bff;box-shadow:0 0 0 4px rgba(75,155,255,.1)}@media(max-width: 768px){.api-search-section .search-input{width:100%;padding:16px 24px}}.api-search-section .search-button{padding:16px 40px;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);color:#fff;border:none;border-radius:50px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;box-shadow:0 4px 12px rgba(75,155,255,.1);white-space:nowrap}.api-search-section .search-button i{font-size:20px}.api-search-section .search-button:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(75,155,255,.2);background:linear-gradient(135deg, rgb(49.5, 140.8333333333, 255) 0%, rgb(21.4400921659, 111.9585253456, 246.0599078341) 100%)}.api-search-section .search-button:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,.05)}@media(max-width: 768px){.api-search-section .search-button{width:100%;justify-content:center;padding:16px 32px}}.api-search-section .hashtag-suggestions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:0 24px;animation:fadeIn .8s ease-out .2s both}@media(max-width: 768px){.api-search-section .hashtag-suggestions{gap:8px;justify-content:flex-start}}.api-search-section .hashtag-label{font-size:14px;color:#64748b;font-weight:500}@media(max-width: 768px){.api-search-section .hashtag-label{width:100%;margin-bottom:4px}}.api-search-section .hashtag{display:inline-flex;align-items:center;padding:4px 24px;background:#fff;border:1px solid #e2e8f0;border-radius:50px;font-size:14px;color:#1a1a2e;text-decoration:none;transition:all .3s ease;position:relative;overflow:hidden}.api-search-section .hashtag::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);transition:left .3s ease;z-index:0}.api-search-section .hashtag:hover{border-color:#4b9bff;transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.05);color:#fff;position:relative;z-index:1}.api-search-section .hashtag:hover::before{left:0}@media(max-width: 768px){.api-search-section .hashtag{padding:4px 16px;font-size:12px}}.api-showcase{padding:100px 0;background:#fff}.info-section{padding:100px 0;background:#fff;position:relative}.info-section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent 0%, #E2E8F0 20%, #E2E8F0 80%, transparent 100%)}.info-section .info-wrapper{display:flex;flex-direction:column;align-items:center;gap:48px}.info-section .image-container{width:100%;max-width:600px;margin:0 auto}.info-section .image-placeholder{position:relative;width:100%;height:300px;background:linear-gradient(135deg, #EFF6FF 0%, rgba(75, 155, 255, 0.1) 100%);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;box-shadow:0 4px 12px rgba(75,155,255,.1);overflow:hidden}.info-section .image-placeholder::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center, rgba(0, 212, 255, 0.1) 0%, transparent 50%);animation:rotate 20s linear infinite}.info-section .image-placeholder::after{content:"";position:absolute;bottom:-20px;right:-20px;width:100px;height:100px;background:linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);border-radius:50%;opacity:.3;filter:blur(40px)}.info-section .image-placeholder i{font-size:64px;color:#4b9bff;z-index:1}.info-section .image-placeholder span{font-size:24px;font-weight:600;color:#1a1a2e;z-index:1}@media(max-width: 768px){.info-section .image-placeholder{height:200px}.info-section .image-placeholder i{font-size:48px}.info-section .image-placeholder span{font-size:20px}}.info-section .info-content{text-align:center;max-width:800px;margin:0 auto}.info-section .highlight-text{font-size:24px;line-height:1.8;color:#1a1a2e;margin-bottom:48px;font-weight:500}.info-section .highlight-text .text-accent{color:#4b9bff;font-weight:600}@media(max-width: 1024px){.info-section .highlight-text{font-size:20px}}@media(max-width: 768px){.info-section .highlight-text{font-size:16px;padding:0 24px;margin-bottom:40px}}.info-section .action-buttons{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}@media(max-width: 768px){.info-section .action-buttons{flex-direction:column;align-items:center;padding:0 24px}}.info-section .action-btn{display:flex;align-items:center;gap:16px;padding:16px 32px;background:#fff;border:2px solid #e2e8f0;border-radius:50px;text-decoration:none;transition:all .3s ease;min-width:280px;position:relative;overflow:hidden}.info-section .action-btn::before{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);transition:width .3s ease;z-index:0}.info-section .action-btn:hover{border-color:#4b9bff;transform:translateY(-3px);box-shadow:0 8px 24px rgba(75,155,255,.15)}.info-section .action-btn:hover::before{width:100%}.info-section .action-btn:hover .btn-number{background:#fff;color:#4b9bff}.info-section .action-btn:hover .btn-text,.info-section .action-btn:hover i{color:#fff}.info-section .action-btn .btn-number{position:relative;z-index:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);color:#fff;border-radius:50%;font-weight:700;font-size:16px;flex-shrink:0;transition:all .3s ease}.info-section .action-btn .btn-text{position:relative;z-index:1;font-size:16px;font-weight:500;color:#1a1a2e;transition:color .3s ease}.info-section .action-btn i{position:relative;z-index:1;font-size:14px;color:#94a3b8;margin-left:auto;transition:all .3s ease}@media(max-width: 768px){.info-section .action-btn{min-width:100%;justify-content:flex-start}}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.support-center{padding:100px 0;background:#f8fafc}.support-center .section-header{text-align:center;margin-bottom:64px}.support-center .section-header .section-title{font-size:48px;font-weight:700;color:#1a1a2e;margin-bottom:16px}@media(max-width: 768px){.support-center .section-header .section-title{font-size:40px}}.support-center .section-header .section-title .title-highlight{background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.support-center .section-header .section-subtitle{font-size:20px;color:#64748b;line-height:1.8}@media(max-width: 768px){.support-center .section-header .section-subtitle{font-size:16px}}.support-center .support-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:32px;max-width:1000px;margin:0 auto}@media(max-width: 1024px){.support-center .support-grid{grid-template-columns:1fr;gap:24px;max-width:500px}}@media(max-width: 768px){.support-center .support-grid{gap:16px;padding:0 16px}}.support-center .support-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:40px 32px;background:#fff;border-radius:16px;box-shadow:0 2px 4px rgba(0,0,0,.05);text-decoration:none;transition:all .3s ease;overflow:hidden}.support-center .support-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);transform:scaleX(0);transition:transform .3s ease}.support-center .support-card:hover{transform:translateY(-8px);box-shadow:0 16px 40px rgba(75,155,255,.2)}.support-center .support-card:hover::before{transform:scaleX(1)}.support-center .support-card:hover .card-icon{transform:scale(1.1) rotate(5deg);background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);color:#fff}.support-center .support-card:hover .card-arrow{transform:translateX(5px);color:#4b9bff}.support-center .support-card .card-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:#eff6ff;border-radius:50px;margin-bottom:24px;transition:all .3s ease}.support-center .support-card .card-icon i{font-size:36px;color:#4b9bff}.support-center .support-card h3{font-size:24px;font-weight:600;color:#1a1a2e;margin-bottom:8px;text-align:center}.support-center .support-card p{font-size:16px;color:#64748b;text-align:center;line-height:1.8;margin-bottom:24px}.support-center .support-card .card-arrow{margin-top:auto;color:#94a3b8;transition:all .3s ease}.support-center .support-card .card-arrow i{font-size:20px}@media(max-width: 768px){.support-center .support-card{padding:32px 24px}.support-center .support-card .card-icon{width:70px;height:70px}.support-center .support-card .card-icon i{font-size:30px}.support-center .support-card h3{font-size:20px}.support-center .support-card p{font-size:14px}}.api-stats-section{padding:100px 0;background:linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%);position:relative;overflow:hidden}.api-stats-section::before{content:"";position:absolute;top:50%;left:-100px;width:200px;height:200px;background:radial-gradient(circle, #00D4FF 0%, transparent 70%);opacity:.1;border-radius:50%;transform:translateY(-50%)}.api-stats-section::after{content:"";position:absolute;top:50%;right:-100px;width:300px;height:300px;background:radial-gradient(circle, #4B9BFF 0%, transparent 70%);opacity:.08;border-radius:50%;transform:translateY(-50%)}.api-stats-section .section-header{text-align:center;margin-bottom:80px;position:relative;z-index:1}.api-stats-section .section-header .section-title{font-size:40px;font-weight:700;color:#1a1a2e;line-height:1.8;margin-bottom:40px}@media(max-width: 1024px){.api-stats-section .section-header .section-title{font-size:32px}}@media(max-width: 768px){.api-stats-section .section-header .section-title{font-size:24px;padding:0 24px}}.api-stats-section .section-header .section-title .title-highlight{background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text;font-weight:800}.api-stats-section .stats-cards{display:grid;grid-template-columns:repeat(3, 1fr);gap:40px;max-width:1100px;margin:0 auto;position:relative;z-index:1}@media(max-width: 1024px){.api-stats-section .stats-cards{grid-template-columns:1fr;gap:32px;max-width:400px}}@media(max-width: 768px){.api-stats-section .stats-cards{padding:0 24px}}.api-stats-section .stat-card{background:#fff;border-radius:16px;padding:40px;box-shadow:0 4px 12px rgba(75,155,255,.1);border:1px solid rgba(75,155,255,.1);position:relative;overflow:hidden;transition:all .4s ease}.api-stats-section .stat-card::before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);border-radius:16px;opacity:0;z-index:-1;transition:opacity .4s ease}.api-stats-section .stat-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 16px 40px rgba(75,155,255,.2)}.api-stats-section .stat-card:hover::before{opacity:1}.api-stats-section .stat-card:hover .stat-icon{transform:rotate(360deg) scale(1.1);background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%)}.api-stats-section .stat-card:hover .stat-icon i{color:#fff}.api-stats-section .stat-card:hover .stat-number{background:linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.api-stats-section .stat-card .stat-icon{width:70px;height:70px;display:flex;align-items:center;justify-content:center;background:#eff6ff;border-radius:50px;margin-bottom:24px;transition:all .6s cubic-bezier(0.4, 0, 0.2, 1)}.api-stats-section .stat-card .stat-icon i{font-size:32px;color:#4b9bff;transition:color .3s ease}.api-stats-section .stat-card .stat-content .stat-number{font-size:48px;font-weight:800;color:#1a1a2e;margin-bottom:8px;transition:all .3s ease;display:block}@media(max-width: 768px){.api-stats-section .stat-card .stat-content .stat-number{font-size:40px}}.api-stats-section .stat-card .stat-content .stat-number[data-formatted]::after{content:attr(data-formatted)}.api-stats-section .stat-card .stat-content .stat-label{font-size:20px;font-weight:600;color:#1a1a2e;margin-bottom:4px}.api-stats-section .stat-card .stat-content .stat-description{font-size:14px;color:#64748b;line-height:1.6}.api-stats-section .stat-card:nth-child(1) .stat-icon{background:rgba(0,212,255,.1)}.api-stats-section .stat-card:nth-child(1) .stat-icon i{color:#00d4ff}.api-stats-section .stat-card:nth-child(1):hover .stat-icon{background:linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%)}.api-stats-section .stat-card:nth-child(2) .stat-icon{background:rgba(107,207,127,.1)}.api-stats-section .stat-card:nth-child(2) .stat-icon i{color:#6bcf7f}.api-stats-section .stat-card:nth-child(2):hover .stat-icon{background:linear-gradient(135deg, #6BCF7F 0%, rgb(68.4897959184, 194.5102040816, 93.693877551) 100%)}.api-stats-section .stat-card:nth-child(3) .stat-icon{background:rgba(167,139,250,.1)}.api-stats-section .stat-card:nth-child(3) .stat-icon i{color:#a78bfa}.api-stats-section .stat-card:nth-child(3):hover .stat-icon{background:linear-gradient(135deg, #A78BFA 0%, rgb(129.9090909091, 90.1074380165, 247.8925619835) 100%)}@media(max-width: 768px){.api-stats-section .stat-card{padding:32px}.api-stats-section .stat-card .stat-icon{width:60px;height:60px}.api-stats-section .stat-card .stat-icon i{font-size:28px}}@keyframes countUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.stat-number{animation:countUp .6s ease-out forwards}.login-page{min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--light-bg) 0%, var(--gray-bg) 100%);padding:40px 20px;position:relative;overflow:hidden}.login-page::before{content:"";position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);opacity:.1;border-radius:50%}.login-page::after{content:"";position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;background:radial-gradient(circle, var(--primary-blue) 0%, transparent 70%);opacity:.1;border-radius:50%}.login-container{width:100%;max-width:480px;margin:0 auto;position:relative;z-index:1}.login-card{background:var(--white);border-radius:24px;box-shadow:var(--shadow-xl);padding:48px 40px;backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.8)}@media(max-width: 480px){.login-card{padding:32px 24px;border-radius:16px}}.login-header{text-align:center;margin-bottom:40px}.login-header .login-logo{display:inline-flex;align-items:center;gap:12px;margin-bottom:24px}.login-header .login-logo img{height:48px;width:auto}.login-header .login-logo .logo-text{font-size:20px;font-weight:700;color:var(--primary-blue);padding:6px 16px;background:var(--light-bg);border-radius:24px}.login-header .login-title{font-size:28px;font-weight:700;color:var(--text-dark);margin-bottom:8px}.login-header .login-subtitle{font-size:15px;color:var(--text-gray)}.login-form{margin-bottom:24px}.login-form .form-group{margin-bottom:20px}.login-form .form-group:last-child{margin-bottom:0}.login-form .form-label{display:block;font-size:14px;font-weight:600;color:var(--text-dark);margin-bottom:8px}.login-form .form-input{width:100%;padding:14px 16px;font-size:15px;border:2px solid var(--border-gray);border-radius:12px;background:var(--white);transition:all .3s ease;outline:none}.login-form .form-input::placeholder{color:var(--text-light)}.login-form .form-input:focus{border-color:var(--primary-blue);box-shadow:0 0 0 4px rgba(75,155,255,.1)}.login-form .form-input.error{border-color:var(--accent-orange)}.login-form .form-input.error:focus{box-shadow:0 0 0 4px rgba(255,107,107,.1)}.login-form .form-checkbox{display:flex;align-items:center;gap:8px;margin-top:16px}.login-form .form-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary-blue);cursor:pointer}.login-form .form-checkbox label{font-size:14px;color:var(--text-gray);cursor:pointer;user-select:none}.login-button{width:100%;padding:16px 24px;font-size:16px;font-weight:600;color:var(--white);background:var(--gradient-primary);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-md)}.login-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.login-button:active{transform:translateY(0)}.login-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.login-links{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:32px;padding-top:32px;border-top:1px solid var(--border-gray);flex-wrap:wrap}@media(max-width: 480px){.login-links{gap:12px;margin-top:24px;padding-top:24px}}.login-links a{font-size:14px;color:var(--text-gray);text-decoration:none;transition:color .3s ease;display:flex;align-items:center;gap:6px}.login-links a:hover{color:var(--primary-blue)}.login-links a i{font-size:16px}.login-links .link-separator{color:var(--border-gray);font-size:14px}.login-alert{margin-bottom:20px;padding:12px 16px;border-radius:8px;font-size:14px;display:flex;align-items:center;gap:8px}.login-alert.alert-error{background:rgba(255,107,107,.1);color:var(--accent-orange);border:1px solid rgba(255,107,107,.2)}.login-alert.alert-success{background:rgba(107,207,127,.1);color:var(--accent-green);border:1px solid rgba(107,207,127,.2)}.login-alert.alert-info{background:rgba(75,155,255,.1);color:var(--primary-blue);border:1px solid rgba(75,155,255,.2)}.login-alert i{font-size:18px}.login-loading{position:absolute;top:0;left:0;right:0;bottom:0;background:hsla(0,0%,100%,.9);display:flex;align-items:center;justify-content:center;border-radius:24px;z-index:10;opacity:0;pointer-events:none;transition:opacity .3s ease}.login-loading.active{opacity:1;pointer-events:all}.login-loading .spinner{width:40px;height:40px;border:3px solid var(--border-gray);border-top-color:var(--primary-blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.container{max-width:1280px;margin:0 auto;padding:0 24px}@media(max-width: 768px){.container{padding:0 16px}}.d-none{display:none !important}.d-block{display:block !important}.d-inline-block{display:inline-block !important}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-grid{display:grid !important}.flex-center{display:flex;justify-content:center;align-items:center}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.align-center{align-items:center}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-xs{gap:4px}.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}.gap-xl{gap:32px}.m-0{margin:0 !important}.mt-0{margin-top:0 !important}.mb-0{margin-bottom:0 !important}.ml-0{margin-left:0 !important}.mr-0{margin-right:0 !important}.mx-0{margin-left:0 !important;margin-right:0 !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.m-xs{margin:4px !important}.mt-xs{margin-top:4px !important}.mb-xs{margin-bottom:4px !important}.ml-xs{margin-left:4px !important}.mr-xs{margin-right:4px !important}.mx-xs{margin-left:4px !important;margin-right:4px !important}.my-xs{margin-top:4px !important;margin-bottom:4px !important}.m-sm{margin:8px !important}.mt-sm{margin-top:8px !important}.mb-sm{margin-bottom:8px !important}.ml-sm{margin-left:8px !important}.mr-sm{margin-right:8px !important}.mx-sm{margin-left:8px !important;margin-right:8px !important}.my-sm{margin-top:8px !important;margin-bottom:8px !important}.m-md{margin:16px !important}.mt-md{margin-top:16px !important}.mb-md{margin-bottom:16px !important}.ml-md{margin-left:16px !important}.mr-md{margin-right:16px !important}.mx-md{margin-left:16px !important;margin-right:16px !important}.my-md{margin-top:16px !important;margin-bottom:16px !important}.m-lg{margin:24px !important}.mt-lg{margin-top:24px !important}.mb-lg{margin-bottom:24px !important}.ml-lg{margin-left:24px !important}.mr-lg{margin-right:24px !important}.mx-lg{margin-left:24px !important;margin-right:24px !important}.my-lg{margin-top:24px !important;margin-bottom:24px !important}.m-xl{margin:32px !important}.mt-xl{margin-top:32px !important}.mb-xl{margin-bottom:32px !important}.ml-xl{margin-left:32px !important}.mr-xl{margin-right:32px !important}.mx-xl{margin-left:32px !important;margin-right:32px !important}.my-xl{margin-top:32px !important;margin-bottom:32px !important}.m-2xl{margin:40px !important}.mt-2xl{margin-top:40px !important}.mb-2xl{margin-bottom:40px !important}.ml-2xl{margin-left:40px !important}.mr-2xl{margin-right:40px !important}.mx-2xl{margin-left:40px !important;margin-right:40px !important}.my-2xl{margin-top:40px !important;margin-bottom:40px !important}.m-3xl{margin:48px !important}.mt-3xl{margin-top:48px !important}.mb-3xl{margin-bottom:48px !important}.ml-3xl{margin-left:48px !important}.mr-3xl{margin-right:48px !important}.mx-3xl{margin-left:48px !important;margin-right:48px !important}.my-3xl{margin-top:48px !important;margin-bottom:48px !important}.m-4xl{margin:64px !important}.mt-4xl{margin-top:64px !important}.mb-4xl{margin-bottom:64px !important}.ml-4xl{margin-left:64px !important}.mr-4xl{margin-right:64px !important}.mx-4xl{margin-left:64px !important;margin-right:64px !important}.my-4xl{margin-top:64px !important;margin-bottom:64px !important}.m-auto{margin:auto !important}.mt-auto{margin-top:auto !important}.mb-auto{margin-bottom:auto !important}.ml-auto{margin-left:auto !important}.mr-auto{margin-right:auto !important}.mx-auto{margin-left:auto !important;margin-right:auto !important}.my-auto{margin-top:auto !important;margin-bottom:auto !important}.p-0{padding:0 !important}.pt-0{padding-top:0 !important}.pb-0{padding-bottom:0 !important}.pl-0{padding-left:0 !important}.pr-0{padding-right:0 !important}.px-0{padding-left:0 !important;padding-right:0 !important}.py-0{padding-top:0 !important;padding-bottom:0 !important}.p-xs{padding:4px !important}.pt-xs{padding-top:4px !important}.pb-xs{padding-bottom:4px !important}.pl-xs{padding-left:4px !important}.pr-xs{padding-right:4px !important}.px-xs{padding-left:4px !important;padding-right:4px !important}.py-xs{padding-top:4px !important;padding-bottom:4px !important}.p-sm{padding:8px !important}.pt-sm{padding-top:8px !important}.pb-sm{padding-bottom:8px !important}.pl-sm{padding-left:8px !important}.pr-sm{padding-right:8px !important}.px-sm{padding-left:8px !important;padding-right:8px !important}.py-sm{padding-top:8px !important;padding-bottom:8px !important}.p-md{padding:16px !important}.pt-md{padding-top:16px !important}.pb-md{padding-bottom:16px !important}.pl-md{padding-left:16px !important}.pr-md{padding-right:16px !important}.px-md{padding-left:16px !important;padding-right:16px !important}.py-md{padding-top:16px !important;padding-bottom:16px !important}.p-lg{padding:24px !important}.pt-lg{padding-top:24px !important}.pb-lg{padding-bottom:24px !important}.pl-lg{padding-left:24px !important}.pr-lg{padding-right:24px !important}.px-lg{padding-left:24px !important;padding-right:24px !important}.py-lg{padding-top:24px !important;padding-bottom:24px !important}.p-xl{padding:32px !important}.pt-xl{padding-top:32px !important}.pb-xl{padding-bottom:32px !important}.pl-xl{padding-left:32px !important}.pr-xl{padding-right:32px !important}.px-xl{padding-left:32px !important;padding-right:32px !important}.py-xl{padding-top:32px !important;padding-bottom:32px !important}.p-2xl{padding:40px !important}.pt-2xl{padding-top:40px !important}.pb-2xl{padding-bottom:40px !important}.pl-2xl{padding-left:40px !important}.pr-2xl{padding-right:40px !important}.px-2xl{padding-left:40px !important;padding-right:40px !important}.py-2xl{padding-top:40px !important;padding-bottom:40px !important}.p-3xl{padding:48px !important}.pt-3xl{padding-top:48px !important}.pb-3xl{padding-bottom:48px !important}.pl-3xl{padding-left:48px !important}.pr-3xl{padding-right:48px !important}.px-3xl{padding-left:48px !important;padding-right:48px !important}.py-3xl{padding-top:48px !important;padding-bottom:48px !important}.p-4xl{padding:64px !important}.pt-4xl{padding-top:64px !important}.pb-4xl{padding-bottom:64px !important}.pl-4xl{padding-left:64px !important}.pr-4xl{padding-right:64px !important}.px-4xl{padding-left:64px !important;padding-right:64px !important}.py-4xl{padding-top:64px !important;padding-bottom:64px !important}.w-25{width:25%}.w-50{width:50%}.w-75{width:75%}.w-100{width:100%}.w-auto{width:auto}.h-25{height:25%}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.h-auto{height:auto}.vh-100{height:100vh}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-sticky{position:sticky}.bg-primary{background:#4b9bff}.bg-secondary{background:#2e7ff7}.bg-white{background:#fff}.bg-gray{background:#f8fafc}.bg-light{background:#eff6ff}.bg-gradient-primary{background:linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%)}.bg-gradient-accent{background:linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%)}.bg-gradient-warm{background:linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%)}.border{border:1px solid #e2e8f0}.border-0{border:none !important}.border-top{border-top:1px solid #e2e8f0}.border-bottom{border-bottom:1px solid #e2e8f0}.border-left{border-left:1px solid #e2e8f0}.border-right{border-right:1px solid #e2e8f0}.border-primary{border-color:#4b9bff}.rounded-0{border-radius:0}.rounded-sm{border-radius:6px}.rounded{border-radius:8px}.rounded-lg{border-radius:12px}.rounded-xl{border-radius:16px}.rounded-full{border-radius:50px}.rounded-circle{border-radius:50%}.shadow-none{box-shadow:none !important}.shadow-sm{box-shadow:0 2px 4px rgba(0,0,0,.05)}.shadow{box-shadow:0 4px 12px rgba(75,155,255,.1)}.shadow-lg{box-shadow:0 8px 24px rgba(75,155,255,.15)}.shadow-xl{box-shadow:0 16px 40px rgba(75,155,255,.2)}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}@media(max-width: 768px){.sm-hide{display:none !important}}@media(max-width: 1024px){.md-hide{display:none !important}}@media(min-width: 769px){.mobile-only{display:none !important}}@media(max-width: 768px){.desktop-only{display:none !important}}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.transition{transition:all .3s ease}.transition-fast{transition:all .15s ease}.transition-slow{transition:all .5s ease}.transition-none{transition:none}/*# sourceMappingURL=main.min.css.map */
diff --git a/src/main/resources/static/css/main.min.css.map b/src/main/resources/static/css/main.min.css.map
new file mode 100644
index 0000000..147658e
--- /dev/null
+++ b/src/main/resources/static/css/main.min.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/base/_reset.scss","../sass/abstracts/_variables.scss","../sass/base/_typography.scss","../sass/abstracts/_mixins.scss","../sass/base/_animations.scss","../sass/layout/_header.scss","../sass/layout/_footer.scss","../sass/layout/_grid.scss","../sass/layout/_container.scss","../sass/components/_buttons.scss","../sass/components/_cards.scss","../sass/components/_forms.scss","../sass/components/_modals.scss","../sass/components/_navigation.scss","../sass/components/_partners.scss","../sass/components/_cta.scss","../sass/pages/_index.scss","../sass/pages/_login.scss","../sass/base/_utilities.scss"],"names":[],"mappings":"CAIA,EACE,SACA,UACA,sBAGF,KACE,eACA,mCACA,kCACA,kCAGF,KACE,YCqBoB,mFDpBpB,YC4CmB,ID3CnB,MCJU,QDKV,iBCFM,KDGN,kBAIF,MACE,gBAIF,EACE,qBACA,cACA,WC4EgB,aDxElB,IACE,eACA,YACA,cAIF,OACE,oBACA,kBACA,oBACA,eACA,yBACA,YACA,UAIF,sBAGE,oBACA,kBACA,oBACA,YACA,aAIF,MACE,yBACA,iBAIF,kBACE,YChBiB,IDiBjB,YCbkB,IDiBpB,2FAGE,cAIF,YACE,qCACA,MCxEU,QD2EZ,iBACE,qCACA,MC7EU,QCXZ,KACE,UDuCe,KCtCf,YDgDoB,IC/CpB,MDQU,QCJZ,OACE,UDuCc,KCtCd,YD6CsB,IC5CtB,cDuDW,KE7DT,yBDGJ,OAMI,UDgCY,ME3CZ,yBDKJ,OAUI,UD2BY,MCvBhB,OACE,UDwBc,KCvBd,YD8BiB,IC7BjB,cDwCW,KE5DT,yBDiBJ,OAMI,UDiBY,ME1CZ,yBDmBJ,OAUI,UDYW,MCRf,OACE,UDSc,KCRd,YDgBiB,ICfjB,cD0BW,KE5DT,yBD+BJ,OAMI,UDEW,MCEf,OACE,UDFc,KCGd,YDKqB,ICJrB,cDeW,ICZb,OACE,UDTa,KCUb,YDDqB,ICErB,cDSW,ICNb,OACE,UDhBa,KCiBb,YDPqB,ICQrB,cDGW,ICCb,EACE,cDDW,KCEX,YDRmB,ICUnB,aACE,gBAKJ,eCTE,WF1CiB,kDE2CjB,6BACA,sCACA,qBDUF,sBCbE,WFzCgB,kDE0ChB,6BACA,sCACA,qBDcF,oBCjBE,WFxCc,kDEyCd,6BACA,sCACA,qBDkBF,cACE,MDrFa,QCwFf,gBACE,MDxFe,QC2FjB,WACE,MDpFU,QCuFZ,WACE,MDvFU,QC0FZ,YACE,MD1FW,QC6Fb,YACE,MD7FM,KCiGR,WACE,gBAGF,aACE,kBAGF,YACE,iBAIF,cACE,YD3EoB,IC8EtB,aACE,YD9EmB,ICiFrB,eACE,YDjFqB,ICoFvB,WACE,YDpFiB,ICuFnB,gBACE,YDvFsB,IC2FxB,SACE,UD5Ga,KC+Gf,SACE,UD/Ga,KCkHf,WACE,UDlHe,KCqHjB,SACE,UDpHa,KCuHf,SACE,UDvHa,KC2Hf,MACE,UD7Ha,KC8Hb,YDtHoB,ICuHpB,YD9GkB,IC+GlB,MD9JU,QCiKZ,SACE,UDvIa,KCwIb,MDnKU,QCsKZ,MACE,YDhJiB,oCCiJjB,UD7Ia,KC8Ib,WDtKQ,QCuKR,gBACA,cD7GiB,ICiHnB,EACE,MD1La,QC4Lb,QACE,MD5La,QCiMjB,WACE,QDrIW,KCsIX,cACA,8BACA,WDzLQ,QC0LR,kBAEA,aACE,gBAKJ,GACE,YACA,6BACA,cEpNF,iBACE,QACE,qCAEF,IACE,2CAKJ,kBACE,QACE,wBAEF,IACE,6BAKJ,uBACE,KACE,UACA,4BAEF,GACE,UACA,yBAKJ,qBACE,KACE,UACA,2BAEF,GACE,UACA,yBAKJ,uBACE,KACE,UACA,4BAEF,GACE,UACA,yBAKJ,wBACE,KACE,UACA,2BAEF,GACE,UACA,yBAKJ,kBACE,KACE,UAEF,GACE,WAKJ,uBACE,KACE,UACA,qBAEF,GACE,UACA,oBAKJ,gBACE,KACE,uBAEF,GACE,0BAKJ,iBACE,GACE,mBAEF,IACE,sBAEF,KACE,oBAKJ,mBACE,GACE,0CAEF,KACE,0CAKJ,gBACE,GACE,uBAEF,IACE,wBAEF,IACE,wBAEF,IACE,wBAEF,IACE,wBAEF,IACE,wBAEF,IACE,uBAEF,KACE,wBAKJ,iBACE,GACE,UACA,qBAEF,IACE,qBAEF,KACE,UACA,oBAKJ,uBACE,KACE,UACA,sBAEF,GACE,UACA,oBAKJ,kBACE,GACE,mBACA,UAEF,KACE,mBACA,WAKJ,yBACE,GACE,2BAEF,IACE,6BAEF,KACE,4BAKJ,eACE,yCAGF,gBACE,6BAGF,cACE,kCAGF,eACE,wCAGF,iBACE,8BAGF,kBACE,iCAGF,oBACE,mCAGF,aACE,2DAIF,SACE,oBAGF,SACE,oBAGF,SACE,oBAGF,SACE,oBAGF,SACE,oBAIF,eACE,uBAGF,iBACE,uBAGF,eACE,sBAGF,iBACE,sBAIF,YACE,8BAEA,kBACE,sBAIJ,YACE,kDAEA,kBACE,2BACA,WHjQQ,gCGqQZ,cACE,8BAEA,oBACE,uBAIJ,aACE,kBACA,gBAEA,qBACE,WACA,kBACA,SACA,UACA,WACA,YACA,kGAMA,wBACA,8BACA,4BAGF,2BACE,yCClUJ,MAEE,wBACA,0BACA,uBACA,yBACA,yBACA,wBACA,yBAGA,qBACA,qBACA,sBACA,iBACA,mBACA,oBACA,uBAGA,sEACA,qEACA,mEAGA,2CACA,gDACA,iDACA,iDAIF,OACE,kBACA,UACA,WACA,UACA,YACA,gBACA,sBACA,mBACA,SAMF,eACE,eACA,MACA,OACA,QACA,+BACA,2BACA,mCACA,4BACA,aACA,YACA,wBAGF,gBACE,aACA,mBACA,8BACA,YACA,iBACA,cACA,eAQF,aACE,aACA,mBAEA,mBACE,YACA,WAKJ,cACE,aACA,mBACA,SAIF,MACE,aACA,mBACA,SACA,YACA,WAEA,QACE,aACA,mBACA,SACA,YACA,qBAGF,UACE,YACA,WAIJ,WACE,eACA,gBACA,0BACA,iBACA,2BACA,mBACA,qBACA,qBACA,wBAGA,iBACE,+BACA,mBACA,2BACA,4BAGF,mBACE,0BAKJ,+CAGE,qBACA,qBACA,8BAEA,iEACE,sBAGF,2DACE,cAKJ,cACE,aACA,mBACA,SAIF,YACE,WACA,YACA,0BACA,YACA,kBACA,eACA,eACA,uBACA,wBAEA,kBACE,2BACA,0BACA,qBAOJ,gBACE,aACA,mBACA,8BACA,WAEA,yBANF,gBAOI,cAIJ,eACE,aACA,mBACA,8BACA,WAEA,yBANF,eAOI,cAQF,0BACE,YACA,WAIJ,eACE,OACA,kBAEA,6BACE,eACA,gBACA,uBACA,SAKF,+BACE,WACA,YACA,yBACA,YACA,eACA,aACA,sBACA,uBACA,mBACA,QACA,YACA,kBACA,qCAEA,qCACE,0BAGF,+CACE,WACA,WACA,4BACA,wBACA,kBAKE,mEACE,wCAEF,mEACE,UAEF,mEACE,0CAUV,eACE,eACA,MACA,OACA,QACA,SACA,aACA,kBACA,UACA,wBAEA,sBACE,mBACA,UAEA,sCACE,wBAIJ,+BACE,aAGF,+BACE,kBACA,MACA,OACA,QACA,SACA,WACA,YACA,wBACA,2BACA,8BACA,aACA,sBAGF,8BACE,aACA,mBACA,8BACA,aACA,2CACA,wBACA,4BACA,gBAEA,2CACE,aACA,mBACA,SAEA,iDACE,YACA,WAGF,sDACE,eACA,gBACA,0BAIJ,4CACE,WACA,YACA,yBACA,YACA,eACA,aACA,mBACA,uBACA,kBACA,eACA,uBACA,wBAEA,kDACE,wBACA,uBAKN,2BACE,OACA,UACA,gBACA,wBAEA,wCACE,gBACA,SACA,eAEA,2CACE,kBAEA,wDACE,cACA,kBACA,cACA,uBACA,qBACA,eACA,gBACA,mBACA,wBAEA,6HACE,2BACA,0BACA,0BACA,4BAOV,+BACE,aACA,wCACA,wBACA,uCAEA,iDACE,cACA,kBACA,kBACA,uBACA,qBACA,qCACA,mBACA,gBACA,eACA,mBACA,wBAEA,uDACE,2BACA,0BAIJ,kDACE,aACA,mBACA,uBACA,QACA,kBACA,mCACA,mBACA,qBACA,mBACA,gBACA,eACA,mBACA,wBACA,4BAEA,wDACE,2BACA,4BAIJ,kDACE,aACA,mBACA,uBACA,QACA,WACA,kBACA,0BACA,uBACA,YACA,mBACA,gBACA,eACA,eACA,wBAEA,wDACE,2BACA,0BAMR,gBACE,kBACA,MJxZW,KIyZX,QACA,2BACA,WACA,YACA,yBACA,YACA,eACA,YACA,YAEA,qBACE,cACA,WACA,WACA,WJ5dQ,QI6dR,kBACA,6BACA,oBAEA,yDAEE,WACA,kBACA,OACA,WACA,WACA,WJxeM,QIyeN,6BAGF,sCACA,oCAGF,wBACE,yBACA,8DACA,8DAOJ,gBAEE,eACA,MACA,OACA,QACA,SACA,WJ9fM,KI+fN,QJ1ac,II2ad,YACA,gBACA,gBACA,aACA,sBAKA,4BACE,QJvdS,KIwdT,WJ1gBM,QI2gBN,gCAGF,0BACE,gBACA,SACA,UACA,YAEA,oCACE,gCAEA,sCACE,aACA,mBACA,QJxeK,KIyeL,MJ/hBI,QIgiBJ,UJlgBO,KImgBP,YJzfa,II0fb,qBACA,kBAGF,yDACE,WACA,kBACA,MJnfK,KIofL,QACA,UACA,WACA,+BACA,gCACA,yCACA,mCAGF,sDACE,2CAGF,8CACE,aACA,gBACA,UACA,SACA,WJxjBE,QI0jBF,gDACE,cACA,4BACA,MJhkBE,QIikBF,UJtiBK,KIuiBL,qBAEA,sDACE,WJnkBJ,KIokBI,MJhlBG,QIqlBT,uDACE,cAKN,2BACE,kBACA,WJjlBI,KIklBJ,6BACA,gBAQJ,UACE,aACA,gBACA,QACA,SACA,UAGF,UACE,aACA,mBACA,QACA,qBACA,uBACA,gBACA,eACA,iBACA,kBACA,wBAEA,gBACE,2BACA,0BACA,2BAIJ,UACE,eAGF,YACE,aACA,mBACA,QACA,qBACA,mCACA,mBACA,kBACA,mBACA,gBACA,wBACA,4BAEA,kBACE,2BACA,4BAqGJ,KACE,iBAMF,yBACE,eACE,YAEA,0CACE,eACA,YAIJ,KACE,kBAIJ,yBAEI,+BACE,eAKF,iBACE,cC5xBN,eACE,WLWU,QKVV,MLaM,KKZN,oBHEE,yBGLJ,eAMI,qBAIJ,YACE,aACA,8BACA,IL0DY,KKzDZ,cLwDY,KKvDZ,ULqEoB,OKpEpB,iBACA,kBACA,eHXE,0BGGJ,YAWI,0BACA,IL8CU,MKzCd,cACE,gBAEA,2BACE,YACA,cLkCS,KK/BX,2BACE,ULIW,KKHX,YLuBgB,IKtBhB,yBACA,cL2BS,KKxBX,iCACE,cLwBS,KKtBT,oCACE,ULJS,KKKT,YLMiB,IKLjB,cLiBO,KKdT,kDACE,aACA,ILWO,IKTP,wDACE,OACA,iBACA,8BACA,oCACA,cLgBW,IKfX,ML9CA,KK+CA,ULtBO,KKwBP,qEACE,yBAGF,8DACE,+BACA,aLnEK,QKoEL,aAIJ,yDACE,iBACA,WLrDW,kDKsDX,ML/DA,KKgEA,cLHW,IKIX,YL3Be,IK4Bf,ULzCO,KK0CP,WLwBU,aKtBV,+DACE,2BACA,WLxDE,+BKgEZ,cACE,aACA,IL/BW,KKiCX,gBACE,WACA,YACA,8BACA,cLzBe,KExDjB,aACA,uBACA,mBGiFE,MLzFI,KK0FJ,WLCc,uBA/DH,KKiEX,sBACE,WL1GS,QK2GT,2BAGF,+BACE,mBAGF,8BACE,mBAGF,+BACE,mBAGF,6BACE,gBAGF,8BACE,eAMN,cACE,aACA,qCACA,ILvEY,KE7DV,0BGiIJ,cAMI,sCHzIA,yBGmIJ,cAUI,0BACA,mBAKF,kBACE,ULhHa,KKiHb,YLpGe,IKqGf,cLzFS,KK0FT,ML7II,KKgJN,kBACE,gBAEA,qBACE,cLlGO,KKoGP,uBACE,yBACA,UL/HO,KKgIP,WL9DU,aK+DV,kBAEA,8BACE,WACA,kBACA,YACA,OACA,QACA,WACA,WL7KI,QK8KJ,WLzEQ,aK4EV,6BACE,MLlLI,QKoLJ,oCACE,WAQV,6BACE,oBACA,mBACA,ILtIS,IKuIT,gBACA,gCACA,MLhMW,QKiMX,cLzHiB,KK0HjB,ULnKW,KKoKX,YLtJmB,IKuJnB,YL5IS,IKiJb,eACE,YL9IY,KK+IZ,wCACA,ULhIoB,OKiIpB,cACA,aLpJW,KKqJX,cLrJW,KKwJb,cACE,aACA,8BACA,mBHxNE,yBGqNJ,cAMI,sBACA,IL/JS,KKgKT,mBAGF,gBACE,yBACA,UL/LW,KKgMX,SAGF,2BACE,aACA,IL3KS,KK6KT,6BACE,yBACA,ULzMS,KK0MT,WLxIY,aK0IZ,mCACE,MLtOA,KK6OR,mBACE,kBACA,gBAEA,2BACE,WACA,kBACA,WACA,aACA,YACA,aACA,gFACA,kBAGF,0BACE,WACA,kBACA,cACA,YACA,YACA,aACA,gFACA,kBClRJ,MACE,aACA,IN+DW,KM5DX,aACE,0BAGF,aACE,qCAGF,aACE,qCAGF,aACE,qCAGF,aACE,qCAGF,aACE,qCAGF,cACE,sCAIF,WACE,2DAGF,cACE,2DAGF,cACE,2DAIF,YACE,MAGF,aACE,INWS,IMRX,aACE,INQS,KMLX,aACE,INKS,KMFX,aACE,INES,KE5DT,0BI+DA,gBACE,0BAGF,gBACE,sCJtEF,yBI2EA,gBACE,0BAGF,gBACE,sCAMN,YACE,mBAGF,YACE,mBAGF,YACE,mBAGF,YACE,mBAGF,YACE,mBAGF,YACE,mBAGF,eACE,iBAGF,YACE,gBAGF,YACE,gBAGF,YACE,gBAIF,UACE,aACA,2DACA,INrEW,KE3DT,0BI6HJ,UAMI,sCJrIA,yBI+HJ,UAUI,2BAKJ,iBACE,aACA,2DACA,INpFW,KE7DT,yBI8IJ,iBAMI,2BAKJ,eACE,aACA,2DACA,IN7FY,KM8FZ,mBJ7JE,yBIyJJ,eAOI,sCAKJ,cACE,aACA,qCACA,IN1GW,KE9DT,yBIqKJ,cAMI,2BAKJ,cACE,aACA,8BACA,INpHY,KMqHZ,kBJlLE,0BI8KJ,cAOI,2BAKJ,aACE,aACA,8BACA,IN7HY,KEhEV,0BI0LJ,aAMI,0BACA,INpIU,MMuIZ,2BACE,aACA,qCACA,IN1IU,KE7DV,0BIoMF,2BAMI,sCJ5MF,yBIsMF,2BAUI,0BACA,mBAMN,cACE,aACA,qCACA,IN7JW,KM8JX,mBJzNE,0BIqNJ,cAOI,0BACA,INjKS,MMsKb,kBACE,aACA,2DACA,IN1KW,KE7DT,yBIoOJ,kBAMI,2BAKJ,YACE,aACA,qCACA,INpLW,KMqLX,kBJjPE,0BI6OJ,YAOI,sCJtPA,yBI+OJ,YAWI,2BAKJ,YACE,aACA,8BACA,INlMY,KMmMZ,mBJjQE,0BI6PJ,YAOI,0BACA,INzMS,MM4MX,oBACE,cAEA,sBACE,cJ5QF,0BIwQF,oBAQI,eAMN,cACE,aACA,qCACA,IN7NW,KE5DT,0BIsRJ,cAMI,2BClSJ,WACE,UPkFoB,OOjFpB,cACA,eLCE,yBKJJ,WAMI,gBAIF,iBACE,eACA,eAGF,kBACE,gBAGF,gBACE,iBAKJ,SACE,gBLtBE,yBKqBJ,SAII,gBAIF,YACE,eAGF,YACE,gBAGF,gBACE,cAGF,mBACE,iBAMF,iBACE,WPtCM,QOyCR,kBACE,WPzCO,QO4CT,qBACE,6DAGF,6BACE,6DAGF,oBACE,WP9Ce,kDO+Cf,MPxDI,KO2DN,iBACE,WP/DQ,QOgER,MP7DI,KOkER,gBACE,kBACA,cPbY,KEjEV,yBK4EJ,gBAKI,cPjBU,MOoBZ,+BACE,oBACA,mBACA,IP7BS,IO8BT,iBACA,WP7EO,QO8EP,MP5FW,QO6FX,cPhBiB,KOiBjB,UPzDW,KO0DX,YP7CmB,IO8CnB,cPlCS,KOqCX,+BACE,UPzDY,KO0DZ,YPlDe,IOmDf,cPxCS,KOyCT,MP9FQ,QEPR,yBKiGF,+BAOI,UPhEU,MOmEZ,gDL9CF,WFzCgB,kDE0ChB,6BACA,sCACA,qBKgDA,kCACE,UP5EW,KO6EX,MP1GQ,QO2GR,YP7DiB,IO8DjB,gBACA,cLrHA,yBKgHF,kCAQI,UPpFW,MO0FjB,iBACE,kBACA,iBACA,aACA,sBAEA,+BACE,OACA,YPtDY,KO2DhB,cACE,kBACA,gBAIF,eACE,kBACA,UCvJF,KNiCE,oBACA,mBACA,IF4BW,IE3BX,kBACA,cFuCiB,KEtCjB,YFcqB,IEbrB,UFCe,0BECf,WFgEgB,aE/DhB,eACA,YAEA,WACE,2BM9CJ,KAEE,kBACA,gBAGA,QACE,iBACA,UR+BW,KQ5Bb,QACE,kBACA,UR2Ba,KQxBf,QACE,kBACA,URuBW,KQpBb,QACE,kBACA,URmBW,KQfb,aACE,WRLe,kDQMf,MRfI,KQgBJ,WRDQ,+BQGR,mBACE,2BACA,WRHM,gCQMR,oBACE,2BAIJ,eACE,WR7BI,KQ8BJ,MR1CW,QQ2CX,yBAEA,qBACE,WRhCK,QQiCL,2BAIJ,YACE,WR9Bc,kDQ+Bd,MRzCI,KQ0CJ,WR3BQ,+BQ6BR,kBACE,2BACA,WR7BM,gCQiCV,UACE,WRxCY,kDQyCZ,MRpDI,KQqDJ,WRtCQ,+BQwCR,gBACE,2BACA,WRxCM,gCQ4CV,aACE,WRrEW,QQsEX,MR/DI,KQiEJ,mBACE,iDACA,2BAIJ,YACE,WRhFY,QQiFZ,MRzEI,KQ2EJ,kBACE,mBACA,2BAIJ,WACE,yBACA,MR/FW,QQgGX,+BAEA,iBACE,+BACA,aRpGS,QQwGb,aACE,yBACA,MRjGQ,QQkGR,yBAEA,mBACE,aR9GS,QQ+GT,MR/GS,QQgHT,2BAKJ,4BAEE,WACA,mBACA,oBAGF,aACE,oBACA,oBAEA,oBACE,WACA,kBACA,WACA,YNtDJ,kBACA,QACA,SACA,gCMqDI,sBACA,kBACA,+BACA,mCAKJ,UACE,oBACA,mBACA,uBACA,WACA,YACA,UACA,cRvEmB,IQyEnB,iBACE,WACA,YAGF,iBACE,WACA,YAKJ,WACE,WACA,uBAIF,WACE,oBACA,SAEA,gBACE,gBAEA,4BACE,uBRvGW,KQwGX,0BRxGW,KQ2Gb,2BACE,wBR5GW,KQ6GX,2BR7GW,KQoHnB,KACE,eACA,ORhIW,KQiIX,MRjIW,KQkIX,WACA,YACA,WR/KiB,kDQgLjB,YACA,cRxHqB,IQyHrB,MR3LM,KQ4LN,UR/Ja,KQgKb,eACA,WR9KU,gCQ+KV,WRpGgB,aQqGhB,QR9Gc,IE5Ed,aACA,uBACA,mBM2LA,WACE,qBACA,WRpLQ,gCQsLR,sBACE,UACA,4BAIJ,gBACE,kBACA,WACA,QACA,2BACA,WRrNQ,QQsNR,MRnNI,KQoNJ,iBACA,cRxJe,IQyJf,UR7LW,KQ8LX,mBACA,UACA,WR9Hc,aQ+Hd,oBAMF,iBN7MA,oBACA,mBACA,IF4BW,IE3BX,kBACA,cFuCiB,KEtCjB,YFcqB,IEbrB,UFCe,0BECf,WFgEgB,aE/DhB,eACA,YAEA,uBACE,2BMgMF,iBAEE,WRlOI,KQmOJ,MR/OW,QQgPX,kBACA,UR1MW,KQ2MX,WRtNQ,gCQwNR,uBACE,2BACA,WRzNM,gCQ6NV,mBN3NA,oBACA,mBACA,IF4BW,IE3BX,kBACA,cFuCiB,KEtCjB,YFcqB,IEbrB,UFCe,0BECf,WFgEgB,aE/DhB,eACA,YAEA,yBACE,2BM8MF,mBAEE,yBACA,MRjPI,KQkPJ,sBACA,kBACA,URzNW,KQ2NX,yBACE,8BACA,2BCtQN,MPoDE,WFtCM,KEuCN,cFyBkB,KExBlB,QF0Da,KEzDb,WFkDgB,aEhDhB,YACE,2BACA,WF7BQ,gCS9BZ,MAEE,kBACA,gBAGA,cACE,WACA,kBACA,SACA,UACA,WACA,YACA,kGAMA,wBACA,WTuFc,aStFd,UAGF,oBACE,2BACA,UAKJ,UPqBE,WFtCM,KEuCN,cFyBkB,KExBlB,QF0Da,KEzDb,WFkDgB,aEhDhB,gBACE,2BACA,WF7BQ,gCSCZ,UAEE,kBACA,yBAEA,gBACE,aTnCW,QSoCX,2BAIF,kBACE,aTtCY,QSuCZ,8EAIF,cACE,aT1CW,QS2CX,+EAIF,qBACE,kBACA,UACA,WACA,iBACA,WTtDY,QSuDZ,MTjDQ,QSkDR,cTiBgB,KShBhB,UTxBW,KSyBX,YTVe,ISWf,yBAEA,yBACE,WT5DS,QS6DT,MTtDE,KSyDJ,0BACE,WThEU,QSiEV,MT3DE,KSgEN,oBACE,WACA,YACA,mBP7DF,aACA,uBACA,mBO6DE,eACA,WTpEO,QSqEP,MTnFW,QSoFX,cTTe,KSUf,WTkBc,aSfhB,0BACE,qBACA,WTrEe,kDSsEf,MT/EI,KSmFN,oBACE,UTxDW,KSyDX,YT9Ce,IS+Cf,cTpCS,KSqCT,MT1FQ,QS6FV,2BACE,MT7FQ,QS8FR,YThDiB,ISiDjB,cT1CS,KS2CT,UTrEW,KSyEb,wBACE,aACA,uBACA,ITpDS,ISqDT,cTnDS,KSoDT,eAEA,qCACE,gBACA,WT1GI,QS2GJ,MT9GM,QS+GN,cT7Cc,KS8Cd,UTtFS,KSuFT,YT1Ee,IS+EnB,oBACE,oBACA,mBACA,ITvES,ISwET,MTpIW,QSqIX,YTnFmB,ISoFnB,UTjGW,KSkGX,WThCc,aSkCd,0BACE,IT7EO,IS8EP,MT1IW,QSgJjB,iBP/FE,WFtCM,KEuCN,cFyBkB,KExBlB,QF0Da,KEzDb,WFkDgB,aEhDhB,uBACE,2BACA,WF7BQ,gCSqHZ,iBAEE,kBAEA,4BACE,WACA,YACA,mBPtIF,aACA,uBACA,mBOsIE,UTjHW,KSkHX,WTtIe,kDSuIf,MThJI,KSiJJ,cTlFe,KSqFjB,oBACE,UTzHW,KS0HX,YT/Ge,ISgHf,cTrGS,KSsGT,MT3JQ,QS8JV,mBACE,MT9JQ,QS+JR,YTjHiB,ISkHjB,cT3GS,KS4GT,UTtIW,KS0Ib,8BACE,aACA,sBACA,mBACA,YTpHS,KSqHT,6BAEA,4CACE,UT9IS,KS+IT,YTpIkB,ISqIlB,MTzLS,QS4LX,4CACE,UTzJS,KS0JT,MTpLM,QSqLN,YT9Ie,ISoJrB,cPnJE,WFtCM,KEuCN,cFyBkB,KExBlB,QF0Da,KEzDb,WFkDgB,aEhDhB,oBACE,2BACA,WF7BQ,gCSyKZ,cAEE,aACA,uBACA,IT1IW,KS4IX,4BACE,cACA,WACA,YP5LF,aACA,uBACA,mBO4LE,WT3Le,kDS4Lf,MTrMI,KSsMJ,cTxIe,KSyIf,UT1KW,KS6Kb,+BACE,OAEA,kCACE,UTnLS,KSoLT,YTzKiB,IS0KjB,cT/JO,ISgKP,MTpNM,QSuNR,iCACE,MTvNM,QSwNN,YT1Ke,IS2Kf,UT9LS,KSoMf,kBPvLE,WFtCM,KEuCN,cFyBkB,KExBlB,QF0Da,KEzDb,WFkDgB,aEhDhB,wBACE,2BACA,WF7BQ,gCS6MZ,kBAEE,kBAEA,0BACE,YACA,kBACA,ITlLS,KSmLT,KTnLS,KSoLT,eACA,MTnPW,QSoPX,WACA,YTlMe,ISqMjB,uCACE,kBACA,UACA,UTrNa,KSsNb,YTnMgB,ISoMhB,MTpPQ,QSqPR,cT/LS,KSgMT,kBAGF,sCACE,aACA,mBACA,ITvMS,KSyMT,qDACE,WACA,YACA,cT5LiB,IS6LjB,iBAIA,gEACE,YT9Ne,IS+Nf,MTxQI,QSyQJ,kBAGF,iEACE,UTjPO,KSkPP,MT7QI,QSoRZ,cP5OE,WFtCM,KEuCN,cFyBkB,KExBlB,QF0Da,KEzDb,WFkDgB,aEhDhB,oBACE,2BACA,WF7BQ,gCSkQZ,cAEE,kBACA,kBAEA,uBACE,yBACA,sBAEA,sCACE,kBACA,UACA,SACA,2BACA,iBACA,WTxRa,kDSyRb,MTlSE,KSmSF,cTlOe,KSmOf,UT5QS,KS6QT,YT9Pa,IS+Pb,yBAIJ,8BACE,eTxPS,KSyPT,gCACA,cT1PS,KS4PT,iCACE,UTnRS,KSoRT,YT1Qa,IS2Qb,cTjQO,ISkQP,MTtTM,QSyTR,qCACE,aACA,qBACA,uBACA,IT1QO,IS4QP,+CACE,UTjSO,KSkSP,MThUI,QSmUN,6CACE,UTlSQ,KSmSR,YT3RgB,IEWtB,WF1CiB,kDE2CjB,6BACA,sCACA,qBOiRI,6CACE,UT9SS,KS+ST,MT3UI,QSgVV,gCACE,gBACA,cT7RS,KS+RT,mCACE,cACA,MTtVM,QSuVN,UT5TS,KS6TT,aACA,mBACA,ITvSO,ISySP,2CACE,YACA,MTnWO,QSoWP,YTtTW,ISyTb,4CACE,WAEA,oDACE,YACA,MTtWG,QS4WX,2BACE,gBC1XJ,YACE,cVgEW,KU9DX,kBACE,cACA,UVkCW,KUjCX,YV6CiB,IU5CjB,MVIQ,QUHR,cVuDS,IUrDT,4BACE,MVLU,QUMV,gBAIJ,uBACE,UVqBW,KUpBX,MVNQ,QUOR,WV2CS,IUxCX,wBACE,UVeW,KUdX,MVlBY,QUmBZ,WVqCS,IUpCT,aACA,mBACA,IVkCS,IU7Bb,cACE,WACA,kBACA,UVIe,KUHf,YVHoB,mFUIpB,MV3BU,QU4BV,WVzBM,KU0BN,yBACA,cVkCiB,IUjCjB,WV+DgB,aU7DhB,2BACE,MVhCS,QUmCX,oBACE,aACA,aVhDW,QUiDX,yCAGF,uBACE,WVxCM,QUyCN,MV5CQ,QU6CR,mBAIF,iBACE,iBACA,UVxBW,KU2Bb,iBACE,kBACA,UV3BW,KU+Bb,uBACE,aVlEW,QUoEX,6BACE,0CAIJ,yBACE,aV3EY,QU6EZ,+BACE,0CAMN,sBACE,iBACA,gBAIF,oBACE,gBACA,qKACA,4BACA,sCACA,qBACA,cVnCY,KUuCd,YACE,aACA,mBACA,cV7CW,KU+CX,+DAEE,WACA,YACA,aVpDS,IUqDT,eAGF,kBACE,gBACA,eACA,iBAGF,qBACE,WACA,mBAEA,sDAEE,mBAMN,aACE,aACA,mBACA,IV5EW,KU8EX,qBACE,kBACA,WACA,YACA,WVjIU,QUkIV,cVpEiB,KUqEjB,eACA,WV5Cc,aU8Cd,4BACE,WACA,kBACA,QACA,SACA,WACA,YACA,WVhJE,KUiJF,cV/EiB,IUgFjB,WVvDY,aU0Dd,4BACE,WVlKS,QUoKT,mCACE,2BAOR,aACE,aACA,WAEA,+BACE,kBACA,UV5Ia,KU6Ib,MVzKQ,QU0KR,WVvKM,QUwKN,yBACA,0BACA,kBAGF,2BACE,0BAIA,kDACE,0BACA,+BACA,iBAGF,8CACE,0BAMN,aACE,aACA,qBACA,IVjJW,KUmJX,yBACE,gBRhNA,yBQ0MJ,aAUI,sBACA,oBAEA,yBACE,cV5JO,MUkKb,UACE,aACA,qCACA,IVpKW,KE7DT,yBQ8NJ,UAMI,2BCxOJ,gBACE,eACA,MACA,OACA,QACA,SACA,0BACA,QX2FuB,IW1FvB,UACA,kBACA,WX+FgB,aW7FhB,qBACE,UACA,mBAKJ,OACE,eACA,MACA,OACA,QACA,SACA,QX0Ec,IWzEd,aACA,mBACA,uBACA,QXoCW,KWnCX,UACA,kBACA,WXyEgB,aWvEhB,YACE,UACA,mBAEA,0BACE,mBAMN,cACE,kBACA,WXjCM,KWkCN,cX6BiB,KW5BjB,WXlBU,gCWmBV,gBACA,WACA,gBACA,aACA,sBACA,sBACA,WXiDgB,aW9ChB,uBACE,gBAGF,uBACE,gBAGF,uBACE,iBAGF,+BACE,eACA,gBACA,YACA,SACA,gBAKJ,cACE,QXjBW,KWkBX,gCACA,aACA,mBACA,8BAEA,2BACE,UX9CW,KW+CX,YXtCmB,IWuCnB,MXhFQ,QWiFR,SAGF,2BACE,WACA,YT7EF,aACA,uBACA,mBS6EE,yBACA,YACA,cX1Be,IW2Bf,MX1FQ,QW2FR,UX5DW,KW6DX,eACA,wBAEA,iCACE,WX7FI,QW8FJ,MXlGM,QWwGZ,YACE,QXnDW,KWoDX,OACA,gBACA,MX5GU,QW6GV,YX9DmB,IWkErB,cACE,QX5DW,KW6DX,6BACA,aACA,IXhEW,KWiEX,yBAEA,kCACE,uBAGF,mCACE,8BAMF,2BACE,gBAGF,yBACE,kBACA,QXlFS,KWoFT,qCACE,WACA,YACA,mBTrIJ,aACA,uBACA,mBSqII,UX/GU,KWgHV,cX5EiB,IW8EjB,mDACE,gCACA,MXzJO,QW4JT,mDACE,+BACA,MXhKQ,QWmKV,kDACE,gCACA,MXpKQ,QWuKV,gDACE,+BACA,MX7KO,QWiLX,sCACE,UXzIS,KW0IT,YXjIiB,IWkIjB,cXvHO,IWwHP,MX5KM,QW+KR,wCACE,MX/KM,QYZZ,YACE,aACA,mBACA,IZ4DW,IY3DX,eACA,UZkCa,KYhCb,6BACE,aACA,mBACA,IZqDS,IYpDT,MZCQ,QYCR,+BACE,MZFM,QYGN,WZ0FY,aYxFZ,qCACE,MZhBO,QYoBX,oCACE,MZZM,QYaN,YZ2Be,IYxBjB,qDACE,YACA,MZhBO,QYiBP,YZiCO,IY3Bb,UACE,aACA,IZwBW,IYvBX,gCACA,cZ0BW,KYxBX,oBACE,kBAGF,oBACE,aACA,mBACA,IZcS,IYbT,kBACA,MZvCQ,QYwCR,YZDiB,IYEjB,sCACA,mBACA,WZkDc,aYhDd,0BACE,MZ/CM,QYkDR,2BACE,MZ5DS,QY6DT,oBZ7DS,QYgEX,2BACE,gBACA,WZrDI,QYsDJ,MZzDM,QY0DN,cZSe,KYRf,eACA,YZpBiB,IY0BvB,WACE,aACA,IZjBW,IYkBX,QZnBW,IYoBX,WZnEQ,QYoER,cZPiB,KYSjB,qBACE,iBACA,MZ3EQ,QY4ER,YZrCiB,IYsCjB,cZde,IYef,WZec,aYbd,2BACE,MZlFM,QYmFN,8BAGF,4BACE,WZpFE,KYqFF,MZjGS,QYkGT,WZxEM,0BY+EV,0BACE,cZ1CS,KY4CT,qCACE,UZzES,KY0ET,YZ5DiB,IY6DjB,yBACA,MZtGM,QYuGN,iBACA,qBAIJ,uBACE,gBAEA,iCACE,cZ9DO,IYiET,iCACE,aACA,mBACA,IZlEO,KYmEP,iBACA,MZzHM,QY0HN,cZ1Da,IY2Db,WZ7BY,aY+BZ,2CACE,WACA,YVtHN,aACA,uBACA,mBUsHM,UZnGO,KYoGP,MZjII,QYoIN,uCACE,WZlIE,QYmIF,MZhJO,QYkJP,iDACE,MZnJK,QYuJT,wCACE,WZ1IG,QY2IH,MZzJO,QY0JP,YZzGa,IY2Gb,kDACE,MZ7JK,QYmKX,oCACE,YZnGQ,KYoGR,WZzGO,IY0GP,gBAEA,8CACE,UZpIO,KYqIP,iBAOR,YACE,aACA,mBACA,IZxHW,IY4HP,2CACE,WACA,mBACA,oBAKF,yCACE,WZjMO,QYkMP,MZtLA,KYuLA,aZnMO,QYwMb,uBACE,aACA,mBACA,uBACA,eACA,YACA,cACA,WZnMI,KYoMJ,yBACA,cZxIe,IYyIf,MZzMQ,QY0MR,UZ9KW,KY+KX,YZnKiB,IYoKjB,WZ9Gc,aYgHd,6BACE,WZ3MI,QY4MJ,aZzNS,QY0NT,MZ1NS,QY6NX,kEAEE,UZxLS,KY4Lb,uBACE,cACA,MZ3NQ,QabZ,UACE,eACA,WbaM,KcfR,WACE,kBACA,gBACA,WdqBiB,kDcpBjB,gBCJF,cACE,kBACA,sBACA,6DACA,gBbCE,yBaLJ,cAOI,sBAKJ,eACE,kBACA,MACA,OACA,QACA,SACA,oBAEA,+BACE,kBACA,kBACA,WAEA,yCb4GF,Ma3G4B,Mb4G5B,Oa5G4B,Mb6G5B,WFlIY,QEmIZ,kBACA,WACA,kBa/GI,WACA,abmEJ,yCa/DE,yCbqGF,MapG4B,MbqG5B,OarG4B,MbsG5B,WFjIc,QEkId,kBACA,WACA,kBaxGI,cACA,WACA,iDAIJ,6BACE,kBACA,QACA,SACA,YACA,aACA,uEACA,0BACA,WAKJ,cACE,kBACA,kBACA,UACA,Uf2BoB,Oe1BpB,cACA,eAIF,YACE,oBACA,mBACA,IfFW,IeGX,iBACA,WfrDM,KesDN,yBACA,cfUmB,KeTnB,cfLW,KeMX,UfhCa,KeiCb,YfpBqB,IeqBrB,Mf9DU,QE2FV,mCa1BA,wBACE,UfnCW,KEwDb,6BafF,eACE,UfrCc,KesCd,Yf/BsB,IegCtB,Yf7BkB,Ie8BlB,cftBW,KeuBX,Mf7EU,QE+FV,iCAtGE,yBa+EJ,eASI,Uf/CY,ME3CZ,yBaiFJ,eAaI,UfpDY,MeuDd,mCblCA,WFzCgB,kDE0ChB,6BACA,sCACA,qBaqCF,cACE,UfhEa,KeiEb,YfzDoB,Ie0DpB,YflDmB,IemDnB,cf1CY,Ke2CZ,MflGU,QemGV,iCb3GE,yBaqGJ,cASI,Uf1Ea,Me+EjB,cACE,aACA,IfzDW,Ke0DX,uBACA,cftDY,KeuDZ,gCbxHE,yBamHJ,cAQI,sBACA,oBAGF,mBblGA,oBACA,mBACA,IF4BW,IE3BX,kBACA,cFuCiB,KEtCjB,YFcqB,IEbrB,UFCe,0BECf,WFgEgB,aE/DhB,eACA,YAEA,yBACE,2BawFA,+BACE,WfhHa,kDeiHb,Mf1HE,Ke2HF,Wf5GM,+Be8GN,qCACE,Wf7GI,gCeiHR,iCACE,WfnIE,KeoIF,MfhJS,QeiJT,yBAEA,uCACE,WftIG,QEdP,yBaiIF,mBAwBI,WACA,wBAMN,YACE,aACA,uBACA,IfhGY,KEyCZ,+BA1GE,yBa8JJ,YAOI,sBACA,IfzGS,Me4GX,uBACE,aACA,sBACA,mBAEA,oCACE,UftIU,KeuIV,Yf9HkB,IEWtB,WF1CiB,kDE2CjB,6BACA,sCACA,qBaoHE,mCACE,UflJS,KemJT,Mf9KM,Qe+KN,YfxIe,Ie8IrB,YACE,kBACA,Wf9HY,Ke+HZ,kBAEA,gBACE,eACA,YACA,cf5He,Ke6Hf,Wf3KQ,gCe8KV,6BACE,kBACA,WACA,YACA,MACA,OACA,oBAEA,yEAEE,WACA,kBACA,kBAGF,qCACE,WACA,YACA,WftMU,kDeuMV,UACA,Ub/HJ,6BamIE,oCACE,WACA,YACA,WfhNY,kDeiNZ,aACA,SACA,iCAWN,oBACE,eACA,6DACA,kBAEA,4BACE,WACA,kBACA,QACA,SACA,gCACA,YACA,aACA,iFACA,oBAGF,sCACE,gBACA,cACA,kBACA,kBACA,UAGF,iCACE,cf9MS,KEwCX,iCa0KA,oCACE,aACA,IftNS,KeuNT,ebnRA,yBagRF,oCAMI,sBACA,If5NO,KegOX,kCACE,OACA,kBACA,Uf1Pa,Ke2Pb,yBACA,cfrNiB,KesNjB,WfvRI,KewRJ,wBACA,aAEA,+CACE,Mf7RO,QegST,wCACE,af5SS,Qe6ST,yCb3SF,yBa2RF,kCAoBI,WACA,mBAIJ,mCACE,kBACA,WfnSe,kDeoSf,Mf7SI,Ke8SJ,YACA,cf9OiB,Ke+OjB,UftRa,KeuRb,Yf3QmB,Ie4QnB,eACA,wBACA,aACA,mBACA,IfrQS,IesQT,WfxSQ,+BeySR,mBAEA,qCACE,Uf/RS,KekSX,yCACE,2BACA,Wf/SM,gCegTN,+HAGF,0CACE,wBACA,WfxTM,0BExBR,yBaoTF,mCAgCI,WACA,uBACA,mBAIJ,yCACE,aACA,mBACA,uBACA,IflSS,KemST,eACA,eACA,uCbjWA,yBa0VF,yCAUI,IfzSO,Ie0SP,4BAIJ,mCACE,UfvUW,KewUX,MfnWQ,QeoWR,Yf7TiB,IE/CjB,yBayWF,mCAMI,WACA,cftTO,Ke0TX,6BACE,oBACA,mBACA,iBACA,Wf9WI,Ke+WJ,yBACA,cf/SiB,KegTjB,UfxVW,KeyVX,MfrXQ,QesXR,qBACA,wBACA,kBACA,gBAEA,qCACE,WACA,kBACA,MACA,WACA,WACA,YACA,WftXa,kDeuXb,yBACA,UAGF,mCACE,afjZS,QekZT,2BACA,WfzXM,0Be0XN,MfxYE,KeyYF,kBACA,UAEA,2CACE,ObvZJ,yBaoXF,6BAwCI,iBACA,Uf3XS,MeqYf,cACE,gBACA,Wf/ZM,KeuaR,cACE,gBACA,WfzaM,Ke0aN,kBAEA,sBACE,WACA,kBACA,MACA,OACA,QACA,WACA,8FAQF,4BACE,aACA,sBACA,mBACA,IfzYU,Ke4YZ,+BACE,WACA,gBACA,cAGF,iCACE,kBACA,WACA,aACA,6EACA,cf7YgB,Ke8YhB,aACA,sBACA,mBACA,uBACA,IfhaS,KeiaT,WfpcQ,+BeqcR,gBAEA,yCACE,WACA,kBACA,SACA,UACA,WACA,YACA,yFAKA,qCAGF,wCACE,WACA,kBACA,aACA,YACA,YACA,aACA,WfleY,kDemeZ,kBACA,WACA,kBAGF,mCACE,eACA,MfhgBS,QeigBT,UAGF,sCACE,Uf5dS,Ke6dT,YfpdiB,IeqdjB,Mf9fM,Qe+fN,UbtgBF,yBakdF,iCAwDI,aAEA,mCACE,eAGF,sCACE,Uf3eO,Megfb,4BACE,kBACA,gBACA,cAGF,8BACE,UftfW,KeufX,YfvegB,IewehB,MfxhBQ,QeyhBR,cfheU,KeieV,YflfiB,IeofjB,2CACE,MftiBS,QeuiBT,YfrfiB,IE9CnB,0Ba0hBF,8BAaI,UfngBS,MEtCX,yBa4hBF,8BAiBI,UfzgBW,Ke0gBX,eACA,cfhfQ,MeofZ,8BACE,aACA,IfxfS,KeyfT,uBACA,ebvjBA,yBamjBF,8BAOI,sBACA,mBACA,gBAIJ,0BACE,aACA,mBACA,IfvgBS,KewgBT,kBACA,Wf3jBI,Ke4jBJ,yBACA,cf5fiB,Ke6fjB,qBACA,wBACA,gBACA,kBACA,gBAEA,kCACE,WACA,kBACA,MACA,OACA,QACA,YACA,WflkBa,kDemkBb,0BACA,UAGF,gCACE,af7lBS,Qe8lBT,2BACA,WfnkBM,gCeqkBN,wCACE,WAGF,4CACE,Wf1lBA,Ke2lBA,MfvmBO,Qe0mBT,4EAEE,MfhmBA,KeomBJ,sCACE,kBACA,UACA,WACA,YACA,aACA,mBACA,uBACA,WfnmBa,kDeomBb,Mf7mBE,Ke8mBF,kBACA,YfxkBa,IeykBb,UftlBW,KeulBX,cACA,wBAGF,oCACE,kBACA,UACA,Uf9lBW,Ke+lBX,YfplBe,IeqlBf,Mf7nBM,Qe8nBN,0BAGF,4BACE,kBACA,UACA,UfxmBS,KeymBT,MfnoBO,QeooBP,iBACA,wBb9oBF,yBagkBF,0BAkFI,eACA,4BAKN,kBACE,KACE,uBAEF,GACE,0BASJ,gBACE,gBACA,Wf7pBQ,Qe+pBR,gCACE,kBACA,cf3mBU,Ke6mBV,+CACE,UfroBU,KesoBV,Yf/nBa,IegoBb,Mf1qBM,Qe2qBN,cftnBO,KE5DT,yBa8qBA,+CAOI,Uf5oBQ,Me+oBV,gEb3nBJ,WF1CiB,kDE2CjB,6BACA,sCACA,qBa6nBE,kDACE,UfxpBS,KeypBT,MfvrBM,QewrBN,YfzoBc,IEvDhB,yBa6rBA,kDAMI,Uf/pBS,MeoqBf,8BACE,aACA,qCACA,If7oBS,Ke8oBT,iBACA,cb3sBA,0BassBF,8BAQI,0BACA,IfppBO,KeqpBP,iBbltBF,yBawsBF,8BAcI,If1pBO,Ke2pBP,gBAIJ,8BACE,kBACA,aACA,sBACA,mBACA,kBACA,WfvtBI,KewtBJ,cfzpBe,Ke0pBf,Wf3sBQ,0Be4sBR,qBACA,wBACA,gBAEA,sCACE,WACA,kBACA,MACA,OACA,QACA,WACA,Wf5tBa,kDe6tBb,oBACA,8BAGF,oCACE,2BACA,Wf3tBM,gCe6tBN,4CACE,oBAGF,+CACE,kCACA,Wf3uBW,kDe4uBX,MfrvBA,KewvBF,gDACE,0BACA,MftwBO,Qe0wBX,yCACE,WACA,YACA,aACA,mBACA,uBACA,WflwBK,QemwBL,cfpsBe,KeqsBf,cfntBO,KeotBP,wBAEA,2CACE,eACA,MfvxBO,Qe2xBX,iCACE,UfnvBS,KeovBT,Yf3uBiB,Ie4uBjB,MfrxBM,QesxBN,cfluBO,IemuBP,kBAGF,gCACE,Uf9vBW,Ke+vBX,Mf3xBM,Qe4xBN,kBACA,Yf9uBc,Ie+uBd,cfzuBO,Ke4uBT,0CACE,gBACA,MflyBO,QemyBP,wBAEA,4CACE,UfzwBO,KEtCX,yBa2tBF,8BAyFI,kBAEA,yCACE,WACA,YAEA,2CACE,eAIJ,iCACE,Uf1xBO,Ke6xBT,gCACE,UfjyBO,Me4yBf,mBACE,gBACA,6DACA,kBACA,gBAGA,2BACE,WACA,kBACA,QACA,YACA,YACA,aACA,gEACA,WACA,kBACA,2BAGF,0BACE,WACA,kBACA,QACA,aACA,YACA,aACA,gEACA,YACA,kBACA,2BAGF,mCACE,kBACA,cfhzBU,KeizBV,kBACA,UAEA,kDACE,Uf90BU,Ke+0BV,Yfv0Ba,Iew0Bb,Mfl3BM,Qem3BN,Yfn0Bc,Ieo0Bd,cf5zBQ,KE7DV,0Bao3BA,kDAQI,Uft1BQ,MExCZ,yBas3BA,kDAYI,Uf31BO,Ke41BP,gBAGF,mEbz0BJ,WF1CiB,kDE2CjB,6BACA,sCACA,qBaw0BM,Yft1BgB,Ie21BtB,gCACE,aACA,qCACA,Ifj1BU,Kek1BV,iBACA,cACA,kBACA,Ubl5BA,0Ba24BF,gCAUI,0BACA,If11BO,Ke21BP,iBbz5BF,yBa64BF,gCAgBI,gBAIJ,8BACE,Wfx5BI,Key5BJ,cf11Be,Ke21Bf,Qfr2BU,Kes2BV,Wf54BQ,+Be64BR,qCACA,kBACA,gBACA,wBAEA,sCACE,WACA,kBACA,SACA,UACA,WACA,YACA,Wf/5Ba,kDeg6Bb,cf12Ba,Ke22Bb,UACA,WACA,4BAGF,oCACE,wCACA,Wfh6BM,gCek6BN,4CACE,UAGF,+CACE,oCACA,Wfh7BW,kDek7BX,iDACE,Mf57BF,Keg8BF,iDb74BJ,WFzCgB,kDE0ChB,6BACA,sCACA,qBa+4BE,yCACE,WACA,YACA,aACA,mBACA,uBACA,Wfz8BK,Qe08BL,cf34Be,Ke44Bf,cf15BO,Ke25BP,gDAEA,2CACE,eACA,Mf99BO,Qe+9BP,0BAKF,yDACE,Ufz7BQ,Ke07BR,Yfl7BgB,Iem7BhB,Mf99BI,Qe+9BJ,cf36BK,Ie46BL,wBACA,cbx+BJ,yBak+BE,yDASI,Ufl8BM,Mes8BR,gFACE,6BAIJ,wDACE,Uf/8BO,Keg9BP,Yft8Be,Ieu8Bf,Mfh/BI,Qei/BJ,cf97BK,Iei8BP,8DACE,Ufz9BO,Ke09BP,Mfr/BI,Qes/BJ,Yfx8Ba,Ie88Bf,sDACE,8BAEA,wDACE,MfxgCI,Qe4gCR,4DACE,6DAKF,sDACE,gCAEA,wDACE,MfnhCK,QeuhCT,4DACE,sGAKF,sDACE,gCAEA,wDACE,MfhiCM,QeoiCV,4DACE,wGbziCJ,yBai6BF,8BA6II,Qfh/BO,Kek/BP,yCACE,WACA,YAEA,2CACE,gBAQV,mBACE,KACE,UACA,2BAEF,GACE,UACA,yBAIJ,aACE,wCC9kCF,YACE,+BACA,aACA,mBACA,uBACA,4EACA,kBACA,kBACA,gBAGA,oBACE,WACA,kBACA,SACA,WACA,YACA,aACA,2EACA,WACA,kBAGF,mBACE,WACA,kBACA,YACA,UACA,YACA,aACA,4EACA,WACA,kBAIJ,iBACE,WACA,gBACA,cACA,kBACA,UAGF,YACE,wBACA,mBACA,4BACA,kBACA,2BACA,oCAEA,yBARF,YASI,kBACA,oBAIJ,cACE,kBACA,mBAEA,0BACE,oBACA,mBACA,SACA,mBAEA,8BACE,YACA,WAGF,qCACE,eACA,gBACA,0BACA,iBACA,2BACA,mBAIJ,2BACE,eACA,gBACA,uBACA,kBAGF,8BACE,eACA,uBAIJ,YACE,mBAEA,wBACE,mBAEA,mCACE,gBAIJ,wBACE,cACA,eACA,gBACA,uBACA,kBAGF,wBACE,WACA,kBACA,eACA,oCACA,mBACA,wBACA,wBACA,aAEA,qCACE,wBAGF,8BACE,iCACA,yCAGF,8BACE,kCAEA,oCACE,0CAKN,2BACE,aACA,mBACA,QACA,gBAEA,gDACE,WACA,YACA,iCACA,eAGF,iCACE,eACA,uBACA,eACA,iBAKN,cACE,WACA,kBACA,eACA,gBACA,mBACA,mCACA,YACA,mBACA,eACA,wBACA,4BAEA,oBACE,2BACA,4BAGF,qBACE,wBAGF,uBACE,WACA,mBACA,eAIJ,aACE,aACA,uBACA,mBACA,SACA,gBACA,iBACA,wCACA,eAEA,yBAVF,aAWI,SACA,gBACA,kBAGF,eACE,eACA,uBACA,qBACA,0BACA,aACA,mBACA,QAEA,qBACE,0BAGF,iBACE,eAIJ,6BACE,yBACA,eAKJ,aACE,mBACA,kBACA,kBACA,eACA,aACA,mBACA,QAEA,yBACE,gCACA,2BACA,sCAGF,2BACE,gCACA,0BACA,sCAGF,wBACE,+BACA,0BACA,qCAGF,eACE,eAKJ,eACE,kBACA,MACA,OACA,QACA,SACA,8BACA,aACA,mBACA,uBACA,mBACA,WACA,UACA,oBACA,4BAEA,sBACE,UACA,mBAGF,wBACE,WACA,YACA,oCACA,qCACA,kBACA,kCAIJ,gBACE,GACE,0BC5SJ,WACE,UjBkFoB,OiBjFpB,cACA,efCE,yBeJJ,WAMI,gBAKJ,QACE,wBAGF,SACE,yBAGF,gBACE,gCAGF,QACE,wBAGF,eACE,+BAGF,QACE,wBAIF,afhBE,aACA,uBACA,mBekBF,cfdE,aACA,8BACA,mBegBF,aACE,sBAGF,WACE,eAGF,cACE,mBAGF,aACE,uBAGF,WACE,qBAGF,gBACE,uBAGF,eACE,2BAGF,aACE,yBAGF,iBACE,8BAGF,gBACE,6BAIF,QACE,IjBxBW,IiB2Bb,QACE,IjB3BW,IiB8Bb,QACE,IjB9BW,KiBiCb,QACE,IjBjCW,KiBoCb,QACE,IjBpCW,KiBoDX,KACE,oBAGF,MACE,wBAGF,MACE,2BAGF,MACE,yBAGF,MACE,0BAGF,MACE,yBACA,0BAGF,MACE,wBACA,2BA3BF,MACE,sBAGF,OACE,0BAGF,OACE,6BAGF,OACE,2BAGF,OACE,4BAGF,OACE,2BACA,4BAGF,OACE,0BACA,6BA3BF,MACE,sBAGF,OACE,0BAGF,OACE,6BAGF,OACE,2BAGF,OACE,4BAGF,OACE,2BACA,4BAGF,OACE,0BACA,6BA3BF,MACE,uBAGF,OACE,2BAGF,OACE,8BAGF,OACE,4BAGF,OACE,6BAGF,OACE,4BACA,6BAGF,OACE,2BACA,8BA3BF,MACE,uBAGF,OACE,2BAGF,OACE,8BAGF,OACE,4BAGF,OACE,6BAGF,OACE,4BACA,6BAGF,OACE,2BACA,8BA3BF,MACE,uBAGF,OACE,2BAGF,OACE,8BAGF,OACE,4BAGF,OACE,6BAGF,OACE,4BACA,6BAGF,OACE,2BACA,8BA3BF,OACE,uBAGF,QACE,2BAGF,QACE,8BAGF,QACE,4BAGF,QACE,6BAGF,QACE,4BACA,6BAGF,QACE,2BACA,8BA3BF,OACE,uBAGF,QACE,2BAGF,QACE,8BAGF,QACE,4BAGF,QACE,6BAGF,QACE,4BACA,6BAGF,QACE,2BACA,8BA3BF,OACE,uBAGF,QACE,2BAGF,QACE,8BAGF,QACE,4BAGF,QACE,6BAGF,QACE,4BACA,6BAGF,QACE,2BACA,8BA3BF,QACE,uBAGF,SACE,2BAGF,SACE,8BAGF,SACE,4BAGF,SACE,6BAGF,SACE,4BACA,6BAGF,SACE,2BACA,8BAgBF,KACE,qBAGF,MACE,yBAGF,MACE,4BAGF,MACE,0BAGF,MACE,2BAGF,MACE,0BACA,2BAGF,MACE,yBACA,4BA3BF,MACE,uBAGF,OACE,2BAGF,OACE,8BAGF,OACE,4BAGF,OACE,6BAGF,OACE,4BACA,6BAGF,OACE,2BACA,8BA3BF,MACE,uBAGF,OACE,2BAGF,OACE,8BAGF,OACE,4BAGF,OACE,6BAGF,OACE,4BACA,6BAGF,OACE,2BACA,8BA3BF,MACE,wBAGF,OACE,4BAGF,OACE,+BAGF,OACE,6BAGF,OACE,8BAGF,OACE,6BACA,8BAGF,OACE,4BACA,+BA3BF,MACE,wBAGF,OACE,4BAGF,OACE,+BAGF,OACE,6BAGF,OACE,8BAGF,OACE,6BACA,8BAGF,OACE,4BACA,+BA3BF,MACE,wBAGF,OACE,4BAGF,OACE,+BAGF,OACE,6BAGF,OACE,8BAGF,OACE,6BACA,8BAGF,OACE,4BACA,+BA3BF,OACE,wBAGF,QACE,4BAGF,QACE,+BAGF,QACE,6BAGF,QACE,8BAGF,QACE,6BACA,8BAGF,QACE,4BACA,+BA3BF,OACE,wBAGF,QACE,4BAGF,QACE,+BAGF,QACE,6BAGF,QACE,8BAGF,QACE,6BACA,8BAGF,QACE,4BACA,+BA3BF,OACE,wBAGF,QACE,4BAGF,QACE,+BAGF,QACE,6BAGF,QACE,8BAGF,QACE,6BACA,8BAGF,QACE,4BACA,+BAKJ,MACE,UAGF,MACE,UAGF,MACE,UAGF,OACE,WAGF,QACE,WAIF,MACE,WAGF,MACE,WAGF,MACE,WAGF,OACE,YAGF,QACE,YAGF,QACE,aAIF,mBACE,kBAGF,mBACE,kBAGF,gBACE,eAGF,iBACE,gBAIF,YACE,WjB/Pa,QiBkQf,cACE,WjBlQe,QiBqQjB,UACE,WjB3PM,KiB8PR,SACE,WjB9PQ,QiBiQV,UACE,WjBjQS,QiBoQX,qBACE,WjB9PiB,kDiBiQnB,oBACE,WjBjQgB,kDiBoQlB,kBACE,WjBpQc,kDiBwQhB,QACE,yBAGF,UACE,uBAGF,YACE,6BAGF,eACE,gCAGF,aACE,8BAGF,cACE,+BAGF,gBACE,ajBxTa,QiB4Tf,WACE,gBAGF,YACE,cjBzPiB,IiB4PnB,SACE,cjB5PiB,IiB+PnB,YACE,cjB/PiB,KiBkQnB,YACE,cjBlQiB,KiBqQnB,cACE,cjBpQmB,KiBuQrB,gBACE,cjBvQqB,IiB2QvB,aACE,2BAGF,WACE,WjBpUU,0BiBuUZ,QACE,WjBvUU,+BiB0UZ,WACE,WjB1UU,gCiB6UZ,WACE,WjB7UU,gCiBiVZ,iBACE,gBAGF,eACE,cAGF,mBACE,kBAGF,mBACE,kBAGF,iBACE,gBAGF,iBACE,gBAIF,KACE,UAGF,MACE,WAGF,MACE,WAGF,MACE,WAGF,MACE,WAGF,MACE,Wf1ZE,yBe+ZF,SACE,yBf9ZA,0BemaF,SACE,yBAKF,yBADF,aAEI,yBf5aA,yBegbJ,cAEI,yBAKJ,gBACE,eAGF,gBACE,eAGF,oBACE,mBAIF,WACE,UAGF,YACE,YAGF,YACE,WAGF,YACE,YAGF,aACE,UAIF,YACE,WjBrXgB,aiBwXlB,iBACE,WjBxXgB,ciB2XlB,iBACE,WjB3XgB,aiB8XlB,iBACE","file":"main.min.css"}
\ No newline at end of file
diff --git a/src/main/resources/static/img/logo/logo.png b/src/main/resources/static/img/logo/logo.png
new file mode 100644
index 0000000..d84af84
Binary files /dev/null and b/src/main/resources/static/img/logo/logo.png differ
diff --git a/src/main/resources/static/sass/abstracts/_mixins.scss b/src/main/resources/static/sass/abstracts/_mixins.scss
new file mode 100644
index 0000000..9ce7bcc
--- /dev/null
+++ b/src/main/resources/static/sass/abstracts/_mixins.scss
@@ -0,0 +1,144 @@
+// -----------------------------------------------------------------------------
+// This file contains all application-wide SASS mixins
+// -----------------------------------------------------------------------------
+
+// Media query mixins
+@mixin respond-to($breakpoint) {
+  @if $breakpoint == 'xs' {
+    @media (max-width: #{$breakpoint-xs}) { @content; }
+  } @else if $breakpoint == 'sm' {
+    @media (max-width: #{$breakpoint-sm}) { @content; }
+  } @else if $breakpoint == 'md' {
+    @media (max-width: #{$breakpoint-md}) { @content; }
+  } @else if $breakpoint == 'lg' {
+    @media (min-width: #{$breakpoint-lg}) { @content; }
+  } @else if $breakpoint == 'xl' {
+    @media (min-width: #{$breakpoint-xl}) { @content; }
+  } @else if $breakpoint == 'mobile' {
+    @media (max-width: #{$breakpoint-lg}) { @content; }
+  } @else if $breakpoint == 'tablet' {
+    @media (max-width: #{$breakpoint-md}) { @content; }
+  }
+}
+
+// Flexbox mixins
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+// Button mixin
+@mixin button-base {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $button-padding-y $button-padding-x;
+  border-radius: $border-radius-lg;
+  font-weight: $font-weight-semibold;
+  font-size: $font-size-base;
+  text-decoration: none;
+  transition: $transition-base;
+  cursor: pointer;
+  border: none;
+
+  &:hover {
+    transform: translateY(-3px);
+  }
+}
+
+// Card mixin
+@mixin card {
+  background: $white;
+  border-radius: $border-radius-2xl;
+  padding: $card-padding;
+  transition: $transition-base;
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: $shadow-lg;
+  }
+}
+
+// Gradient text
+@mixin gradient-text($gradient) {
+  background: $gradient;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+// Truncate text
+@mixin text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Absolute center
+@mixin absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+// Backdrop blur
+@mixin backdrop-blur($amount: 10px) {
+  backdrop-filter: blur($amount);
+  -webkit-backdrop-filter: blur($amount);
+}
+
+// Animation mixins
+@mixin animate-float {
+  animation: float 20s ease-in-out infinite;
+}
+
+@mixin animate-bounce {
+  animation: bounce 2s infinite;
+}
+
+@mixin animate-slide-in-down {
+  animation: slideInDown 0.6s ease-out;
+}
+
+@mixin animate-slide-in-up {
+  animation: slideInUp 0.8s ease-out;
+}
+
+@mixin animate-fade-in {
+  animation: fadeIn 1.2s ease-out;
+}
+
+// Hover lift effect
+@mixin hover-lift {
+  transition: $transition-base;
+
+  &:hover {
+    transform: translateY(-8px);
+    box-shadow: $shadow-xl;
+  }
+}
+
+// Glass effect
+@mixin glass-effect {
+  background: rgba($white, 0.95);
+  @include backdrop-blur(10px);
+  border: 1px solid rgba($white, 0.18);
+}
+
+// Pattern circle
+@mixin pattern-circle($size, $color) {
+  width: $size;
+  height: $size;
+  background: $color;
+  border-radius: 50%;
+  opacity: 0.1;
+  position: absolute;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/abstracts/_variables.scss b/src/main/resources/static/sass/abstracts/_variables.scss
new file mode 100644
index 0000000..2cce307
--- /dev/null
+++ b/src/main/resources/static/sass/abstracts/_variables.scss
@@ -0,0 +1,121 @@
+// -----------------------------------------------------------------------------
+// This file contains all application-wide SASS variables
+// Based on design/styles-v2.css - Modern vibrant design system
+// -----------------------------------------------------------------------------
+
+// Color Palette - Vibrant and Modern
+// Primary colors
+$primary-blue: #4B9BFF;          // Bright blue (main brand color)
+$secondary-blue: #2E7FF7;        // Deep blue
+$accent-cyan: #00D4FF;           // Sky blue accent
+$accent-yellow: #FFD93D;         // Yellow accent
+$accent-orange: #FF6B6B;         // Orange accent
+$accent-green: #6BCF7F;          // Green accent
+$accent-purple: #A78BFA;         // Purple accent
+
+// Neutral colors
+$text-dark: #1A1A2E;             // Main text color
+$text-gray: #64748B;             // Secondary text
+$text-light: #94A3B8;            // Light text
+$white: #FFFFFF;                 // Pure white
+$gray-bg: #F8FAFC;              // Light background
+$light-bg: #EFF6FF;              // Blue tinted background
+$border-gray: #E2E8F0;           // Border color
+$black: #000000;                 // Pure black
+$gray-800: #1F2937;              // Dark gray
+$gray-900: #111827;              // Darker gray
+
+// Gradients
+$gradient-primary: linear-gradient(135deg, $primary-blue 0%, $secondary-blue 100%);
+$gradient-accent: linear-gradient(135deg, $accent-cyan 0%, $primary-blue 100%);
+$gradient-warm: linear-gradient(135deg, $accent-yellow 0%, $accent-orange 100%);
+
+// Shadows
+$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 12px rgba(75, 155, 255, 0.1);
+$shadow-lg: 0 8px 24px rgba(75, 155, 255, 0.15);
+$shadow-xl: 0 16px 40px rgba(75, 155, 255, 0.2);
+
+// Typography
+$font-family-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
+$font-family-mono: 'Fira Code', 'Courier New', monospace;
+
+// Font sizes
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-base: 16px;
+$font-size-md: 18px;
+$font-size-lg: 20px;
+$font-size-xl: 24px;
+$font-size-2xl: 32px;
+$font-size-3xl: 40px;
+$font-size-4xl: 48px;
+$font-size-5xl: 56px;
+
+// Font weights
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extrabold: 800;
+
+// Line heights
+$line-height-tight: 1.2;
+$line-height-normal: 1.6;
+$line-height-loose: 1.8;
+
+// Spacing
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+$spacing-2xl: 40px;
+$spacing-3xl: 48px;
+$spacing-4xl: 64px;
+$spacing-5xl: 80px;
+$spacing-6xl: 100px;
+
+// Border radius
+$border-radius-sm: 6px;
+$border-radius-md: 8px;
+$border-radius-lg: 12px;
+$border-radius-xl: 16px;
+$border-radius-2xl: 20px;
+$border-radius-full: 50px;
+$border-radius-circle: 50%;
+
+// Layout
+$container-max-width: 1280px;
+$header-height: 80px;
+
+// Breakpoints
+$breakpoint-xs: 480px;
+$breakpoint-sm: 768px;
+$breakpoint-md: 1024px;
+$breakpoint-lg: 1280px;
+$breakpoint-xl: 1440px;
+
+// Z-index
+$z-index-dropdown: 100;
+$z-index-sticky: 200;
+$z-index-fixed: 300;
+$z-index-header: 350;
+$z-index-modal-backdrop: 400;
+$z-index-modal: 500;
+$z-index-popover: 600;
+$z-index-tooltip: 700;
+$z-index-notification: 800;
+
+// Animation
+$transition-base: all 0.3s ease;
+$transition-fast: all 0.15s ease;
+$transition-slow: all 0.5s ease;
+
+// Component specific variables
+$button-padding-x: 32px;
+$button-padding-y: 16px;
+$card-padding: 32px;
+$input-padding-x: 16px;
+$input-padding-y: 12px;
+$input-height: 48px;
\ No newline at end of file
diff --git a/src/main/resources/static/sass/base/_animations.scss b/src/main/resources/static/sass/base/_animations.scss
new file mode 100644
index 0000000..b61b61a
--- /dev/null
+++ b/src/main/resources/static/sass/base/_animations.scss
@@ -0,0 +1,330 @@
+// -----------------------------------------------------------------------------
+// Animation keyframes and utilities
+// -----------------------------------------------------------------------------
+
+// Float animation
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-30px) rotate(10deg);
+  }
+}
+
+// Bounce animation
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+// Slide in from top
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Slide in from bottom
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Slide in from left
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+// Slide in from right
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+// Fade in
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// Fade in and scale
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// Spin
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Pulse
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+// Shimmer effect
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%) rotate(45deg);
+  }
+  100% {
+    transform: translateX(100%) rotate(45deg);
+  }
+}
+
+// Wave
+@keyframes wave {
+  0% {
+    transform: rotate(0deg);
+  }
+  10% {
+    transform: rotate(14deg);
+  }
+  20% {
+    transform: rotate(-8deg);
+  }
+  30% {
+    transform: rotate(14deg);
+  }
+  40% {
+    transform: rotate(-4deg);
+  }
+  50% {
+    transform: rotate(10deg);
+  }
+  60% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+// Pop in
+@keyframes popIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  80% {
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// Popup fade in (for modals)
+@keyframes popupFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// Ripple effect
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+// Gradient animation
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+// Animation utility classes
+.animate-float {
+  animation: float 20s ease-in-out infinite;
+}
+
+.animate-bounce {
+  animation: bounce 2s infinite;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.animate-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.6s ease-out;
+}
+
+.animate-slide-up {
+  animation: slideInUp 0.8s ease-out;
+}
+
+.animate-slide-down {
+  animation: slideInDown 0.6s ease-out;
+}
+
+.animate-pop {
+  animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+// Animation delays
+.delay-1 {
+  animation-delay: 0.1s;
+}
+
+.delay-2 {
+  animation-delay: 0.2s;
+}
+
+.delay-3 {
+  animation-delay: 0.3s;
+}
+
+.delay-4 {
+  animation-delay: 0.4s;
+}
+
+.delay-5 {
+  animation-delay: 0.5s;
+}
+
+// Animation durations
+.duration-fast {
+  animation-duration: 0.3s;
+}
+
+.duration-normal {
+  animation-duration: 0.6s;
+}
+
+.duration-slow {
+  animation-duration: 1s;
+}
+
+.duration-slower {
+  animation-duration: 2s;
+}
+
+// Hover animation triggers
+.hover-grow {
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
+.hover-lift {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: $shadow-lg;
+  }
+}
+
+.hover-rotate {
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: rotate(5deg);
+  }
+}
+
+.hover-shine {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+      45deg,
+      transparent 30%,
+      rgba(255, 255, 255, 0.2) 50%,
+      transparent 70%
+    );
+    transform: rotate(45deg);
+    transition: transform 0.6s ease;
+    transform: translateX(-200%);
+  }
+
+  &:hover::before {
+    transform: translateX(200%) rotate(45deg);
+  }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/base/_reset.scss b/src/main/resources/static/sass/base/_reset.scss
new file mode 100644
index 0000000..c4e9165
--- /dev/null
+++ b/src/main/resources/static/sass/base/_reset.scss
@@ -0,0 +1,95 @@
+// -----------------------------------------------------------------------------
+// Reset and normalize styles
+// -----------------------------------------------------------------------------
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: $font-family-primary;
+  line-height: $line-height-normal;
+  color: $text-dark;
+  background-color: $white;
+  overflow-x: hidden;
+}
+
+// Lists
+ul, ol {
+  list-style: none;
+}
+
+// Links
+a {
+  text-decoration: none;
+  color: inherit;
+  transition: $transition-base;
+}
+
+// Images
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+// Buttons
+button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+// Forms
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  border: none;
+  outline: none;
+}
+
+// Tables
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+// Headings
+h1, h2, h3, h4, h5, h6 {
+  font-weight: $font-weight-bold;
+  line-height: $line-height-tight;
+}
+
+// Semantic HTML5 elements
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav,
+section, summary {
+  display: block;
+}
+
+// Selection
+::selection {
+  background-color: rgba($primary-blue, 0.2);
+  color: $text-dark;
+}
+
+::-moz-selection {
+  background-color: rgba($primary-blue, 0.2);
+  color: $text-dark;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/base/_typography.scss b/src/main/resources/static/sass/base/_typography.scss
new file mode 100644
index 0000000..5a6f5c7
--- /dev/null
+++ b/src/main/resources/static/sass/base/_typography.scss
@@ -0,0 +1,219 @@
+// -----------------------------------------------------------------------------
+// Basic typography styles
+// -----------------------------------------------------------------------------
+
+// Body text
+body {
+  font-size: $font-size-base;
+  font-weight: $font-weight-regular;
+  color: $text-dark;
+}
+
+// Headings
+h1, .h1 {
+  font-size: $font-size-5xl;
+  font-weight: $font-weight-extrabold;
+  margin-bottom: $spacing-lg;
+
+  @include respond-to('sm') {
+    font-size: $font-size-3xl;
+  }
+
+  @include respond-to('xs') {
+    font-size: $font-size-2xl;
+  }
+}
+
+h2, .h2 {
+  font-size: $font-size-4xl;
+  font-weight: $font-weight-bold;
+  margin-bottom: $spacing-md;
+
+  @include respond-to('sm') {
+    font-size: $font-size-2xl;
+  }
+
+  @include respond-to('xs') {
+    font-size: $font-size-xl;
+  }
+}
+
+h3, .h3 {
+  font-size: $font-size-3xl;
+  font-weight: $font-weight-bold;
+  margin-bottom: $spacing-md;
+
+  @include respond-to('sm') {
+    font-size: $font-size-xl;
+  }
+}
+
+h4, .h4 {
+  font-size: $font-size-2xl;
+  font-weight: $font-weight-semibold;
+  margin-bottom: $spacing-sm;
+}
+
+h5, .h5 {
+  font-size: $font-size-xl;
+  font-weight: $font-weight-semibold;
+  margin-bottom: $spacing-sm;
+}
+
+h6, .h6 {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-semibold;
+  margin-bottom: $spacing-sm;
+}
+
+// Paragraphs
+p {
+  margin-bottom: $spacing-md;
+  line-height: $line-height-normal;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Text utilities
+.text-gradient {
+  @include gradient-text($gradient-primary);
+}
+
+.text-gradient-accent {
+  @include gradient-text($gradient-accent);
+}
+
+.text-gradient-warm {
+  @include gradient-text($gradient-warm);
+}
+
+.text-primary {
+  color: $primary-blue;
+}
+
+.text-secondary {
+  color: $secondary-blue;
+}
+
+.text-dark {
+  color: $text-dark;
+}
+
+.text-gray {
+  color: $text-gray;
+}
+
+.text-light {
+  color: $text-light;
+}
+
+.text-white {
+  color: $white;
+}
+
+// Text alignment
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+// Font weights
+.font-regular {
+  font-weight: $font-weight-regular;
+}
+
+.font-medium {
+  font-weight: $font-weight-medium;
+}
+
+.font-semibold {
+  font-weight: $font-weight-semibold;
+}
+
+.font-bold {
+  font-weight: $font-weight-bold;
+}
+
+.font-extrabold {
+  font-weight: $font-weight-extrabold;
+}
+
+// Text sizes
+.text-xs {
+  font-size: $font-size-xs;
+}
+
+.text-sm {
+  font-size: $font-size-sm;
+}
+
+.text-base {
+  font-size: $font-size-base;
+}
+
+.text-lg {
+  font-size: $font-size-lg;
+}
+
+.text-xl {
+  font-size: $font-size-xl;
+}
+
+// Special text styles
+.lead {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-regular;
+  line-height: $line-height-loose;
+  color: $text-gray;
+}
+
+.caption {
+  font-size: $font-size-sm;
+  color: $text-gray;
+}
+
+.code {
+  font-family: $font-family-mono;
+  font-size: $font-size-sm;
+  background: $gray-bg;
+  padding: 2px 6px;
+  border-radius: $border-radius-sm;
+}
+
+// Links
+a {
+  color: $primary-blue;
+
+  &:hover {
+    color: $secondary-blue;
+  }
+}
+
+// Blockquote
+blockquote {
+  padding: $spacing-md;
+  margin: $spacing-md 0;
+  border-left: 4px solid $primary-blue;
+  background: $gray-bg;
+  font-style: italic;
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+// Horizontal rule
+hr {
+  border: none;
+  border-top: 1px solid $border-gray;
+  margin: $spacing-xl 0;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/base/_utilities.scss b/src/main/resources/static/sass/base/_utilities.scss
new file mode 100644
index 0000000..c8ce4ab
--- /dev/null
+++ b/src/main/resources/static/sass/base/_utilities.scss
@@ -0,0 +1,497 @@
+// -----------------------------------------------------------------------------
+// Utility classes
+// -----------------------------------------------------------------------------
+
+// Container
+.container {
+  max-width: $container-max-width;
+  margin: 0 auto;
+  padding: 0 $spacing-lg;
+
+  @include respond-to('sm') {
+    padding: 0 $spacing-md;
+  }
+}
+
+// Display utilities
+.d-none {
+  display: none !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+.d-grid {
+  display: grid !important;
+}
+
+// Flexbox utilities
+.flex-center {
+  @include flex-center;
+}
+
+.flex-between {
+  @include flex-between;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+// Gap utilities
+.gap-xs {
+  gap: $spacing-xs;
+}
+
+.gap-sm {
+  gap: $spacing-sm;
+}
+
+.gap-md {
+  gap: $spacing-md;
+}
+
+.gap-lg {
+  gap: $spacing-lg;
+}
+
+.gap-xl {
+  gap: $spacing-xl;
+}
+
+// Margin utilities
+@each $size, $value in (
+  0: 0,
+  xs: $spacing-xs,
+  sm: $spacing-sm,
+  md: $spacing-md,
+  lg: $spacing-lg,
+  xl: $spacing-xl,
+  2xl: $spacing-2xl,
+  3xl: $spacing-3xl,
+  4xl: $spacing-4xl,
+  auto: auto
+) {
+  .m-#{$size} {
+    margin: $value !important;
+  }
+
+  .mt-#{$size} {
+    margin-top: $value !important;
+  }
+
+  .mb-#{$size} {
+    margin-bottom: $value !important;
+  }
+
+  .ml-#{$size} {
+    margin-left: $value !important;
+  }
+
+  .mr-#{$size} {
+    margin-right: $value !important;
+  }
+
+  .mx-#{$size} {
+    margin-left: $value !important;
+    margin-right: $value !important;
+  }
+
+  .my-#{$size} {
+    margin-top: $value !important;
+    margin-bottom: $value !important;
+  }
+}
+
+// Padding utilities
+@each $size, $value in (
+  0: 0,
+  xs: $spacing-xs,
+  sm: $spacing-sm,
+  md: $spacing-md,
+  lg: $spacing-lg,
+  xl: $spacing-xl,
+  2xl: $spacing-2xl,
+  3xl: $spacing-3xl,
+  4xl: $spacing-4xl
+) {
+  .p-#{$size} {
+    padding: $value !important;
+  }
+
+  .pt-#{$size} {
+    padding-top: $value !important;
+  }
+
+  .pb-#{$size} {
+    padding-bottom: $value !important;
+  }
+
+  .pl-#{$size} {
+    padding-left: $value !important;
+  }
+
+  .pr-#{$size} {
+    padding-right: $value !important;
+  }
+
+  .px-#{$size} {
+    padding-left: $value !important;
+    padding-right: $value !important;
+  }
+
+  .py-#{$size} {
+    padding-top: $value !important;
+    padding-bottom: $value !important;
+  }
+}
+
+// Width utilities
+.w-25 {
+  width: 25%;
+}
+
+.w-50 {
+  width: 50%;
+}
+
+.w-75 {
+  width: 75%;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.w-auto {
+  width: auto;
+}
+
+// Height utilities
+.h-25 {
+  height: 25%;
+}
+
+.h-50 {
+  height: 50%;
+}
+
+.h-75 {
+  height: 75%;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.vh-100 {
+  height: 100vh;
+}
+
+// Position utilities
+.position-relative {
+  position: relative;
+}
+
+.position-absolute {
+  position: absolute;
+}
+
+.position-fixed {
+  position: fixed;
+}
+
+.position-sticky {
+  position: sticky;
+}
+
+// Background utilities
+.bg-primary {
+  background: $primary-blue;
+}
+
+.bg-secondary {
+  background: $secondary-blue;
+}
+
+.bg-white {
+  background: $white;
+}
+
+.bg-gray {
+  background: $gray-bg;
+}
+
+.bg-light {
+  background: $light-bg;
+}
+
+.bg-gradient-primary {
+  background: $gradient-primary;
+}
+
+.bg-gradient-accent {
+  background: $gradient-accent;
+}
+
+.bg-gradient-warm {
+  background: $gradient-warm;
+}
+
+// Border utilities
+.border {
+  border: 1px solid $border-gray;
+}
+
+.border-0 {
+  border: none !important;
+}
+
+.border-top {
+  border-top: 1px solid $border-gray;
+}
+
+.border-bottom {
+  border-bottom: 1px solid $border-gray;
+}
+
+.border-left {
+  border-left: 1px solid $border-gray;
+}
+
+.border-right {
+  border-right: 1px solid $border-gray;
+}
+
+.border-primary {
+  border-color: $primary-blue;
+}
+
+// Border radius utilities
+.rounded-0 {
+  border-radius: 0;
+}
+
+.rounded-sm {
+  border-radius: $border-radius-sm;
+}
+
+.rounded {
+  border-radius: $border-radius-md;
+}
+
+.rounded-lg {
+  border-radius: $border-radius-lg;
+}
+
+.rounded-xl {
+  border-radius: $border-radius-xl;
+}
+
+.rounded-full {
+  border-radius: $border-radius-full;
+}
+
+.rounded-circle {
+  border-radius: $border-radius-circle;
+}
+
+// Shadow utilities
+.shadow-none {
+  box-shadow: none !important;
+}
+
+.shadow-sm {
+  box-shadow: $shadow-sm;
+}
+
+.shadow {
+  box-shadow: $shadow-md;
+}
+
+.shadow-lg {
+  box-shadow: $shadow-lg;
+}
+
+.shadow-xl {
+  box-shadow: $shadow-xl;
+}
+
+// Overflow utilities
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+// Z-index utilities
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+// Responsive utilities
+@include respond-to('sm') {
+  .sm-hide {
+    display: none !important;
+  }
+}
+
+@include respond-to('md') {
+  .md-hide {
+    display: none !important;
+  }
+}
+
+.mobile-only {
+  @media (min-width: #{$breakpoint-sm + 1px}) {
+    display: none !important;
+  }
+}
+
+.desktop-only {
+  @include respond-to('sm') {
+    display: none !important;
+  }
+}
+
+// Cursor utilities
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+// Opacity utilities
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
+// Transition utilities
+.transition {
+  transition: $transition-base;
+}
+
+.transition-fast {
+  transition: $transition-fast;
+}
+
+.transition-slow {
+  transition: $transition-slow;
+}
+
+.transition-none {
+  transition: none;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/components/_buttons.scss b/src/main/resources/static/sass/components/_buttons.scss
new file mode 100644
index 0000000..36de4c5
--- /dev/null
+++ b/src/main/resources/static/sass/components/_buttons.scss
@@ -0,0 +1,271 @@
+// -----------------------------------------------------------------------------
+// Button styles - Modern vibrant design
+// -----------------------------------------------------------------------------
+
+// Base button
+.btn {
+  @include button-base;
+  position: relative;
+  overflow: hidden;
+
+  // Button sizes
+  &-sm {
+    padding: $spacing-sm $spacing-md;
+    font-size: $font-size-sm;
+  }
+
+  &-md {
+    padding: $spacing-md $spacing-lg;
+    font-size: $font-size-base;
+  }
+
+  &-lg {
+    padding: $spacing-md $spacing-xl;
+    font-size: $font-size-md;
+  }
+
+  &-xl {
+    padding: $spacing-lg $spacing-2xl;
+    font-size: $font-size-lg;
+  }
+
+  // Button variants
+  &-primary {
+    background: $gradient-primary;
+    color: $white;
+    box-shadow: $shadow-md;
+
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: $shadow-xl;
+    }
+
+    &:active {
+      transform: translateY(-1px);
+    }
+  }
+
+  &-secondary {
+    background: $white;
+    color: $primary-blue;
+    border: 2px solid $primary-blue;
+
+    &:hover {
+      background: $light-bg;
+      transform: translateY(-3px);
+    }
+  }
+
+  &-accent {
+    background: $gradient-accent;
+    color: $white;
+    box-shadow: $shadow-md;
+
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: $shadow-xl;
+    }
+  }
+
+  &-warm {
+    background: $gradient-warm;
+    color: $white;
+    box-shadow: $shadow-md;
+
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: $shadow-xl;
+    }
+  }
+
+  &-success {
+    background: $accent-green;
+    color: $white;
+
+    &:hover {
+      background: darken($accent-green, 10%);
+      transform: translateY(-3px);
+    }
+  }
+
+  &-danger {
+    background: $accent-orange;
+    color: $white;
+
+    &:hover {
+      background: darken($accent-orange, 10%);
+      transform: translateY(-3px);
+    }
+  }
+
+  &-ghost {
+    background: transparent;
+    color: $primary-blue;
+    border: 2px solid transparent;
+
+    &:hover {
+      background: rgba($primary-blue, 0.1);
+      border-color: $primary-blue;
+    }
+  }
+
+  &-outline {
+    background: transparent;
+    color: $text-dark;
+    border: 2px solid $border-gray;
+
+    &:hover {
+      border-color: $primary-blue;
+      color: $primary-blue;
+      transform: translateY(-3px);
+    }
+  }
+
+  // Button states
+  &:disabled,
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &.loading {
+    color: transparent;
+    pointer-events: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      @include absolute-center;
+      border: 2px solid $white;
+      border-radius: 50%;
+      border-top-color: transparent;
+      animation: spin 0.6s linear infinite;
+    }
+  }
+
+  // Button with icon
+  &-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border-radius: $border-radius-circle;
+
+    &.btn-sm {
+      width: 32px;
+      height: 32px;
+    }
+
+    &.btn-lg {
+      width: 56px;
+      height: 56px;
+    }
+  }
+
+  // Full width button
+  &-block {
+    width: 100%;
+    justify-content: center;
+  }
+
+  // Button group
+  &-group {
+    display: inline-flex;
+    gap: -1px;
+
+    .btn {
+      border-radius: 0;
+
+      &:first-child {
+        border-top-left-radius: $border-radius-lg;
+        border-bottom-left-radius: $border-radius-lg;
+      }
+
+      &:last-child {
+        border-top-right-radius: $border-radius-lg;
+        border-bottom-right-radius: $border-radius-lg;
+      }
+    }
+  }
+}
+
+// Floating action button
+.fab {
+  position: fixed;
+  bottom: $spacing-xl;
+  right: $spacing-xl;
+  width: 60px;
+  height: 60px;
+  background: $gradient-primary;
+  border: none;
+  border-radius: $border-radius-circle;
+  color: $white;
+  font-size: $font-size-xl;
+  cursor: pointer;
+  box-shadow: $shadow-lg;
+  transition: $transition-base;
+  z-index: $z-index-fixed;
+  @include flex-center;
+
+  &:hover {
+    transform: scale(1.1);
+    box-shadow: $shadow-xl;
+
+    .fab-label {
+      opacity: 1;
+      transform: translateX(-10px);
+    }
+  }
+
+  .fab-label {
+    position: absolute;
+    right: 70px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: $text-dark;
+    color: $white;
+    padding: $spacing-sm $spacing-md;
+    border-radius: $border-radius-md;
+    font-size: $font-size-sm;
+    white-space: nowrap;
+    opacity: 0;
+    transition: $transition-base;
+    pointer-events: none;
+  }
+}
+
+// CTA buttons
+.btn-cta {
+  &-primary {
+    @include button-base;
+    background: $white;
+    color: $primary-blue;
+    padding: $spacing-md $spacing-2xl;
+    font-size: $font-size-md;
+    box-shadow: $shadow-lg;
+
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: $shadow-xl;
+    }
+  }
+
+  &-secondary {
+    @include button-base;
+    background: transparent;
+    color: $white;
+    border: 2px solid $white;
+    padding: $spacing-md $spacing-2xl;
+    font-size: $font-size-md;
+
+    &:hover {
+      background: rgba($white, 0.1);
+      transform: translateY(-3px);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/components/_cards.scss b/src/main/resources/static/sass/components/_cards.scss
new file mode 100644
index 0000000..4470c8d
--- /dev/null
+++ b/src/main/resources/static/sass/components/_cards.scss
@@ -0,0 +1,386 @@
+// -----------------------------------------------------------------------------
+// Card styles - Modern vibrant design
+// -----------------------------------------------------------------------------
+
+// Base card
+.card {
+  @include card;
+  position: relative;
+  overflow: hidden;
+
+  // Card hover effect
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+      45deg,
+      transparent 30%,
+      rgba($primary-blue, 0.03) 50%,
+      transparent 70%
+    );
+    transform: rotate(45deg);
+    transition: $transition-slow;
+    opacity: 0;
+  }
+
+  &:hover::before {
+    animation: shimmer 0.6s ease;
+    opacity: 1;
+  }
+}
+
+// API showcase cards
+.api-card {
+  @include card;
+  text-align: center;
+  border: 2px solid $border-gray;
+
+  &:hover {
+    border-color: $primary-blue;
+    transform: translateY(-8px);
+  }
+
+  // Popular variant
+  &-popular {
+    border-color: $accent-yellow;
+    background: linear-gradient(180deg, rgba($accent-yellow, 0.05) 0%, $white 100%);
+  }
+
+  // New variant
+  &-new {
+    border-color: $accent-green;
+    background: linear-gradient(180deg, rgba($accent-green, 0.05) 0%, $white 100%);
+  }
+
+  // API badge
+  .api-badge {
+    position: absolute;
+    top: -12px;
+    right: 20px;
+    padding: $spacing-xs $spacing-md;
+    background: $accent-yellow;
+    color: $text-dark;
+    border-radius: $border-radius-2xl;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-bold;
+    text-transform: uppercase;
+
+    &.new {
+      background: $accent-green;
+      color: $white;
+    }
+
+    &.beta {
+      background: $accent-purple;
+      color: $white;
+    }
+  }
+
+  // API icon
+  .api-icon {
+    width: 60px;
+    height: 60px;
+    margin: 0 auto $spacing-lg;
+    @include flex-center;
+    font-size: 28px;
+    background: $light-bg;
+    color: $primary-blue;
+    border-radius: $border-radius-xl;
+    transition: $transition-base;
+  }
+
+  &:hover .api-icon {
+    transform: scale(1.1);
+    background: $gradient-primary;
+    color: $white;
+  }
+
+  // API content
+  .api-name {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-bold;
+    margin-bottom: $spacing-md;
+    color: $text-dark;
+  }
+
+  .api-description {
+    color: $text-gray;
+    line-height: $line-height-normal;
+    margin-bottom: $spacing-lg;
+    font-size: $font-size-sm;
+  }
+
+  // API features
+  .api-features {
+    display: flex;
+    justify-content: center;
+    gap: $spacing-sm;
+    margin-bottom: $spacing-lg;
+    flex-wrap: wrap;
+
+    .feature-tag {
+      padding: $spacing-xs $spacing-sm;
+      background: $gray-bg;
+      color: $text-gray;
+      border-radius: $border-radius-2xl;
+      font-size: $font-size-xs;
+      font-weight: $font-weight-medium;
+    }
+  }
+
+  // API link
+  .api-link {
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-xs;
+    color: $primary-blue;
+    font-weight: $font-weight-semibold;
+    font-size: $font-size-sm;
+    transition: $transition-base;
+
+    &:hover {
+      gap: $spacing-sm;
+      color: $secondary-blue;
+    }
+  }
+}
+
+// Experience cards
+.experience-card {
+  @include card;
+  text-align: center;
+
+  .card-icon {
+    width: 56px;
+    height: 56px;
+    margin: 0 auto $spacing-lg;
+    @include flex-center;
+    font-size: $font-size-xl;
+    background: $gradient-primary;
+    color: $white;
+    border-radius: $border-radius-xl;
+  }
+
+  h3 {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-bold;
+    margin-bottom: $spacing-md;
+    color: $text-dark;
+  }
+
+  p {
+    color: $text-gray;
+    line-height: $line-height-normal;
+    margin-bottom: $spacing-lg;
+    font-size: $font-size-sm;
+  }
+
+  // Card metric
+  .card-metric {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: $spacing-lg;
+    border-top: 1px solid $border-gray;
+
+    .metric-value {
+      font-size: $font-size-xl;
+      font-weight: $font-weight-extrabold;
+      color: $primary-blue;
+    }
+
+    .metric-label {
+      font-size: $font-size-xs;
+      color: $text-gray;
+      font-weight: $font-weight-medium;
+    }
+  }
+}
+
+// Feature cards
+.feature-card {
+  @include card;
+  display: flex;
+  align-items: flex-start;
+  gap: $spacing-lg;
+
+  .feature-icon {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    @include flex-center;
+    background: $gradient-primary;
+    color: $white;
+    border-radius: $border-radius-lg;
+    font-size: $font-size-xl;
+  }
+
+  .feature-content {
+    flex: 1;
+
+    h4 {
+      font-size: $font-size-md;
+      font-weight: $font-weight-semibold;
+      margin-bottom: $spacing-sm;
+      color: $text-dark;
+    }
+
+    p {
+      color: $text-gray;
+      line-height: $line-height-normal;
+      font-size: $font-size-sm;
+    }
+  }
+}
+
+// Testimonial cards
+.testimonial-card {
+  @include card;
+  position: relative;
+
+  &::before {
+    content: '"';
+    position: absolute;
+    top: $spacing-md;
+    left: $spacing-md;
+    font-size: 60px;
+    color: $primary-blue;
+    opacity: 0.1;
+    font-weight: $font-weight-bold;
+  }
+
+  .testimonial-content {
+    position: relative;
+    z-index: 1;
+    font-size: $font-size-base;
+    line-height: $line-height-loose;
+    color: $text-dark;
+    margin-bottom: $spacing-lg;
+    font-style: italic;
+  }
+
+  .testimonial-author {
+    display: flex;
+    align-items: center;
+    gap: $spacing-md;
+
+    .author-avatar {
+      width: 48px;
+      height: 48px;
+      border-radius: $border-radius-circle;
+      object-fit: cover;
+    }
+
+    .author-info {
+      .author-name {
+        font-weight: $font-weight-semibold;
+        color: $text-dark;
+        margin-bottom: 2px;
+      }
+
+      .author-title {
+        font-size: $font-size-sm;
+        color: $text-gray;
+      }
+    }
+  }
+}
+
+// Pricing cards
+.pricing-card {
+  @include card;
+  text-align: center;
+  position: relative;
+
+  &.featured {
+    border: 2px solid $primary-blue;
+    transform: scale(1.05);
+
+    .pricing-badge {
+      position: absolute;
+      top: -14px;
+      left: 50%;
+      transform: translateX(-50%);
+      padding: $spacing-xs $spacing-md;
+      background: $gradient-primary;
+      color: $white;
+      border-radius: $border-radius-full;
+      font-size: $font-size-xs;
+      font-weight: $font-weight-bold;
+      text-transform: uppercase;
+    }
+  }
+
+  .pricing-header {
+    padding-bottom: $spacing-lg;
+    border-bottom: 1px solid $border-gray;
+    margin-bottom: $spacing-lg;
+
+    h3 {
+      font-size: $font-size-xl;
+      font-weight: $font-weight-bold;
+      margin-bottom: $spacing-sm;
+      color: $text-dark;
+    }
+
+    .price {
+      display: flex;
+      align-items: baseline;
+      justify-content: center;
+      gap: $spacing-xs;
+
+      .currency {
+        font-size: $font-size-lg;
+        color: $text-gray;
+      }
+
+      .amount {
+        font-size: $font-size-4xl;
+        font-weight: $font-weight-extrabold;
+        @include gradient-text($gradient-primary);
+      }
+
+      .period {
+        font-size: $font-size-base;
+        color: $text-gray;
+      }
+    }
+  }
+
+  .pricing-features {
+    list-style: none;
+    margin-bottom: $spacing-lg;
+
+    li {
+      padding: $spacing-sm 0;
+      color: $text-gray;
+      font-size: $font-size-sm;
+      display: flex;
+      align-items: center;
+      gap: $spacing-sm;
+
+      &::before {
+        content: '✓';
+        color: $accent-green;
+        font-weight: $font-weight-bold;
+      }
+
+      &.disabled {
+        opacity: 0.5;
+
+        &::before {
+          content: '×';
+          color: $text-light;
+        }
+      }
+    }
+  }
+
+  .pricing-cta {
+    margin-top: auto;
+  }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/components/_cta.scss b/src/main/resources/static/sass/components/_cta.scss
new file mode 100644
index 0000000..c1486f2
--- /dev/null
+++ b/src/main/resources/static/sass/components/_cta.scss
@@ -0,0 +1,10 @@
+// -----------------------------------------------------------------------------
+// CTA (Call to Action) section styles
+// -----------------------------------------------------------------------------
+
+.final-cta {
+  position: relative;
+  padding: $spacing-6xl * 1.5 0;
+  background: $gradient-primary;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/components/_forms.scss b/src/main/resources/static/sass/components/_forms.scss
new file mode 100644
index 0000000..5ae7173
--- /dev/null
+++ b/src/main/resources/static/sass/components/_forms.scss
@@ -0,0 +1,240 @@
+// -----------------------------------------------------------------------------
+// Form styles
+// -----------------------------------------------------------------------------
+
+// Form group
+.form-group {
+  margin-bottom: $spacing-lg;
+
+  label {
+    display: block;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-medium;
+    color: $text-dark;
+    margin-bottom: $spacing-sm;
+
+    .required {
+      color: $accent-orange;
+      margin-left: 2px;
+    }
+  }
+
+  .form-hint {
+    font-size: $font-size-xs;
+    color: $text-gray;
+    margin-top: $spacing-xs;
+  }
+
+  .form-error {
+    font-size: $font-size-xs;
+    color: $accent-orange;
+    margin-top: $spacing-xs;
+    display: flex;
+    align-items: center;
+    gap: $spacing-xs;
+  }
+}
+
+// Form control base
+.form-control {
+  width: 100%;
+  padding: $input-padding-y $input-padding-x;
+  font-size: $font-size-base;
+  font-family: $font-family-primary;
+  color: $text-dark;
+  background: $white;
+  border: 2px solid $border-gray;
+  border-radius: $border-radius-md;
+  transition: $transition-base;
+
+  &::placeholder {
+    color: $text-light;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: $primary-blue;
+    box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
+  }
+
+  &:disabled {
+    background: $gray-bg;
+    color: $text-gray;
+    cursor: not-allowed;
+  }
+
+  // Size variations
+  &-sm {
+    padding: $spacing-sm $spacing-md;
+    font-size: $font-size-sm;
+  }
+
+  &-lg {
+    padding: $spacing-md $spacing-lg;
+    font-size: $font-size-md;
+  }
+
+  // State variations
+  &.is-valid {
+    border-color: $accent-green;
+
+    &:focus {
+      box-shadow: 0 0 0 3px rgba($accent-green, 0.1);
+    }
+  }
+
+  &.is-invalid {
+    border-color: $accent-orange;
+
+    &:focus {
+      box-shadow: 0 0 0 3px rgba($accent-orange, 0.1);
+    }
+  }
+}
+
+// Textarea
+textarea.form-control {
+  min-height: 120px;
+  resize: vertical;
+}
+
+// Select
+select.form-control {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M6 8L0 0h12z' fill='%2364748B'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right $spacing-md center;
+  background-size: 12px;
+  padding-right: $spacing-2xl;
+}
+
+// Checkbox and Radio
+.form-check {
+  display: flex;
+  align-items: center;
+  margin-bottom: $spacing-md;
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    width: 20px;
+    height: 20px;
+    margin-right: $spacing-sm;
+    cursor: pointer;
+  }
+
+  label {
+    margin-bottom: 0;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    input,
+    label {
+      cursor: not-allowed;
+    }
+  }
+}
+
+// Switch toggle
+.form-switch {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+
+  .switch {
+    position: relative;
+    width: 48px;
+    height: 24px;
+    background: $border-gray;
+    border-radius: $border-radius-full;
+    cursor: pointer;
+    transition: $transition-base;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 20px;
+      height: 20px;
+      background: $white;
+      border-radius: $border-radius-circle;
+      transition: $transition-base;
+    }
+
+    &.active {
+      background: $primary-blue;
+
+      &::after {
+        transform: translateX(24px);
+      }
+    }
+  }
+}
+
+// Input group
+.input-group {
+  display: flex;
+  width: 100%;
+
+  .input-group-text {
+    padding: $input-padding-y $input-padding-x;
+    font-size: $font-size-base;
+    color: $text-gray;
+    background: $gray-bg;
+    border: 2px solid $border-gray;
+    border-radius: $border-radius-md 0 0 $border-radius-md;
+    border-right: none;
+  }
+
+  .form-control {
+    border-radius: 0 $border-radius-md $border-radius-md 0;
+  }
+
+  &.input-group-append {
+    .input-group-text {
+      border-radius: 0 $border-radius-md $border-radius-md 0;
+      border-right: 2px solid $border-gray;
+      border-left: none;
+    }
+
+    .form-control {
+      border-radius: $border-radius-md 0 0 $border-radius-md;
+    }
+  }
+}
+
+// Form inline
+.form-inline {
+  display: flex;
+  align-items: flex-end;
+  gap: $spacing-md;
+
+  .form-group {
+    margin-bottom: 0;
+  }
+
+  @include respond-to('sm') {
+    flex-direction: column;
+    align-items: stretch;
+
+    .form-group {
+      margin-bottom: $spacing-md;
+    }
+  }
+}
+
+// Form row
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: $spacing-lg;
+
+  @include respond-to('sm') {
+    grid-template-columns: 1fr;
+  }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/components/_modals.scss b/src/main/resources/static/sass/components/_modals.scss
new file mode 100644
index 0000000..18d015a
--- /dev/null
+++ b/src/main/resources/static/sass/components/_modals.scss
@@ -0,0 +1,196 @@
+// -----------------------------------------------------------------------------
+// Modal styles
+// -----------------------------------------------------------------------------
+
+// Modal backdrop
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: $z-index-modal-backdrop;
+  opacity: 0;
+  visibility: hidden;
+  transition: $transition-base;
+
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+// Modal wrapper
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $z-index-modal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-lg;
+  opacity: 0;
+  visibility: hidden;
+  transition: $transition-base;
+
+  &.show {
+    opacity: 1;
+    visibility: visible;
+
+    .modal-dialog {
+      transform: scale(1);
+    }
+  }
+}
+
+// Modal dialog
+.modal-dialog {
+  position: relative;
+  background: $white;
+  border-radius: $border-radius-xl;
+  box-shadow: $shadow-xl;
+  max-width: 500px;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  transform: scale(0.95);
+  transition: $transition-base;
+
+  // Size variations
+  &.modal-sm {
+    max-width: 400px;
+  }
+
+  &.modal-lg {
+    max-width: 800px;
+  }
+
+  &.modal-xl {
+    max-width: 1200px;
+  }
+
+  &.modal-fullscreen {
+    max-width: 100%;
+    max-height: 100%;
+    height: 100%;
+    margin: 0;
+    border-radius: 0;
+  }
+}
+
+// Modal header
+.modal-header {
+  padding: $spacing-lg;
+  border-bottom: 1px solid $border-gray;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .modal-title {
+    font-size: $font-size-xl;
+    font-weight: $font-weight-semibold;
+    color: $text-dark;
+    margin: 0;
+  }
+
+  .modal-close {
+    width: 32px;
+    height: 32px;
+    @include flex-center;
+    background: transparent;
+    border: none;
+    border-radius: $border-radius-md;
+    color: $text-gray;
+    font-size: $font-size-xl;
+    cursor: pointer;
+    transition: $transition-base;
+
+    &:hover {
+      background: $gray-bg;
+      color: $text-dark;
+    }
+  }
+}
+
+// Modal body
+.modal-body {
+  padding: $spacing-lg;
+  flex: 1;
+  overflow-y: auto;
+  color: $text-dark;
+  line-height: $line-height-normal;
+}
+
+// Modal footer
+.modal-footer {
+  padding: $spacing-lg;
+  border-top: 1px solid $border-gray;
+  display: flex;
+  gap: $spacing-md;
+  justify-content: flex-end;
+
+  &.modal-footer-center {
+    justify-content: center;
+  }
+
+  &.modal-footer-between {
+    justify-content: space-between;
+  }
+}
+
+// Alert modal
+.modal-alert {
+  .modal-dialog {
+    max-width: 400px;
+  }
+
+  .modal-body {
+    text-align: center;
+    padding: $spacing-xl;
+
+    .alert-icon {
+      width: 64px;
+      height: 64px;
+      margin: 0 auto $spacing-lg;
+      @include flex-center;
+      font-size: $font-size-2xl;
+      border-radius: $border-radius-circle;
+
+      &.alert-success {
+        background: rgba($accent-green, 0.1);
+        color: $accent-green;
+      }
+
+      &.alert-warning {
+        background: rgba($accent-yellow, 0.1);
+        color: $accent-yellow;
+      }
+
+      &.alert-danger {
+        background: rgba($accent-orange, 0.1);
+        color: $accent-orange;
+      }
+
+      &.alert-info {
+        background: rgba($primary-blue, 0.1);
+        color: $primary-blue;
+      }
+    }
+
+    .alert-title {
+      font-size: $font-size-xl;
+      font-weight: $font-weight-semibold;
+      margin-bottom: $spacing-sm;
+      color: $text-dark;
+    }
+
+    .alert-message {
+      color: $text-gray;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/components/_navigation.scss b/src/main/resources/static/sass/components/_navigation.scss
new file mode 100644
index 0000000..34b025e
--- /dev/null
+++ b/src/main/resources/static/sass/components/_navigation.scss
@@ -0,0 +1,239 @@
+// -----------------------------------------------------------------------------
+// Navigation component styles
+// -----------------------------------------------------------------------------
+
+// Breadcrumb navigation
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-md 0;
+  font-size: $font-size-sm;
+
+  .breadcrumb-item {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    color: $text-gray;
+
+    a {
+      color: $text-gray;
+      transition: $transition-base;
+
+      &:hover {
+        color: $primary-blue;
+      }
+    }
+
+    &.active {
+      color: $text-dark;
+      font-weight: $font-weight-medium;
+    }
+
+    &:not(:last-child)::after {
+      content: '/';
+      color: $text-light;
+      margin-left: $spacing-sm;
+    }
+  }
+}
+
+// Tab navigation
+.nav-tabs {
+  display: flex;
+  gap: $spacing-xs;
+  border-bottom: 2px solid $border-gray;
+  margin-bottom: $spacing-xl;
+
+  .nav-item {
+    position: relative;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    padding: $spacing-md $spacing-lg;
+    color: $text-gray;
+    font-weight: $font-weight-medium;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    transition: $transition-base;
+
+    &:hover {
+      color: $text-dark;
+    }
+
+    &.active {
+      color: $primary-blue;
+      border-bottom-color: $primary-blue;
+    }
+
+    .badge {
+      padding: 2px 6px;
+      background: $gray-bg;
+      color: $text-gray;
+      border-radius: $border-radius-full;
+      font-size: 11px;
+      font-weight: $font-weight-semibold;
+    }
+  }
+}
+
+// Pills navigation
+.nav-pills {
+  display: flex;
+  gap: $spacing-sm;
+  padding: $spacing-xs;
+  background: $gray-bg;
+  border-radius: $border-radius-lg;
+
+  .nav-link {
+    padding: $spacing-sm $spacing-lg;
+    color: $text-gray;
+    font-weight: $font-weight-medium;
+    border-radius: $border-radius-md;
+    transition: $transition-base;
+
+    &:hover {
+      color: $text-dark;
+      background: rgba($white, 0.5);
+    }
+
+    &.active {
+      background: $white;
+      color: $primary-blue;
+      box-shadow: $shadow-sm;
+    }
+  }
+}
+
+// Sidebar navigation
+.sidebar-nav {
+  .nav-section {
+    margin-bottom: $spacing-xl;
+
+    .nav-title {
+      font-size: $font-size-xs;
+      font-weight: $font-weight-semibold;
+      text-transform: uppercase;
+      color: $text-gray;
+      padding: $spacing-sm $spacing-md;
+      letter-spacing: 0.05em;
+    }
+  }
+
+  .nav-menu {
+    list-style: none;
+
+    .nav-item {
+      margin-bottom: $spacing-xs;
+    }
+
+    .nav-link {
+      display: flex;
+      align-items: center;
+      gap: $spacing-md;
+      padding: $spacing-sm $spacing-md;
+      color: $text-dark;
+      border-radius: $border-radius-md;
+      transition: $transition-base;
+
+      .nav-icon {
+        width: 20px;
+        height: 20px;
+        @include flex-center;
+        font-size: $font-size-md;
+        color: $text-gray;
+      }
+
+      &:hover {
+        background: $gray-bg;
+        color: $primary-blue;
+
+        .nav-icon {
+          color: $primary-blue;
+        }
+      }
+
+      &.active {
+        background: $light-bg;
+        color: $primary-blue;
+        font-weight: $font-weight-medium;
+
+        .nav-icon {
+          color: $primary-blue;
+        }
+      }
+    }
+
+    // Nested menu
+    .nav-submenu {
+      margin-left: $spacing-2xl;
+      margin-top: $spacing-xs;
+      list-style: none;
+
+      .nav-link {
+        font-size: $font-size-sm;
+        padding: $spacing-xs $spacing-md;
+      }
+    }
+  }
+}
+
+// Pagination
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+
+  .page-item {
+    &.disabled {
+      .page-link {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+
+    &.active {
+      .page-link {
+        background: $primary-blue;
+        color: $white;
+        border-color: $primary-blue;
+      }
+    }
+  }
+
+  .page-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    height: 36px;
+    padding: 0 $spacing-sm;
+    background: $white;
+    border: 1px solid $border-gray;
+    border-radius: $border-radius-md;
+    color: $text-dark;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-medium;
+    transition: $transition-base;
+
+    &:hover {
+      background: $gray-bg;
+      border-color: $primary-blue;
+      color: $primary-blue;
+    }
+
+    &.page-prev,
+    &.page-next {
+      font-size: $font-size-md;
+    }
+  }
+
+  .page-dots {
+    padding: 0 $spacing-sm;
+    color: $text-gray;
+  }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/components/_partners.scss b/src/main/resources/static/sass/components/_partners.scss
new file mode 100644
index 0000000..4ed9c2c
--- /dev/null
+++ b/src/main/resources/static/sass/components/_partners.scss
@@ -0,0 +1,8 @@
+// -----------------------------------------------------------------------------
+// Partners section styles
+// -----------------------------------------------------------------------------
+
+.partners {
+  padding: $spacing-5xl 0;
+  background: $white;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/layout/_container.scss b/src/main/resources/static/sass/layout/_container.scss
new file mode 100644
index 0000000..085df22
--- /dev/null
+++ b/src/main/resources/static/sass/layout/_container.scss
@@ -0,0 +1,158 @@
+// -----------------------------------------------------------------------------
+// Container and section styles
+// -----------------------------------------------------------------------------
+
+// Main container
+.container {
+  max-width: $container-max-width;
+  margin: 0 auto;
+  padding: 0 $spacing-lg;
+
+  @include respond-to('sm') {
+    padding: 0 $spacing-md;
+  }
+
+  // Container variations
+  &-fluid {
+    max-width: 100%;
+    padding: 0 $spacing-lg;
+  }
+
+  &-narrow {
+    max-width: 960px;
+  }
+
+  &-wide {
+    max-width: 1440px;
+  }
+}
+
+// Section spacing
+.section {
+  padding: $spacing-6xl 0;
+
+  @include respond-to('sm') {
+    padding: $spacing-4xl 0;
+  }
+
+  // Section variations
+  &-sm {
+    padding: $spacing-3xl 0;
+  }
+
+  &-lg {
+    padding: $spacing-6xl * 1.5 0;
+  }
+
+  &-no-top {
+    padding-top: 0;
+  }
+
+  &-no-bottom {
+    padding-bottom: 0;
+  }
+}
+
+// Section backgrounds
+.section-bg {
+  &-gray {
+    background: $gray-bg;
+  }
+
+  &-light {
+    background: $light-bg;
+  }
+
+  &-gradient {
+    background: linear-gradient(180deg, $white 0%, $light-bg 100%);
+  }
+
+  &-gradient-reverse {
+    background: linear-gradient(180deg, $light-bg 0%, $white 100%);
+  }
+
+  &-primary {
+    background: $gradient-primary;
+    color: $white;
+  }
+
+  &-dark {
+    background: $text-dark;
+    color: $white;
+  }
+}
+
+// Section header
+.section-header {
+  text-align: center;
+  margin-bottom: $spacing-4xl;
+
+  @include respond-to('sm') {
+    margin-bottom: $spacing-3xl;
+  }
+
+  .section-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-xs;
+    padding: $spacing-xs $spacing-md;
+    background: $light-bg;
+    color: $primary-blue;
+    border-radius: $border-radius-full;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-semibold;
+    margin-bottom: $spacing-md;
+  }
+
+  .section-title {
+    font-size: $font-size-3xl;
+    font-weight: $font-weight-bold;
+    margin-bottom: $spacing-md;
+    color: $text-dark;
+
+    @include respond-to('sm') {
+      font-size: $font-size-2xl;
+    }
+
+    .title-highlight {
+      @include gradient-text($gradient-accent);
+    }
+  }
+
+  .section-subtitle {
+    font-size: $font-size-md;
+    color: $text-gray;
+    line-height: $line-height-normal;
+    max-width: 600px;
+    margin: 0 auto;
+
+    @include respond-to('sm') {
+      font-size: $font-size-base;
+    }
+  }
+}
+
+// Content wrapper
+.content-wrapper {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  .main-content {
+    flex: 1;
+    padding-top: $header-height;
+  }
+}
+
+// Page wrapper
+.page-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+// Inner content
+.inner-content {
+  position: relative;
+  z-index: 1;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/layout/_footer.scss b/src/main/resources/static/sass/layout/_footer.scss
new file mode 100644
index 0000000..48d087e
--- /dev/null
+++ b/src/main/resources/static/sass/layout/_footer.scss
@@ -0,0 +1,282 @@
+// -----------------------------------------------------------------------------
+// Footer styles - Modern vibrant design
+// -----------------------------------------------------------------------------
+
+.global-footer {
+  background: $text-dark;
+  color: $white;
+  padding: $spacing-5xl 0 $spacing-2xl;
+
+  @include respond-to('sm') {
+    padding: $spacing-3xl 0 $spacing-xl;
+  }
+}
+
+.footer-top {
+  display: grid;
+  grid-template-columns: 2fr 3fr;
+  gap: $spacing-5xl;
+  margin-bottom: $spacing-4xl;
+  max-width: $container-max-width;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 $spacing-lg;
+
+  @include respond-to('md') {
+    grid-template-columns: 1fr;
+    gap: $spacing-2xl;
+  }
+}
+
+// Footer brand section
+.footer-brand {
+  max-width: 360px;
+
+  .footer-logo {
+    height: 48px;
+    margin-bottom: $spacing-lg;
+  }
+
+  .footer-desc {
+    font-size: $font-size-sm;
+    line-height: $line-height-loose;
+    color: rgba($white, 0.7);
+    margin-bottom: $spacing-lg;
+  }
+
+  .footer-newsletter {
+    margin-bottom: $spacing-xl;
+
+    h4 {
+      font-size: $font-size-md;
+      font-weight: $font-weight-semibold;
+      margin-bottom: $spacing-md;
+    }
+
+    .newsletter-form {
+      display: flex;
+      gap: $spacing-sm;
+
+      input {
+        flex: 1;
+        padding: $spacing-sm $spacing-md;
+        background: rgba($white, 0.1);
+        border: 1px solid rgba($white, 0.2);
+        border-radius: $border-radius-md;
+        color: $white;
+        font-size: $font-size-sm;
+
+        &::placeholder {
+          color: rgba($white, 0.5);
+        }
+
+        &:focus {
+          background: rgba($white, 0.15);
+          border-color: $primary-blue;
+          outline: none;
+        }
+      }
+
+      button {
+        padding: $spacing-sm $spacing-lg;
+        background: $gradient-primary;
+        color: $white;
+        border-radius: $border-radius-md;
+        font-weight: $font-weight-semibold;
+        font-size: $font-size-sm;
+        transition: $transition-base;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: $shadow-md;
+        }
+      }
+    }
+  }
+}
+
+// Social links
+.social-links {
+  display: flex;
+  gap: $spacing-md;
+
+  a {
+    width: 44px;
+    height: 44px;
+    background: rgba($white, 0.1);
+    border-radius: $border-radius-lg;
+    @include flex-center;
+    color: $white;
+    transition: $transition-base;
+    font-size: $font-size-lg;
+
+    &:hover {
+      background: $primary-blue;
+      transform: translateY(-3px);
+    }
+
+    &.facebook:hover {
+      background: #1877f2;
+    }
+
+    &.twitter:hover {
+      background: #1da1f2;
+    }
+
+    &.linkedin:hover {
+      background: #0077b5;
+    }
+
+    &.github:hover {
+      background: #333;
+    }
+
+    &.youtube:hover {
+      background: #ff0000;
+    }
+  }
+}
+
+// Footer links
+.footer-links {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: $spacing-2xl;
+
+  @include respond-to('md') {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include respond-to('sm') {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+}
+
+.footer-column {
+  h4 {
+    font-size: $font-size-base;
+    font-weight: $font-weight-bold;
+    margin-bottom: $spacing-lg;
+    color: $white;
+  }
+
+  ul {
+    list-style: none;
+
+    li {
+      margin-bottom: $spacing-md;
+
+      a {
+        color: rgba($white, 0.7);
+        font-size: $font-size-sm;
+        transition: $transition-base;
+        position: relative;
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: -2px;
+          left: 0;
+          width: 0;
+          height: 1px;
+          background: $accent-cyan;
+          transition: $transition-base;
+        }
+
+        &:hover {
+          color: $accent-cyan;
+
+          &::after {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  // Special badges
+  .footer-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-xs;
+    padding: $spacing-xs $spacing-sm;
+    background: rgba($accent-green, 0.2);
+    color: $accent-green;
+    border-radius: $border-radius-full;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-semibold;
+    margin-left: $spacing-sm;
+  }
+}
+
+// Footer bottom
+.footer-bottom {
+  padding-top: $spacing-2xl;
+  border-top: 1px solid rgba($white, 0.1);
+  max-width: $container-max-width;
+  margin: 0 auto;
+  padding-left: $spacing-lg;
+  padding-right: $spacing-lg;
+}
+
+.footer-legal {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  @include respond-to('sm') {
+    flex-direction: column;
+    gap: $spacing-lg;
+    text-align: center;
+  }
+
+  p {
+    color: rgba($white, 0.5);
+    font-size: $font-size-sm;
+    margin: 0;
+  }
+
+  .legal-links {
+    display: flex;
+    gap: $spacing-lg;
+
+    a {
+      color: rgba($white, 0.7);
+      font-size: $font-size-sm;
+      transition: $transition-base;
+
+      &:hover {
+        color: $white;
+      }
+    }
+  }
+}
+
+// Footer decoration
+.footer-decoration {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -100px;
+    right: -100px;
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, rgba($primary-blue, 0.1) 0%, transparent 70%);
+    border-radius: 50%;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -150px;
+    left: -150px;
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, rgba($accent-cyan, 0.05) 0%, transparent 70%);
+    border-radius: 50%;
+  }
+}
diff --git a/src/main/resources/static/sass/layout/_grid.scss b/src/main/resources/static/sass/layout/_grid.scss
new file mode 100644
index 0000000..36f49ce
--- /dev/null
+++ b/src/main/resources/static/sass/layout/_grid.scss
@@ -0,0 +1,298 @@
+// -----------------------------------------------------------------------------
+// Grid system - Modern responsive layout
+// -----------------------------------------------------------------------------
+
+// Grid container
+.grid {
+  display: grid;
+  gap: $spacing-lg;
+
+  // Column templates
+  &-cols-1 {
+    grid-template-columns: 1fr;
+  }
+
+  &-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  &-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  &-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  &-cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  &-cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  &-cols-12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  // Auto-fit grid
+  &-auto {
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  }
+
+  &-auto-sm {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+
+  &-auto-lg {
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  }
+
+  // Gap variations
+  &.gap-0 {
+    gap: 0;
+  }
+
+  &.gap-sm {
+    gap: $spacing-sm;
+  }
+
+  &.gap-md {
+    gap: $spacing-md;
+  }
+
+  &.gap-lg {
+    gap: $spacing-lg;
+  }
+
+  &.gap-xl {
+    gap: $spacing-xl;
+  }
+
+  // Responsive grids
+  @include respond-to('md') {
+    &-md-cols-1 {
+      grid-template-columns: 1fr;
+    }
+
+    &-md-cols-2 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @include respond-to('sm') {
+    &-sm-cols-1 {
+      grid-template-columns: 1fr;
+    }
+
+    &-sm-cols-2 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+
+// Grid item spans
+.col-span-1 {
+  grid-column: span 1;
+}
+
+.col-span-2 {
+  grid-column: span 2;
+}
+
+.col-span-3 {
+  grid-column: span 3;
+}
+
+.col-span-4 {
+  grid-column: span 4;
+}
+
+.col-span-5 {
+  grid-column: span 5;
+}
+
+.col-span-6 {
+  grid-column: span 6;
+}
+
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
+.row-span-1 {
+  grid-row: span 1;
+}
+
+.row-span-2 {
+  grid-row: span 2;
+}
+
+.row-span-3 {
+  grid-row: span 3;
+}
+
+// API Grid
+.api-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: $spacing-lg;
+
+  @include respond-to('md') {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include respond-to('sm') {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Experience Grid
+.experience-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: $spacing-lg;
+
+  @include respond-to('sm') {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Partners Grid
+.partners-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: $spacing-2xl;
+  align-items: center;
+
+  @include respond-to('sm') {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+// Feature Grid
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: $spacing-xl;
+
+  @include respond-to('sm') {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Demo Grid
+.demo-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $spacing-2xl;
+  align-items: start;
+
+  @include respond-to('md') {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Footer Grid
+.footer-grid {
+  display: grid;
+  grid-template-columns: 2fr 3fr;
+  gap: $spacing-5xl;
+
+  @include respond-to('md') {
+    grid-template-columns: 1fr;
+    gap: $spacing-2xl;
+  }
+
+  .footer-links {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: $spacing-2xl;
+
+    @include respond-to('md') {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @include respond-to('sm') {
+      grid-template-columns: 1fr;
+      text-align: center;
+    }
+  }
+}
+
+// Pricing Grid
+.pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: $spacing-lg;
+  align-items: center;
+
+  @include respond-to('md') {
+    grid-template-columns: 1fr;
+    gap: $spacing-xl;
+  }
+}
+
+// Testimonial Grid
+.testimonial-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: $spacing-lg;
+
+  @include respond-to('sm') {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Stats Grid
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: $spacing-xl;
+  text-align: center;
+
+  @include respond-to('md') {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include respond-to('sm') {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Two Column Layout
+.two-column {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $spacing-3xl;
+  align-items: center;
+
+  @include respond-to('md') {
+    grid-template-columns: 1fr;
+    gap: $spacing-xl;
+  }
+
+  &.reverse {
+    direction: rtl;
+
+    > * {
+      direction: ltr;
+    }
+
+    @include respond-to('md') {
+      direction: ltr;
+    }
+  }
+}
+
+// Three Column Layout
+.three-column {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: $spacing-xl;
+
+  @include respond-to('md') {
+    grid-template-columns: 1fr;
+  }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/layout/_header.scss b/src/main/resources/static/sass/layout/_header.scss
new file mode 100644
index 0000000..aaa8acd
--- /dev/null
+++ b/src/main/resources/static/sass/layout/_header.scss
@@ -0,0 +1,805 @@
+// -----------------------------------------------------------------------------
+// Header styles - Modern & Responsive Design
+// -----------------------------------------------------------------------------
+
+// CSS Variables for modern header styling
+:root {
+  // Enhanced color palette from design
+  --primary-blue: #4B9BFF;
+  --secondary-blue: #2E7FF7;
+  --accent-cyan: #00D4FF;
+  --accent-yellow: #FFD93D;
+  --accent-orange: #FF6B6B;
+  --accent-green: #6BCF7F;
+  --accent-purple: #A78BFA;
+
+  // Base colors
+  --text-dark: #1A1A2E;
+  --text-gray: #64748B;
+  --text-light: #94A3B8;
+  --white: #FFFFFF;
+  --gray-bg: #F8FAFC;
+  --light-bg: #EFF6FF;
+  --border-gray: #E2E8F0;
+
+  // Gradients
+  --gradient-primary: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
+  --gradient-accent: linear-gradient(135deg, #00D4FF 0%, #4B9BFF 100%);
+  --gradient-warm: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
+
+  // Shadows
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(75, 155, 255, 0.1);
+  --shadow-lg: 0 8px 24px rgba(75, 155, 255, 0.15);
+  --shadow-xl: 0 16px 40px rgba(75, 155, 255, 0.2);
+}
+
+// Blind text for screen readers
+.blind {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// ===========================
+// Modern Header Structure
+// ===========================
+.global-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: var(--shadow-sm);
+  z-index: 1000;
+  height: 80px;
+  transition: all 0.3s ease;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80px;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+// ===========================
+// Header Layout Components
+// ===========================
+
+// Header Left Section
+.header-left {
+  display: flex;
+  align-items: center;
+
+  .logo {
+    height: 45px;
+    width: auto;
+  }
+}
+
+// Logo Wrapper
+.logo-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+// Logo with modern styling
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 45px;
+  z-index: 10;
+
+  a {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: 100%;
+    text-decoration: none;
+  }
+
+  img {
+    height: 45px;
+    width: auto;
+  }
+}
+
+.logo-text {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--primary-blue);
+  padding: 4px 12px;
+  background: var(--light-bg);
+  border-radius: 20px;
+  text-decoration: none;
+  display: inline-block;
+  transition: all 0.3s ease;
+
+  // When logo-text is a link
+  &:hover {
+    background: var(--primary-blue);
+    color: var(--white);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+  }
+
+  &:visited {
+    color: var(--primary-blue);
+  }
+}
+
+// Logo link styles
+.logo-link,
+.mobile-logo-link,
+.drawer-logo-link {
+  display: inline-block;
+  text-decoration: none;
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  img {
+    display: block;
+  }
+}
+
+// Header Right Section
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+// Search Button
+.search-btn {
+  width: 40px;
+  height: 40px;
+  background: var(--gray-bg);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--text-gray);
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: var(--light-bg);
+    color: var(--primary-blue);
+    transform: scale(1.1);
+  }
+}
+
+// ===========================
+// Desktop/Mobile Layout Control
+// ===========================
+.desktop-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+}
+
+.mobile-header {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  @media (max-width: 768px) {
+    display: flex;
+  }
+}
+
+// ===========================
+// Mobile Header Components
+// ===========================
+.mobile-left {
+  .mobile-logo {
+    height: 32px;
+    width: auto;
+  }
+}
+
+.mobile-center {
+  flex: 1;
+  text-align: center;
+
+  .mobile-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-dark);
+    margin: 0;
+  }
+}
+
+.mobile-right {
+  .mobile-menu-btn {
+    width: 40px;
+    height: 40px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    padding: 8px;
+    border-radius: 8px;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background: var(--gray-bg);
+    }
+
+    .hamburger-line {
+      width: 24px;
+      height: 2px;
+      background: var(--text-dark);
+      transition: all 0.3s ease;
+      border-radius: 1px;
+    }
+
+    &.active {
+      .hamburger-line {
+        &:nth-child(1) {
+          transform: rotate(45deg) translateY(6px);
+        }
+        &:nth-child(2) {
+          opacity: 0;
+        }
+        &:nth-child(3) {
+          transform: rotate(-45deg) translateY(-6px);
+        }
+      }
+    }
+  }
+}
+
+// ===========================
+// Mobile Drawer/Modal
+// ===========================
+.mobile-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.3s ease;
+
+  &.active {
+    visibility: visible;
+    opacity: 1;
+
+    .drawer-content {
+      transform: translateY(0);
+    }
+  }
+
+  .drawer-overlay {
+    display: none; // Not needed for full-screen drawer
+  }
+
+  .drawer-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--white);
+    transform: translateY(100%);
+    transition: transform 0.3s ease;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px;
+    border-bottom: 2px solid var(--border-gray);
+    background: var(--white);
+    box-shadow: var(--shadow-sm);
+    min-height: 60px;
+
+    .drawer-logo {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .logo {
+        height: 32px;
+        width: auto;
+      }
+
+      .logo-text {
+        font-size: 16px;
+        font-weight: 700;
+        color: var(--primary-blue);
+      }
+    }
+
+    .drawer-close {
+      width: 40px;
+      height: 40px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
+      font-size: 18px;
+      color: var(--text-gray);
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: var(--white);
+        color: var(--text-dark);
+      }
+    }
+  }
+
+  .drawer-nav {
+    flex: 1;
+    padding: 0;
+    overflow-y: auto;
+    background: var(--white);
+
+    .drawer-menu {
+      list-style: none;
+      margin: 0;
+      padding: 20px 0;
+
+      li {
+        margin-bottom: 8px;
+
+        .drawer-link {
+          display: block;
+          padding: 16px 24px;
+          margin: 0 20px;
+          color: var(--text-dark);
+          text-decoration: none;
+          font-size: 18px;
+          font-weight: 500;
+          border-radius: 12px;
+          transition: all 0.3s ease;
+
+          &:hover, &:active {
+            background: var(--light-bg);
+            color: var(--primary-blue);
+            transform: translateX(4px);
+            box-shadow: var(--shadow-sm);
+          }
+        }
+      }
+    }
+  }
+
+  .drawer-actions {
+    padding: 24px;
+    border-top: 2px solid var(--border-gray);
+    background: var(--white);
+    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
+
+    .drawer-login-btn {
+      display: block;
+      text-align: center;
+      padding: 14px 20px;
+      color: var(--text-dark);
+      text-decoration: none;
+      border: 2px solid var(--primary-blue);
+      border-radius: 12px;
+      font-weight: 600;
+      font-size: 16px;
+      margin-bottom: 12px;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: var(--light-bg);
+        color: var(--primary-blue);
+      }
+    }
+
+    .drawer-signup-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 14px 20px;
+      background: var(--gradient-primary);
+      color: var(--white);
+      text-decoration: none;
+      border-radius: 12px;
+      font-weight: 600;
+      font-size: 16px;
+      margin-bottom: 12px;
+      transition: all 0.3s ease;
+      box-shadow: var(--shadow-md);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
+      }
+    }
+
+    .drawer-search-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+      padding: 14px 20px;
+      background: var(--gray-bg);
+      color: var(--text-dark);
+      border: none;
+      border-radius: 12px;
+      font-weight: 500;
+      font-size: 16px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: var(--light-bg);
+        color: var(--primary-blue);
+      }
+    }
+  }
+}
+
+.btn-mobilemenu {
+  position: absolute;
+  right: $spacing-md;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  z-index: $z-index-modal + 1; // Above the nav
+
+  span {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background: $text-dark;
+    position: relative;
+    transition: all $transition-fast;
+    text-indent: -9999px;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      width: 24px;
+      height: 2px;
+      background: $text-dark;
+      transition: all $transition-fast;
+    }
+
+    &::before { top: -8px; }
+    &::after { top: 8px; }
+  }
+
+  &.on span {
+    background: transparent;
+    &::before { top: 0; transform: rotate(45deg); }
+    &::after { top: 0; transform: rotate(-45deg); }
+  }
+}
+
+// ===========================
+// Unified Navigation (Mobile-First)
+// ===========================
+.main-nav.m-nav {
+  // Mobile: Off-canvas menu
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: $white;
+  z-index: $z-index-modal;
+  right: -100%; // Initial state for JS animation
+  transition: none; // JS handles animation
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+
+  // The JS will directly manipulate the 'right' property, not toggle a class for this element.
+  // So, no .active or .on state here for the main nav panel.
+
+  .nav-header {
+    padding: $spacing-lg;
+    background: $gray-bg;
+    border-bottom: 1px solid $border-gray;
+  }
+
+  .nav-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    flex-grow: 1;
+
+    .nav-item {
+      border-bottom: 1px solid $border-gray;
+
+      > a {
+        display: flex;
+        align-items: center;
+        padding: $spacing-lg;
+        color: $text-dark;
+        font-size: $font-size-md;
+        font-weight: $font-weight-medium;
+        text-decoration: none;
+        position: relative;
+      }
+
+      &.has-submenu > a::after {
+        content: '';
+        position: absolute;
+        right: $spacing-lg;
+        top: 50%;
+        width: 8px;
+        height: 8px;
+        border-right: 2px solid $text-gray;
+        border-bottom: 2px solid $text-gray;
+        transform: translateY(-50%) rotate(45deg);
+        transition: transform $transition-fast;
+      }
+
+      &.expanded > a::after {
+        transform: translateY(-25%) rotate(-135deg);
+      }
+
+      .sub-menu {
+        display: none;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        background: $gray-bg;
+
+        a {
+          display: block;
+          padding: $spacing-md $spacing-lg $spacing-md ($spacing-lg * 2);
+          color: $text-gray;
+          font-size: $font-size-sm;
+          text-decoration: none;
+
+          &:hover {
+            background: $white;
+            color: $primary-blue;
+          }
+        }
+      }
+
+      &.expanded .sub-menu {
+        display: block;
+      }
+    }
+  }
+
+  .info_wrap {
+    padding: $spacing-xl $spacing-lg;
+    background: $white;
+    border-top: 1px solid $border-gray;
+    margin-top: auto;
+    // styles for tit1, tit2...
+  }
+}
+
+// ===========================
+// Modern Navigation Menu
+// ===========================
+.nav-menu {
+  display: flex;
+  list-style: none;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+  color: var(--text-dark);
+  font-weight: 500;
+  font-size: 15px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: var(--light-bg);
+    color: var(--primary-blue);
+    transform: translateY(-2px);
+  }
+}
+
+.nav-icon {
+  font-size: 18px;
+}
+
+.signup-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  background: var(--gradient-primary);
+  color: var(--white);
+  padding: 12px 24px;
+  border-radius: 50px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow-md);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+  }
+}
+
+// ===========================
+// Desktop Navigation Styles
+// ===========================
+@include respond-to('desktop') {
+  .m-only { display: none !important; }
+  .pc-only { display: block !important; }
+
+  .btn-mobilemenu { display: none; }
+
+  .main-nav.m-nav {
+    position: static;
+    right: auto;
+    transition: none;
+    flex-direction: row;
+    align-items: center;
+    overflow: visible;
+    background: transparent;
+    height: 100%;
+    flex: 1;
+
+    .nav-header { display: none; }
+    .info_wrap { display: none; }
+
+    .nav-list {
+      display: flex;
+      height: 100%;
+      flex-grow: 1;
+
+      .nav-item {
+        border-bottom: none;
+        position: relative;
+        height: 100%;
+
+        > a {
+          height: 100%;
+          padding: 0 24px;
+          color: var(--text-dark);
+          font-weight: 500;
+          font-size: 15px;
+          transition: all 0.3s ease;
+
+          &:hover {
+            color: var(--primary-blue);
+            &::after {
+              content: '';
+              position: absolute;
+              bottom: 0;
+              left: 24px;
+              right: 24px;
+              height: 3px;
+              background: var(--primary-blue);
+              border-radius: 2px;
+            }
+          }
+        }
+
+        &.has-submenu > a::after { display: none; }
+
+        .sub-menu {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          background: var(--white);
+          border: 1px solid var(--border-gray);
+          border-radius: 8px;
+          box-shadow: var(--shadow-lg);
+          min-width: 200px;
+          padding: 8px 0;
+          display: none;
+          z-index: 1001;
+
+          a {
+            display: block;
+            padding: 8px 16px;
+            color: var(--text-dark);
+            font-size: 14px;
+            text-decoration: none;
+            transition: all 0.3s ease;
+
+            &:hover {
+              background: var(--light-bg);
+              color: var(--primary-blue);
+            }
+          }
+        }
+
+        &:hover .sub-menu {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+// ===========================
+// Body Layout Compensation
+// ===========================
+body {
+  padding-top: 80px; // Compensate for fixed header
+}
+
+// ===========================
+// Mobile Responsive Design
+// ===========================
+@media (max-width: 768px) {
+  .global-header {
+    height: 60px;
+
+    .container .header-content {
+      padding: 0 16px;
+      height: 60px;
+    }
+  }
+
+  body {
+    padding-top: 60px; // Smaller header on mobile
+  }
+}
+
+@media (max-width: 480px) {
+  .global-header {
+    .header-content {
+      padding: 0 12px;
+    }
+  }
+
+  .logo {
+    .logo-text {
+      display: none; // Hide logo text on very small screens
+    }
+  }
+
+}
diff --git a/src/main/resources/static/sass/main.scss b/src/main/resources/static/sass/main.scss
new file mode 100644
index 0000000..9a414de
--- /dev/null
+++ b/src/main/resources/static/sass/main.scss
@@ -0,0 +1,46 @@
+// -----------------------------------------------------------------------------
+// Main SASS Entry Point - Version 2 (Modern Vibrant Design)
+// Based on design/styles-v2.css
+// -----------------------------------------------------------------------------
+
+@charset "utf-8";
+
+// 1. Configuration and helpers (no CSS output)
+@import 'abstracts/variables';
+@import 'abstracts/mixins';
+
+// 2. Base styles
+@import 'base/reset';
+@import 'base/typography';
+@import 'base/animations';
+
+// 3. Layout
+@import 'layout/header';
+@import 'layout/footer';
+@import 'layout/grid';
+@import 'layout/container';
+
+// 4. Components
+@import 'components/buttons';
+@import 'components/cards';
+@import 'components/forms';
+@import 'components/modals';
+@import 'components/navigation';
+@import 'components/partners';
+@import 'components/cta';
+
+// 5. Page-specific styles
+@import 'pages/index';
+@import 'pages/home';
+@import 'pages/api-portal';
+@import 'pages/documentation';
+@import 'pages/login';
+
+// 6. Themes
+@import 'themes/dark';
+
+// 7. Utilities (should be last)
+@import 'base/utilities';
+
+// 8. Vendor overrides
+@import 'vendors/overrides';
diff --git a/src/main/resources/static/sass/pages/_api-portal.scss b/src/main/resources/static/sass/pages/_api-portal.scss
new file mode 100644
index 0000000..6cbfa79
--- /dev/null
+++ b/src/main/resources/static/sass/pages/_api-portal.scss
@@ -0,0 +1,7 @@
+// -----------------------------------------------------------------------------
+// API Portal page specific styles
+// -----------------------------------------------------------------------------
+
+.api-portal-page {
+  // Any API portal-specific styles go here
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/pages/_documentation.scss b/src/main/resources/static/sass/pages/_documentation.scss
new file mode 100644
index 0000000..5dfdb62
--- /dev/null
+++ b/src/main/resources/static/sass/pages/_documentation.scss
@@ -0,0 +1,7 @@
+// -----------------------------------------------------------------------------
+// Documentation page specific styles
+// -----------------------------------------------------------------------------
+
+.documentation-page {
+  // Any documentation-specific styles go here
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/pages/_home.scss b/src/main/resources/static/sass/pages/_home.scss
new file mode 100644
index 0000000..901c99f
--- /dev/null
+++ b/src/main/resources/static/sass/pages/_home.scss
@@ -0,0 +1,7 @@
+// -----------------------------------------------------------------------------
+// Home page specific styles
+// -----------------------------------------------------------------------------
+
+.home-page {
+  // Any home-specific styles go here
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/pages/_index.scss b/src/main/resources/static/sass/pages/_index.scss
new file mode 100644
index 0000000..7f1ee7f
--- /dev/null
+++ b/src/main/resources/static/sass/pages/_index.scss
@@ -0,0 +1,1109 @@
+// -----------------------------------------------------------------------------
+// Hero section styles - Modern vibrant design
+// -----------------------------------------------------------------------------
+
+.hero-section {
+  position: relative;
+  padding: 160px 0 100px;
+  background: linear-gradient(180deg, $light-bg 0%, $white 100%);
+  overflow: hidden;
+
+  @include respond-to('sm') {
+    padding: 120px 0 60px;
+  }
+}
+
+// Background patterns
+.hero-patterns {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+
+  .pattern-circle {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.1;
+
+    &.pattern-1 {
+      @include pattern-circle(400px, $accent-cyan);
+      top: -200px;
+      right: -100px;
+      @include animate-float;
+    }
+
+    &.pattern-2 {
+      @include pattern-circle(300px, $accent-yellow);
+      bottom: -150px;
+      left: -50px;
+      animation: float 15s ease-in-out infinite reverse;
+    }
+  }
+
+  .pattern-dots {
+    position: absolute;
+    top: 50%;
+    left: 10%;
+    width: 100px;
+    height: 100px;
+    background-image: radial-gradient(circle, $accent-purple 2px, transparent 2px);
+    background-size: 20px 20px;
+    opacity: 0.3;
+  }
+}
+
+// Hero content
+.hero-content {
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  max-width: $container-max-width;
+  margin: 0 auto;
+  padding: 0 $spacing-lg;
+}
+
+// Hero badge
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-lg;
+  background: $white;
+  border: 2px solid $accent-yellow;
+  border-radius: $border-radius-full;
+  margin-bottom: $spacing-lg;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-semibold;
+  color: $text-dark;
+  @include animate-slide-in-down;
+
+  .badge-icon {
+    font-size: $font-size-lg;
+    @include animate-bounce;
+  }
+}
+
+// Main headline
+.main-headline {
+  font-size: $font-size-5xl;
+  font-weight: $font-weight-extrabold;
+  line-height: $line-height-tight;
+  margin-bottom: $spacing-lg;
+  color: $text-dark;
+  @include animate-slide-in-up;
+
+  @include respond-to('sm') {
+    font-size: $font-size-3xl;
+  }
+
+  @include respond-to('xs') {
+    font-size: $font-size-2xl;
+  }
+
+  .headline-highlight {
+    @include gradient-text($gradient-accent);
+  }
+}
+
+// Sub headline
+.sub-headline {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-regular;
+  line-height: $line-height-normal;
+  margin-bottom: $spacing-2xl;
+  color: $text-gray;
+  animation: slideInUp 0.9s ease-out;
+
+  @include respond-to('sm') {
+    font-size: $font-size-base;
+  }
+}
+
+// Hero buttons
+.hero-buttons {
+  display: flex;
+  gap: $spacing-md;
+  justify-content: center;
+  margin-bottom: $spacing-4xl;
+  animation: slideInUp 1s ease-out;
+
+  @include respond-to('sm') {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .btn {
+    @include button-base;
+
+    &.btn-primary {
+      background: $gradient-primary;
+      color: $white;
+      box-shadow: $shadow-md;
+
+      &:hover {
+        box-shadow: $shadow-xl;
+      }
+    }
+
+    &.btn-secondary {
+      background: $white;
+      color: $primary-blue;
+      border: 2px solid $primary-blue;
+
+      &:hover {
+        background: $light-bg;
+      }
+    }
+
+    @include respond-to('xs') {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+}
+
+// Hero stats
+.hero-stats {
+  display: flex;
+  justify-content: center;
+  gap: $spacing-4xl;
+  @include animate-fade-in;
+
+  @include respond-to('sm') {
+    flex-direction: column;
+    gap: $spacing-lg;
+  }
+
+  .stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .stat-number {
+      font-size: $font-size-3xl;
+      font-weight: $font-weight-extrabold;
+      @include gradient-text($gradient-primary);
+    }
+
+    .stat-label {
+      font-size: $font-size-sm;
+      color: $text-gray;
+      font-weight: $font-weight-medium;
+    }
+  }
+}
+
+// Hero image/illustration
+.hero-image {
+  position: relative;
+  margin-top: $spacing-4xl;
+  text-align: center;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: $border-radius-xl;
+    box-shadow: $shadow-xl;
+  }
+
+  .hero-decoration {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      border-radius: 50%;
+    }
+
+    &::before {
+      width: 60px;
+      height: 60px;
+      background: $gradient-warm;
+      top: -30px;
+      right: 10%;
+      @include animate-bounce;
+    }
+
+    &::after {
+      width: 40px;
+      height: 40px;
+      background: $gradient-accent;
+      bottom: -20px;
+      left: 15%;
+      animation: bounce 2s infinite 0.5s;
+    }
+  }
+}
+
+
+
+// -----------------------------------------------------------------------------
+// API Search section styles - 검색 섹션
+// -----------------------------------------------------------------------------
+
+.api-search-section {
+  padding: $spacing-4xl 0;
+  background: linear-gradient(180deg, $white 0%, $light-bg 100%);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, rgba($primary-blue, 0.03) 0%, transparent 70%);
+    pointer-events: none;
+  }
+
+  .search-container {
+    max-width: 800px;
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    z-index: 1;
+  }
+
+  .search-form {
+    margin-bottom: $spacing-xl;
+    @include animate-slide-in-up;
+  }
+
+  .search-wrapper {
+    display: flex;
+    gap: $spacing-md;
+    padding: 0 $spacing-lg;
+
+    @include respond-to('sm') {
+      flex-direction: column;
+      gap: $spacing-sm;
+    }
+  }
+
+  .search-input {
+    flex: 1;
+    padding: $spacing-md $spacing-xl;
+    font-size: $font-size-base;
+    border: 2px solid $border-gray;
+    border-radius: $border-radius-full;
+    background: $white;
+    transition: all 0.3s ease;
+    outline: none;
+
+    &::placeholder {
+      color: $text-light;
+    }
+
+    &:focus {
+      border-color: $primary-blue;
+      box-shadow: 0 0 0 4px rgba($primary-blue, 0.1);
+    }
+
+    @include respond-to('sm') {
+      width: 100%;
+      padding: $spacing-md $spacing-lg;
+    }
+  }
+
+  .search-button {
+    padding: $spacing-md $spacing-2xl;
+    background: $gradient-primary;
+    color: $white;
+    border: none;
+    border-radius: $border-radius-full;
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    box-shadow: $shadow-md;
+    white-space: nowrap;
+
+    i {
+      font-size: $font-size-lg;
+    }
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: $shadow-xl;
+      background: linear-gradient(135deg, darken($primary-blue, 5%) 0%, darken($secondary-blue, 5%) 100%);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: $shadow-sm;
+    }
+
+    @include respond-to('sm') {
+      width: 100%;
+      justify-content: center;
+      padding: $spacing-md $spacing-xl;
+    }
+  }
+
+  .hashtag-suggestions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-md;
+    flex-wrap: wrap;
+    padding: 0 $spacing-lg;
+    animation: fadeIn 0.8s ease-out 0.2s both;
+
+    @include respond-to('sm') {
+      gap: $spacing-sm;
+      justify-content: flex-start;
+    }
+  }
+
+  .hashtag-label {
+    font-size: $font-size-sm;
+    color: $text-gray;
+    font-weight: $font-weight-medium;
+
+    @include respond-to('sm') {
+      width: 100%;
+      margin-bottom: $spacing-xs;
+    }
+  }
+
+  .hashtag {
+    display: inline-flex;
+    align-items: center;
+    padding: $spacing-xs $spacing-lg;
+    background: $white;
+    border: 1px solid $border-gray;
+    border-radius: $border-radius-full;
+    font-size: $font-size-sm;
+    color: $text-dark;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: $gradient-primary;
+      transition: left 0.3s ease;
+      z-index: 0;
+    }
+
+    &:hover {
+      border-color: $primary-blue;
+      transform: translateY(-2px);
+      box-shadow: $shadow-sm;
+      color: $white;
+      position: relative;
+      z-index: 1;
+
+      &::before {
+        left: 0;
+      }
+    }
+
+    @include respond-to('sm') {
+      padding: $spacing-xs $spacing-md;
+      font-size: $font-size-xs;
+    }
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+// API Showcase section styles
+// -----------------------------------------------------------------------------
+
+.api-showcase {
+  padding: $spacing-6xl 0;
+  background: $white;
+}
+
+
+// -----------------------------------------------------------------------------
+// Info Section - 정보 섹션 스타일
+// -----------------------------------------------------------------------------
+
+.info-section {
+  padding: $spacing-6xl 0;
+  background: $white;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg,
+      transparent 0%,
+      $border-gray 20%,
+      $border-gray 80%,
+      transparent 100%
+    );
+  }
+
+  .info-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: $spacing-3xl;
+  }
+
+  .image-container {
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  .image-placeholder {
+    position: relative;
+    width: 100%;
+    height: 300px;
+    background: linear-gradient(135deg, $light-bg 0%, rgba($primary-blue, 0.1) 100%);
+    border-radius: $border-radius-2xl;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-md;
+    box-shadow: $shadow-md;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(
+        circle at center,
+        rgba($accent-cyan, 0.1) 0%,
+        transparent 50%
+      );
+      animation: rotate 20s linear infinite;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -20px;
+      right: -20px;
+      width: 100px;
+      height: 100px;
+      background: $gradient-accent;
+      border-radius: 50%;
+      opacity: 0.3;
+      filter: blur(40px);
+    }
+
+    i {
+      font-size: 64px;
+      color: $primary-blue;
+      z-index: 1;
+    }
+
+    span {
+      font-size: $font-size-xl;
+      font-weight: $font-weight-semibold;
+      color: $text-dark;
+      z-index: 1;
+    }
+
+    @include respond-to('sm') {
+      height: 200px;
+
+      i {
+        font-size: 48px;
+      }
+
+      span {
+        font-size: $font-size-lg;
+      }
+    }
+  }
+
+  .info-content {
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  .highlight-text {
+    font-size: $font-size-xl;
+    line-height: $line-height-loose;
+    color: $text-dark;
+    margin-bottom: $spacing-3xl;
+    font-weight: $font-weight-medium;
+
+    .text-accent {
+      color: $primary-blue;
+      font-weight: $font-weight-semibold;
+    }
+
+    @include respond-to('md') {
+      font-size: $font-size-lg;
+    }
+
+    @include respond-to('sm') {
+      font-size: $font-size-base;
+      padding: 0 $spacing-lg;
+      margin-bottom: $spacing-2xl;
+    }
+  }
+
+  .action-buttons {
+    display: flex;
+    gap: $spacing-lg;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    @include respond-to('sm') {
+      flex-direction: column;
+      align-items: center;
+      padding: 0 $spacing-lg;
+    }
+  }
+
+  .action-btn {
+    display: flex;
+    align-items: center;
+    gap: $spacing-md;
+    padding: $spacing-md $spacing-xl;
+    background: $white;
+    border: 2px solid $border-gray;
+    border-radius: $border-radius-full;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    min-width: 280px;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 100%;
+      background: $gradient-primary;
+      transition: width 0.3s ease;
+      z-index: 0;
+    }
+
+    &:hover {
+      border-color: $primary-blue;
+      transform: translateY(-3px);
+      box-shadow: $shadow-lg;
+
+      &::before {
+        width: 100%;
+      }
+
+      .btn-number {
+        background: $white;
+        color: $primary-blue;
+      }
+
+      .btn-text,
+      i {
+        color: $white;
+      }
+    }
+
+    .btn-number {
+      position: relative;
+      z-index: 1;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: $gradient-primary;
+      color: $white;
+      border-radius: 50%;
+      font-weight: $font-weight-bold;
+      font-size: $font-size-base;
+      flex-shrink: 0;
+      transition: all 0.3s ease;
+    }
+
+    .btn-text {
+      position: relative;
+      z-index: 1;
+      font-size: $font-size-base;
+      font-weight: $font-weight-medium;
+      color: $text-dark;
+      transition: color 0.3s ease;
+    }
+
+    i {
+      position: relative;
+      z-index: 1;
+      font-size: $font-size-sm;
+      color: $text-light;
+      margin-left: auto;
+      transition: all 0.3s ease;
+    }
+
+    @include respond-to('sm') {
+      min-width: 100%;
+      justify-content: flex-start;
+    }
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+// Support Center section styles
+// -----------------------------------------------------------------------------
+
+.support-center {
+  padding: $spacing-6xl 0;
+  background: $gray-bg;
+
+  .section-header {
+    text-align: center;
+    margin-bottom: $spacing-4xl;
+
+    .section-title {
+      font-size: $font-size-4xl;
+      font-weight: $font-weight-bold;
+      color: $text-dark;
+      margin-bottom: $spacing-md;
+
+      @include respond-to('sm') {
+        font-size: $font-size-3xl;
+      }
+
+      .title-highlight {
+        @include gradient-text($gradient-primary);
+      }
+    }
+
+    .section-subtitle {
+      font-size: $font-size-lg;
+      color: $text-gray;
+      line-height: $line-height-loose;
+
+      @include respond-to('sm') {
+        font-size: $font-size-base;
+      }
+    }
+  }
+
+  .support-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: $spacing-xl;
+    max-width: 1000px;
+    margin: 0 auto;
+
+    @include respond-to('md') {
+      grid-template-columns: 1fr;
+      gap: $spacing-lg;
+      max-width: 500px;
+    }
+
+    @include respond-to('sm') {
+      gap: $spacing-md;
+      padding: 0 $spacing-md;
+    }
+  }
+
+  .support-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: $spacing-2xl $spacing-xl;
+    background: $white;
+    border-radius: $border-radius-xl;
+    box-shadow: $shadow-sm;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: $gradient-primary;
+      transform: scaleX(0);
+      transition: transform 0.3s ease;
+    }
+
+    &:hover {
+      transform: translateY(-8px);
+      box-shadow: $shadow-xl;
+
+      &::before {
+        transform: scaleX(1);
+      }
+
+      .card-icon {
+        transform: scale(1.1) rotate(5deg);
+        background: $gradient-primary;
+        color: $white;
+      }
+
+      .card-arrow {
+        transform: translateX(5px);
+        color: $primary-blue;
+      }
+    }
+
+    .card-icon {
+      width: 80px;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: $light-bg;
+      border-radius: $border-radius-full;
+      margin-bottom: $spacing-lg;
+      transition: all 0.3s ease;
+
+      i {
+        font-size: 36px;
+        color: $primary-blue;
+      }
+    }
+
+    h3 {
+      font-size: $font-size-xl;
+      font-weight: $font-weight-semibold;
+      color: $text-dark;
+      margin-bottom: $spacing-sm;
+      text-align: center;
+    }
+
+    p {
+      font-size: $font-size-base;
+      color: $text-gray;
+      text-align: center;
+      line-height: $line-height-loose;
+      margin-bottom: $spacing-lg;
+    }
+
+    .card-arrow {
+      margin-top: auto;
+      color: $text-light;
+      transition: all 0.3s ease;
+
+      i {
+        font-size: $font-size-lg;
+      }
+    }
+
+    @include respond-to('sm') {
+      padding: $spacing-xl $spacing-lg;
+
+      .card-icon {
+        width: 70px;
+        height: 70px;
+
+        i {
+          font-size: 30px;
+        }
+      }
+
+      h3 {
+        font-size: $font-size-lg;
+      }
+
+      p {
+        font-size: $font-size-sm;
+      }
+    }
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+// API Stats Section - API 활용 현황
+// -----------------------------------------------------------------------------
+
+.api-stats-section {
+  padding: $spacing-6xl 0;
+  background: linear-gradient(180deg, $white 0%, $light-bg 100%);
+  position: relative;
+  overflow: hidden;
+
+  // Background decoration
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -100px;
+    width: 200px;
+    height: 200px;
+    background: radial-gradient(circle, $accent-cyan 0%, transparent 70%);
+    opacity: 0.1;
+    border-radius: 50%;
+    transform: translateY(-50%);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: -100px;
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, $primary-blue 0%, transparent 70%);
+    opacity: 0.08;
+    border-radius: 50%;
+    transform: translateY(-50%);
+  }
+
+  .section-header {
+    text-align: center;
+    margin-bottom: $spacing-5xl;
+    position: relative;
+    z-index: 1;
+
+    .section-title {
+      font-size: $font-size-3xl;
+      font-weight: $font-weight-bold;
+      color: $text-dark;
+      line-height: $line-height-loose;
+      margin-bottom: $spacing-2xl;
+
+      @include respond-to('md') {
+        font-size: $font-size-2xl;
+      }
+
+      @include respond-to('sm') {
+        font-size: $font-size-xl;
+        padding: 0 $spacing-lg;
+      }
+
+      .title-highlight {
+        @include gradient-text($gradient-primary);
+        font-weight: $font-weight-extrabold;
+      }
+    }
+  }
+
+  .stats-cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: $spacing-2xl;
+    max-width: 1100px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+
+    @include respond-to('md') {
+      grid-template-columns: 1fr;
+      gap: $spacing-xl;
+      max-width: 400px;
+    }
+
+    @include respond-to('sm') {
+      padding: 0 $spacing-lg;
+    }
+  }
+
+  .stat-card {
+    background: $white;
+    border-radius: $border-radius-xl;
+    padding: $spacing-2xl;
+    box-shadow: $shadow-md;
+    border: 1px solid rgba($primary-blue, 0.1);
+    position: relative;
+    overflow: hidden;
+    transition: all 0.4s ease;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      bottom: -2px;
+      background: $gradient-primary;
+      border-radius: $border-radius-xl;
+      opacity: 0;
+      z-index: -1;
+      transition: opacity 0.4s ease;
+    }
+
+    &:hover {
+      transform: translateY(-10px) scale(1.02);
+      box-shadow: $shadow-xl;
+
+      &::before {
+        opacity: 1;
+      }
+
+      .stat-icon {
+        transform: rotate(360deg) scale(1.1);
+        background: $gradient-primary;
+
+        i {
+          color: $white;
+        }
+      }
+
+      .stat-number {
+        @include gradient-text($gradient-accent);
+      }
+    }
+
+    .stat-icon {
+      width: 70px;
+      height: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: $light-bg;
+      border-radius: $border-radius-full;
+      margin-bottom: $spacing-lg;
+      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+
+      i {
+        font-size: 32px;
+        color: $primary-blue;
+        transition: color 0.3s ease;
+      }
+    }
+
+    .stat-content {
+      .stat-number {
+        font-size: $font-size-4xl;
+        font-weight: $font-weight-extrabold;
+        color: $text-dark;
+        margin-bottom: $spacing-sm;
+        transition: all 0.3s ease;
+        display: block;
+
+        @include respond-to('sm') {
+          font-size: $font-size-3xl;
+        }
+
+        // Add thousand separator with CSS
+        &[data-formatted]::after {
+          content: attr(data-formatted);
+        }
+      }
+
+      .stat-label {
+        font-size: $font-size-lg;
+        font-weight: $font-weight-semibold;
+        color: $text-dark;
+        margin-bottom: $spacing-xs;
+      }
+
+      .stat-description {
+        font-size: $font-size-sm;
+        color: $text-gray;
+        line-height: $line-height-normal;
+      }
+    }
+
+    // Different colors for each card
+    &:nth-child(1) {
+      .stat-icon {
+        background: rgba($accent-cyan, 0.1);
+
+        i {
+          color: $accent-cyan;
+        }
+      }
+
+      &:hover .stat-icon {
+        background: linear-gradient(135deg, $accent-cyan 0%, $primary-blue 100%);
+      }
+    }
+
+    &:nth-child(2) {
+      .stat-icon {
+        background: rgba($accent-green, 0.1);
+
+        i {
+          color: $accent-green;
+        }
+      }
+
+      &:hover .stat-icon {
+        background: linear-gradient(135deg, $accent-green 0%, darken($accent-green, 10%) 100%);
+      }
+    }
+
+    &:nth-child(3) {
+      .stat-icon {
+        background: rgba($accent-purple, 0.1);
+
+        i {
+          color: $accent-purple;
+        }
+      }
+
+      &:hover .stat-icon {
+        background: linear-gradient(135deg, $accent-purple 0%, darken($accent-purple, 10%) 100%);
+      }
+    }
+
+    @include respond-to('sm') {
+      padding: $spacing-xl;
+
+      .stat-icon {
+        width: 60px;
+        height: 60px;
+
+        i {
+          font-size: 28px;
+        }
+      }
+    }
+  }
+}
+
+// Number animation keyframes
+@keyframes countUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.stat-number {
+  animation: countUp 0.6s ease-out forwards;
+}
+
diff --git a/src/main/resources/static/sass/pages/_login.scss b/src/main/resources/static/sass/pages/_login.scss
new file mode 100644
index 0000000..378fb24
--- /dev/null
+++ b/src/main/resources/static/sass/pages/_login.scss
@@ -0,0 +1,308 @@
+// -----------------------------------------------------------------------------
+// Login Page Styles - Modern Design
+// -----------------------------------------------------------------------------
+
+.login-page {
+  min-height: calc(100vh - 140px); // Account for header and footer
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--light-bg) 0%, var(--gray-bg) 100%);
+  padding: 40px 20px;
+  position: relative;
+  overflow: hidden;
+
+  // Decorative background elements
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -20%;
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
+    opacity: 0.1;
+    border-radius: 50%;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -30%;
+    left: -10%;
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, var(--primary-blue) 0%, transparent 70%);
+    opacity: 0.1;
+    border-radius: 50%;
+  }
+}
+
+.login-container {
+  width: 100%;
+  max-width: 480px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+.login-card {
+  background: var(--white);
+  border-radius: 24px;
+  box-shadow: var(--shadow-xl);
+  padding: 48px 40px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+
+  @media (max-width: 480px) {
+    padding: 32px 24px;
+    border-radius: 16px;
+  }
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 40px;
+
+  .login-logo {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 24px;
+
+    img {
+      height: 48px;
+      width: auto;
+    }
+
+    .logo-text {
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--primary-blue);
+      padding: 6px 16px;
+      background: var(--light-bg);
+      border-radius: 24px;
+    }
+  }
+
+  .login-title {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text-dark);
+    margin-bottom: 8px;
+  }
+
+  .login-subtitle {
+    font-size: 15px;
+    color: var(--text-gray);
+  }
+}
+
+.login-form {
+  margin-bottom: 24px;
+
+  .form-group {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .form-label {
+    display: block;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-dark);
+    margin-bottom: 8px;
+  }
+
+  .form-input {
+    width: 100%;
+    padding: 14px 16px;
+    font-size: 15px;
+    border: 2px solid var(--border-gray);
+    border-radius: 12px;
+    background: var(--white);
+    transition: all 0.3s ease;
+    outline: none;
+
+    &::placeholder {
+      color: var(--text-light);
+    }
+
+    &:focus {
+      border-color: var(--primary-blue);
+      box-shadow: 0 0 0 4px rgba(75, 155, 255, 0.1);
+    }
+
+    &.error {
+      border-color: var(--accent-orange);
+
+      &:focus {
+        box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
+      }
+    }
+  }
+
+  .form-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 16px;
+
+    input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      accent-color: var(--primary-blue);
+      cursor: pointer;
+    }
+
+    label {
+      font-size: 14px;
+      color: var(--text-gray);
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
+
+.login-button {
+  width: 100%;
+  padding: 16px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--white);
+  background: var(--gradient-primary);
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow-md);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+  }
+}
+
+.login-links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 32px;
+  padding-top: 32px;
+  border-top: 1px solid var(--border-gray);
+  flex-wrap: wrap;
+
+  @media (max-width: 480px) {
+    gap: 12px;
+    margin-top: 24px;
+    padding-top: 24px;
+  }
+
+  a {
+    font-size: 14px;
+    color: var(--text-gray);
+    text-decoration: none;
+    transition: color 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    &:hover {
+      color: var(--primary-blue);
+    }
+
+    i {
+      font-size: 16px;
+    }
+  }
+
+  .link-separator {
+    color: var(--border-gray);
+    font-size: 14px;
+  }
+}
+
+// Alert messages
+.login-alert {
+  margin-bottom: 20px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &.alert-error {
+    background: rgba(255, 107, 107, 0.1);
+    color: var(--accent-orange);
+    border: 1px solid rgba(255, 107, 107, 0.2);
+  }
+
+  &.alert-success {
+    background: rgba(107, 207, 127, 0.1);
+    color: var(--accent-green);
+    border: 1px solid rgba(107, 207, 127, 0.2);
+  }
+
+  &.alert-info {
+    background: rgba(75, 155, 255, 0.1);
+    color: var(--primary-blue);
+    border: 1px solid rgba(75, 155, 255, 0.2);
+  }
+
+  i {
+    font-size: 18px;
+  }
+}
+
+// Loading state
+.login-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 24px;
+  z-index: 10;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+
+  &.active {
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  .spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--border-gray);
+    border-top-color: var(--primary-blue);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sass/themes/_dark.scss b/src/main/resources/static/sass/themes/_dark.scss
new file mode 100644
index 0000000..14c3812
--- /dev/null
+++ b/src/main/resources/static/sass/themes/_dark.scss
@@ -0,0 +1,6 @@
+// -----------------------------------------------------------------------------
+// Dark theme styles (optional)
+// -----------------------------------------------------------------------------
+
+// Dark theme variables can be defined here
+// This file can be left empty if dark theme is not needed yet
\ No newline at end of file
diff --git a/src/main/resources/static/sass/vendors/_overrides.scss b/src/main/resources/static/sass/vendors/_overrides.scss
new file mode 100644
index 0000000..403d747
--- /dev/null
+++ b/src/main/resources/static/sass/vendors/_overrides.scss
@@ -0,0 +1,6 @@
+// -----------------------------------------------------------------------------
+// Vendor library overrides
+// -----------------------------------------------------------------------------
+
+// Place any third-party library style overrides here
+// This file can be left empty if no vendor libraries are used
\ No newline at end of file
diff --git a/src/main/resources/templates/views/apps/login/login.html b/src/main/resources/templates/views/apps/login/login.html
index b2eb5da..514b64c 100644
--- a/src/main/resources/templates/views/apps/login/login.html
+++ b/src/main/resources/templates/views/apps/login/login.html
@@ -1,104 +1,90 @@
 <!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kbank_base_layout}">
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}">
 <body>
-<section layout:fragment="contentFragment" class="content">
-    <div class="content_wrap">
-        <div class="sub_title2">
-            <h2 class="title add7">로그인</h2>
-        </div>
-        <div class="inner i_cs9 h_inner9">
-            <div class="form_type">
-                <form id="loginForm" role="form" name="loginForm" th:action="@{/actionLogin.do}" method="post">
+<th:block layout:fragment="contentFragment">
+    <div class="login-page">
+        <div class="login-container">
+            <div class="login-card">
+                <!-- Login Header with Logo -->
+                <div class="login-header">
+                    <h1 class="login-title">로그인</h1>
+                    <p class="login-subtitle">광주은행 개발자 포털에 오신 것을 환영합니다</p>
+                </div>
+
+                <!-- Alert Messages -->
+                <div th:if="${param.logout}" class="login-alert alert-info">
+                    <i class="fas fa-info-circle"></i>
+                    <span>로그아웃되었습니다.</span>
+                </div>
+
+                <!-- Login Form -->
+                <form id="loginForm" role="form" name="loginForm" th:action="@{/actionLogin.do}" method="post" class="login-form">
                     <input type="hidden" id="message" name="message" th:value="${loginMessage}">
                     <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
-                    <div class="form_type_box">
-                        <div class="info1 form_top">
-                            <p class="title">
-                                <span>아이디</span>
-                            </p>
-                            <div class="info_line info_add">
-                                <div class="info_box1 add add2">
-                                    <input type="text" id="id" name="id" th:value="${loginId}"
-                                           class="common_input_type_1 h_inp"
-                                           placeholder="이메일 아이디를 입력해 주세요." required>
-                                    <input type="hidden" id="loginId" th:value="${loginId}">
-                                </div>
-                            </div>
-                        </div>
+                    <input type="hidden" id="loginId" th:value="${loginId}">
 
-                        <div class="info1">
-                            <p class="title">
-                                <span>비밀번호</span>
-                            </p>
-                            <div class="info_line info_add">
-                                <div class="info_box1 add add2">
-                                    <input type="password" id="password" name="password"
-                                           class="common_input_type_1 h_inp"
-                                           placeholder="비밀번호를 입력해 주세요." required>
-                                </div>
-                            </div>
-                        </div>
+                    <!-- Email Field -->
+                    <div class="form-group">
+                        <label for="id" class="form-label">이메일</label>
+                        <input type="text"
+                               id="id"
+                               name="id"
+                               th:value="${loginId}"
+                               class="form-input"
+                               placeholder="이메일 아이디를 입력해 주세요"
+                               required>
                     </div>
-                    <div class="box_inp">
-            <span class="inp_check f_size">
-              <input id="checkId" name="checkId" type="checkbox">
-              <label for="checkId">아이디 저장</label>
-            </span>
+
+                    <!-- Password Field -->
+                    <div class="form-group">
+                        <label for="password" class="form-label">비밀번호</label>
+                        <input type="password"
+                               id="password"
+                               name="password"
+                               class="form-input"
+                               placeholder="비밀번호를 입력해 주세요"
+                               required>
+                    </div>
+
+                    <!-- Remember Me Checkbox -->
+                    <div class="form-checkbox">
+                        <input id="checkId" name="checkId" type="checkbox">
+                        <label for="checkId">아이디 저장</label>
                     </div>
                 </form>
-                <div class="btn_login">
-                    <a href="#" class="common_btn_type_1 h_btn" id="actionLogin"><span>로그인</span></a>
+
+                <!-- Login Button -->
+                <button type="button" class="login-button" id="actionLogin">
+                    로그인
+                </button>
+
+                <!-- Additional Links -->
+                <div class="login-links">
+                    <a th:href="@{/account_recovery(tab='findId')}">
+                        <i class="fas fa-search"></i>
+                        <span>아이디 찾기</span>
+                    </a>
+                    <span class="link-separator">|</span>
+                    <a th:href="@{/account_recovery(tab='resetPassword')}">
+                        <i class="fas fa-lock"></i>
+                        <span>비밀번호 초기화</span>
+                    </a>
+                    <span class="link-separator">|</span>
+                    <a th:href="@{/signup}">
+                        <i class="fas fa-user-plus"></i>
+                        <span>회원가입</span>
+                    </a>
                 </div>
-                <div class="login_list pc-only">
-                    <ul>
-                        <li class="icon_search">
-                            <img th:src="@{/img/icon/icon_login_search.png}" alt="">
-                            <a th:href="@{/account_recovery(tab='findId')}">아이디 찾기</a>
-                        </li>
-                        <li>
-                            <span>|</span>
-                        </li>
-                        <li class="icon_lock">
-                            <img th:src="@{/img/icon/icon_login_lock.png}" alt="">
-                            <a th:href="@{/account_recovery(tab='resetPassword')}">비밀번호 초기화</a>
-                        </li>
-                        <li>
-                            <span>|</span>
-                        </li>
-                        <li class="icon_join">
-                            <img th:src="@{/img/icon/icon_login_join.png}" alt="">
-                            <a th:href="@{/signup}">회원가입</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="login_list m-only">
-                    <ul>
-                        <li class="icon_search">
-                            <a th:href="@{/account_recovery(tab='findId')}">아이디 찾기</a>
-                        </li>
-                        <li>
-                            <span>|</span>
-                        </li>
-                        <li class="icon_lock">
-                            <a th:href="@{/account_recovery(tab='resetPassword')}">비밀번호 초기화</a>
-                        </li>
-                        <li>
-                            <span>|</span>
-                        </li>
-                        <li class="icon_join">
-                            <a th:href="@{/signup}">회원가입</a>
-                        </li>
-                    </ul>
-                </div>
-                <div th:if="${param.logout}" class="alert alert-info mt-3">
-                    <p>로그아웃되었습니다.</p>
+
+                <!-- Loading State -->
+                <div class="login-loading" id="loginLoading">
+                    <div class="spinner"></div>
                 </div>
             </div>
         </div>
     </div>
-
-</section>
+</th:block>
 </body>
 <th:block layout:fragment="contentScript">
     <script th:inline="javascript">
@@ -179,6 +165,10 @@
 
             let actionLogin = function (event) {
                 let form = document.loginForm;
+
+                // Show loading state
+                $('#loginLoading').addClass('active');
+
                 if ($('#checkId').is(':checked')) {
                     setCookie('saveid', $('#id').val(), new Date(new Date().getTime() + 1000 * 3600 * 24 * 30));
                 } else {
@@ -188,9 +178,11 @@
                 if (!form.checkValidity()) {
                     event.preventDefault();
                     event.stopPropagation();
+                    $('#loginLoading').removeClass('active');
                     customPopups.showAlert('입력 정보 확인');
                 } else {
                     if (form.password.value.length < 8) {
+                        $('#loginLoading').removeClass('active');
                         customPopups.showAlert('[[#{login.passLengthShort}]]');
                     } else {
                         const originalPassword = form.password.value;
@@ -201,7 +193,10 @@
                 form.classList.add('was-validated');
             };
 
-            $('#actionLogin').on('click', actionLogin);
+            $('#actionLogin').on('click', function(event) {
+                event.preventDefault();
+                actionLogin(event);
+            });
             $('#password').on('keydown', function (event) {
                 if (event.key === 'Enter' || event.keyCode === 13 || event.code === 'Enter') {
                     event.preventDefault();
diff --git a/src/main/resources/templates/views/apps/main/index.html b/src/main/resources/templates/views/apps/main/index.html
index c6e38d8..f6aea41 100644
--- a/src/main/resources/templates/views/apps/main/index.html
+++ b/src/main/resources/templates/views/apps/main/index.html
@@ -1,459 +1,372 @@
 <!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kbank_index_layout}">
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_index_layout}">
 
 
 <body>
-<section layout:fragment="contentFragment" class="content main">
-  <script th:src="@{/js/htmx.min.js}"></script>
-  <!-- main slick -->
-  <div class="slider-container">
-    <div class="slider m-only">
-      <div class="slider_box">
-
-        <img th:src="@{/img/img_mainslick_m.png}" alt="슬라이드 1">
-        <div class="slick_txt">
-          <p>디지털 금융 리더 <span>케이뱅크</span>가<br/>새로운 비즈니스 기회를<br/>제공합니다.</p>
+<th:block layout:fragment="contentFragment">
+  <section class="hero-section">
+    <div class="hero-patterns">
+      <div class="pattern-circle pattern-1"></div>
+      <div class="pattern-circle pattern-2"></div>
+      <div class="pattern-dots"></div>
+    </div>
+    <div class="container">
+      <div class="hero-content">
+        <div class="hero-badge">
+          <span class="badge-icon">🚀</span>
+          <span>Wa bank 생태계에 오신 것을 환영합니다!</span>
         </div>
-      </div>
-      <div class="slider_box">
-        <img th:src="@{/img/img_mainslick2_m.png}" alt="슬라이드 2">
-        <div class="slick_txt">
-          <p>차별화된 <span>API와<br> 편리한 테스트 환경</span>을<br> 지원합니다</p>
-        </div>
-      </div>
-      <div class="slider_box">
-        <img th:src="@{/img/img_mainslick3_m.png}" alt="슬라이드 3">
-        <div class="slick_txt">
-          <p><span>디지털 금융 혁신</span>을<br> 케이뱅크가<br> 함께합니다</p>
+        <h1 class="main-headline">
+          <span class="headline-wa">Wa한</span> 금융 혁신,<br>
+          여러분의 아이디어로 시작됩니다
+        </h1>
+        <h2 class="sub-headline">
+          광주은행 오픈 API로 새로운 금융 서비스를 만들어보세요.<br>
+          안전하고 빠르게, 그리고 쉽게 연동할 수 있습니다.
+        </h2>
+        <div class="hero-buttons">
+          <a href="/apis" class="btn btn-primary">
+            <i class="fas fa-code"></i> API 둘러보기
+          </a>
+          <a href="#get-started" class="btn btn-secondary">
+            <i class="fas fa-play"></i> 5분 만에 시작하기
+          </a>
         </div>
       </div>
     </div>
-    <div class="slider pc-only">
-      <div class="slider_box">
-        <img th:src="@{/img/img_mainslick_pc.png}" alt="슬라이드 1">
-        <div class="slick_txt">
-          <p><span>케이뱅크</span>가 새로운 비즈니스<br> 기회를 제공합니다</p>
-        </div>
-      </div>
-      <div class="slider_box">
-        <img th:src="@{/img/img_mainslick2_pc.png}" alt="슬라이드 2">
-        <div class="slick_txt">
-          <p>차별화된 <span>API와</span><br/>
-            <span>편리한 테스트 환경</span>을<br/>지원합니다</p>
-        </div>
-      </div>
-      <div class="slider_box">
-        <img th:src="@{/img/img_mainslick3_pc.png}" alt="슬라이드 3">
-        <div class="slick_txt">
-          <p><span>디지털 금융 혁신</span>을<br>케이뱅크가<br>함께합니다</p>
-        </div>
-      </div>
-    </div>
-    <button class="slick-prev" aria-label="Previous" type="button">이전</button>
-    <button class="slick-next" aria-label="Next" type="button">다음</button>
-    <ul class="slick-dots">
-      <li>
-        <button type="button">1</button>
-      </li>
-      <li>
-        <button type="button">2</button>
-      </li>
-      <li>
-        <button type="button">3</button>
-      </li>
-    </ul>
-  </div>
-  <!-- // main slick -->
+  </section>
 
-  <div class="main-container">
-    <div class="search_type">
-      <form th:action="@{/apis}" id="searchForm" method="get">
-        <div class="search-container">
-          <input type="text" name="keyword" class="search-box" id="search-box" placeholder="어떤 API를 찾고 계신가요?">
-          <button class="search-button" type="submit"></button>
-        </div>
-      </form>
-    </div>
-    <div class="hashtag">
-      <ul>
-        <li th:each="tag: ${hashtags}"><a href="#" th:text="${tag}">#인증</a></li>
-      </ul>
-    </div>
-
-    <div class="main_keyword">
-      <div class="api_tit">
-        <h2>가장 많이 찾는 API</h2>
-        <p class="total_view">
-          <a href="/apis">전체보기</a>
-        </p>
-      </div>
-      <div class="api_keyword">
-        <ul class="keyword_list tab_list">
-          <li>
-            <a href="#"
-               hx-get="/api_fragments"
-               hx-target="#api_spec_list"
-               hx-trigger="click"
-               onclick="setActive(this)">전체<span class="number" th:text="${totalApiCount}"></span></a>
-          </li>
-          <li th:each="item : ${services}">
-            <a href="#"
-               th:hx-get="@{/api_fragments(id=${item.id})}"
-               hx-target="#api_spec_list"
-               hx-trigger="click"
-               onclick="setActive(this)">
-              [[${item.groupName}]]<span class="number" th:text="${item.apiGroupApiList.size()}"></span>
-            </a>
-          </li>
-        </ul>
-        <div class="more_type m-only">
-          <button class="showmore" type="button">
-            <img th:src="@{/img/icon/icon_more_btn.png}" alt="더보기 버튼">
-          </button>
-        </div>
-        <div class="more_type pc-only">
-          <button class="showmore" type="button">
-            <img th:src="@{/img/icon/icon_more_btn2.png}" alt="더보기 버튼">
-          </button>
-        </div>
-      </div>
-
-      <div class="api_info_container box_list" id="api_spec_list">
-        <div class="api_info_box" th:each="api : ${apis}" th:data-href="@{/apis/detail(id=${api.apiId})}">
-          <div class="api_list" th:data-href="@{/apis/detail(id=${api.apiId})}">
-            <p class="txt1" th:text="${api.apiName}"></p>
-            <p class="txt2" th:text="${api.apiSimpleDescription}"></p>
+  <!-- API 검색 섹션 -->
+  <section class="api-search-section">
+    <div class="container">
+      <div class="search-container">
+        <form th:action="@{/apis}" method="get" class="search-form">
+          <div class="search-wrapper">
+            <input type="text" class="search-input" placeholder="원하는 API를 검색해보세요" id="apiSearchInput" name="keyword">
+            <button class="search-button" type="submit">
+              <i class="fas fa-search"></i>
+              <span>검색하기</span>
+            </button>
           </div>
-          <div class="api_img" style="height: 48px;">
-            <a th:href="@{/apis/detail(id=${api.apiId})}" class="btn btn-primary">
-              <img th:if="${#strings.isEmpty(api.mainIcon) == false}" th:src="${api.mainIcon}" alt="">
-            </a>
+        </form>
+        <div class="hashtag-suggestions" th:if="${hashtags != null and not #lists.isEmpty(hashtags)}">
+          <span class="hashtag-label">추천 검색어:</span>
+          <a href="#" class="hashtag" th:each="tag : ${hashtags}"
+             th:data-search="${tag}"
+             th:text="${'#' + tag}">
+          </a>
+        </div>
+        <!-- Fallback hashtags if no hashtags from controller -->
+        <div class="hashtag-suggestions" th:unless="${hashtags != null and not #lists.isEmpty(hashtags)}">
+          <span class="hashtag-label">추천 검색어:</span>
+          <a href="#" class="hashtag" data-search="계좌조회">#계좌조회</a>
+          <a href="#" class="hashtag" data-search="송금API">#송금API</a>
+          <a href="#" class="hashtag" data-search="실시간결제">#실시간결제</a>
+          <a href="#" class="hashtag" data-search="오픈뱅킹">#오픈뱅킹</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="api-showcase">
+    <div class="container">
+      <div class="section-header">
+        <h2 class="section-title">
+          <span class="title-highlight">인기 API</span>로 바로 시작하세요
+        </h2>
+        <p class="section-subtitle">가장 많이 사용되는 API를 확인하고 바로 테스트해보세요</p>
+      </div>
+      <div class="api-grid">
+        <!-- Dynamic API Cards from Controller (max 4) -->
+        <div th:each="api, iterStat : ${apis}"
+             th:if="${iterStat.index < 4}"
+             class="api-card"
+             th:classappend="${iterStat.index == 0} ? 'api-card-popular' : (${iterStat.index == 3} ? 'api-card-new' : '')">
+
+          <!-- Show badge for first (인기) and last (NEW) items -->
+          <div th:if="${iterStat.index == 0}" class="api-badge">인기</div>
+          <div th:if="${iterStat.index == 3}" class="api-badge new">NEW</div>
+
+          <!-- API Icon - using different icons based on index or API type -->
+          <div class="api-icon">
+            <!-- Icon selection based on API name or service type -->
+            <i th:if="${api.apiName != null}"
+               th:class="${#strings.containsIgnoreCase(api.apiName, '계좌') or #strings.containsIgnoreCase(api.apiName, '조회')} ? 'fas fa-wallet' :
+                        (${#strings.containsIgnoreCase(api.apiName, '송금') or #strings.containsIgnoreCase(api.apiName, '이체')} ? 'fas fa-exchange-alt' :
+                        (${#strings.containsIgnoreCase(api.apiName, '카드') or #strings.containsIgnoreCase(api.apiName, '결제')} ? 'fas fa-credit-card' :
+                        (${#strings.containsIgnoreCase(api.apiName, 'AI') or #strings.containsIgnoreCase(api.apiName, '분석')} ? 'fas fa-chart-line' :
+                        (${iterStat.index == 0} ? 'fas fa-wallet' :
+                        (${iterStat.index == 1} ? 'fas fa-exchange-alt' :
+                        (${iterStat.index == 2} ? 'fas fa-credit-card' : 'fas fa-chart-line'))))))"></i>
+          </div>
+
+          <!-- API Name -->
+          <h3 class="api-name" th:text="${api.apiName}">API 이름</h3>
+
+          <!-- API Description -->
+          <p class="api-description" th:text="${api.apiSimpleDescription != null ? api.apiSimpleDescription : api.description}">API 설명</p>
+
+          <!-- API Features/Method Info -->
+          <div class="api-features">
+            <span class="feature-tag" th:if="${api.apiMethod != null}" th:text="${api.apiMethod}">GET</span>
+            <span class="feature-tag" th:if="${api.service != null}" th:text="${api.service}">서비스</span>
+          </div>
+
+          <!-- Test Link -->
+          <a th:href="@{/apis/detail(id=${api.apiId})}" class="api-link">
+            테스트하기 <i class="fas fa-arrow-right"></i>
+          </a>
+        </div>
+
+        <!-- Fallback: Show static cards if no APIs from controller -->
+        <div th:if="${apis == null or #lists.isEmpty(apis)}" class="api-card api-card-popular">
+          <div class="api-badge">인기</div>
+          <div class="api-icon">
+            <i class="fas fa-wallet"></i>
+          </div>
+          <h3 class="api-name">계좌 조회 API</h3>
+          <p class="api-description">실시간 잔액 조회와 거래내역을 안전하게 확인</p>
+          <div class="api-features">
+            <span class="feature-tag">실시간</span>
+            <span class="feature-tag">OAuth 2.0</span>
+          </div>
+          <a href="#" class="api-link">
+            테스트하기 <i class="fas fa-arrow-right"></i>
+          </a>
+        </div>
+        <div th:if="${apis == null or #lists.isEmpty(apis)}" class="api-card">
+          <div class="api-icon">
+            <i class="fas fa-exchange-alt"></i>
+          </div>
+          <h3 class="api-name">송금 API</h3>
+          <p class="api-description">간편하고 안전한 송금 서비스 구현</p>
+          <div class="api-features">
+            <span class="feature-tag">간편송금</span>
+            <span class="feature-tag">실명확인</span>
+          </div>
+          <a href="#" class="api-link">
+            테스트하기 <i class="fas fa-arrow-right"></i>
+          </a>
+        </div>
+        <div th:if="${apis == null or #lists.isEmpty(apis)}" class="api-card">
+          <div class="api-icon">
+            <i class="fas fa-credit-card"></i>
+          </div>
+          <h3 class="api-name">카드 결제 API</h3>
+          <p class="api-description">온/오프라인 결제 솔루션 통합</p>
+          <div class="api-features">
+            <span class="feature-tag">PG연동</span>
+            <span class="feature-tag">간편결제</span>
+          </div>
+          <a href="#" class="api-link">
+            테스트하기 <i class="fas fa-arrow-right"></i>
+          </a>
+        </div>
+        <div th:if="${apis == null or #lists.isEmpty(apis)}" class="api-card api-card-new">
+          <div class="api-badge new">NEW</div>
+          <div class="api-icon">
+            <i class="fas fa-chart-line"></i>
+          </div>
+          <h3 class="api-name">AI 신용평가 API</h3>
+          <p class="api-description">머신러닝 기반 실시간 신용 분석</p>
+          <div class="api-features">
+            <span class="feature-tag">AI/ML</span>
+            <span class="feature-tag">실시간</span>
+          </div>
+          <a href="#" class="api-link">
+            테스트하기 <i class="fas fa-arrow-right"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 정보 섹션 -->
+  <section class="info-section">
+    <div class="container">
+      <div class="info-wrapper">
+        <div class="image-container">
+          <div class="image-placeholder">
+            <i class="fas fa-chart-line"></i>
+            <span>금융 혁신</span>
           </div>
         </div>
-      </div>
-    </div>
 
-    <div class="main_con">
-      <p class="con_tit m-only"><img th:src="@{/img/img_con_tit.png}" alt="Kbank API PORTAL"></p>
-      <p class="con_tit pc-only"><img th:src="@{/img/img_con_tit2.png}" alt="Kbank API PORTAL"></p>
-      <p class="con_img m-only"><img th:src="@{/img/img_mask_group.png}" alt="Kbank API PORTAL"></p>
-      <p class="con_img pc-only"><img th:src="@{/img/img_mask_group2.png}" alt="Kbank API PORTAL"></p>
-      <p class="con_txt m-only">
-        <span>Kbank API Portal</span>은 기업이 금융서비스를<br>
-        편리하게 개발할 수 있도록 차별화된<br>
-        API와 테스트환경을 제공합니다.<br>
-      </p>
-      <p class="con_txt pc-only">
-        <span>Kbank API Portal</span>은 기업이 금융서비스를 편리하게 개발할 수 있도록 차별화된 API와 테스트환경을 제공합니다.
-      </p>
-      <div class="main_btn">
-        <a th:href="@{/intro}" class="common_btn_type_5"><span>처음 만나는 케이뱅크 API</span></a>
-        <a th:href="@{/partnership}" class="common_btn_type_5 m_btn"><span>사업 제휴 문의</span></a>
-      </div>
-    </div>
-  </div>
-
-  <div class="tiding_box">
-    <div class="api_type">
-      <div class="api_tiding">
-        <div class="api_tit">
-          <h2>새로운 케이뱅크 API 소식을<br> 만나보세요</h2>
-          <p class="total_view">
-            <a href="/portalnotice">전체보기</a>
+        <div class="info-content">
+          <p class="highlight-text">
+            광주은행 <span class="text-accent">API Portal</span>은 기업이 금융서비스를 편리하게 개발할 수 있도록<br>
+            차별화된 API와 테스트환경을 제공합니다.
           </p>
-        </div>
-        <div class="api_tiding_list">
-          <ul>
-            <li th:each="notice : ${portalNotices}">
-              <a th:href="@{/portalnotice/detail(id=${notice.id})}">
-                <p th:text="${notice.noticeSubject}"></p>
-              </a>
-              <span th:text="${#temporals.format(notice.createdDate, 'yyyy.MM.dd')}"></span>
-            </li>
-          </ul>
+
+          <div class="action-buttons">
+            <a href="#" class="action-btn">
+              <span class="btn-number">1</span>
+              <span class="btn-text">처음 만나는 광주뱅크 API</span>
+              <i class="fas fa-arrow-right"></i>
+            </a>
+            <a href="#" class="action-btn">
+              <span class="btn-number">2</span>
+              <span class="btn-text">사업 제휴 문의</span>
+              <i class="fas fa-arrow-right"></i>
+            </a>
+          </div>
         </div>
       </div>
-      <div class="api_info">
-        <ul>
-          <li class="img1">
-            <a th:href="@{/faq_list}">
-              <p>FAQ</p>
-              <span>자주 묻는 질문과 답변을<br> 확인해보세요</span>
-              <img th:src="@{/img/icon/icon_petals01.png}" alt="faq 이미지">
-            </a>
-          </li>
-          <li class="img2">
-            <a th:href="@{/inquiry}">
-              <p>Q&amp;A</p>
-              <span>문의사항에<br> 친절하게 답변 드리겠습니다</span>
-              <img th:src="@{/img/icon/icon_petals02.png}" alt="Q&A 이미지">
-            </a>
-          </li>
-          <li class="img3">
-            <a th:href="@{/partnership}">
-              <p>사업제휴</p>
-              <span>온라인 비즈니스 혁신을 위한<br> 사업 제안을 환영합니다</span>
-              <img th:src="@{/img/icon/icon_petals03.png}" alt="사업제휴 이미지">
-            </a>
-          </li>
-        </ul>
+    </div>
+  </section>
+
+  <!-- 지원 센터 섹션 -->
+  <section class="support-center">
+    <div class="container">
+      <div class="section-header">
+        <h2 class="section-title">
+          도움이 <span class="title-highlight">필요하신가요?</span>
+        </h2>
+        <p class="section-subtitle">다양한 방법으로 필요한 정보를 찾아보세요</p>
+      </div>
+      <div class="support-grid">
+        <a th:href="@{/portalnotice}" class="support-card">
+          <div class="card-icon">
+            <i class="fas fa-bullhorn"></i>
+          </div>
+          <h3>공지사항</h3>
+          <p>최신 업데이트와 중요한 소식을 확인하세요</p>
+          <div class="card-arrow">
+            <i class="fas fa-arrow-right"></i>
+          </div>
+        </a>
+        <a th:href="@{/faq_list}" class="support-card">
+          <div class="card-icon">
+            <i class="fas fa-question-circle"></i>
+          </div>
+          <h3>자주 묻는 질문</h3>
+          <p>자주 묻는 질문과 답변을 빠르게 찾아보세요</p>
+          <div class="card-arrow">
+            <i class="fas fa-arrow-right"></i>
+          </div>
+        </a>
+        <a th:href="@{/inquiry}" class="support-card">
+          <div class="card-icon">
+            <i class="fas fa-comments"></i>
+          </div>
+          <h3>문의하기</h3>
+          <p>추가 도움이 필요하시면 직접 문의해주세요</p>
+          <div class="card-arrow">
+            <i class="fas fa-arrow-right"></i>
+          </div>
+        </a>
       </div>
     </div>
-  </div>
+  </section>
 
-  <div class="api_count">
-    <div class="api_total_box">
-      <p class="txt m-only">우리곁의 수많은 서비스들이<br> <em>케이뱅크API</em>와<br> 함께하고 있습니다</p>
-      <p class="txt pc-only">우리곁의 수많은 서비스들이<br> <em>케이뱅크API와 함께</em>하고 있습니다</p>
-      <div class="api_total">
-        <ul>
-          <li>
-            <img th:src="@{/img/icon/icon_api01.png}" alt="서비스 이용 수">
-            <div class="api_num">
-              <p th:text="${serviceCount}"></p>
-              <span>서비스 이용</span>
-            </div>
-          </li>
-          <li>
-            <img th:src="@{/img/icon/icon_api02.png}" alt="API 이용건수">
-            <div class="api_num">
-              <p th:text="${selectedApiCount}"></p>
-              <span>API 이용</span>
-            </div>
-          </li>
-          <li>
-            <img th:src="@{/img/icon/icon_api03.png}" alt="API 활용기업">
-            <div class="api_num">
-              <p th:text="${approvedOrgCount}"></p>
-              <span>API 활용 기업</span>
-            </div>
-          </li>
-        </ul>
+  <!-- API 활용 현황 섹션 -->
+  <section class="api-stats-section">
+    <div class="container">
+      <div class="section-header">
+        <h2 class="section-title">
+          우리곁의 수많은 서비스들이<br>
+          <span class="title-highlight">광주은행 API</span>와 함께하고 있습니다
+        </h2>
+      </div>
+      <div class="stats-cards">
+        <div class="stat-card">
+          <div class="stat-icon">
+            <i class="fas fa-store"></i>
+          </div>
+          <div class="stat-content">
+            <div class="stat-number" th:attr="data-target=${serviceCount != null ? serviceCount : 0}" th:text="${serviceCount != null ? serviceCount : 0}">0</div>
+            <div class="stat-label">서비스 이용 수</div>
+            <div class="stat-description">다양한 분야의 서비스가 활용중</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon">
+            <i class="fas fa-exchange-alt"></i>
+          </div>
+          <div class="stat-content">
+            <div class="stat-number" th:attr="data-target=${totalApiCount != null ? totalApiCount : 0}" th:text="${totalApiCount != null ? totalApiCount : 0}">0</div>
+            <div class="stat-label">API 이용 건수</div>
+            <div class="stat-description">일일 평균 API 호출 수</div>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon">
+            <i class="fas fa-building"></i>
+          </div>
+          <div class="stat-content">
+            <div class="stat-number" th:attr="data-target=${approvedOrgCount != null ? approvedOrgCount : 0}" th:text="${approvedOrgCount != null ? approvedOrgCount : 0}">0</div>
+            <div class="stat-label">API 활용 기업</div>
+            <div class="stat-description">혁신적인 파트너사와 함께</div>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-
-  <div id="main_bg"></div>
-</section>
+  </section>
+</th:block>
 </body>
 <th:block layout:fragment="contentScript">
-  <script th:inline="javascript">
-    $(document).ready(function() {
-      // 기존 success 메시지 처리
-      var successMsg = [[${success}]];
-      console.log("Success message:", successMsg);
-      if (successMsg) {
-        console.log("Showing alert");
-        customPopups.showAlert(successMsg);
-      }
-
-      // 장기미사용 계정 체크
-      const dormantAccount = [[${session.dormantAccount}]];
-      if (dormantAccount) {
-        const dormantMsg = /*[[${session.success}]]*/ '';
-        const redirectUrl = /*[[${session.redirectUrl}]]*/ '';
-
-        console.log('dormantMsg:', dormantMsg);
-        console.log('redirectUrl:', redirectUrl);
-
-        customPopups.showAlert(dormantMsg);
-        $('#customAlertOkButton').off('click.custom').on('click.custom', function () {
-          customPopups.hideAlert('#customAlert');
-          window.location.href = redirectUrl;
-        });
-        return;  // 다른 체크 중단
-      }
-
-      // 비밀번호 만료 체크 추가
-      const passwordExpired = [[${session.passwordExpired}]];
-      if (passwordExpired) {
-        const pwdExpiredMsg = /*[[${session.success}]]*/ '';
-        const formattedMsg = pwdExpiredMsg.replace(/\n/g, '<br>');
-        const redirectUrl = /*[[${session.redirectUrl}]]*/ '';
-
-        console.log('pwdExpiredMsg:', pwdExpiredMsg);
-        console.log('redirectUrl:', redirectUrl);
-
-        $('#customAlertMessage').html(formattedMsg);
-        $('#customAlert').css('display','flex');
-
-        $('#customAlertOkButton').off('click.custom').on('click.custom', function () {
-          customPopups.hideAlert('#customAlert');
-          window.location.href = redirectUrl;
-        });
-      }
-    });
-  </script>
   <script>
-    function setActive(element) {
-      // Remove 'active' class from all links
-      document.querySelectorAll('.keyword_list a').forEach(el => {
-        el.classList.remove('active');
-      });
-      // Add 'active' class to clicked link
-      element.classList.add('active');
-    }
+    // 숫자 카운트업 애니메이션
+    document.addEventListener('DOMContentLoaded', function() {
+      const observerOptions = {
+        threshold: 0.5,
+        rootMargin: '0px 0px -100px 0px'
+      };
 
-    document.addEventListener('DOMContentLoaded', (event) => {
-      const ITEMS_PER_PAGE = 4;
-      let isExpanded = false;
+      const animateNumbers = (entries, observer) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const numbers = entry.target.querySelectorAll('.stat-number');
 
-      // 더보기 버튼 초기화
-      function initMoreButton() {
-        const mobileMoreBtn = document.querySelector('.more_type.m-only .showmore');
-        const pcMoreBtn = document.querySelector('.more_type.pc-only .showmore');
-        const apiInfoBoxes = document.querySelectorAll('.api_info_box');
+            numbers.forEach(number => {
+              const target = parseInt(number.getAttribute('data-target'));
+              const duration = 2000; // 2초
+              const increment = target / (duration / 16);
+              let current = 0;
 
-        // 5개 미만이면 더보기 버튼 숨기기
-        const mobileMoreContainer = document.querySelector('.more_type.m-only');
-        const pcMoreContainer = document.querySelector('.more_type.pc-only');
+              const updateNumber = () => {
+                current += increment;
+                if (current < target) {
+                  number.textContent = Math.floor(current).toLocaleString('ko-KR');
+                  requestAnimationFrame(updateNumber);
+                } else {
+                  number.textContent = target.toLocaleString('ko-KR');
+                }
+              };
 
-        console.log('더보기 버튼 초기화:', {
-          항목개수: apiInfoBoxes.length,
-          보여질상태: apiInfoBoxes.length >= 5 ? 'block' : 'none'
-        });
+              updateNumber();
+            });
 
-        // 더보기 버튼 표시 여부 설정
-        if (apiInfoBoxes.length < 5) {
-          mobileMoreContainer.style.setProperty('display', 'none', 'important');
-          pcMoreContainer.style.setProperty('display', 'none', 'important');
-        } else {
-          mobileMoreContainer.style.setProperty('display', 'block', 'important');
-          pcMoreContainer.style.setProperty('display', 'block', 'important');
-        }
-
-        // 초기 상태 설정
-        updateApiListVisibility();
-
-        // 더보기 버튼 이벤트 리스너 설정
-        [mobileMoreBtn, pcMoreBtn].forEach(btn => {
-          if (btn) {
-            btn.removeEventListener('click', handleMoreClick);
-            btn.addEventListener('click', handleMoreClick);
+            observer.unobserve(entry.target);
           }
         });
+      };
+
+      const observer = new IntersectionObserver(animateNumbers, observerOptions);
+      const statsSection = document.querySelector('.api-stats-section');
+
+      if (statsSection) {
+        observer.observe(statsSection);
       }
 
-      function handleMoreClick(e) {
-        e.preventDefault();
-        console.log('더보기 버튼 클릭');
-        isExpanded = !isExpanded;  // 상태 토글
+      // API 검색 기능
+      const searchInput = document.getElementById('apiSearchInput');
+      const searchForm = document.querySelector('.search-form');
+      const hashtags = document.querySelectorAll('.hashtag');
 
-        // 버튼 이미지/텍스트 변경
-        const mobileMoreBtn = document.querySelector('.more_type.m-only .showmore img');
-        const pcMoreBtn = document.querySelector('.more_type.pc-only .showmore img');
-        if (mobileMoreBtn) {
-          mobileMoreBtn.alt = isExpanded ? "접기 버튼" : "더보기 버튼";
-        }
-        if (pcMoreBtn) {
-          pcMoreBtn.alt = isExpanded ? "접기 버튼" : "더보기 버튼";
-        }
-
-        updateApiListVisibility();
-      }
-
-      // API 리스트 표시 상태 업데이트
-      function updateApiListVisibility() {
-        const apiInfoBoxes = document.querySelectorAll('.api_info_box');
-        const endIndex = isExpanded ? apiInfoBoxes.length : ITEMS_PER_PAGE;
-
-        console.log('업데이트 - API 목록:', {
-          총개수: apiInfoBoxes.length,
-          표시상태: isExpanded ? '전체표시' : '일부표시',
-          표시할개수: endIndex
-        });
-
-        apiInfoBoxes.forEach((box, index) => {
-          box.style.display = index < endIndex ? 'block' : 'none';
-        });
-      }
-
-      // HTMX 로드 완료 이벤트 리스너
-      document.body.addEventListener('htmx:afterSwap', function(evt) {
-        if (evt.detail.target.id === 'api_spec_list') {
-          console.log('HTMX 컨텐츠 로드됨 - 페이지 초기화');
-          isExpanded = false;
-          initMoreButton();
-        }
-      });
-
-      document.body.addEventListener('htmx:afterSettle', function(evt) {
-        const apiListItems = document.querySelectorAll('.api_list');
-        apiListItems.forEach(function(item) {
-          item.removeEventListener('click',null);
-          item.addEventListener('click', function() {
-            const href = this.getAttribute('data-href');
-            if (href) {
-              window.location.href = href;
-            }
-          });
-        });
-        const apiItems = document.querySelectorAll('.api_info_box');
-        apiItems.forEach(function(item) {
-          item.removeEventListener('click',null);
-          item.addEventListener('click', function() {
-            const href = this.getAttribute('data-href');
-            if (href) {
-              window.location.href = href;
-            }
-          });
-        });
-      });
-
-      // 초기 실행
-      console.log('초기 실행');
-      initMoreButton();
-
-      // All 카테고리를 기본으로 active 설정
-      document.querySelector('.keyword_list li:first-child a').classList.add('active');
-
-      const apiListItems = document.querySelectorAll('.api_list');
-      apiListItems.forEach(function(item) {
-        item.addEventListener('click', function() {
-          const href = this.getAttribute('data-href');
-          if (href) {
-            window.location.href = href;
-          }
-        });
-      });
-
-      const apiItems = document.querySelectorAll('.api_info_box');
-      apiItems.forEach(function(item) {
-        item.removeEventListener('click',null);
-        item.addEventListener('click', function() {
-          const href = this.getAttribute('data-href');
-          if (href) {
-            window.location.href = href;
-          }
-        });
-      });
-
-      const hashtagItems = document.querySelectorAll('.hashtag ul li a');
-      const searchBox = document.getElementById('search-box');
-
-      hashtagItems.forEach(function(item) {
-        item.addEventListener('click', function(e) {
+      // 해시태그 클릭 이벤트
+      hashtags.forEach(tag => {
+        tag.addEventListener('click', function(e) {
           e.preventDefault();
-          // Remove the # symbol if present and set the text in search box
-          const searchText = this.textContent.replace('#', '').trim();
-          searchBox.value = searchText;
-
-          document.getElementById("searchForm").submit();
-        });
-      });
-
-      const infoItems = document.querySelectorAll('.api_info ul li');
-      infoItems.forEach(function (item) {
-        item.style.cursor = 'pointer';
-        item.addEventListener('click', function() {
-          const link = this.querySelector('a');
-          if (link) {
-            location.href = link.getAttribute('href');
+          const searchTerm = this.getAttribute('data-search');
+          searchInput.value = searchTerm;
+          // 폼 제출
+          if (searchForm) {
+            searchForm.submit();
           }
         });
       });
-
     });
   </script>
 </th:block>
diff --git a/src/main/resources/templates/views/fragment/kjbank/api_lnb.html b/src/main/resources/templates/views/fragment/kjbank/api_lnb.html
new file mode 100644
index 0000000..ae54345
--- /dev/null
+++ b/src/main/resources/templates/views/fragment/kjbank/api_lnb.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+
+<aside layout:fragment="apiAside" class="lnb">
+  <nav th:with="services=${@apiServiceService.searchApiGroupsForLnb()}">
+    <ul class="lnb_list_type">
+      <li>
+        <a href="#none">공통안내</a>
+        <ul class="lnb_list_nav">
+           <li> <a th:href="@{/apis/common}">API 개발 공통</a></li>
+           <li> <a th:href="@{/apis/KAPAP004U3}">가상계좌 응답 코드</a></li>
+           <li> <a th:href="@{/apis/KAPAP004U4}">가상계좌 배치 설계</a></li>
+           <li> <a th:href="@{/apis/KAPAP004U5}">가상계좌 VAN사 코드</a></li>
+           <li> <a th:href="@{/apis/KAPAP004U6}">펌뱅킹 응답코드</a></li>
+           <li> <a th:href="@{/apis/KAPAP004U7}">펌뱅킹 배치 설계</a></li>
+           <li> <a th:href="@{/apis/KAPAP004U8}">대출금리 응답코드</a></li>
+           <li> <a th:href="@{/apis/KAPAP004U9}">케이뱅크 페이 응답코드</a></li>
+           <li> <a th:href="@{/apis/KAPAP004U10}">케이뱅크 페이 복합과세 예제</a></li>
+           <li> <a th:href="@{/apis/token-spec}">케이뱅크 OAuth 2.0 토큰 발급</a></li>
+        </ul>
+      </li>
+      <li th:each="apiService : ${services}">
+        <a href="#none" th:text="${apiService.groupName}">API Group Name</a>
+        <ul class="lnb_list_nav">
+          <li th:each="api : ${apiService.apiGroupApiList}">
+            <a th:href="@{/apis/detail(id=${api.apiId})}" th:text="${api.apiDesc}">API Description</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</aside>
diff --git a/src/main/resources/templates/views/fragment/kjbank/footer.html b/src/main/resources/templates/views/fragment/kjbank/footer.html
new file mode 100644
index 0000000..3cc38ca
--- /dev/null
+++ b/src/main/resources/templates/views/fragment/kjbank/footer.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org"
+>
+
+<body>
+<footer th:fragment="footerFragment"  class="global-footer">
+  <div class="container">
+    <div class="footer-top">
+      <div class="footer-brand">
+        <img src="/img/logo/logo.png" alt="광주은행" class="footer-logo">
+        <p class="footer-desc">
+          Wa bank와 함께 만드는 새로운 금융의 미래<br>
+          개발자 여러분과 함께 성장합니다.
+        </p>
+
+      </div>
+      <div class="footer-links">
+        <div class="footer-column">
+          <h4>제품</h4>
+          <ul>
+            <li><a href="#">API 카탈로그</a></li>
+            <li><a href="#">SDK 다운로드</a></li>
+            <li><a href="#">Playground</a></li>
+            <li><a href="#">요금제</a></li>
+          </ul>
+        </div>
+        <div class="footer-column">
+          <h4>개발자</h4>
+          <ul>
+            <li><a href="#">시작 가이드</a></li>
+            <li><a href="#">API 문서</a></li>
+            <li><a href="#">튜토리얼</a></li>
+            <li><a href="#">샘플 코드</a></li>
+          </ul>
+        </div>
+        <div class="footer-column">
+          <h4>지원</h4>
+          <ul>
+            <li><a href="#">도움말 센터</a></li>
+            <li><a href="#">커뮤니티</a></li>
+            <li><a href="#">기술 지원</a></li>
+            <li><a href="#">시스템 상태</a></li>
+          </ul>
+        </div>
+        <div class="footer-column">
+          <h4>회사</h4>
+          <ul>
+            <li><a href="#">광주은행 소개</a></li>
+            <li><a href="#">뉴스룸</a></li>
+            <li><a href="#">채용</a></li>
+            <li><a href="#">제휴 문의</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <div class="footer-legal">
+        <p>© 2025 광주은행. All rights reserved.</p>
+        <div class="legal-links">
+          <a href="#">이용약관</a>
+          <a href="#">개인정보처리방침</a>
+          <a href="#">쿠키 정책</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+</body>
+</html>
diff --git a/src/main/resources/templates/views/fragment/kjbank/head.html b/src/main/resources/templates/views/fragment/kjbank/head.html
new file mode 100644
index 0000000..8097500
--- /dev/null
+++ b/src/main/resources/templates/views/fragment/kjbank/head.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+
+<head th:fragment="headFragment">
+    <title th:text="#{title.html}">개발자 포털</title>
+
+    <meta content="https://www.eactive.co.kr/" property="og:url"/>
+    <meta charset="UTF-8"/>
+    <meta content="max-age=0, public" http-equiv="Cache-Control"/>
+    <meta content="index, follow" name="robots"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <meta http-equiv="Cache-Control" content="no-cache">
+    <meta http-equiv="Pragma" content="no-cache">
+
+    <meta http-equiv="Expires" content="0">
+    <link rel="stylesheet" type="text/css" th:href="@{/css/all.min.css}">
+    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
+    <link rel="stylesheet" type="text/css" th:href="@{/css/slick.css}">
+    <link rel="stylesheet" type="text/css" th:href="@{/css/daterangepicker.css}">
+
+    <link rel="stylesheet" th:href="@{/plugins/codemirror/codemirror.css}" type="text/css"/>
+    <link rel="stylesheet" th:href="@{/plugins/codemirror/theme/monokai.css}" type="text/css"/>
+    <link rel="stylesheet" th:href="@{/plugins/summernote/summernote-lite.css}" type="text/css" />
+    <link rel="stylesheet" th:href="@{/plugins/jquery-ui/jquery-ui.min.css}" />
+    <link rel="icon" type="image/ico" th:href="@{/favicon_16px.png}">
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+    <script th:src="@{/plugins/jquery/jquery-3.7.1.min.js}"></script>
+    <script th:src="@{/js/lodash.js}"></script>
+    <script th:src="@{/js/common.js}"></script>
+    <script th:src="@{/js/moment.min.js}"></script>
+    <script th:src="@{/js/daterangepicker.js}"></script>
+    <script th:src="@{/plugins/codemirror/codemirror.js}"></script>
+    <script th:src="@{/plugins/codemirror/mode/clike.js}"></script>
+    <script th:src="@{/plugins/codemirror/mode/javascript.js}"></script>
+    <script th:src="@{/plugins/codemirror/addon/display/fullscreen.js}"></script>
+    <script th:src="@{/plugins/codemirror/addon/display/placeholder.js}"></script>
+    <script th:src="@{/plugins/summernote/summernote-lite.min.js}"></script>
+    <script th:src="@{/plugins/summernote/summernote-cleaner.js}"></script>
+    <script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script>
+    <script th:src="@{/js/htmx.min.js}"></script>
+</head>
+
+</html>
diff --git a/src/main/resources/templates/views/fragment/kjbank/header_container.html b/src/main/resources/templates/views/fragment/kjbank/header_container.html
new file mode 100644
index 0000000..5b584b8
--- /dev/null
+++ b/src/main/resources/templates/views/fragment/kjbank/header_container.html
@@ -0,0 +1,135 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org"
+      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+<body>
+<th:block th:fragment="headerFragment">
+  <!-- Global Header Container -->
+  <header class="global-header">
+    <div class="container">
+      <div class="header-content">
+
+        <!-- Desktop Header Layout -->
+        <div class="desktop-header">
+          <div class="header-left">
+            <div class="logo-wrapper">
+              <a th:href="@{/}" class="logo-link">
+                <img src="/img/logo/logo.png" alt="광주은행" class="logo">
+              </a>
+              <a th:href="@{/}" class="logo-text">개발자 포털</a>
+            </div>
+          </div>
+
+          <nav class="header-center">
+            <ul class="nav-menu">
+              <li><a href="#docs" class="nav-link">서비스 소개</a></li>
+              <li><a href="#api-market" class="nav-link">오픈 API</a></li>
+              <li><a href="#playground" class="nav-link">고객지원</a></li>
+              <li><a href="#community" class="nav-link">MY</a></li>
+            </ul>
+          </nav>
+
+          <div class="header-right">
+            <button class="search-btn"><i class="fas fa-search"></i></button>
+            <a th:href="@{/login}" class="login-btn">로그인</a>
+            <a href="#signup" class="signup-btn">
+              <span>회원 가입</span>
+              <i class="fas fa-arrow-right"></i>
+            </a>
+          </div>
+        </div>
+
+        <!-- Mobile Header Layout -->
+        <div class="mobile-header">
+          <div class="mobile-left">
+            <a th:href="@{/}" class="mobile-logo-link">
+              <img src="/img/logo/logo.png" alt="광주은행" class="mobile-logo">
+            </a>
+          </div>
+
+          <div class="mobile-center">
+            <h1 class="mobile-title">개발자 포털</h1>
+          </div>
+
+          <div class="mobile-right">
+            <button class="mobile-menu-btn" id="mobileMenuToggle">
+              <span class="hamburger-line"></span>
+              <span class="hamburger-line"></span>
+              <span class="hamburger-line"></span>
+            </button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </header>
+
+  <!-- Mobile Drawer/Modal -->
+  <div class="mobile-drawer" id="mobileDrawer">
+    <div class="drawer-overlay" id="drawerOverlay"></div>
+    <div class="drawer-content">
+      <div class="drawer-header">
+        <div class="drawer-logo">
+          <a th:href="@{/}" class="drawer-logo-link">
+            <img src="/img/logo/logo.png" alt="광주은행" class="logo">
+          </a>
+          <a th:href="@{/}" class="logo-text">개발자 포털</a>
+        </div>
+        <button class="drawer-close" id="drawerClose">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+
+      <nav class="drawer-nav">
+        <ul class="drawer-menu">
+          <li><a href="#docs" class="drawer-link">서비스 소개</a></li>
+          <li><a href="#api-market" class="drawer-link">오픈 API</a></li>
+          <li><a href="#playground" class="drawer-link">고객지원</a></li>
+          <li><a href="#community" class="drawer-link">MY</a></li>
+        </ul>
+      </nav>
+
+      <div class="drawer-actions">
+        <a th:href="@{/login}" class="drawer-login-btn">로그인</a>
+        <a href="#signup" class="drawer-signup-btn">
+          <span>회원 가입</span>
+          <i class="fas fa-arrow-right"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+</th:block>
+
+<!-- Mobile Menu JavaScript -->
+<th:block th:fragment="headerScript">
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const menuToggle = document.getElementById('mobileMenuToggle');
+      const drawer = document.getElementById('mobileDrawer');
+      const drawerClose = document.getElementById('drawerClose');
+      const drawerOverlay = document.getElementById('drawerOverlay');
+
+      function openDrawer() {
+        drawer.classList.add('active');
+        document.body.style.overflow = 'hidden';
+      }
+
+      function closeDrawer() {
+        drawer.classList.remove('active');
+        document.body.style.overflow = '';
+      }
+
+      menuToggle?.addEventListener('click', openDrawer);
+      drawerClose?.addEventListener('click', closeDrawer);
+      drawerOverlay?.addEventListener('click', closeDrawer);
+
+      // Close drawer when clicking on nav links
+      document.querySelectorAll('.drawer-link').forEach(link => {
+        link.addEventListener('click', closeDrawer);
+      });
+    });
+  </script>
+</th:block>
+
+</body>
+
+</html>
diff --git a/src/main/resources/templates/views/fragment/kjbank/header_nav.html b/src/main/resources/templates/views/fragment/kjbank/header_nav.html
new file mode 100644
index 0000000..4133285
--- /dev/null
+++ b/src/main/resources/templates/views/fragment/kjbank/header_nav.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org"
+      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+
+<head>
+  <meta charset="utf-8">
+</head>
+
+<body>
+<div th:fragment="headerFragment" class="navigation" id="navigation">
+  <ul class="navigation-area">
+    <li th:each="crumb : ${breadcrumb}">
+      <a th:href="${crumb.path}" class="navigation-button" th:text="${crumb.name}">Unknown Page</a>
+    </li>
+  </ul>
+</div>
+</body>
+
+</html>
diff --git a/src/main/resources/templates/views/fragment/kjbank/menu.html b/src/main/resources/templates/views/fragment/kjbank/menu.html
new file mode 100644
index 0000000..93a7750
--- /dev/null
+++ b/src/main/resources/templates/views/fragment/kjbank/menu.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org"
+      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+
+<head>
+    <meta charset="utf-8">
+</head>
+
+<body>
+<aside class="sidebar" th:fragment="menuFragment">
+
+</aside>
+
+<!-- menu script -->
+<th:block th:fragment="menuScript">
+    <script th:inline="javascript">
+
+        $(function () {
+        });
+    </script>
+</th:block>
+</body>
+
+</html>
diff --git a/src/main/resources/templates/views/fragment/kjbank/terms_agreements.html b/src/main/resources/templates/views/fragment/kjbank/terms_agreements.html
new file mode 100644
index 0000000..db441df
--- /dev/null
+++ b/src/main/resources/templates/views/fragment/kjbank/terms_agreements.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout/kjbank_base_layout}">
+<body>
+<section layout:fragment="contentFragment" class="content">
+    <div class="content_wrap">
+        <div class="sub_title2">
+            <h2 class="title" th:classappend="${isTermsOfUse ? 'add3' : 'add4'}"
+                th:text="${agreementTitle}">이용약관</h2>
+        </div>
+        <div class="inner cs2">
+            <div class="tab-wrap">
+                <div class="tabs">
+                    <ul class="tab_nav tab_bt">
+                        <li th:class="${isTermsOfUse ? 'active' : ''}">
+                            <a th:href="@{/agreements/terms(tab='terms')}">이용약관</a>
+                        </li>
+                        <li th:class="${isPrivacyPolicy ? 'active' : ''}">
+                            <a th:href="@{/agreements/terms(tab='privacy')}">개인정보처리방침</a>
+                        </li>
+                    </ul>
+                    <div class="tab active" th:id="${isTermsOfUse ? 'tab1' : 'tab2'}">
+                        <div class="form_type">
+                            <div class="info1 ts_top">
+                                <div class="info_line ts_left">
+                                    <div class="info_box1 info_add3 info_top">
+                                        <span class="input">
+                                            <form id="agreementForm" th:action="@{/agreements/terms}" method="get">
+                                                <input type="hidden" name="tab"
+                                                       th:value="${currentTab}">
+                                                    <div class="custom_select" id="agreement_select">
+                                                        <div class="select_selected">
+                                                            시행일자 : <span th:text="${#temporals.format(selectedAgreement.publishedOn, 'yyyy.MM.dd')}"></span>
+                                                        </div>
+                                                        <ul class="common_selecttype select_items select_hide">
+                                                            <li th:each="agreement : ${agreementsList}"
+                                                                th:data-id="${#temporals.format(agreement.publishedOn, 'yyyy-MM-dd')}"
+                                                                th:text="'시행일자 : ' + ${#temporals.format(agreement.publishedOn, 'yyyy.MM.dd')}"
+                                                                th:class="${#temporals.format(agreement.publishedOn, 'yyyy-MM-dd') == selectedDate ? 'selected' : ''}">
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                <input type="hidden" name="publishedOn" id="publishedOnInput">
+                                            </form>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="terms_contents m_termst" th:utext="${selectedAgreement.contents}"
+                             style="white-space: pre-wrap; word-wrap: break-word;">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<script layout:fragment="contentScript">
+    document.addEventListener('DOMContentLoaded', function () {
+        const selects = document.getElementById('agreement_select');
+        const form = document.getElementById('agreementForm');
+        const publishedOnInput = document.getElementById('publishedOnInput');
+
+        createCustomSelect(selects, {
+            onSelect: (item) => {
+                publishedOnInput.value = item;
+                form.submit();
+            }
+        });
+    });
+</script>
+</body>
+</html>
diff --git a/src/main/resources/templates/views/layout/kjbank_base_layout.html b/src/main/resources/templates/views/layout/kjbank_base_layout.html
new file mode 100644
index 0000000..d253402
--- /dev/null
+++ b/src/main/resources/templates/views/layout/kjbank_base_layout.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org"
+    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+
+  <head th:replace="fragment/kbank/head :: headFragment">
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+    <th:block th:replace="fragment/kjbank/header_container :: headerFragment"></th:block>
+    <th:block th:replace="fragment/kjbank/header_container :: headerScript"></th:block>
+    <div class="loading-overlay" style="display: none;">
+      <div class="loading-spinner"></div>
+    </div>
+    <th:block layout:fragment="contentFragment">
+    </th:block>
+
+    <th:block layout:fragment="contentScript">
+    </th:block>
+
+    <footer th:replace="fragment/kjbank/footer :: footerFragment"></footer>
+    <section th:replace="fragment/popup/customPopups :: customPopups"></section>
+    <section layout:fragment="pagePopups"></section>
+    <script th:src="@{/js/popup/custom-popups.js}"></script>
+  </body>
+</html>
diff --git a/src/main/resources/templates/views/layout/kjbank_index_layout.html b/src/main/resources/templates/views/layout/kjbank_index_layout.html
new file mode 100644
index 0000000..ec7b8bb
--- /dev/null
+++ b/src/main/resources/templates/views/layout/kjbank_index_layout.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org"
+    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+
+
+  <head th:replace="fragment/kjbank/head :: headFragment">
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+    <!-- header -->
+    <th:block th:replace="fragment/kjbank/header_container :: headerFragment"></th:block>
+    <th:block th:replace="fragment/kjbank/header_container :: headerScript"></th:block>
+
+    <th:block layout:fragment="contentFragment">
+    </th:block>
+
+    <th:block layout:fragment="contentScript">
+    </th:block>
+
+    <footer th:replace="fragment/kjbank/footer :: footerFragment"></footer>
+
+    <section th:replace="fragment/popup/customPopups :: customPopups"></section>
+    <script th:src="@{/js/popup/custom-popups.js}"></script>
+  </body>
+</html>