:root {
    --cyan: #00d2ff;
    --green: #39ff14;
    --bg: #05070a;
    --glass: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.1);
}

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

body {
    background-color: var(--bg);
    background-image: 
        radial-gradient(circle at 20% 30%, #161b22 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, #0d1117 0%, transparent 40%);
    color: #e0e6ed;
    font-family: 'JetBrains Mono', monospace;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- НАВИГАЦИЯ --- */
.top-nav {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 15px 5%; 
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(15px); 
    border-bottom: 1px solid var(--border);
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 1000;
}

.logo-box { display: flex; flex-direction: column; }

.logo {
    font-family: 'Orbitron', sans-serif; 
    font-size: 24px; 
    font-weight: 900;
    letter-spacing: 4px; 
    color: var(--cyan); 
    text-shadow: 0 0 15px var(--cyan);
}

.slogan { 
    display: block; font-size: 10px; color: #666; 
    text-transform: uppercase; letter-spacing: 2px; margin-top: 2px;
}

.nav-links { display: flex; list-style: none; gap: 25px; flex-wrap: wrap;}
.nav-links a { text-decoration: none; color: #888; transition: 0.3s; font-size: 14px; }
.nav-links a:hover { color: var(--cyan); }

/* --- ОСНОВНОЙ КОНТЕНТ --- */
.container { 
    padding: 120px 20px 80px; 
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto; 
    flex: 1; 
}

.glass-card {
    background: var(--glass); 
    backdrop-filter: blur(10px);
    border: 1px solid var(--border); 
    border-radius: 24px;
    padding: 40px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

/* Главные часы */
.main-clock-card { 
    text-align: center; 
    border-top: 4px solid var(--cyan); 
    margin-bottom: 60px; 
}

.badge { font-size: 12px; color: var(--cyan); letter-spacing: 3px; font-weight: bold; text-transform: uppercase;}
.sub-badge { color: #555; font-size: 10px; }

/* Адаптивный шрифт для главной даты */
.main-clock-card h1 {
    font-family: 'Orbitron', sans-serif; 
    /* Шрифт меняется от 1.5rem до 3.5rem в зависимости от ширины экрана */
    font-size: clamp(1.5rem, 5vw, 3.5rem); 
    color: #fff;
    margin: 25px 0; 
    letter-spacing: -1px;
    white-space: nowrap; 
}

.info-text { color: #555; font-size: 13px; margin-bottom: 30px; }

/* Сетка вариантов */
.section-title { text-align: center; margin-bottom: 40px; letter-spacing: 4px; font-weight: 300; color: #444; font-size: 1.2rem; }
.variants-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
}

.variant-card h3 { font-size: 14px; color: #888; margin-bottom: 15px; }

.code-box {
    background: #000; padding: 20px; border-radius: 12px;
    color: var(--green); 
    font-size: clamp(1rem, 2.5vw, 1.4rem); 
    margin: 20px 0;
    border-left: 4px solid var(--green); 
    text-align: center;
    overflow-x: auto; 
}

/* --- КНОПКИ --- */
.copy-btn {
    background: transparent; border: 1px solid var(--cyan); color: var(--cyan);
    padding: 12px 25px; border-radius: 8px; cursor: pointer;
    font-family: inherit; transition: 0.4s; width: 100%;
    font-size: 14px; font-weight: bold;
}

.copy-btn:hover { background: var(--cyan); color: #000; box-shadow: 0 0 25px var(--cyan); }
.main-copy { max-width: 300px; }

/* --- ИНФО БЛОК --- */
.info-block { margin-top: 50px; text-align: center; }

.haza {
    font-size: 1.1em;
    font-weight: bold;
    color: #edece6;
    line-height: 1.6;
}

.haza a {
    text-decoration: none;
    background-image: linear-gradient(to right, #866634 0, #cb9b51 2%, #ddc027 45%, #7e7823 50%, #f6e27a 55%, #cb9b51 78%, #462523 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    transition: 0.3s;
}

.haza a:hover { opacity: 0.8; text-decoration: underline; -webkit-text-fill-color: #ffd700; }

/* --- ФУТЕР --- */
.footer { padding: 40px 20px; background: #000; border-top: 1px solid var(--border); margin-top: auto; }
.footer-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-copy { color: #d1d0d0; font-size: 12px; }
.footer-links { display: flex; list-style: none; gap: 30px; }
.footer-links a { text-decoration: none; color: #666; font-size: 12px; transition: 0.3s; }
.footer-links a:hover { color: var(--cyan); }

/* --- АДАПТИВНОСТЬ (MEDIA QUERIES) --- */

@media (max-width: 900px) {
    .top-nav { flex-direction: column; padding: 20px; gap: 15px; position: relative; }
    .nav-links { gap: 15px; justify-content: center; }
    .container { padding-top: 40px; }
    .main-clock-card h1 { white-space: normal; line-height: 1.4; }
}

@media (max-width: 600px) {
    .logo { font-size: 20px; }
    .nav-links { flex-direction: column; align-items: center; gap: 10px; }
    .glass-card { padding: 20px; }
    .footer-content { flex-direction: column; text-align: center; }
    .variants-grid { grid-template-columns: 1fr; }
}