@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  --navy-dark: #070d1e;
  --navy-card: #0e172e;
  --navy-light: #162447;
  --blue-electric: #0066ff;
  --cyan-glow: #00d2ff;
  --text-main: #f0f4fc;
  --text-sub: #94a3b8;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  background-color: #060b1a;
  background-image: 
    linear-gradient(180deg, rgba(6, 11, 26, 0.72) 0%, rgba(6, 11, 26, 0.78) 40%, rgba(6, 11, 26, 0.86) 100%),
    url('../images/hero_stage.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #f8fafc;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  line-height: 1.6;
  min-height: 100vh;
  font-weight: 500;
}

/* Global Font Weight & Readability Boost */
p, span, div, li, a, button, input, select, textarea, label {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.text-slate-400 {
  color: #cbd5e1 !important;
  font-weight: 600 !important;
}

.text-slate-300 {
  color: #f1f5f9 !important;
  font-weight: 600 !important;
}

.text-slate-200 {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Glassmorphism & Neon Glow (Brighter Card Feel) */
.glass-nav {
  background: rgba(8, 16, 38, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 102, 255, 0.3);
}

.glass-card {
  background: rgba(14, 25, 54, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(147, 197, 253, 0.28);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  border-color: rgba(56, 189, 248, 0.6);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px -8px rgba(0, 102, 255, 0.4);
}

.text-gradient {
  background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-blue {
  background: linear-gradient(135deg, #0066ff 0%, #0040b3 100%);
}

.bg-gradient-electric {
  background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%);
}

.bg-gradient-amber {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.btn-glow {
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 102, 255, 0.4);
}

.btn-glow:hover {
  box-shadow: 0 0 25px rgba(0, 210, 255, 0.7);
  transform: scale(1.02);
}

.btn-glow-amber {
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

.btn-glow-amber:hover {
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.8);
  transform: scale(1.03);
}

/* Drag & Drop Zone Styling */
.drop-zone {
  border: 2px dashed rgba(0, 210, 255, 0.4);
  background: rgba(14, 23, 46, 0.5);
  transition: all 0.3s ease;
}

.drop-zone.drag-active {
  border-color: #00d2ff;
  background: rgba(0, 210, 255, 0.15);
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.3);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--navy-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--navy-light);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--blue-electric);
}

/* High-Definition Mobile Retina Image Clarity Engine */
img {
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

.glass-card img, #portfolio-container img, #services-container img {
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden;
  filter: contrast(1.03) brightness(1.02) saturate(1.04);
  transition: transform 0.35s ease, filter 0.35s ease;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .glass-card img, #portfolio-container img, #services-container img {
    image-rendering: -webkit-optimize-contrast;
    filter: contrast(1.04) brightness(1.02) saturate(1.05);
  }
}

/* Lightbox Modal */
.lightbox-modal {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Hero Background & Text Clarity Enhancements */
#hero-bg {
  background-size: cover !important;
  background-position: center center !important;
  position: relative;
}

#hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 11, 26, 0.52) 0%, rgba(6, 11, 26, 0.68) 55%, rgba(6, 11, 26, 0.90) 100%);
  pointer-events: none;
  z-index: 1;
}

#hero-bg > div {
  position: relative;
  z-index: 10;
}

#hero-title {
  color: #ffffff !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 0.9);
}

#hero-subtitle {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
}