메인 페이지 화면설계서 적용

2025-09-24 17:34:51 +09:00
parent 8d07897e42
commit 91eec29e98
41 changed files with 11966 additions and 505 deletions
@@ -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;
+}
@@ -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;
@@ -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);
+  }
+}
@@ -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;
+}
@@ -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;
+}
@@ -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;
+}
@@ -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);
+    }
+  }
+}
@@ -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;
+  }
+}
@@ -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;
+}
@@ -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;
+  }
+}
@@ -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;
+    }
+  }
+}
@@ -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;
+  }
+}
@@ -0,0 +1,8 @@
+// -----------------------------------------------------------------------------
+// Partners section styles
+// -----------------------------------------------------------------------------
+
+.partners {
+  padding: $spacing-5xl 0;
+  background: $white;
+}
@@ -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;
+}
@@ -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%;
+  }
+}
@@ -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;
+  }
+}
@@ -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
+    }
+  }
+
+}
@@ -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';
@@ -0,0 +1,7 @@
+// -----------------------------------------------------------------------------
+// API Portal page specific styles
+// -----------------------------------------------------------------------------
+
+.api-portal-page {
+  // Any API portal-specific styles go here
+}
@@ -0,0 +1,7 @@
+// -----------------------------------------------------------------------------
+// Documentation page specific styles
+// -----------------------------------------------------------------------------
+
+.documentation-page {
+  // Any documentation-specific styles go here
+}
@@ -0,0 +1,7 @@
+// -----------------------------------------------------------------------------
+// Home page specific styles
+// -----------------------------------------------------------------------------
+
+.home-page {
+  // Any home-specific styles go here
+}
@@ -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);
+  }
+}
@@ -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
@@ -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