/* Landing Page Styles - Corporate Design */

/* CSS Variables for Color Palette */
:root {
  --primary-dark: #1a1a2e;      /* Основной темный */
  --primary-blue: #16213e;      /* Темно-синий */
  --accent-blue: #0f3460;       /* Акцентный синий */
  --text-light: #e94560;        /* Акцентный красный для текста */
  --background: #0f0f23;        /* Фон */
  --text-secondary: #8892b0;    /* Вторичный текст */
  --white: #ffffff;             /* Белый */
  --gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-blue) 50%, var(--accent-blue) 100%);
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: var(--gradient-primary);
  color: var(--white);
  overflow-x: hidden;
}

/* Landing Container - Full Screen */
.landing-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2rem;
}

/* Content Center */
.content-center {
  text-align: center;
  max-width: 800px;
  width: 100%;
  animation: fadeInUp 1.2s ease-out;
}

/* Main Heading Typography */
.main-heading {
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2rem;
  background: linear-gradient(45deg, var(--white), var(--text-light));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pulse 3s ease-in-out infinite;
}

/* Accent Line */
.accent-line {
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, var(--text-light), var(--accent-blue));
  margin: 0 auto;
  border-radius: 2px;
  animation: expandLine 1.5s ease-out 0.5s both;
}

/* Supporting Content */
.supporting-content {
  margin-top: 2rem;
}

.supporting-text {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  margin: 0;
  opacity: 0;
  animation: fadeIn 1s ease-out 1s both;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1;
    transform: scale(1);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.02);
  }
}

@keyframes expandLine {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 100px;
    opacity: 1;
  }
}

/* Background Effects */
.background-effects,
.landing-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(233, 69, 96, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(15, 52, 96, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Responsive Design */

/* Mobile Devices */
@media (max-width: 768px) {
  .landing-container {
    padding: 1rem;
  }
  
  .main-heading {
    font-size: clamp(2rem, 10vw, 3rem);
    margin-bottom: 1.5rem;
  }
  
  .accent-line {
    width: 60px;
  }
  
  .supporting-text {
    font-size: 1rem;
    margin-top: 1.5rem;
  }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  .main-heading {
    font-size: clamp(3rem, 6vw, 4.5rem);
  }
  
  .accent-line {
    width: 80px;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .main-heading {
    font-size: clamp(4rem, 6vw, 6rem);
  }
  
  .content-center {
    max-width: 900px;
  }
}

/* Large Screens */
@media (min-width: 1440px) {
  .main-heading {
    font-size: 6rem;
  }
  
  .accent-line {
    width: 120px;
    height: 4px;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .main-heading {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  .main-heading,
  .accent-line,
  .content-center,
  .supporting-text {
    animation: none;
  }
  
  .main-heading {
    opacity: 1;
    transform: none;
  }
  
  .accent-line {
    width: 100px;
    opacity: 1;
  }
  
  .supporting-text {
    opacity: 1;
  }
}

/* Focus Styles for Accessibility */
.main-heading:focus {
  outline: 2px solid var(--text-light);
  outline-offset: 4px;
}

/* Container Improvements */
.landing-container {
  position: relative;
  z-index: 1;
}

/* Content Improvements */
.content-center header {
  margin-bottom: 0;
}

/* Hover Effects for Interactive Elements */
@media (hover: hover) {
  .main-heading {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .main-heading:hover {
    transform: scale(1.02);
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0f;
    --primary-dark: #151529;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --text-light: #ffffff;
    --text-secondary: #ffffff;
    --accent-blue: #0066cc;
  }
  
  .accent-line {
    background: var(--white);
  }
}

/* Print Styles */
@media print {
  .landing-container {
    background: white !important;
    color: black !important;
    min-height: auto;
    padding: 2rem;
  }
  
  .main-heading {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: black !important;
    font-size: 3rem !important;
    animation: none !important;
  }
  
  .accent-line {
    background: black !important;
    animation: none !important;
  }
  
  .supporting-text {
    color: black !important;
    animation: none !important;
    opacity: 1 !important;
  }
  
  .background-effects,
  .landing-container::before {
    display: none !important;
  }
}