:root {
    --bg: #050505;
    --orange: #ff6b00;
    --orange-glow: rgba(255, 107, 0, 0.5);
    --card-bg: rgba(15, 15, 15, 0.7);
    --border: rgba(255, 107, 0, 0.2);
    --text: #ededed;
    --text-muted: #888;
}

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

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 80px 20px;
    overflow-x: hidden;
}

/* Дизайн 3: Моноширинный шрифт */
.mono { font-family: 'Space Mono', monospace; letter-spacing: -0.5px; }

/* UI 3: Scroll Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; width: 0%; height: 3px;
    background: var(--orange);
    z-index: 1000;
    box-shadow: 0 0 10px var(--orange);
}

/* UI 2 & Дизайн 2: Шум + Точечная сетка */
.noise-overlay {
    position: fixed; inset: 0; z-index: -1; opacity: 0.04; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.dot-matrix {
    position: fixed; inset: 0; z-index: -2;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* UI 6 & Дизайн 5: Жидкие пятна */
.blob {
    position: fixed; filter: blur(80px); z-index: -3; opacity: 0.4;
    border-radius: 50%; animation: float 10s infinite alternate ease-in-out;
}
.blob-1 { width: 400px; height: 400px; background: var(--orange-glow); top: 10%; left: 20%; }
.blob-2 { width: 300px; height: 300px; background: rgba(200, 50, 0, 0.4); bottom: 10%; right: 20%; animation-delay: -5s; }

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, 50px) scale(1.2); }
}

.container { max-width: 900px; width: 100%; position: relative; }

/* Дизайн 10: Градиентный текст */
.gradient-text {
    background: linear-gradient(90deg, #fff, var(--orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Дизайн 6: Glitch Эффект */
.glitch { position: relative; font-size: 3.5rem; font-weight: 800; margin-bottom: 10px; }
.glitch::before, .glitch::after {
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.glitch::before {
    left: 2px; text-shadow: -2px 0 var(--orange); clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim 3s infinite linear alternate-reverse;
}
.glitch::after {
    left: -2px; text-shadow: -2px 0 blue; clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(20px, 9999px, 85px, 0); }
    20% { clip: rect(70px, 9999px, 15px, 0); }
    40% { clip: rect(10px, 9999px, 50px, 0); }
    60% { clip: rect(80px, 9999px, 20px, 0); }
    80% { clip: rect(30px, 9999px, 90px, 0); }
    100% { clip: rect(50px, 9999px, 30px, 0); }
}

header { text-align: center; margin-bottom: 50px; }
.status-badge { display: inline-flex; gap: 8px; padding: 5px 10px; border: 1px solid var(--border); color: var(--orange); font-size: 0.8rem; margin-bottom: 15px; }
.pulse-dot { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 10px var(--orange); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Bento Grid */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 160px; gap: 16px; }

.card {
    position: relative; border-radius: 16px; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; overflow: hidden;
}

/* Внутренний фон карточки (поверх анимаций луча) */
.card-inner {
    background: var(--card-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 24px;
    height: 100%; width: 100%; z-index: 2; position: relative; transition: all 0.3s;
    display: flex; flex-direction: column; justify-content: center;
}
.card:hover .card-inner { background: rgba(20,20,20,0.9); }

/* Дизайн 1: Border Beam (Бегающий луч) */
.animated-border::before {
    content: ''; position: absolute; inset: -50%; z-index: 1;
    background: conic-gradient(from 0deg, transparent 70%, var(--orange) 100%);
    animation: rotate-beam 4s linear infinite; opacity: 0; transition: opacity 0.3s;
}
.animated-border:hover::before { opacity: 1; }
/* Защита от перекрытия контента */
.animated-border .card-inner { inset: 1px; position: absolute; height: calc(100% - 2px); width: calc(100% - 2px); }

@keyframes rotate-beam { 100% { transform: rotate(360deg); } }

/* Дизайн 9: Чертежные элементы (Крестики) */
.blueprint-mark { position: absolute; color: var(--border); font-family: monospace; font-size: 14px; pointer-events: none; }
.mark-tl { top: 8px; left: 10px; }
.mark-br { bottom: 8px; right: 10px; }
.mark-tr { top: 8px; right: 10px; }

/* Настройки ячеек */
.telegram { grid-column: span 2; }
.projects { grid-column: span 2; grid-row: span 2; }
.projects .card-inner { justify-content: flex-start; }

.card-icon i { color: var(--orange); margin-bottom: 10px; }
.text-small { font-size: 0.8rem; color: var(--text-muted); margin-top: 5px; }

/* Дизайн 7: Marquee (Бегущая строка) */
.tech { grid-column: span 3; grid-row: span 1; padding: 0;}
.marquee-container .card-inner { padding: 0; justify-content: center; }
.marquee { display: flex; white-space: nowrap; overflow: hidden; width: 100%; color: var(--orange); }
.marquee span { padding-right: 30px; animation: scroll-left 15s linear infinite; font-size: 1.2rem; }

@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* Списки */
.card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 10px;}
.project-list { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.project-list li { display: flex; justify-content: space-between; align-items: center; }
.project-link { color: var(--orange); text-decoration: none; font-size: 0.85rem; }
.project-link:hover { text-decoration: underline; }

/* UI 5: Skeleton Loader */
.skeleton-active {
    background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 16px;
    pointer-events: none;
}
.skeleton-active * { opacity: 0 !important; }

@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Эквалайзер */
.equalizer { display: flex; gap: 4px; height: 20px; align-items: flex-end; margin-top: 10px; }
.equalizer span { width: 4px; background: var(--orange); animation: eq 1s ease-in-out infinite alternate; }
.equalizer span:nth-child(2) { animation-delay: 0.2s; }
.equalizer span:nth-child(3) { animation-delay: 0.4s; }
@keyframes eq { 0% { height: 30%; } 100% { height: 100%; } }

@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr; }
    .telegram, .projects, .tech { grid-column: span 1; }
}