/* ===== ПЕРЕМЕННЫЕ И БАЗА ===== */
  :root {
    --primary: #00f0ff;
    --danger: #ff003c;
    --bg-dark: #02050a;
    --text-main: #d1d8e0;
    --text-muted: #8a9ba8;
    --glass-bg: rgba(10, 15, 25, 0.45);
    --glass-border: rgba(255, 255, 255, 0.1);
  }

  /* Если шрифты уже подключены глобально, эти строки можно убрать */
  

  /* ===== ГЛОБАЛЬНЫЙ ФОН (Оставляем, если нужен этот эффект) ===== */
  .bg-wrapper { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 0%, #061121 0%, #000000 80%); }
  .mesh-gradient {
    position: absolute; inset: 0;
    background: 
      radial-gradient(circle at var(--mouse-x, 20%) var(--mouse-y, 30%), rgba(255,0,60,0.1), transparent 40%),
      radial-gradient(circle at var(--mouse-x2, 80%) var(--mouse-y2, 60%), rgba(0,240,255,0.1), transparent 50%);
    filter: blur(60px);
  }
  .cyber-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px; transform: perspective(500px) rotateX(60deg); 
    transform-origin: center top; animation: grid-move 20s linear infinite;
    mask-image: linear-gradient(to bottom, transparent, black 40%, black 80%, transparent);
  }
  @keyframes grid-move { 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } 100% { transform: perspective(500px) rotateX(60deg) translateY(50px); } }

  .scanlines {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0, 240, 255, 0.015) 50%); background-size: 100% 4px;
  }

  /* ===== ОСНОВНОЙ КОНТЕНТ (СТЕКЛО) ===== */
  .main-container { position: relative; z-index: 10; max-width: 1100px; margin: 0 auto; padding: 40px 20px 80px 20px; font-family: 'Exo 2', sans-serif; color: var(--text-main); }

  /* Базовый класс для стеклянной панели */
  .glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 20px rgba(0, 240, 255, 0.03);
    padding: 50px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;
  }

  /* HERO БЛОК */
  .about-hero { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 40px; padding: 60px 40px; }
  .gl-badge {
    font-family: 'Share Tech Mono', monospace; font-size: 0.9rem; color: var(--primary);
    border: 1px solid var(--primary); padding: 5px 15px; border-radius: 20px; margin-bottom: 20px;
    background: rgba(0, 240, 255, 0.05); text-transform: uppercase;
  }
  .gl-title {
    font-family: 'Orbitron', sans-serif; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900;
    color: #fff; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px; line-height: 1.1;
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
  }
  .gl-desc { font-size: 1.1rem; line-height: 1.7; color: var(--text-main); max-width: 800px; margin-bottom: 40px; }
  
  .gl-hero-img-wrap { width: 100%; border-radius: 12px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,0.1); }
  .gl-hero-img-wrap img { width: 100%; height: 400px; object-fit: cover; display: block; opacity: 0.8; transition: 0.5s; filter: grayscale(20%);}
  .gl-hero-img-wrap:hover img { opacity: 1; transform: scale(1.02); filter: grayscale(0%); }
  .gl-hero-img-wrap::after {
    content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg-dark), transparent 50%); pointer-events: none;
  }

  /* СТАТИСТИКА */
  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 80px; }
  .stat-card { padding: 40px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .stat-card:hover { transform: translateY(-5px); border-color: rgba(0, 240, 255, 0.3); box-shadow: 0 20px 40px rgba(0, 240, 255, 0.1); }
  .stat-num { font-family: 'Orbitron', sans-serif; font-size: 3.5rem; font-weight: 900; color: #fff; margin-bottom: 10px; text-shadow: 0 0 20px rgba(255, 0, 60, 0.4); }
  .stat-text { font-family: 'Share Tech Mono', monospace; font-size: 1rem; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; }

  /* ЗАГОЛОВКИ СЕКЦИЙ */
  .section-gl-title {
    font-family: 'Orbitron', sans-serif; font-size: 2rem; color: #fff; text-align: center;
    margin-bottom: 40px; text-transform: uppercase; letter-spacing: 3px; position: relative;
  }
  .section-gl-title::after {
    content: ''; display: block; width: 60px; height: 3px; background: var(--danger); margin: 15px auto 0; border-radius: 2px; box-shadow: 0 0 10px var(--danger);
  }

  /* ПРИНЦИПЫ */
  .principles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 80px; }
  .p-card { padding: 40px; }
  .p-card:hover { border-color: rgba(255, 0, 60, 0.3); }
  .p-icon { font-size: 2.5rem; margin-bottom: 20px; filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5)); }
  .p-card h3 { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; color: #fff; margin-bottom: 15px; text-transform: uppercase; }
  .p-card p { font-size: 1rem; line-height: 1.6; color: var(--text-muted); }

  /* ЭТАПЫ СОЗДАНИЯ (TIMELINE) */
  .timeline-container { position: relative; padding-left: 30px; margin-bottom: 80px; }
  .timeline-container::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(to bottom, transparent, var(--primary), var(--danger), transparent);
  }
  .tl-item { position: relative; padding-bottom: 40px; }
  .tl-item::before {
    content: ''; position: absolute; left: -36px; top: 5px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--bg-dark); border: 2px solid var(--primary); box-shadow: 0 0 10px var(--primary);
  }
  .tl-content { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: 25px 30px; backdrop-filter: blur(10px); }
  .tl-content h4 { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; color: #fff; margin-bottom: 10px; text-transform: uppercase; }
  .tl-content p { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); margin: 0; }

  /* REVEAL ANIMATION */
  .reveal { opacity: 0; transform: translateY(40px); transition: 1s cubic-bezier(0.22, 1, 0.36, 1); }
  .reveal.active { opacity: 1; transform: translateY(0); }

  @media (max-width: 900px) {
    .glass-panel { padding: 30px 20px; }
    .stats-grid { grid-template-columns: 1fr; gap: 20px; }
    .principles-grid { grid-template-columns: 1fr; }
  }