:root {
  --color-background: #050505;
  --color-text: #e0e0e0;
  --color-text-secondary: rgba(224, 224, 224, 0.7);
  --color-primary: #ff4d4d;
  --color-separator: rgba(255, 255, 255, 0.15);
  --font-family-base: 'Roboto', sans-serif;
  --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-64: 64px;
}

/* --- Base & Background --- */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-family-base);
  color: var(--color-text);
  overflow: hidden;
  position: relative;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(315deg, #0d0d1a, #1a0d0d, #0d1a0d);
  background-size: 400% 400%;
  animation: gradient-animation 20s ease infinite;
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Loader --- */
.loader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #000;
  display: flex; justify-content: center; align-items: center;
  z-index: 9999;
  transition: opacity 1s ease-out;
}
.loader.fade-out { opacity: 0; pointer-events: none; }
.loader-content { text-align: center; }
.loader-title {
  font-size: 2.5rem; font-weight: 300;
  margin-bottom: var(--space-32);
}
.spinner {
  width: 40px; height: 40px;
  margin: 0 auto;
}
.spinner-circle {
  width: 100%; height: 100%;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: var(--color-text);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Main Content Centering --- */
.main-content {
  opacity: 0;
  transition: opacity 1s ease-in 0.5s;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; max-width: 900px;
  padding: var(--space-32);
}
.main-content.fade-in { opacity: 1; }

/* --- Header --- */
.site-header {
  text-align: center;
  margin-bottom: var(--space-64);
}
.logo-container { margin-bottom: var(--space-24); }
.logo-svg { width: 80px; height: 80px; }
.site-title {
  font-size: 3rem; font-weight: 300;
  margin: 0 0 var(--space-16) 0;
}
.site-description {
  font-size: 0.9rem; font-weight: 300;
  color: var(--color-text-secondary);
  max-width: 600px; line-height: 1.6;
  margin: 0 auto;
  text-indent: 2em;
  margin-bottom: 1em;
}

/* --- 2-COLUMN LAYOUT --- */
.content-grid-wrapper {
  display: flex; justify-content: center;
}

.content-grid {
  display: flex; flex-direction: row; align-items: flex-start;
  width: 100%; position: relative;
}

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

.column-left {
  text-align: right;
  padding-right: 40px;
}

.column-right {
  text-align: left;
  padding-left: 40px;
}

.vertical-separator {
  width: 1px;
  background-color: var(--color-separator);
  margin: 0;
  align-self: stretch;
}

/* --- Content Sections & Crossed Separators --- */
.content-section {
  width: 100%; position: relative;
}

.section-title {
  font-size: 1.5rem; font-weight: 500;
  margin: 0 0 var(--space-24) 0;
  padding-bottom: var(--space-16);
  position: relative; display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute; bottom: 0; height: 1px;
  background-color: var(--color-separator);
  z-index: 1;
}

.column-left .section-title {
  margin-left: auto;
}
.column-left .section-title::after {
  left: 0;
  right: -40px;
  width: calc(100% + 40px);
}

.column-right .section-title {
  margin-right: auto;
}
.column-right .section-title::after {
  right: 0;
  left: -40px;
  width: calc(100% + 40px);
}

.items-list {
  display: flex; flex-direction: column;
  gap: var(--space-16);
}

.item {
  font-size: 1rem; font-weight: 300;
  color: var(--color-text-secondary);
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  display: inline-block;
}
.item:hover { color: #fff; }

/* Side highlight on hover */
.item::before, .item::after {
  content: '';
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px; background-color: var(--color-primary);
  transform: scaleY(0);
  transition: transform 0.3s ease;
  transform-origin: center;
}
.column-left .item { padding-right: var(--space-16); }
.column-left .item::after { right: 0; }
.column-left .item:hover::after { transform: scaleY(1); }
.column-right .item { padding-left: var(--space-16); }
.column-right .item::before { left: 0; }
.column-right .item:hover::before { transform: scaleY(1); }

/* --- Mobile Styles --- */
@media (max-width: 768px) {
  body { height: auto; overflow: auto; animation: none; }
  .main-content {
    position: static; transform: none;
    padding: var(--space-64) var(--space-16);
  }
  .content-grid {
    flex-direction: column;
    align-items: center;
    gap: var(--space-64);
  }
  .vertical-separator { display: none; }
  .column {
    text-align: center !important; width: 100%;
  }
  .column-left, .column-right { padding: 0; }
  .column-left .item, .column-right .item { padding: 0; }
  .item::before, .item::after { display: none; }
  .section-title {
    display: block; width: 100%; margin: 0 auto;
  }
  .section-title::after {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
}