html { scroll-behavior: smooth; }
body { font-family: 'Inter Tight', sans-serif; background: #FBFAF7; color: #0B1E3F; }
.font-display { font-family: 'Fraunces', serif; font-optical-sizing: auto; }
.grain { background-image: radial-gradient(rgba(11,30,63,0.025) 1px, transparent 1px); background-size: 3px 3px; }
.hero-mark { background: radial-gradient(circle at 30% 30%, #1B3A6B 0%, #0B1E3F 60%, #050E1F 100%); }
.fade-up { opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }
.rule { height: 1px; background: linear-gradient(to right, transparent, #0B1E3F33, transparent); }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: #C8102E; transition: width 0.3s; }
.nav-link:hover::after { width: 100%; }
.nav-link.active::after { width: 100%; }
.leruo-system-tag { font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: #0B1E3F; opacity: 0.5; cursor: default; transition: opacity 0.3s ease; }
.leruo-system-tag:hover { opacity: 0.75; }
.slideshow { width: 100%; height: 100%; }
.slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease-in-out; }
.slide.active { opacity: 1; }
.slideshow-tint { background: linear-gradient(135deg, rgba(11,30,63,0.82) 0%, rgba(27,58,107,0.78) 50%, rgba(11,30,63,0.85) 100%); }

/* Calendar Styles */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #5A6678; text-align: center; padding: 8px 0; }
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: all 0.2s; background: transparent; color: #0B1E3F; font-family: inherit; }
.cal-day:hover:not(.disabled):not(.empty) { border-color: #0B1E3F; background: #FBFAF7; }
.cal-day.disabled { color: #C4C0B5; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-day.empty { cursor: default; }
.cal-day.selected { background: #0B1E3F; color: #FBFAF7; border-color: #0B1E3F; font-weight: 500; }
.cal-day.today { position: relative; }
.cal-day.today::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: #C8102E; }
.field-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #5A6678; margin-bottom: 12px; display: block; }
.field-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid #E8E4DB; padding: 10px 0; font-family: inherit; font-size: 15px; color: #0B1E3F; transition: border-color 0.3s; }
.field-input:focus { outline: none; border-color: #0B1E3F; }
.field-input::placeholder { color: #C4C0B5; }
select.field-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%230B1E3F' stroke-width='1.5'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; padding-right: 2rem; }
.month-nav-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #E8E4DB; background: transparent; color: #0B1E3F; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.month-nav-btn:hover { border-color: #0B1E3F; background: #0B1E3F; color: #FBFAF7; }
.month-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.month-nav-btn:disabled:hover { border-color: #E8E4DB; background: transparent; color: #0B1E3F; }
.time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 640px) { .time-grid { grid-template-columns: repeat(4, 1fr); } }
.time-slot { padding: 12px 8px; border: 1px solid #E8E4DB; border-radius: 8px; font-size: 13px; font-family: inherit; background: transparent; color: #0B1E3F; cursor: pointer; transition: all 0.2s; text-align: center; }
.time-slot:hover { border-color: #0B1E3F; }
.time-slot.selected { background: #0B1E3F; color: #FBFAF7; border-color: #0B1E3F; font-weight: 500; }
.lunch-break { grid-column: 1 / -1; padding: 10px; text-align: center; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #5A6678; border: 1px dashed #E8E4DB; border-radius: 8px; font-style: italic; }
.locked { opacity: 0.4; pointer-events: none; filter: grayscale(0.3); }

/* Form overrides for dark sections */
.dark-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(251,250,247,0.3); padding: 10px 0; font-family: inherit; font-size: 15px; color: #FBFAF7; transition: border-color 0.3s; }
.dark-input:focus { outline: none; border-color: #FBFAF7; }
.dark-input::placeholder { color: rgba(251,250,247,0.3); }

/* Section visibility for single-page nav */
section[id] { scroll-margin-top: 80px; }

/* Preloader Styles */
.preloader { position: fixed; inset: 0; background: #FBFAF7; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s; }
.preloader::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(11,30,63,0.025) 1px, transparent 1px); background-size: 3px 3px; z-index: -1; }
.preloader.fade-out { opacity: 0; visibility: hidden; }

.ecg-container { width: 400px; height: 120px; margin-bottom: 2.5rem; position: relative; overflow: hidden; }
.ecg-svg { width: 100%; height: 100%; }
.ecg-path { fill: none; stroke: #C8102E; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: ecg-draw 6s ease-in-out infinite; }

@keyframes ecg-draw {
  0% { stroke-dashoffset: 1000; }
  15% { stroke-dashoffset: 800; }
  33% { stroke-dashoffset: 666; }
  48% { stroke-dashoffset: 500; }
  66% { stroke-dashoffset: 333; }
  81% { stroke-dashoffset: 150; }
  100% { stroke-dashoffset: 0; }
}

.ecg-scanner { position: absolute; inset: 0; background: linear-gradient(to right, #FBFAF7 0%, transparent 10%, transparent 90%, #FBFAF7 100%); width: 100%; pointer-events: none; }

.preloader-logo { height: 70px; margin-bottom: 1.5rem; opacity: 0; animation: logo-sequence 6s ease-in-out forwards; }
.preloader-powered { font-family: "Inter Tight", sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: #000000; opacity: 0; animation: powered-sequence 6s ease-in-out forwards; }

@keyframes logo-sequence {
  0% { opacity: 0; transform: translateY(10px); }
  5%, 28% { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes powered-sequence {
  0%, 33% { opacity: 0; transform: translateY(10px); }
  38%, 61% { opacity: 1; transform: translateY(0); }
  66%, 100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Subtle variant for navigation */
.preloader.subtle .preloader-logo,
.preloader.subtle .preloader-powered { display: none; }
.preloader.subtle .ecg-container { margin-bottom: 0; }
.preloader.subtle .ecg-path { animation-duration: 1.5s; }

/* Skeleton Loader */
.skeleton-wrapper { position: fixed; inset: 0; background: #FBFAF7; z-index: 9998; padding: 2rem; display: none; flex-direction: column; gap: 2rem; overflow: hidden; }
.skeleton-wrapper::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(11,30,63,0.025) 1px, transparent 1px); background-size: 3px 3px; z-index: -1; }
.skeleton-wrapper.active { display: flex; }
.skeleton-wrapper.fade-out { opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }

.skeleton-item { background: #E8E4DB; border-radius: 8px; position: relative; overflow: hidden; }
.skeleton-item::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmer 1.5s infinite; }

@keyframes shimmer { 100% { transform: translateX(100%); } }

.skeleton-header { height: 60px; width: 100%; margin-bottom: 2rem; }
.skeleton-hero { height: 400px; width: 100%; }
.skeleton-text { height: 20px; width: 80%; }
.skeleton-text-sm { height: 16px; width: 60%; }

/* Page Content Initial State */
.page-content { opacity: 0; transition: opacity 0.8s ease; }
.page-content.visible { opacity: 1; }