@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Orbitron:wght@500;700&display=swap');

:root {
    --bg-main: #02000a;
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.1);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --accent: #00d2ff;
    --accent-glow: rgba(0, 210, 255, 0.4);
    --card-hover: rgba(255, 255, 255, 0.08);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Background Stars Animation */
#stars, #stars2, #stars3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 200vw;
    height: 200vh;
    z-index: -1;
}

#stars {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48Y2lyY2xlIGN4PSIxNDYiIGN5PSI2MiIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC45IiAvPjxjaXJjbGUgY3g9IjEzMiIgY3k9IjQ2IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjciIC8+PGNpcmNsZSBjeD0iMTQwIiBjeT0iMTMwIiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjkzIiAvPjxjaXJjbGUgY3g9IjE1MyIgY3k9IjMyIiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjg1IiAvPjxjaXJjbGUgY3g9IjEyNSIgY3k9IjciIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNzYiIC8+PGNpcmNsZSBjeD0iNzIiIGN5PSIxOCIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC45NCIgLz48Y2lyY2xlIGN4PSIxMCIgY3k9IjU5IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjc1IiAvPjxjaXJjbGUgY3g9IjIyIiBjeT0iMTkyIiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjYxIiAvPjxjaXJjbGUgY3g9IjY1IiBjeT0iNTIiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuOCIgLz48Y2lyY2xlIGN4PSIxNjIiIGN5PSIxNyIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC43IiAvPjxjaXJjbGUgY3g9IjI1IiBjeT0iMTExIiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjgiIC8+PGNpcmNsZSBjeD0iMTk3IiBjeT0iMTc4IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjg2IiAvPjxjaXJjbGUgY3g9IjE0OCIgY3k9IjE0MiIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42NCIgLz48Y2lyY2xlIGN4PSI0IiBjeT0iMTk1IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjg2IiAvPjxjaXJjbGUgY3g9IjY2IiBjeT0iMTc0IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjg0IiAvPjxjaXJjbGUgY3g9IjE1MiIgY3k9Ijk0IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjY4IiAvPjxjaXJjbGUgY3g9IjE0MyIgY3k9IjE1NCIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC44OCIgLz48Y2lyY2xlIGN4PSI5IiBjeT0iMTMwIiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjYiIC8+PGNpcmNsZSBjeD0iMTE2IiBjeT0iMSIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC43NiIgLz48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2MiIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC44MyIgLz48Y2lyY2xlIGN4PSIxMzkiIGN5PSI5IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjg4IiAvPjxjaXJjbGUgY3g9IjE0NSIgY3k9IjEwNyIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42NCIgLz48Y2lyY2xlIGN4PSI3MSIgY3k9IjExOCIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC44MSIgLz48Y2lyY2xlIGN4PSIxNDciIGN5PSIxNjYiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuOTkiIC8+PGNpcmNsZSBjeD0iMTgwIiBjeT0iMTI1IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjc2IiAvPjxjaXJjbGUgY3g9IjE4NSIgY3k9IjEyNCIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42OSIgLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjAiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuODEiIC8+PGNpcmNsZSBjeD0iMTMzIiBjeT0iMTI5IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjczIiAvPjxjaXJjbGUgY3g9IjgxIiBjeT0iMTMzIiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjcxIiAvPjxjaXJjbGUgY3g9IjM2IiBjeT0iMTkwIiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjkxIiAvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMjciIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNjQiIC8+PGNpcmNsZSBjeD0iMTE3IiBjeT0iMTU0IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjk2IiAvPjxjaXJjbGUgY3g9IjI5IiBjeT0iMiIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42NCIgLz48Y2lyY2xlIGN4PSI1IiBjeT0iMTQ1IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjg4IiAvPjxjaXJjbGUgY3g9IjE5MyIgY3k9IjE3NSIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42NiIgLz48Y2lyY2xlIGN4PSIxMjUiIGN5PSIxMDciIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNzQiIC8+PGNpcmNsZSBjeD0iMjgiIGN5PSIxMDkiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuOTMiIC8+PGNpcmNsZSBjeD0iMTY2IiBjeT0iMTE3IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjkzIiAvPjxjaXJjbGUgY3g9IjM4IiBjeT0iMTgzIiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjY5IiAvPjxjaXJjbGUgY3g9IjEzIiBjeT0iMjIiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNjUiIC8+PGNpcmNsZSBjeD0iODEiIGN5PSI1MCIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC45NCIgLz48Y2lyY2xlIGN4PSIxMDIiIGN5PSIxODkiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNjEiIC8+PGNpcmNsZSBjeD0iMjAiIGN5PSIxNSIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC43MiIgLz48Y2lyY2xlIGN4PSIyNiIgY3k9IjIiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNjYiIC8+PGNpcmNsZSBjeD0iMTMiIGN5PSIxNjgiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuOTQiIC8+PGNpcmNsZSBjeD0iODIiIGN5PSIyMDAiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNzMiIC8+PGNpcmNsZSBjeD0iNjkiIGN5PSIzNiIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42MiIgLz48Y2lyY2xlIGN4PSIxMjgiIGN5PSIxNjIiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuODUiIC8+PGNpcmNsZSBjeD0iNDQiIGN5PSIxNjkiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNyIgLz48Y2lyY2xlIGN4PSIxMDUiIGN5PSI0MSIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42NSIgLz48Y2lyY2xlIGN4PSIxMTUiIGN5PSIxOTYiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNjMiIC8+PGNpcmNsZSBjeD0iNDEiIGN5PSI0NiIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42MSIgLz48Y2lyY2xlIGN4PSIxMDQiIGN5PSI4NyIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42NSIgLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjQiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuODIiIC8+PGNpcmNsZSBjeD0iMTM5IiBjeT0iMTczIiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjYzIiAvPjxjaXJjbGUgY3g9Ijc1IiBjeT0iMTQzIiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjY0IiAvPjxjaXJjbGUgY3g9IjYxIiBjeT0iMTk5IiByPSIwLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjc0IiAvPjxjaXJjbGUgY3g9IjE3NSIgY3k9IjEzMSIgcj0iMC41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42OCIgLz48Y2lyY2xlIGN4PSIxNDQiIGN5PSIxNTkiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuOCIgLz48Y2lyY2xlIGN4PSIxNjciIGN5PSIxODMiIHI9IjAuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuOTIiIC8+PC9zdmc+");
    animation: animStar 50s linear infinite;
    will-change: transform;
}
#stars2 {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48Y2lyY2xlIGN4PSIxODgiIGN5PSI1NiIgcj0iMS4wIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC43MiIgLz48Y2lyY2xlIGN4PSIxMjEiIGN5PSI3NyIgcj0iMS4wIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC44NyIgLz48Y2lyY2xlIGN4PSIyNjgiIGN5PSIyNTYiIHI9IjEuMCIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuOTIiIC8+PGNpcmNsZSBjeD0iMTA5IiBjeT0iMTc5IiByPSIxLjAiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjcyIiAvPjxjaXJjbGUgY3g9IjI3NiIgY3k9IjIxMyIgcj0iMS4wIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC45OSIgLz48Y2lyY2xlIGN4PSIxMDkiIGN5PSIxNTMiIHI9IjEuMCIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNjMiIC8+PGNpcmNsZSBjeD0iMTM3IiBjeT0iNjMiIHI9IjEuMCIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNjQiIC8+PGNpcmNsZSBjeD0iMTUzIiBjeT0iMTA3IiByPSIxLjAiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjcyIiAvPjxjaXJjbGUgY3g9IjIyNiIgY3k9IjE2NyIgcj0iMS4wIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42MyIgLz48Y2lyY2xlIGN4PSIyODAiIGN5PSIyNDUiIHI9IjEuMCIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuODQiIC8+PGNpcmNsZSBjeD0iMjA0IiBjeT0iMjcxIiByPSIxLjAiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjg3IiAvPjxjaXJjbGUgY3g9IjgyIiBjeT0iMTkyIiByPSIxLjAiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjgiIC8+PGNpcmNsZSBjeD0iMTQ0IiBjeT0iMTYxIiByPSIxLjAiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjk1IiAvPjxjaXJjbGUgY3g9IjEwMyIgY3k9IjE5MiIgcj0iMS4wIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42NSIgLz48Y2lyY2xlIGN4PSIxNzMiIGN5PSIxMzgiIHI9IjEuMCIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNjciIC8+PGNpcmNsZSBjeD0iMjUyIiBjeT0iMjQ3IiByPSIxLjAiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjc1IiAvPjxjaXJjbGUgY3g9IjIxMiIgY3k9IjI4IiByPSIxLjAiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjc3IiAvPjxjaXJjbGUgY3g9IjE4OCIgY3k9IjE2MSIgcj0iMS4wIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42NCIgLz48Y2lyY2xlIGN4PSI1MSIgY3k9IjI0IiByPSIxLjAiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjgzIiAvPjxjaXJjbGUgY3g9IjEyMyIgY3k9IjE3NiIgcj0iMS4wIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC44OSIgLz48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMjYiIHI9IjEuMCIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNzUiIC8+PGNpcmNsZSBjeD0iMTEwIiBjeT0iMTk2IiByPSIxLjAiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjkxIiAvPjxjaXJjbGUgY3g9IjE5MyIgY3k9IjI1NyIgcj0iMS4wIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC43NyIgLz48Y2lyY2xlIGN4PSI4NyIgY3k9IjY5IiByPSIxLjAiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjciIC8+PGNpcmNsZSBjeD0iNzYiIGN5PSIyMCIgcj0iMS4wIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC45MiIgLz48Y2lyY2xlIGN4PSIxNyIgY3k9IjE5NSIgcj0iMS4wIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC44OCIgLz48Y2lyY2xlIGN4PSIyNzMiIGN5PSIyNiIgcj0iMS4wIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC45NSIgLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjEyMSIgcj0iMS4wIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC45NCIgLz48Y2lyY2xlIGN4PSIyMTciIGN5PSIyNTAiIHI9IjEuMCIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuOTQiIC8+PGNpcmNsZSBjeD0iNjUiIGN5PSIyNTQiIHI9IjEuMCIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNjUiIC8+PC9zdmc+");
    animation: animStar 100s linear infinite;
    will-change: transform;
}
#stars3 {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj48Y2lyY2xlIGN4PSIxMzUiIGN5PSI0NiIgcj0iMy4zNzUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjIiIC8+PGNpcmNsZSBjeD0iMTM1IiBjeT0iNDYiIHI9IjIuMjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjc4IiAvPjxjaXJjbGUgY3g9IjM2IiBjeT0iMzM3IiByPSIxLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjc0IiAvPjxsaW5lIHgxPSIzMy4wIiB5MT0iMzM3IiB4Mj0iMzkuMCIgeTI9IjMzNyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIwLjM3Ii8+PGxpbmUgeDE9IjM2IiB5MT0iMzM0LjAiIHgyPSIzNiIgeTI9IjM0MC4wIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9IjAuMzciLz48Y2lyY2xlIGN4PSIyNjYiIGN5PSIyMjYiIHI9IjEuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuOSIgLz48bGluZSB4MT0iMjYzLjAiIHkxPSIyMjYiIHgyPSIyNjkuMCIgeTI9IjIyNiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIwLjQ1Ii8+PGxpbmUgeDE9IjI2NiIgeTE9IjIyMy4wIiB4Mj0iMjY2IiB5Mj0iMjI5LjAiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMC40NSIvPjxjaXJjbGUgY3g9IjUxIiBjeT0iMzE0IiByPSIzLjM3NSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuMiIgLz48Y2lyY2xlIGN4PSI1MSIgY3k9IjMxNCIgcj0iMi4yNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuODkiIC8+PGNpcmNsZSBjeD0iNjUiIGN5PSIxIiByPSIzLjM3NSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuMiIgLz48Y2lyY2xlIGN4PSI2NSIgY3k9IjEiIHI9IjIuMjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjcyIiAvPjxjaXJjbGUgY3g9IjQ3IiBjeT0iMTEwIiByPSIxLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjYiIC8+PGNpcmNsZSBjeD0iNzUiIGN5PSIxNDciIHI9IjMuMzc1IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC4yIiAvPjxjaXJjbGUgY3g9Ijc1IiBjeT0iMTQ3IiByPSIyLjI1IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC45IiAvPjxjaXJjbGUgY3g9IjIyMiIgY3k9IjIwMCIgcj0iMS41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC44OSIgLz48bGluZSB4MT0iMjE5LjAiIHkxPSIyMDAiIHgyPSIyMjUuMCIgeTI9IjIwMCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIwLjQ0NSIvPjxsaW5lIHgxPSIyMjIiIHkxPSIxOTcuMCIgeDI9IjIyMiIgeTI9IjIwMy4wIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9IjAuNDQ1Ii8+PGNpcmNsZSBjeD0iMzMwIiBjeT0iMTE4IiByPSIxLjUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjc5IiAvPjxjaXJjbGUgY3g9IjI1MyIgY3k9IjMzNyIgcj0iMS41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC44MyIgLz48Y2lyY2xlIGN4PSIxNTUiIGN5PSIzNCIgcj0iMS41IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42NyIgLz48bGluZSB4MT0iMTUyLjAiIHkxPSIzNCIgeDI9IjE1OC4wIiB5Mj0iMzQiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMC4zMzUiLz48bGluZSB4MT0iMTU1IiB5MT0iMzEuMCIgeDI9IjE1NSIgeTI9IjM3LjAiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMC4zMzUiLz48Y2lyY2xlIGN4PSIyNiIgY3k9IjUiIHI9IjMuMzc1IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC4yIiAvPjxjaXJjbGUgY3g9IjI2IiBjeT0iNSIgcj0iMi4yNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNjUiIC8+PGNpcmNsZSBjeD0iMTAiIGN5PSI3MCIgcj0iMy4zNzUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjIiIC8+PGNpcmNsZSBjeD0iMTAiIGN5PSI3MCIgcj0iMi4yNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuNzUiIC8+PGxpbmUgeDE9IjUuNSIgeTE9IjcwIiB4Mj0iMTQuNSIgeTI9IjcwIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9IjAuMzc1Ii8+PGxpbmUgeDE9IjEwIiB5MT0iNjUuNSIgeDI9IjEwIiB5Mj0iNzQuNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIwLjM3NSIvPjxjaXJjbGUgY3g9IjIxNyIgY3k9IjI0MiIgcj0iMy4zNzUiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjIiIC8+PGNpcmNsZSBjeD0iMjE3IiBjeT0iMjQyIiByPSIyLjI1IiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC42NiIgLz48Y2lyY2xlIGN4PSIxMTEiIGN5PSIzMTEiIHI9IjEuNSIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuOTMiIC8+PC9zdmc+");
    animation: animStar 150s linear infinite;
    will-change: transform;
}


@keyframes animStar {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-100vh);
    }
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 2rem 5%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: all 0.8s ease;
}

.logo-container {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
    transition: all 0.8s ease;
}

.partner-logos {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 70%;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 1.5rem;
    transition: all 0.8s ease;
}

.main-logo {
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
    transition: all 0.8s ease;
}

.partner-logos a {
    display: flex;
    align-items: center;
    height: 100%;
    transition: transform 0.3s ease;
}

.partner-logos a:hover {
    transform: scale(1.05);
}

.secondary-logo {
    height: 100%;
    object-fit: contain;
    opacity: 0.9;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
    transition: all 0.8s ease;
}

/* Visual balancing for different aspect ratios */
.minobrnauki-logo {
    transform: scale(0.85);
    margin: 0 -5px;
}
.roscosmos-logo {
    transform: scale(1.0);
}
.fasie-logo {
    transform: scale(1.35);
    margin: 0 12px;
}
.kadry-logo {
    transform: scale(1.4);
    margin: 0 12px;
}

.nav-btn {
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.8rem 1.5rem;
    border: 1px solid var(--card-border);
    border-radius: 30px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px var(--accent-glow);
    border-color: var(--accent);
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 4rem 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-title {
    font-family: 'Tektur', sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, #fff, #aab1ff, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(0, 210, 255, 0.3);
    text-align: center;
}

.subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 4rem;
    text-align: center;
}

/* Projects Grid */
.projects-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
}

.project-card {
    flex: 1 1 300px; /* Grow, shrink, base width */
    max-width: 350px;
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 2px; /* For animated border effect */
    text-decoration: none;
    color: var(--text-primary);
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 250px;
}

.card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease;
    z-index: 0;
    opacity: 0.5;
}

.project-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 210, 255, 0.2);
}

.project-card:hover .card-glow {
    transform: translate(-50%, -50%) scale(2);
}

.card-content {
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg, rgba(20,20,30,0.8) 0%, rgba(10,10,15,0.9) 100%);
    border-radius: 18px;
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.05);
}

.icon-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 20px rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.2);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.custom-horizontal-logo {
    width: 90%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.3));
    transition: transform 0.5s ease, filter 0.5s ease;
}

.card-content > img:only-child {
    margin: 0 auto !important;
}

.project-card:hover .icon-placeholder {
    transform: rotate(10deg) scale(1.1);
    box-shadow: 0 0 30px var(--accent-glow);
    border-color: var(--accent);
}

.project-card:hover .custom-horizontal-logo {
    transform: scale(1.1);
    box-shadow: none;
    border-color: transparent;
    filter: drop-shadow(0 0 20px rgba(0, 210, 255, 0.8));
}

.card-content h2 {
    font-family: 'Tektur', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    color: #e0e0ff;
}

.card-content h3 {
    font-family: 'Jura', sans-serif;
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Colorful placeholders for different cards */
.bg-rd { background: linear-gradient(135deg, #ff4b2b, #ff416c); }
.bg-orbit { background: linear-gradient(135deg, #00c6ff, #0072ff); }
.bg-steps { background: linear-gradient(135deg, #b92b27, #1565C0); }
.bg-spacepi { background-image: url('img/logo_spacepi.png'); background-color: #0b1a4a; }
.bg-aerocos { background: linear-gradient(135deg, #11998e, #38ef7d); }
.bg-duty { background: linear-gradient(135deg, #FC466B, #3F5EFB); }
.bg-moon { background: linear-gradient(135deg, #bdc3c7, #2c3e50); }

/* Footer */
.footer {
    padding: 2rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid var(--card-border);
    position: relative;
    z-index: 50;
    width: 100%;
}

.footer p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 992px) {
    .page-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .header {
        flex-direction: row;
        gap: 1.5rem;
        padding: 1.5rem 5%;
        flex-wrap: wrap;
        justify-content: center;
        transition: all 0.4s ease-in-out;
    }
    
    .logo-container {
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        flex-shrink: 1;
        min-width: 0;
        width: 100%;
        transition: all 0.4s ease-in-out;
    }
    
    .main-logo {
        height: 45px;
        flex: 0 0 100%;
        object-fit: contain;
        transition: all 0.4s ease-in-out;
    }
    
    .partner-logos {
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        border-left: none;
        padding-left: 0;
        gap: 1.5rem;
        width: 100%;
        transition: all 0.4s ease-in-out;
    }

    .partner-logos a {
        display: flex;
        justify-content: center;
        flex: 0 0 100%;
        height: auto;
        transition: all 0.4s ease-in-out;
    }
    
    .secondary-logo {
        height: 40px;
        width: auto;
        object-fit: contain;
        transition: all 0.4s ease-in-out;
    }

    .nav-links {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
        width: 100%;
        justify-content: center;
        transition: all 0.4s ease-in-out;
    }

    .nav-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.75rem;
    }

    @media (max-width: 400px) {
        .nav-btn:last-child {
            display: none;
        }
    }

    /* Scrolled Header State */
    .header.scrolled {
        padding: 0.6rem 3%;
        gap: 0.5rem;
    }
    
    .header.scrolled .logo-container {
        gap: 0.5rem;
        width: 100%;
        justify-content: center;
    }
    
    .header.scrolled .main-logo {
        height: 20px;
        flex: 0 0 auto;
    }
    
    .header.scrolled .partner-logos {
        flex: 0 0 auto;
        justify-content: center;
        padding-left: 0.5rem;
        margin: 0;
        gap: 0.6rem;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }

    .header.scrolled .partner-logos a {
        flex: 0 0 auto;
    }
    
    .header.scrolled .secondary-logo {
        height: 14px;
    }
    
    .header.scrolled .nav-links {
        width: auto;
    }

    .header.scrolled .fasie-logo { margin: 0 4px; }
    .header.scrolled .kadry-logo { margin: 0 4px; }
    
    .header.scrolled .nav-links {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 0.3rem;
    }
    
    .header.scrolled .nav-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .main-content {
        flex: 1;
        padding: 2rem 5%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }

    .subtitle {
        font-size: 0.9rem;
        margin-bottom: 2rem;
    }
    
    .projects-grid {
        grid-template-columns: 1fr; /* Full width for very small screens */
    }

    .project-card {
        min-height: 200px;
    }

    .card-content {
        padding: 1.5rem;
    }

    .icon-placeholder {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }

    .card-content h2 {
        font-size: 1rem;
    }

    .card-content h3 {
        font-size: 0.85rem;
    }
}

/* =========================================
   PROJECT DETAILS PAGE STYLES
   ========================================= */
.detail-header {
    justify-content: center;
}

.details-container {
    justify-content: space-between;
    width: 100%;
}

.back-btn {
    text-decoration: none;
    color: var(--accent);
    font-family: 'Jura', sans-serif;
    font-weight: 600;
    transition: all 0.3s ease;
}

.back-btn:hover {
    color: #fff;
    text-shadow: 0 0 10px var(--accent-glow);
}

.detail-content {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 5%;
}

.cosmic-article {
    background: rgba(10, 15, 30, 0.6);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 3rem;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 210, 255, 0.05);
    color: var(--text-primary);
}

.article-title {
    font-family: 'Tektur', sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2rem;
    letter-spacing: 2px;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    text-shadow: 0 0 20px rgba(0, 210, 255, 0.5);
}

.article-intro {
    font-family: 'Jura', sans-serif;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 3rem;
    color: var(--text-secondary);
    text-indent: 2rem;
}

.section-title {
    font-family: 'Tektur', sans-serif;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 210, 255, 0.3);
    padding-bottom: 0.5rem;
}

.tracks-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.glow-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.glow-box:hover {
    background: rgba(0, 210, 255, 0.05);
    border-color: rgba(0, 210, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.1);
    transform: translateY(-2px);
}

.track-title {
    font-family: 'Tektur', sans-serif;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 0.8rem;
}

.track-number {
    color: var(--accent);
}

.track-tag {
    font-family: 'Jura', sans-serif;
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.track-desc {
    font-family: 'Jura', sans-serif;
    line-height: 1.6;
    color: #aaa;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.info-title {
    font-family: 'Tektur', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #fff;
}

.info-list {
    list-style: none;
    padding: 0;
    font-family: 'Jura', sans-serif;
    color: #aaa;
    line-height: 1.8;
}

.info-list li strong {
    color: var(--accent);
    font-family: 'Tektur', sans-serif;
    font-weight: normal;
}

.info-deadline {
    font-family: 'Jura', sans-serif;
    font-size: 1.1rem;
    color: #aaa;
}

@media (max-width: 768px) {
    .cosmic-article {
        padding: 1.5rem;
    }
    
    .article-title {
        font-size: 1.8rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-header .details-container {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }
    
    .detail-header .back-btn {
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .detail-header img[class*="logo"] {
        height: 30px;
        width: auto;
        max-width: 60%;
    }
}

/* Fix for the main logo wrapper link to prevent overflowing */
.logo-container > a {
    display: inline-flex;
    align-items: center;
    height: 100%;
}