/* ============================================

   DESIGN SYSTEM - GLOBAL VARIABLES

   ============================================ */



:root {

  /* Colors - Main */

  --red: #8b1a2e;

  --red-dark: #9B152C;

  --red-light: #FFE5E9;

  --red-soft: rgba(196, 30, 58, 0.08);

  --red-soft-hover: rgba(196, 30, 58, 0.15);

  

  /* Colors - Grayscale */

  --gray-900: #1A1A1A;

  --gray-800: #2D2D2D;

  --gray-700: #4A4A4A;

  --gray-600: #6B6B6B;

  --gray-500: #8E8E8E;

  --gray-400: #B0B0B0;

  --gray-300: #D4D4D4;

  --gray-200: #E8E8E8;

  --gray-100: #F5F5F5;

  --gray-050: #DBDFC6;	

  --white: #FFFFFF;

  

  /* Colors - Accent */

--green-light:#ABEBBA;	

  --blue: #1a6b8b;

  --blue-soft: rgba(26, 107, 139, 0.08);

  --violet: #667EEA;

  --violet-soft: rgba(102, 126, 234, 0.08);

  --gold: #FFB800;

  

  /* Typography */

  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  

  /* Spacing */

  --space-xs: 0.25rem;

  --space-sm: 0.5rem;

  --space-md: 1rem;

  --space-lg: 1.5rem;

  --space-xl: 2rem;

  --space-2xl: 3rem;

  --space-3xl: 4rem;

  

  /* Layout */

  --container-max: 1200px;

  --container-padding: 24px;

  

  /* Shadows */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);

  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  

  /* Border Radius */

  --radius-sm: 8px;

  --radius-md: 12px;

  --radius-lg: 16px;

  --radius-xl: 24px;

  --radius-2xl: 32px;

  --radius-full: 9999px;

  

  /* Transitions */

  --transition-fast: 0.15s ease;

  --transition-base: 0.3s ease;

  --transition-slow: 0.5s ease;

  

  /* Z-index layers */

  --z-negative: -1;

  --z-elevate: 1;

  --z-dropdown: 10;

  --z-sticky: 100;

  --z-header: 1000;

  --z-overlay: 1001;

  --z-modal: 1002;

  --z-tooltip: 1003;

}



/* ============================================

   RESET & BASE STYLES

   ============================================ */



*,

*::before,

*::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  font-size: 16px;

  scroll-behavior: smooth;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



body {

  font-family: var(--font-primary);

  color: var(--gray-800);

  background: var(--gray-050);

  line-height: 1.5;

  overflow-x: hidden;

  padding-top: 100px;

}



/* Selection */

::selection {

  background: var(--red);

  color: var(--white);

}



/* Scrollbar */

::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



::-webkit-scrollbar-track {

  background: var(--gray-200);

  border-radius: var(--radius-full);

}



::-webkit-scrollbar-thumb {

  background: var(--red);

  border-radius: var(--radius-full);

}



::-webkit-scrollbar-thumb:hover {

  background: var(--red-dark);

}



/* ============================================

   TYPOGRAPHY

   ============================================ */



h1, h2, h3, h4, h5, h6 {

  font-family: var(--font-heading);

  font-weight: 700;

  letter-spacing: -0.02em;

  line-height: 1.2;

  color: var(--gray-900);

}



h1 {

  font-size: clamp(2rem, 5vw, 3rem);

}



h2 {

  font-size: clamp(1.5rem, 4vw, 2rem);

}



h3 {

  font-size: clamp(1.25rem, 3vw, 1.5rem);

}



h4 {

  font-size: clamp(1rem, 2.5vw, 1.2rem);

}



p {

  color: var(--gray-600);

  line-height: 1.6;

}



a {

  color: var(--red);

  text-decoration: none;

  transition: var(--transition-base);

}



a:hover {

  color: var(--red-dark);

}



/* ============================================

   LAYOUT & CONTAINERS

   ============================================ */



.container {

  max-width: var(--container-max);

  margin: 0 auto;

  padding: 0 var(--container-padding);

  width: 100%;

}



.section {

  padding: var(--space-3xl) 0;

}



.section-sm {

  padding: var(--space-2xl) 0;

}



.section-lg {

  padding: var(--space-3xl) 0;

}



/* Section Headers */

.section-header {

  text-align: center;

  margin-bottom: var(--space-3xl);

}



.section-header .section-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: var(--red-soft);

  color: var(--red);

  padding: 6px 16px;

  border-radius: var(--radius-full);

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 1px;

  margin-bottom: var(--space-md);

}



.section-header h2 {

  margin-bottom: var(--space-md);

  position: relative;

  display: inline-block;

}



.section-header h2::after {

  content: '';

  position: absolute;

  bottom: -12px;

  left: 50%;

  transform: translateX(-50%);

  width: 60px;

  height: 3px;

  background: var(--red);

  border-radius: var(--radius-sm);

}



.section-header p {

  max-width: 600px;

  margin: var(--space-lg) auto 0;

  font-size: 1rem;

}



/* ============================================

   BUTTONS

   ============================================ */



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 12px 28px;

  font-family: var(--font-primary);

  font-weight: 600;

  font-size: 0.9rem;

  border-radius: var(--radius-full);

  transition: var(--transition-base);

  cursor: pointer;

  border: none;

  text-decoration: none;

}



.btn-primary {

  background: var(--red);

  color: var(--white);

  box-shadow: var(--shadow-sm);

}



.btn-primary:hover {

  background: var(--red-dark);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

  color: var(--white);

}



.btn-outline {

  background: transparent;

  border: 2px solid var(--red);

  color: var(--red);

}



.btn-outline:hover {

  background: var(--red);

  color: var(--white);

  transform: translateY(-2px);

}



.btn-sm {

  padding: 8px 20px;

  font-size: 0.8rem;

}



.btn-lg {

  padding: 16px 36px;

  font-size: 1rem;

}



/* ============================================

   CARDS

   ============================================ */



.card {

  background: var(--white);

  border-radius: var(--radius-xl);

  padding: var(--space-xl);

  transition: var(--transition-base);

  border: 1px solid var(--gray-200);

  box-shadow: var(--shadow-xs);

}



.card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-lg);

  border-color: var(--red-light);

}



/* ============================================

   GRIDS

   ============================================ */



.grid-2 {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: var(--space-xl);

}



.grid-3 {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--space-xl);

}



.grid-4 {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: var(--space-xl);

}



/* ============================================

   FORMS

   ============================================ */



.form-group {

  margin-bottom: var(--space-lg);

}



.form-group label {

  display: block;

  font-size: 0.75rem;

  font-weight: 600;

  color: var(--gray-600);

  margin-bottom: var(--space-xs);

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.form-group input,

.form-group select,

.form-group textarea {

  width: 100%;

  padding: 12px 16px;

  font-family: var(--font-primary);

  font-size: 0.9rem;

  color: var(--gray-800);

  background: var(--white);

  border: 1px solid var(--gray-300);

  border-radius: var(--radius-md);

  transition: var(--transition-base);

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  outline: none;

  border-color: var(--red);

  box-shadow: 0 0 0 3px var(--red-soft);

}



.form-group .required {

  color: var(--red);

  margin-left: 2px;

}



.error-message {

  color: var(--red);

  font-size: 0.7rem;

  margin-top: var(--space-xs);

  display: none;

}



.error-message.show {

  display: block;

}



/* ============================================

   BADGES & TAGS

   ============================================ */



.badge {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 4px 10px;

  background: var(--gray-100);

  border: 1px solid var(--gray-200);

  border-radius: var(--radius-full);

  font-size: 0.7rem;

  font-weight: 500;

  color: var(--gray-600);

  transition: var(--transition-base);

}



.badge-primary {

  background: var(--red-soft);

  border-color: var(--red-light);

  color: var(--red);

}



.badge-primary:hover {

  background: var(--red);

  color: var(--white);

}



/* ============================================

   ANIMATIONS

   ============================================ */



@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeInDown {

  from {

    opacity: 0;

    transform: translateY(-30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes scaleIn {

  from {

    opacity: 0;

    transform: scale(0.95);

  }

  to {

    opacity: 1;

    transform: scale(1);

  }

}



@keyframes slideInLeft {

  from {

    opacity: 0;

    transform: translateX(-30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes slideInRight {

  from {

    opacity: 0;

    transform: translateX(30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



/* Animation Classes */

.animate-fade-in {

  animation: fadeIn 0.6s ease forwards;

}



.animate-fade-in-up {

  animation: fadeInUp 0.6s ease forwards;

}



.animate-fade-in-down {

  animation: fadeInDown 0.6s ease forwards;

}



.animate-scale-in {

  animation: scaleIn 0.4s ease forwards;

}



/* ============================================

   UTILITY CLASSES

   ============================================ */



/* Text Colors */

.text-red { color: var(--red); }

.text-gray-900 { color: var(--gray-900); }

.text-gray-700 { color: var(--gray-700); }

.text-gray-500 { color: var(--gray-500); }

.text-white { color: var(--white); }



/* Background Colors */

.bg-white { background: var(--white); }

.bg-gray-100 { background: var(--gray-100); }

.bg-gray-900 { background: var(--gray-900); }

.bg-red { background: var(--red); }

.bg-red-soft { background: var(--red-soft); }



/* Text Align */

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }



/* Spacing */

.mt-0 { margin-top: 0; }

.mt-1 { margin-top: var(--space-xs); }

.mt-2 { margin-top: var(--space-sm); }

.mt-3 { margin-top: var(--space-md); }

.mt-4 { margin-top: var(--space-lg); }

.mt-5 { margin-top: var(--space-xl); }

.mt-6 { margin-top: var(--space-2xl); }



.mb-0 { margin-bottom: 0; }

.mb-1 { margin-bottom: var(--space-xs); }

.mb-2 { margin-bottom: var(--space-sm); }

.mb-3 { margin-bottom: var(--space-md); }

.mb-4 { margin-bottom: var(--space-lg); }

.mb-5 { margin-bottom: var(--space-xl); }

.mb-6 { margin-bottom: var(--space-2xl); }



/* Flexbox */

.d-flex { display: flex; }

.flex-column { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }

.justify-start { justify-content: flex-start; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.align-center { align-items: center; }

.gap-1 { gap: var(--space-xs); }

.gap-2 { gap: var(--space-sm); }

.gap-3 { gap: var(--space-md); }

.gap-4 { gap: var(--space-lg); }



/* ============================================

   RESPONSIVE UTILITIES

   ============================================ */



/* Hide on mobile */

.hide-mobile {

  display: block;

}



/* Show on mobile */

.show-mobile {

  display: none;

}



@media (max-width: 768px) {

  .hide-mobile {

    display: none;

  }

  

  .show-mobile {

    display: block;

  }

  

  .grid-2,

  .grid-3,

  .grid-4 {

    grid-template-columns: 1fr;

    gap: var(--space-lg);

  }

  

  .section {

    padding: var(--space-2xl) 0;

  }

  

  .section-header {

    margin-bottom: var(--space-2xl);

  }

}



/* ============================================

   PRINT STYLES

   ============================================ */



@media print {

  .site-header,

  .footer,

  .menu-toggle,

  .mobile-menu,

  .hero-buttons,

  .btn,

  .gallery-lightbox {

    display: none !important;

  }

  

  body {

    padding-top: 0 !important;

    background: white;

  }

  

  .spa-page {

    display: block !important;

    page-break-after: avoid;

  }

}@charset "utf-8";



/* ============================================

   DESIGN SYSTEM - GLOBAL VARIABLES

   ============================================ */



:root {

  /* Colors - Main */

  --red: #C41E3A;

  --red-dark: #9B152C;

  --red-light: #FFE5E9;

  --red-soft: rgba(196, 30, 58, 0.08);

  --red-soft-hover: rgba(196, 30, 58, 0.15);

  

  /* Colors - Grayscale */

  --gray-900: #1A1A1A;

  --gray-800: #2D2D2D;

  --gray-700: #4A4A4A;

  --gray-600: #6B6B6B;

  --gray-500: #8E8E8E;

  --gray-400: #B0B0B0;

  --gray-300: #D4D4D4;

  --gray-200: #E8E8E8;

  --gray-100: #F5F5F5;

  --white: #FFFFFF;

  

  /* Colors - Accent */

  --blue: #1a6b8b;

  --blue-soft: rgba(26, 107, 139, 0.08);

  --violet: #667EEA;

  --violet-soft: rgba(102, 126, 234, 0.08);

  --gold: #FFB800;

  

  /* Typography */

  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  

  /* Spacing */

  --space-xs: 0.25rem;

  --space-sm: 0.5rem;

  --space-md: 1rem;

  --space-lg: 1.5rem;

  --space-xl: 2rem;

  --space-2xl: 3rem;

  --space-3xl: 4rem;

  

  /* Layout */

  --container-max: 1200px;

  --container-padding: 24px;

  

  /* Shadows */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);

  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  

  /* Border Radius */

  --radius-sm: 8px;

  --radius-md: 12px;

  --radius-lg: 16px;

  --radius-xl: 24px;

  --radius-2xl: 32px;

  --radius-full: 9999px;

  

  /* Transitions */

  --transition-fast: 0.15s ease;

  --transition-base: 0.3s ease;

  --transition-slow: 0.5s ease;

  

  /* Z-index layers */

  --z-negative: -1;

  --z-elevate: 1;

  --z-dropdown: 10;

  --z-sticky: 100;

  --z-header: 1000;

  --z-overlay: 1001;

  --z-modal: 1002;

  --z-tooltip: 1003;

}



/* ============================================

   RESET & BASE STYLES

   ============================================ */



*,

*::before,

*::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  font-size: 16px;

  scroll-behavior: smooth;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



body {

  font-family: var(--font-primary);

  color: var(--gray-800);

  background: var(--gray-100);

  line-height: 1.5;

  overflow-x: hidden;

  padding-top: 100px;

}



/* Selection */

::selection {

  background: var(--red);

  color: var(--white);

}



/* Scrollbar */

::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



::-webkit-scrollbar-track {

  background: var(--gray-200);

  border-radius: var(--radius-full);

}



::-webkit-scrollbar-thumb {

  background: var(--red);

  border-radius: var(--radius-full);

}



::-webkit-scrollbar-thumb:hover {

  background: var(--red-dark);

}



/* ============================================

   TYPOGRAPHY

   ============================================ */



h1, h2, h3, h4, h5, h6 {

  font-family: var(--font-heading);

  font-weight: 700;

  letter-spacing: -0.02em;

  line-height: 1.2;

  color: var(--gray-900);

}



h1 {

  font-size: clamp(2rem, 5vw, 3rem);

}



h2 {

  font-size: clamp(1.5rem, 4vw, 2rem);

}



h3 {

  font-size: clamp(1.25rem, 3vw, 1.5rem);

}



h4 {

  font-size: clamp(1rem, 2.5vw, 1.2rem);

}



p {

  color: var(--gray-600);

  line-height: 1.6;

}



a {

  color: var(--red);

  text-decoration: none;

  transition: var(--transition-base);

}



a:hover {

  color: var(--red-dark);

}



/* ============================================

   LAYOUT & CONTAINERS

   ============================================ */



.container {

  max-width: var(--container-max);

  margin: 0 auto;

  padding: 0 var(--container-padding);

  width: 100%;

}



.section {

  padding: var(--space-3xl) 0;

}



.section-sm {

  padding: var(--space-2xl) 0;

}



.section-lg {

  padding: var(--space-3xl) 0;

}



/* Section Headers */

.section-header {

  text-align: center;

  margin-bottom: var(--space-3xl);

}



.section-header .section-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: var(--red-soft);

  color: var(--red);

  padding: 6px 16px;

  border-radius: var(--radius-full);

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 1px;

  margin-bottom: var(--space-md);

}



.section-header h2 {

  margin-bottom: var(--space-md);

  position: relative;

  display: inline-block;

}



.section-header h2::after {

  content: '';

  position: absolute;

  bottom: -12px;

  left: 50%;

  transform: translateX(-50%);

  width: 60px;

  height: 3px;

  background: var(--red);

  border-radius: var(--radius-sm);

}



.section-header p {

  max-width: 600px;

  margin: var(--space-lg) auto 0;

  font-size: 1rem;

}



/* ============================================

   BUTTONS

   ============================================ */



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 12px 28px;

  font-family: var(--font-primary);

  font-weight: 600;

  font-size: 0.9rem;

  border-radius: var(--radius-full);

  transition: var(--transition-base);

  cursor: pointer;

  border: none;

  text-decoration: none;

}



.btn-primary {

  background: var(--red);

  color: var(--white);

  box-shadow: var(--shadow-sm);

}



.btn-primary:hover {

  background: var(--red-dark);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

  color: var(--white);

}



.btn-outline {

  background: transparent;

  border: 2px solid var(--red);

  color: var(--red);

}



.btn-outline:hover {

  background: var(--red);

  color: var(--white);

  transform: translateY(-2px);

}



.btn-sm {

  padding: 8px 20px;

  font-size: 0.8rem;

}



.btn-lg {

  padding: 16px 36px;

  font-size: 1rem;

}



/* ============================================

   CARDS

   ============================================ */



.card {

  background: var(--white);

  border-radius: var(--radius-xl);

  padding: var(--space-xl);

  transition: var(--transition-base);

  border: 1px solid var(--gray-200);

  box-shadow: var(--shadow-xs);

}



.card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-lg);

  border-color: var(--red-light);

}



/* ============================================

   GRIDS

   ============================================ */



.grid-2 {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: var(--space-xl);

}



.grid-3 {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--space-xl);

}



.grid-4 {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: var(--space-xl);

}



/* ============================================

   FORMS

   ============================================ */



.form-group {

  margin-bottom: var(--space-lg);

}



.form-group label {

  display: block;

  font-size: 0.75rem;

  font-weight: 600;

  color: var(--gray-600);

  margin-bottom: var(--space-xs);

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.form-group input,

.form-group select,

.form-group textarea {

  width: 100%;

  padding: 12px 16px;

  font-family: var(--font-primary);

  font-size: 0.9rem;

  color: var(--gray-800);

  background: var(--white);

  border: 1px solid var(--gray-300);

  border-radius: var(--radius-md);

  transition: var(--transition-base);

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  outline: none;

  border-color: var(--red);

  box-shadow: 0 0 0 3px var(--red-soft);

}



.form-group .required {

  color: var(--red);

  margin-left: 2px;

}



.error-message {

  color: var(--red);

  font-size: 0.7rem;

  margin-top: var(--space-xs);

  display: none;

}



.error-message.show {

  display: block;

}



/* ============================================

   BADGES & TAGS

   ============================================ */



.badge {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 4px 10px;

  background: var(--gray-100);

  border: 1px solid var(--gray-200);

  border-radius: var(--radius-full);

  font-size: 0.7rem;

  font-weight: 500;

  color: var(--gray-600);

  transition: var(--transition-base);

}



.badge-primary {

  background: var(--red-soft);

  border-color: var(--red-light);

  color: var(--red);

}



.badge-primary:hover {

  background: var(--red);

  color: var(--white);

}



/* ============================================

   ANIMATIONS

   ============================================ */



@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeInDown {

  from {

    opacity: 0;

    transform: translateY(-30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes scaleIn {

  from {

    opacity: 0;

    transform: scale(0.95);

  }

  to {

    opacity: 1;

    transform: scale(1);

  }

}



@keyframes slideInLeft {

  from {

    opacity: 0;

    transform: translateX(-30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes slideInRight {

  from {

    opacity: 0;

    transform: translateX(30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



/* Animation Classes */

.animate-fade-in {

  animation: fadeIn 0.6s ease forwards;

}



.animate-fade-in-up {

  animation: fadeInUp 0.6s ease forwards;

}



.animate-fade-in-down {

  animation: fadeInDown 0.6s ease forwards;

}



.animate-scale-in {

  animation: scaleIn 0.4s ease forwards;

}



/* ============================================

   UTILITY CLASSES

   ============================================ */



/* Text Colors */

.text-red { color: var(--red); }

.text-gray-900 { color: var(--gray-900); }

.text-gray-700 { color: var(--gray-700); }

.text-gray-500 { color: var(--gray-500); }

.text-white { color: var(--white); }



/* Background Colors */

.bg-white { background: var(--white); }

.bg-gray-100 { background: var(--gray-100); }

.bg-gray-900 { background: var(--gray-900); }

.bg-red { background: var(--red); }

.bg-red-soft { background: var(--red-soft); }



/* Text Align */

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }



/* Spacing */

.mt-0 { margin-top: 0; }

.mt-1 { margin-top: var(--space-xs); }

.mt-2 { margin-top: var(--space-sm); }

.mt-3 { margin-top: var(--space-md); }

.mt-4 { margin-top: var(--space-lg); }

.mt-5 { margin-top: var(--space-xl); }

.mt-6 { margin-top: var(--space-2xl); }



.mb-0 { margin-bottom: 0; }

.mb-1 { margin-bottom: var(--space-xs); }

.mb-2 { margin-bottom: var(--space-sm); }

.mb-3 { margin-bottom: var(--space-md); }

.mb-4 { margin-bottom: var(--space-lg); }

.mb-5 { margin-bottom: var(--space-xl); }

.mb-6 { margin-bottom: var(--space-2xl); }



/* Flexbox */

.d-flex { display: flex; }

.flex-column { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }

.justify-start { justify-content: flex-start; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.align-center { align-items: center; }

.gap-1 { gap: var(--space-xs); }

.gap-2 { gap: var(--space-sm); }

.gap-3 { gap: var(--space-md); }

.gap-4 { gap: var(--space-lg); }



/* ============================================

   RESPONSIVE UTILITIES

   ============================================ */



/* Hide on mobile */

.hide-mobile {

  display: block;

}



/* Show on mobile */

.show-mobile {

  display: none;

}



@media (max-width: 768px) {

  .hide-mobile {

    display: none;

  }

  

  .show-mobile {

    display: block;

  }

  

  .grid-2,

  .grid-3,

  .grid-4 {

    grid-template-columns: 1fr;

    gap: var(--space-lg);

  }

  

  .section {

    padding: var(--space-2xl) 0;

  }

  

  .section-header {

    margin-bottom: var(--space-2xl);

  }

}



/* ============================================

   PRINT STYLES

   ============================================ */



@media print {

  .site-header,

  .footer,

  .menu-toggle,

  .mobile-menu,

  .hero-buttons,

  .btn,

  .gallery-lightbox {

    display: none !important;

  }

  

  body {

    padding-top: 0 !important;

    background: white;

  }

  

  .spa-page {

    display: block !important;

    page-break-after: avoid;

  }

}@charset "utf-8";



/* ============================================

   DESIGN SYSTEM - GLOBAL VARIABLES

   ============================================ */



:root {

  /* Colors - Main */

  --red: #C41E3A;

  --red-dark: #9B152C;

  --red-light: #FFE5E9;

  --red-soft: rgba(196, 30, 58, 0.08);

  --red-soft-hover: rgba(196, 30, 58, 0.15);

  

  /* Colors - Grayscale */

  --gray-900: #1A1A1A;

  --gray-800: #2D2D2D;

  --gray-700: #4A4A4A;

  --gray-600: #6B6B6B;

  --gray-500: #8E8E8E;

  --gray-400: #B0B0B0;

  --gray-300: #D4D4D4;

  --gray-200: #E8E8E8;

  --gray-100: #F5F5F5;

  --white: #FFFFFF;

  

  /* Colors - Accent */

  --blue: #1a6b8b;

  --blue-soft: rgba(26, 107, 139, 0.08);

  --violet: #667EEA;

  --violet-soft: rgba(102, 126, 234, 0.08);

  --gold: #FFB800;

  

  /* Typography */

  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  

  /* Spacing */

  --space-xs: 0.25rem;

  --space-sm: 0.5rem;

  --space-md: 1rem;

  --space-lg: 1.5rem;

  --space-xl: 2rem;

  --space-2xl: 3rem;

  --space-3xl: 4rem;

  

  /* Layout */

  --container-max: 1200px;

  --container-padding: 24px;

  

  /* Shadows */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);

  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  

  /* Border Radius */

  --radius-sm: 8px;

  --radius-md: 12px;

  --radius-lg: 16px;

  --radius-xl: 24px;

  --radius-2xl: 32px;

  --radius-full: 9999px;

  

  /* Transitions */

  --transition-fast: 0.15s ease;

  --transition-base: 0.3s ease;

  --transition-slow: 0.5s ease;

  

  /* Z-index layers */

  --z-negative: -1;

  --z-elevate: 1;

  --z-dropdown: 10;

  --z-sticky: 100;

  --z-header: 1000;

  --z-overlay: 1001;

  --z-modal: 1002;

  --z-tooltip: 1003;

}



/* ============================================

   RESET & BASE STYLES

   ============================================ */



*,

*::before,

*::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  font-size: 16px;

  scroll-behavior: smooth;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



body {

  font-family: var(--font-primary);

  color: var(--gray-800);

  background: var(--gray-100);

  line-height: 1.5;

  overflow-x: hidden;

  padding-top: 100px;

}



/* Selection */

::selection {

  background: var(--red);

  color: var(--white);

}



/* Scrollbar */

::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



::-webkit-scrollbar-track {

  background: var(--gray-200);

  border-radius: var(--radius-full);

}



::-webkit-scrollbar-thumb {

  background: var(--red);

  border-radius: var(--radius-full);

}



::-webkit-scrollbar-thumb:hover {

  background: var(--red-dark);

}



/* ============================================

   TYPOGRAPHY

   ============================================ */



h1, h2, h3, h4, h5, h6 {

  font-family: var(--font-heading);

  font-weight: 700;

  letter-spacing: -0.02em;

  line-height: 1.2;

  color: var(--gray-900);

}



h1 {

  font-size: clamp(2rem, 5vw, 3rem);

}



h2 {

  font-size: clamp(1.5rem, 4vw, 2rem);

}



h3 {

  font-size: clamp(1.25rem, 3vw, 1.5rem);

}



h4 {

  font-size: clamp(1rem, 2.5vw, 1.2rem);

}



p {

  color: var(--gray-600);

  line-height: 1.6;

}



a {

  color: var(--red);

  text-decoration: none;

  transition: var(--transition-base);

}



a:hover {

  color: var(--red-dark);

}



/* ============================================

   LAYOUT & CONTAINERS

   ============================================ */



.container {

  max-width: var(--container-max);

  margin: 0 auto;

  padding: 0 var(--container-padding);

  width: 100%;

}



.section {

  padding: var(--space-3xl) 0;

}



.section-sm {

  padding: var(--space-2xl) 0;

}



.section-lg {

  padding: var(--space-3xl) 0;

}



/* Section Headers */

.section-header {

  text-align: center;

  margin-bottom: var(--space-3xl);

}



.section-header .section-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: var(--red-soft);

  color: var(--red);

  padding: 6px 16px;

  border-radius: var(--radius-full);

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 1px;

  margin-bottom: var(--space-md);

}



.section-header h2 {

  margin-bottom: var(--space-md);

  position: relative;

  display: inline-block;

}



.section-header h2::after {

  content: '';

  position: absolute;

  bottom: -12px;

  left: 50%;

  transform: translateX(-50%);

  width: 60px;

  height: 3px;

  background: var(--red);

  border-radius: var(--radius-sm);

}



.section-header p {

  max-width: 600px;

  margin: var(--space-lg) auto 0;

  font-size: 1rem;

}



/* ============================================

   BUTTONS

   ============================================ */



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 12px 28px;

  font-family: var(--font-primary);

  font-weight: 600;

  font-size: 0.9rem;

  border-radius: var(--radius-full);

  transition: var(--transition-base);

  cursor: pointer;

  border: none;

  text-decoration: none;

}



.btn-primary {

  background: var(--red);

  color: var(--white);

  box-shadow: var(--shadow-sm);

}



.btn-primary:hover {

  background: var(--red-dark);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

  color: var(--white);

}



.btn-outline {

  background: transparent;

  border: 2px solid var(--red);

  color: var(--red);

}



.btn-outline:hover {

  background: var(--red);

  color: var(--white);

  transform: translateY(-2px);

}



.btn-sm {

  padding: 8px 20px;

  font-size: 0.8rem;

}



.btn-lg {

  padding: 16px 36px;

  font-size: 1rem;

}



/* ============================================

   CARDS

   ============================================ */



.card {

  background: var(--white);

  border-radius: var(--radius-xl);

  padding: var(--space-xl);

  transition: var(--transition-base);

  border: 1px solid var(--gray-200);

  box-shadow: var(--shadow-xs);

}



.card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-lg);

  border-color: var(--red-light);

}



/* ============================================

   GRIDS

   ============================================ */



.grid-2 {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: var(--space-xl);

}



.grid-3 {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--space-xl);

}



.grid-4 {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: var(--space-xl);

}



/* ============================================

   FORMS

   ============================================ */



.form-group {

  margin-bottom: var(--space-lg);

}



.form-group label {

  display: block;

  font-size: 0.75rem;

  font-weight: 600;

  color: var(--gray-600);

  margin-bottom: var(--space-xs);

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.form-group input,

.form-group select,

.form-group textarea {

  width: 100%;

  padding: 12px 16px;

  font-family: var(--font-primary);

  font-size: 0.9rem;

  color: var(--gray-800);

  background: var(--white);

  border: 1px solid var(--gray-300);

  border-radius: var(--radius-md);

  transition: var(--transition-base);

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  outline: none;

  border-color: var(--red);

  box-shadow: 0 0 0 3px var(--red-soft);

}



.form-group .required {

  color: var(--red);

  margin-left: 2px;

}



.error-message {

  color: var(--red);

  font-size: 0.7rem;

  margin-top: var(--space-xs);

  display: none;

}



.error-message.show {

  display: block;

}



/* ============================================

   BADGES & TAGS

   ============================================ */



.badge {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 4px 10px;

  background: var(--gray-100);

  border: 1px solid var(--gray-200);

  border-radius: var(--radius-full);

  font-size: 0.7rem;

  font-weight: 500;

  color: var(--gray-600);

  transition: var(--transition-base);

}



.badge-primary {

  background: var(--red-soft);

  border-color: var(--red-light);

  color: var(--red);

}



.badge-primary:hover {

  background: var(--red);

  color: var(--white);

}



/* ============================================

   ANIMATIONS

   ============================================ */



@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeInDown {

  from {

    opacity: 0;

    transform: translateY(-30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes scaleIn {

  from {

    opacity: 0;

    transform: scale(0.95);

  }

  to {

    opacity: 1;

    transform: scale(1);

  }

}



@keyframes slideInLeft {

  from {

    opacity: 0;

    transform: translateX(-30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes slideInRight {

  from {

    opacity: 0;

    transform: translateX(30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



/* Animation Classes */

.animate-fade-in {

  animation: fadeIn 0.6s ease forwards;

}



.animate-fade-in-up {

  animation: fadeInUp 0.6s ease forwards;

}



.animate-fade-in-down {

  animation: fadeInDown 0.6s ease forwards;

}



.animate-scale-in {

  animation: scaleIn 0.4s ease forwards;

}



/* ============================================

   UTILITY CLASSES

   ============================================ */



/* Text Colors */

.text-red { color: var(--red); }

.text-gray-900 { color: var(--gray-900); }

.text-gray-700 { color: var(--gray-700); }

.text-gray-500 { color: var(--gray-500); }

.text-white { color: var(--white); }



/* Background Colors */

.bg-white { background: var(--white); }

.bg-gray-100 { background: var(--gray-100); }

.bg-gray-900 { background: var(--gray-900); }

.bg-red { background: var(--red); }

.bg-red-soft { background: var(--red-soft); }



/* Text Align */

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }



/* Spacing */

.mt-0 { margin-top: 0; }

.mt-1 { margin-top: var(--space-xs); }

.mt-2 { margin-top: var(--space-sm); }

.mt-3 { margin-top: var(--space-md); }

.mt-4 { margin-top: var(--space-lg); }

.mt-5 { margin-top: var(--space-xl); }

.mt-6 { margin-top: var(--space-2xl); }



.mb-0 { margin-bottom: 0; }

.mb-1 { margin-bottom: var(--space-xs); }

.mb-2 { margin-bottom: var(--space-sm); }

.mb-3 { margin-bottom: var(--space-md); }

.mb-4 { margin-bottom: var(--space-lg); }

.mb-5 { margin-bottom: var(--space-xl); }

.mb-6 { margin-bottom: var(--space-2xl); }



/* Flexbox */

.d-flex { display: flex; }

.flex-column { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }

.justify-start { justify-content: flex-start; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.align-center { align-items: center; }

.gap-1 { gap: var(--space-xs); }

.gap-2 { gap: var(--space-sm); }

.gap-3 { gap: var(--space-md); }

.gap-4 { gap: var(--space-lg); }



/* ============================================

   RESPONSIVE UTILITIES

   ============================================ */



/* Hide on mobile */

.hide-mobile {

  display: block;

}



/* Show on mobile */

.show-mobile {

  display: none;

}



@media (max-width: 768px) {

  .hide-mobile {

    display: none;

  }

  

  .show-mobile {

    display: block;

  }

  

  .grid-2,

  .grid-3,

  .grid-4 {

    grid-template-columns: 1fr;

    gap: var(--space-lg);

  }

  

  .section {

    padding: var(--space-2xl) 0;

  }

  

  .section-header {

    margin-bottom: var(--space-2xl);

  }

}



/* ============================================

   PRINT STYLES

   ============================================ */



@media print {

  .site-header,

  .footer,

  .menu-toggle,

  .mobile-menu,

  .hero-buttons,

  .btn,

  .gallery-lightbox {

    display: none !important;

  }

  

  body {

    padding-top: 0 !important;

    background: white;

  }

  

  .spa-page {

    display: block !important;

    page-break-after: avoid;

  }

}

/* ============================================

   SPA PAGE - SINGLE PAGE APPLICATION STYLES

   ============================================ */



/* SPA Pages Container */

.spa-page {

  display: none;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.4s ease, transform 0.4s ease;

  will-change: opacity, transform;

}



/* Active page */

.spa-page.is-active {

  display: block;

  opacity: 1;

  transform: translateY(0);

  animation: pageEnter 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);

}



/* Page enter animation */

@keyframes pageEnter {

  0% {

    opacity: 0;

    transform: translateY(30px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Page exit animation (for future use) */

.spa-page.is-leaving {

  display: block;

  animation: pageExit 0.3s ease forwards;

}



@keyframes pageExit {

  0% {

    opacity: 1;

    transform: translateY(0);

  }

  100% {

    opacity: 0;

    transform: translateY(-20px);

  }

}



/* Page transition overlay */

.page-transition-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: var(--white);

  z-index: 9999;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease, visibility 0.3s ease;

  pointer-events: none;

}



.page-transition-overlay.active {

  opacity: 1;

  visibility: visible;

}



/* Page specific background variations */

#page-home {

  /* Home specific styles */

}



#page-ordinace {

  /* Ordinace specific styles */

}



#page-tym {

  /* Doctors specific styles */

}



#page-tech {

  /* Technology specific styles */

}



#page-sluzby {

  /* Services specific styles */

}



#page-cenik {

  /* Prices specific styles */

}



#page-kontakt {

  /* Contact specific styles */

}



/* Smooth scroll for SPA navigation */

html {

  scroll-behavior: smooth;

}



/* Prevent scroll during page transition */

body.page-transition {

  overflow: hidden;

}



/* Page content loader */

.page-loader {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 40px;

  height: 40px;

  border: 3px solid var(--gray-200);

  border-top-color: var(--red);

  border-radius: 50%;

  animation: spin 0.8s linear infinite;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.2s ease;

}



.spa-page.is-loading .page-loader {

  opacity: 1;

  visibility: visible;

}



@keyframes spin {

  to {

    transform: translate(-50%, -50%) rotate(360deg);

  }

}



/* Page sections fade in on scroll */

.spa-page section {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.6s ease, transform 0.6s ease;

}



.spa-page.is-active section {

  opacity: 1;

  transform: translateY(0);

}



/* Stagger children animations */

.spa-page.is-active section:nth-child(1) { transition-delay: 0s; }

.spa-page.is-active section:nth-child(2) { transition-delay: 0.1s; }

.spa-page.is-active section:nth-child(3) { transition-delay: 0.2s; }

.spa-page.is-active section:nth-child(4) { transition-delay: 0.3s; }

.spa-page.is-active section:nth-child(5) { transition-delay: 0.4s; }

.spa-page.is-active section:nth-child(6) { transition-delay: 0.5s; }



/* Page scroll to top button */

.scroll-to-top {

  position: fixed;

  bottom: 30px;

  right: 30px;

  width: 48px;

  height: 48px;

  background: var(--red);

  color: var(--white);

  border: none;

  border-radius: 50%;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s ease;

  z-index: 99;

  box-shadow: var(--shadow-md);

}



.scroll-to-top.visible {

  opacity: 1;

  visibility: visible;

}



.scroll-to-top:hover {

  background: var(--red-dark);

  transform: translateY(-4px);

  box-shadow: var(--shadow-lg);

}



/* Page navigation active state */

.nav-menu li.is-active a,

.mobile-nav li.is-active a {

  position: relative;

}



.nav-menu li.is-active a::after {

  width: 100%;

}



/* Page header offset for anchor links */

.anchor-offset {

  scroll-margin-top: 100px;

}



/* Responsive adjustments for SPA */

@media (max-width: 768px) {

  .spa-page.is-active section:nth-child(2),

  .spa-page.is-active section:nth-child(3),

  .spa-page.is-active section:nth-child(4),

  .spa-page.is-active section:nth-child(5),

  .spa-page.is-active section:nth-child(6) {

    transition-delay: 0.05s;

  }

  

  .scroll-to-top {

    bottom: 20px;

    right: 20px;

    width: 40px;

    height: 40px;

    font-size: 1rem;

  }

}



/* Print styles for SPA */

@media print {

  .spa-page {

    display: block !important;

    opacity: 1 !important;

    transform: none !important;

  }

  

  .spa-page:not(.is-active) {

    display: none !important;

  }

  

  .scroll-to-top,

  .page-transition-overlay,

  .page-loader {

    display: none !important;

  }

}



.section-header-simple {

  text-align: center;

  margin-bottom: 48px;

	margin-top: 48px;

}



.section-header-simple .section-title {

  font-size: 2.2rem;

  font-weight: 700;

  color: var(--gray-900);

  margin-bottom: 16px;

}



.section-header-simple .section-title span {

  color: var(--red);

}



.section-header-simple p {

  font-size: 1rem;

  color: var(--gray-600);

  max-width: 600px;

  margin: 0 auto;

}



@media (max-width: 768px) {

  .section-header-simple .section-title {

    font-size: 1.8rem;

  }

}



@media (max-width: 480px) {

  .section-header-simple .section-title {

    font-size: 1.5rem;

  }

}



/* ============================================

   FLEXBOX CENTERING FOR MOBILE

   ============================================ */



@media (max-width: 768px) {

  

  /* Universal mobile centering class */

  .mobile-center {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

  }

  

  /* Apply to all sections */

  .hero-dark,

  .hero-modern,

  .hero-pastel,

  .parallax-section,

  .quote-section-dark,

  .services-preview-dark,

  .advantages-section-dark {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

  }

  

  /* Center all text */

  h1, h2, h3, h4, h5, h6, p, span, div {

    text-align: center;

  }

  

  /* Center buttons */

  .btn, button {

    margin: 0 auto;

  }

  

  /* Center grids */

  .services-grid,

  .advantages-grid,

  .gallery-grid,

  .tech-grid,

  .doctors-grid {

    display: flex;

    flex-direction: column;

    align-items: center;

  }

}



#i18n-tooltip {

  backdrop-filter: blur(6px);

  background: rgba(20,20,20,0.9);

  box-shadow: 0 8px 20px rgba(0,0,0,0.2);

}