/* ===== PSIKHO ===== */
:root { --psikho-bg: #0a111a; --psikho-bg-gradient: linear-gradient(135deg, #0a111a 0%, #080f16 100%); --psikho-text: #e2e8f0; --psikho-text-secondary: #94a3b8; --psikho-accent: #06b6d4; --psikho-accent-dark: #0891b2; --psikho-accent-light: #22d3ee; --psikho-hot: #f97316; --psikho-hot-dark: #ea580c; --psikho-card-bg: #0f1a28; --psikho-card-bg-hover: #122032; --container-padding: 24px;}
.psikho-section { background: var(--psikho-bg-gradient); padding: 0 var(--container-padding); margin-bottom: 80px; color: var(--psikho-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; position: relative; overflow: hidden; border-radius: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 80px rgba(6, 182, 212, 0.1);}
.psikho-circuit { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;}
.circuit-line { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.15), transparent); animation: circuitFlow var(--duration, 15s) linear infinite;}
.circuit-line:nth-child(1) { top: 15%; width: 40%; left: -40%; --duration: 18s; }
.circuit-line:nth-child(2) { top: 30%; width: 60%; left: -60%; --duration: 22s; }
.circuit-line:nth-child(3) { top: 45%; width: 50%; left: -50%; --duration: 20s; }
.circuit-line:nth-child(4) { top: 60%; width: 70%; left: -70%; --duration: 25s; }
.circuit-line:nth-child(5) { top: 75%; width: 45%; left: -45%; --duration: 19s; }
.circuit-line:nth-child(6) { top: 20%; width: 55%; left: -55%; --duration: 21s; }
.circuit-line:nth-child(7) { top: 35%; width: 65%; left: -65%; --duration: 23s; }
.circuit-line:nth-child(8) { top: 50%; width: 50%; left: -50%; --duration: 17s; }
@keyframes circuitFlow { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 0.3; } 50% { opacity: 0.6; } 90% { opacity: 0.3; } 100% { transform: translateX(150%); opacity: 0; }}
.psikho-data-flow { position: absolute; inset: 0; pointer-events: none; z-index: 1;}
.data-particle { position: absolute; width: 6px; height: 6px; background: radial-gradient(circle, var(--psikho-accent) 0%, transparent 70%); border-radius: 50%; opacity: 0.4; animation: dataFlow var(--duration, 8s) linear infinite; box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);}
.data-particle:nth-child(1) { top: 10%; left: 20%; --duration: 10s; width: 8px; height: 8px; }
.data-particle:nth-child(2) { top: 25%; left: 65%; --duration: 12s; }
.data-particle:nth-child(3) { top: 40%; left: 35%; --duration: 9s; width: 10px; height: 10px; }
.data-particle:nth-child(4) { top: 55%; left: 80%; --duration: 11s; }
.data-particle:nth-child(5) { top: 70%; left: 15%; --duration: 8s; width: 8px; height: 8px; }
.data-particle:nth-child(6) { top: 18%; left: 48%; --duration: 13s; }
.data-particle:nth-child(7) { top: 32%; left: 12%; --duration: 10s; width: 6px; height: 6px; }
.data-particle:nth-child(8) { top: 48%; left: 58%; --duration: 9s; }
@keyframes dataFlow { 0% { transform: translate(0, 0) scale(0.5); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.8; } 100% { transform: translate(var(--tx, 100px), var(--ty, -50px)) scale(1.5); opacity: 0; }}
.data-particle:nth-child(1) { --tx: 150px; --ty: -80px; }
.data-particle:nth-child(2) { --tx: -100px; --ty: -120px; }
.data-particle:nth-child(3) { --tx: 200px; --ty: -60px; }
.data-particle:nth-child(4) { --tx: -150px; --ty: -90px; }
.data-particle:nth-child(5) { --tx: 120px; --ty: -100px; }
.data-particle:nth-child(6) { --tx: -80px; --ty: -150px; }
.data-particle:nth-child(7) { --tx: 180px; --ty: -70px; }
.data-particle:nth-child(8) { --tx: -130px; --ty: -110px; }
.psikho-grid-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image:  linear-gradient(rgba(6, 182, 212, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 182, 212, 0.02) 1px, transparent 1px); background-size: 30px 30px;}
.psikho-header { position: relative; z-index: 3; text-align: center; padding: 90px 0 70px; margin: 0 auto; background: rgba(15, 26, 40, 0.4); border-radius: 28px; margin-bottom: 50px; border: 1px solid rgba(6, 182, 212, 0.15); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(6, 182, 212, 0.08); backdrop-filter: blur(10px);}
.psikho-header-glow { position: absolute; inset: -20px; background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%); border-radius: 32px; z-index: -1; animation: headerGlow 6s ease-in-out infinite; opacity: 0.3;}
@keyframes headerGlow { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.05); }}
.psikho-header-icon { width: 140px; height: 140px; margin: 0 auto 32px; position: relative; display: flex; align-items: center; justify-content: center;}
.psikho-icon { font-size: 64px; color: var(--psikho-accent); position: relative; z-index: 2; text-shadow: 0 0 30px rgba(6, 182, 212, 0.6), 0 0 60px rgba(6, 182, 212, 0.3); animation: iconFloat 3s ease-in-out infinite;}
@keyframes iconFloat { 0%, 100% { transform: translateY(0) rotate(0deg); text-shadow: 0 0 20px rgba(6, 182, 212, 0.4), 0 0 40px rgba(6, 182, 212, 0.2); } 50% { transform: translateY(-8px) rotate(5deg); text-shadow: 0 0 40px rgba(6, 182, 212, 0.8), 0 0 80px rgba(6, 182, 212, 0.5); }}
.psikho-icon-pulse { position: absolute; inset: -10px; background: radial-gradient(circle, transparent 40%, rgba(6, 182, 212, 0.3) 70%, transparent 80%); border-radius: 50%; animation: iconPulse 2s ease-in-out infinite; opacity: 0.6; z-index: 1}
@keyframes iconPulse { 0% { transform: scale(0.8); opacity: 0.3; } 70% { transform: scale(1.2); opacity: 0.6; } 100% { transform: scale(1.4); opacity: 0; }}
.psikho-header h3 { font-size: 3.6rem; font-weight: 800; margin: 0 0 24px; color: var(--psikho-text); line-height: 1.15; text-shadow: 0 0 30px rgba(6, 182, 212, 0.4); background: linear-gradient(90deg, var(--psikho-text), var(--psikho-accent), var(--psikho-accent-light), var(--psikho-text)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; letter-spacing: -1.5px;}
.psikho-header h3::after {content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 180px; height: 4px; background: linear-gradient(90deg, transparent, var(--psikho-accent), var(--psikho-accent-light), transparent); border-radius: 2px; box-shadow: 0 0 30px rgba(6, 182, 212, 0.6);}
.psikho-header-desc { font-size: 1.45rem; color: var(--psikho-text-secondary); line-height: 1.7; max-width: 750px; margin: 0 auto 40px; font-style: italic; position: relative; z-index: 2;}
.psikho-quote { position: relative; max-width: 700px; margin: 50px auto 0; padding: 40px; background: rgba(15, 26, 40, 0.6); border-radius: 20px; border-left: 4px solid var(--psikho-accent); box-shadow: 0 8px 32px rgba(6, 182, 212, 0.15), inset 0 0 20px rgba(6, 182, 212, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(6, 182, 212, 0.1);}
.quote-glow { position: absolute; inset: -5px; background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%); border-radius: 22px; z-index: -1; opacity: 0.2; animation: quoteGlow 4s ease-in-out infinite;}
@keyframes quoteGlow { 0%, 100% { opacity: 0.15; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.03); }}
.psikho-quote blockquote { font-size: 1.7rem; font-weight: 600; line-height: 1.6; color: var(--psikho-text); margin: 0 0 20px; position: relative; font-style: normal; letter-spacing: -0.8px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}
.psikho-quote blockquote::before { content: '«'; position: absolute; left: -30px; top: -20px; font-size: 6rem; color: rgba(6, 182, 212, 0.08); font-family: Georgia, serif; line-height: 1; z-index: -1;}
.psikho-quote blockquote::after { content: '»'; position: absolute; right: -30px; bottom: -35px; font-size: 6rem; color: rgba(6, 182, 212, 0.08); font-family: Georgia, serif; line-height: 1; z-index: -1;}
.psikho-quote cite { display: block; font-size: 1.15rem; color: var(--psikho-accent-light); font-weight: 700; text-align: right; margin-top: 12px; font-style: normal; letter-spacing: 0.8px; text-shadow: 0 0 10px rgba(6, 182, 212, 0.3);}
.psikho-topics-wrapper { background: rgba(15, 26, 40, 0.5); border-radius: 28px; padding: 50px 40px; margin-bottom: 70px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), inset 0 0 50px rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.2); position: relative; overflow: hidden; z-index: 2; backdrop-filter: blur(10px);}
.psikho-topics-wrapper::before {content: '';position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--psikho-accent), var(--psikho-accent-light), transparent); z-index: 3;}
.psikho-topics-title { font-size: 2.4rem; font-weight: 700; margin: 0 0 40px; color: var(--psikho-text); text-align: center; position: relative; padding-bottom: 24px; z-index: 2;}
.psikho-topics-title::after {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 4px; background: linear-gradient(90deg, transparent, var(--psikho-accent), transparent); border-radius: 2px; box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);}
.psikho-topics-container { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto;}
.psikho-topics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px;}
.psikho-topic { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; background: rgba(15, 26, 40, 0.6); border-radius: 20px; text-decoration: none; color: var(--psikho-text-secondary); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); border: 1px solid rgba(6, 182, 212, 0.15); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; text-align: center; gap: 16px; backdrop-filter: blur(8px);}
.topic-icon-bg { position: absolute; width: 100px; height: 100px; background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, transparent 70%); border-radius: 50%; z-index: -1; opacity: 0; transition: opacity 0.4s;}
.psikho-topic::before {content: '';position: absolute; inset: 0; background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), transparent); opacity: 0; transition: opacity 0.3s; z-index: -1;}
.psikho-topic::after {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); width: 70%; height: 3px; background: var(--psikho-accent); border-radius: 2px; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 1;}
.psikho-topic:hover { transform: translateY(-4px) scale(1.04); color: var(--psikho-text); background: rgba(18, 32, 50, 0.85); box-shadow: 0 16px 40px rgba(6, 182, 212, 0.3), 0 0 40px rgba(6, 182, 212, 0.2); border-color: rgba(6, 182, 212, 0.4); z-index: 10;}
.psikho-topic:hover .topic-icon-bg { opacity: 1;}
.psikho-topic:hover::before { opacity: 1;}
.psikho-topic:hover::after { transform: translateX(-50%) scaleX(1);}
.psikho-topic i { font-size: 36px; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); color: var(--psikho-accent); filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.5)); position: relative; z-index: 2;}
.psikho-topic span { font-size: 15px; font-weight: 600; transition: all 0.3s; position: relative; z-index: 2; line-height: 1.4; display: block; letter-spacing: 0.5px;}
.psikho-topic:hover i { transform: scale(1.3) rotate(10deg); filter: drop-shadow(0 0 25px var(--psikho-accent)); color: var(--psikho-accent-light);}
.psikho-topic:hover span { color: var(--psikho-text); transform: translateY(4px);}
.psikho-topic.hot { border-color: rgba(249, 115, 22, 0.3); box-shadow: 0 8px 24px rgba(249, 115, 22, 0.15), 0 0 30px rgba(249, 115, 22, 0.08); position: relative; overflow: hidden;}
.psikho-topic.hot::before { background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(6, 182, 212, 0.08));}
.psikho-topic.hot i { color: var(--psikho-hot); filter: drop-shadow(0 0 15px rgba(249, 115, 22, 0.5));}
.psikho-topic.hot:hover { box-shadow: 0 16px 40px rgba(249, 115, 22, 0.4), 0 0 50px rgba(249, 115, 22, 0.3), 0 0 40px rgba(6, 182, 212, 0.2); border-color: rgba(249, 115, 22, 0.5);}
.psikho-topic.hot:hover i { color: var(--psikho-hot); filter: drop-shadow(0 0 25px var(--psikho-hot));}
.topic-hot-badge { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; background: linear-gradient(135deg, var(--psikho-hot), var(--psikho-hot-dark)); color: white; font-size: 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 5; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.5); animation: hotBadgePulse 2s ease-in-out infinite;}
@keyframes hotBadgePulse { 0%, 100% { transform: scale(1) rotate(0deg); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.5); } 50% { transform: scale(1.1) rotate(10deg); box-shadow: 0 6px 20px rgba(249, 115, 22, 0.8); }}
.psikho-topic:hover .topic-hot-badge { transform: scale(1.2) rotate(20deg); box-shadow: 0 6px 20px rgba(249, 115, 22, 0.8), 0 0 20px rgba(255, 255, 255, 0.3);}
.psikho-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; position: relative; z-index: 2; perspective: 1000px;}
.psikho-article { display: block; background: transparent; border-radius: 28px; text-decoration: none; color: var(--psikho-text); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); border: 1px solid rgba(6, 182, 212, 0.15); will-change: transform; transform-style: preserve-3d; cursor: pointer; overflow: hidden; backdrop-filter: blur(10px);}
.psikho-article { animation: psikho-float 10s ease-in-out infinite; animation-delay: calc(var(--delay, 0) * 0.5s);}
@keyframes psikho-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-10px) rotate(1deg); } 50% { transform: translateY(-5px) rotate(-1deg); } 75% { transform: translateY(-8px) rotate(0.5deg); }}
.psikho-article::before {content: '';position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(6, 182, 212, 0.12) 0%, transparent 40%), linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, transparent 60%); opacity: 0.6; transition: opacity 0.4s, background 0.8s; z-index: 0; pointer-events: none;}
.psikho-article::after { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15, 26, 40, 0.9) 0%, rgba(10, 17, 26, 0.95) 100%); z-index: 1; opacity: 0.9; transition: opacity 0.4s;}
.psikho-article:hover { transform: translateY(-1px) scale(1.04) rotate(0deg) !important; box-shadow: 0 4px 11px rgba(6, 182, 212, 0.4), 0 0 18px rgba(6, 182, 212, 0.3), 0 0 18px rgba(6, 182, 212, 0.2); border-color: rgba(6, 182, 212, 0.4); z-index: 20;}
.psikho-article:hover::before { opacity: 1; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(6, 182, 212, 0.2) 0%, transparent 50%), linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(249, 115, 22, 0.08) 100%);}
.psikho-article:hover::after { opacity: 0.7;}
.psikho-article.hot { border-color: rgba(249, 115, 22, 0.3); box-shadow: 0 4px 11px rgba(0, 0, 0, 0.5), 0 0 18px rgba(249, 115, 22, 0.25), 0 0 18px rgba(249, 115, 22, 0.15); animation: psikho-hot-pulse 2s ease-in-out infinite, psikho-float-hot 10s ease-in-out infinite; animation-delay: calc(var(--delay, 0) * 0.5s); position: relative; overflow: hidden;}
@keyframes psikho-hot-pulse { 0%, 100% { box-shadow: 0 4px 11px rgba(0, 0, 0, 0.5), 0 0 18px rgba(249, 115, 22, 0.25), 0 0 18px rgba(249, 115, 22, 0.15); transform: scale(1) rotate(0deg); } 50% { box-shadow: 0 4px 7px rgba(0, 0, 0, 0.5), 0 0 7px rgba(249, 115, 22, 0.45), 0 0 11px rgba(249, 115, 22, 0.35), 0 0 18px rgba(249, 115, 22, 0.25); transform: scale(1.03) rotate(1deg); }}
@keyframes psikho-float-hot { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-15px) rotate(2deg); } 50% { transform: translateY(-10px) rotate(-2deg); } 75% { transform: translateY(-12px) rotate(1deg); }}
.psikho-article.hot::before { background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(249, 115, 22, 0.15) 0%, transparent 40%), linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);}
.psikho-article.hot::after {content: '';background: linear-gradient(135deg, rgba(25, 38, 56, 0.95) 0%, rgba(20, 30, 45, 0.98) 100%);}
.psikho-article.hot:hover { box-shadow: 0 4px 7px rgba(249, 115, 22, 0.6), 0 0 9px rgba(249, 115, 22, 0.5), 0 0 18px rgba(249, 115, 22, 0.4), 0 0 180px rgba(249, 115, 22, 0.3); border-color: rgba(249, 115, 22, 0.6); transform: translateY(-4px) scale(1.06) rotate(0deg) !important;}
.psikho-article.hot:hover::before { opacity: 1; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(249, 115, 22, 0.25) 0%, transparent 50%), linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);}
.psikho-article-img,.psikho-article-bg { height: 240px; position: relative; overflow: hidden; border-radius: 28px 28px 0 0;}
.psikho-article-img::before {  content: '';  position: absolute;  inset: 0;  background: linear-gradient(180deg, rgba(11, 14, 26, 0.15) 0%, rgba(11, 14, 26, 0.4) 30%, rgba(11, 14, 26, 0.85) 100%),radial-gradient(circle at 70% 30%, rgba(108, 92, 231, 0.08) 0%, transparent 40%);  z-index: 1;}
.psikho-article-img::after {position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0%, rgba(6, 182, 212, 0.08) 100%); z-index: 2; opacity: 0; transition: opacity 0.5s;}
.psikho-article:hover .psikho-article-img::after { opacity: 1;}
.psikho-article-img img {  width: 100%;  height: 100%;  object-fit: cover;  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);  filter: saturate(1) contrast(1.05) brightness(0.95);  transform: scale(1.02);}
.psikho-article:hover .psikho-article-img img {  transform: scale(1.15);  filter: saturate(1.2) contrast(1.15) brightness(1.05) blur(0.5px);}
.psikho-article-bg { background: linear-gradient(135deg, #0f1a28 0%, #0a111a 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;}
.psikho-article-bg::before {position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(6, 182, 212, 0.12) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(249, 115, 22, 0.08) 0%, transparent 60%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 70%); z-index: 1;}
.psikho-article-bg i { font-size: 80px; color: rgba(6, 182, 212, 0.25); position: relative; z-index: 2; text-shadow: 0 0 40px rgba(6, 182, 212, 0.5); animation: psikho-symbol-float 8s ease-in-out infinite; animation-delay: calc(var(--delay, 0) * 0.3s);}
@keyframes psikho-symbol-float { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.2; } 50% { transform: translateY(-15px) rotate(10deg); opacity: 0.4; }}
.psikho-article-content { padding: 40px 32px 36px; position: relative; z-index: 3; background: rgba(10, 17, 26, 0.92); backdrop-filter: blur(15px); border-radius: 0 0 28px 28px; border-top: 1px solid rgba(6, 182, 212, 0.2);}
.psikho-article-content::before {position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background: linear-gradient(90deg, transparent, var(--psikho-accent), var(--psikho-accent-light), transparent); border-radius: 2px; box-shadow: 0 0 25px rgba(6, 182, 212, 0.5);}
.psikho-article-content h3 { font-size: 22px; font-weight: 700; margin: 0 0 20px; line-height: 1.45; color: var(--psikho-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; position: relative; letter-spacing: -0.8px; transition: all 0.3s; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}
.psikho-article-content h3::after {content: '';position: absolute; bottom: -8px; left: 0; width: 60px; height: 3px; background: linear-gradient(90deg, var(--psikho-accent), var(--psikho-accent-light)); opacity: 0; transition: opacity 0.4s, transform 0.4s; transform-origin: right; transform: scaleX(0); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);}
.psikho-article:hover .psikho-article-content h3 { color: var(--psikho-text); text-shadow: 0 0 20px rgba(6, 182, 212, 0.4); transform: translateY(-4px);}
.psikho-article:hover .psikho-article-content h3::after { opacity: 1; transform: scaleX(1); transform-origin: left;}
.psikho-meta { font-size: 14px; color: var(--psikho-text-secondary); display: flex; align-items: center; gap: 12px; position: relative; padding-left: 8px; transition: all 0.4s; font-weight: 500; letter-spacing: 0.3px;}
.psikho-meta::before {content: '';position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 16px; background: var(--psikho-accent); border-radius: 3px; opacity: 0; transition: opacity 0.4s, transform 0.4s; transform: translateY(-50%) scaleY(0.5);}
.psikho-article:hover .psikho-meta::before { opacity: 1; transform: translateY(-50%) scaleY(1);}
.psikho-article:hover .psikho-meta { color: var(--psikho-accent); transform: translateX(8px);}
.psikho-hot-label { position: absolute; top: 20px; right: 20px; background: linear-gradient(135deg, var(--psikho-hot), var(--psikho-hot-dark)); color: white; font-size: 13px; font-weight: 800; padding: 8px 16px; border-radius: 24px; z-index: 10; box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5); letter-spacing: 0.8px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); animation: psikho-hot-label-float 3s ease-in-out infinite; backdrop-filter: blur(8px); border: 2px solid rgba(255, 255, 255, 0.2);}
@keyframes psikho-hot-label-float { 0%, 100% { transform: translateY(0) rotate(0deg); box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5); } 50% { transform: translateY(-4px) rotate(2deg); box-shadow: 0 10px 30px rgba(249, 115, 22, 0.8); }}
.psikho-article:hover .psikho-hot-label { transform: scale(1.15) rotate(5deg); box-shadow: 0 10px 30px rgba(249, 115, 22, 0.8), 0 0 30px rgba(255, 255, 255, 0.4);}
.psikho-seo-block { margin-top: 100px; padding: 70px 90px; background: rgba(15, 26, 40, 0.6); border-radius: 28px; border: 1px solid rgba(6, 182, 212, 0.25); box-shadow: 0 15px 60px rgba(0, 0, 0, 0.6), inset 0 0 50px rgba(6, 182, 212, 0.08); backdrop-filter: blur(15px); position: relative; overflow: hidden; z-index: 2;}
.seo-glow { position: absolute; inset: -20px; background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, transparent 70%); border-radius: 32px; z-index: -1; opacity: 0.3;}
.psikho-seo-content { max-width: 850px; margin: 0 auto; position: relative; z-index: 2;}
.psikho-seo-content h3 { font-size: 2.4rem; font-weight: 700; margin: 0 0 32px; color: var(--psikho-text); text-align: center; position: relative; padding-bottom: 28px;}
.psikho-seo-content h3::after {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 4px; background: linear-gradient(90deg, transparent, var(--psikho-accent), transparent); border-radius: 2px; box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);}
.psikho-seo-content p { font-size: 1.15rem; color: var(--psikho-text-secondary); line-height: 1.9; margin: 0 0 20px; text-align: justify; position: relative; z-index: 2;}
.psikho-seo-content p:last-child { margin-bottom: 0;}
.psikho-seo-content p::before {position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--psikho-accent); border-radius: 50%; opacity: 0.3;}
@keyframes psikho-post-fade-in { 0% { opacity: 0; transform: translateY(40px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); }}
.psikho-article { animation: psikho-post-fade-in 0.9s ease-out forwards; animation-delay: calc(var(--index, 0) * 0.12s);}
@media (max-width: 1200px) { .psikho-posts-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; } .psikho-article-img, .psikho-article-bg { height: 220px; } .psikho-article-content { padding: 36px 28px 32px; } .psikho-article-content h3 { font-size: 20px; } .psikho-topics-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } .psikho-topic { padding: 36px 18px; gap: 14px; } .psikho-topic i { font-size: 32px; } .psikho-topic span { font-size: 14px; } .psikho-seo-block { padding: 60px 60px; } .psikho-seo-content h3 { font-size: 2.2rem; } .psikho-seo-content p { font-size: 1.1rem; }}
@media (max-width: 1024px) { .psikho-posts-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .psikho-article-img, .psikho-article-bg { height: 200px; } .psikho-article-content { padding: 32px 26px 28px; } .psikho-article-content h3 { font-size: 19px; } .psikho-topics-grid { grid-template-columns: repeat(4, 1fr); gap: 18px;} .psikho-topic { padding: 32px 16px; gap: 12px; } .psikho-topic i { font-size: 28px; } .psikho-topic span { font-size: 13px; } .psikho-seo-block { padding: 50px 50px; } .psikho-seo-content h3 { font-size: 2.0rem; } .psikho-seo-content p { font-size: 1.05rem; }}
@media (max-width: 840px) { .psikho-topics-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 768px) { .psikho-header { padding: 60px 24px 50px; border-radius: 24px; } .psikho-header h2 { font-size: 2.8rem; } .psikho-header-desc { font-size: 1.25rem; margin-bottom: 30px; } .psikho-quote { padding: 32px; margin: 40px auto 0; border-radius: 16px; } .psikho-quote blockquote { font-size: 1.5rem; } .psikho-topics-wrapper { padding: 36px 24px; border-radius: 24px; } .psikho-topics-title { font-size: 2.0rem; margin-bottom: 32px; } .psikho-topics-container { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0; margin: 0 -12px; } .psikho-topics-container::-webkit-scrollbar { display: none; } .psikho-topics-grid { display: flex; flex-wrap: nowrap; gap: 16px; min-width: 100%; padding: 27px; margin: 0; } .psikho-topic { flex: 0 0 calc(50% - 8px); min-width: calc(50% - 8px); padding: 28px 14px; gap: 10px; border-radius: 16px; } .psikho-topic i { font-size: 26px; } .psikho-topic span { font-size: 13px; }  .psikho-posts-grid { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 28px; padding: 36px; margin-top: 40px; scrollbar-width: none; } .psikho-posts-grid::-webkit-scrollbar { display: none; } .psikho-article { flex: 0 0 300px; min-width: 300px; max-width: 300px; animation: none !important; } .psikho-article-img, .psikho-article-bg { height: 200px; } .psikho-article-content { padding: 26px; } .psikho-article-content h3 { font-size: 18px; } .psikho-seo-block { display: none; }}
@media (max-width: 640px) { .psikho-article { flex: 0 0 280px; min-width: 280px; } .psikho-topic { flex: 0 0 calc(50% - 8px); min-width: calc(50% - 8px); }}
@media (max-width: 480px) { .psikho-header h2 { font-size: 2.4rem; } .psikho-header-desc { font-size: 1.15rem; } .psikho-quote { padding: 28px; margin: 30px auto 0; } .psikho-quote blockquote { font-size: 1.4rem; } .psikho-topics-title { font-size: 1.8rem; } .psikho-topic { flex: 0 0 calc(50% - 8px); min-width: calc(50% - 8px); padding: 24px 12px; gap: 8px; border-radius: 14px; } .psikho-topic i { font-size: 24px; } .psikho-topic span { font-size: 12px;}  .psikho-posts-grid { gap: 20px; padding: 8px 20px 40px; } .psikho-article { flex: 0 0 100%; min-width: 100%; max-width: 100%; } .psikho-article-img, .psikho-article-bg { height: 200px; } .psikho-article-content { padding: 24px; } .psikho-article-content h3 { font-size: 18px; }}
/* ===== INSIGHTN ===== */
.insight-nav { padding: 110px 24px 90px; background: radial-gradient(circle at 50% 20%, #10192a, #070b14 60%); border-radius: 28px; position: relative; overflow: hidden; max-width: 1500px; margin: 60px auto;}
.insight-nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 36px; max-width: 1300px; margin: 0 auto;}
.insight-item { position: relative; padding: 48px 36px; border-radius: 28px; background: rgba(20, 28, 45, 0.55); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.08); overflow: hidden; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease; transform-style: preserve-3d; perspective: 1000px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.insight-item.blue { --accent:#4f8cff; }
.insight-item.green { --accent:#3ddc84; }
.insight-item.emerald { --accent:#00c896; }
.insight-item.gold { --accent:#ffc857; }
.insight-item.cyan { --accent:#2ed3ff; }
.insight-item.red { --accent:#ff4d6d; }
.insight-glow {position:absolute; inset:0; background: radial-gradient(circle at var(--x,50%) var(--y,50%), color-mix(in srgb, var(--accent) 50%, transparent), transparent 60%); opacity:0; transition: opacity .3s ease; z-index:0;}
.insight-item::before {content: '';position:absolute; inset:-1px; border-radius:28px; padding:1px; background: linear-gradient(135deg,var(--accent),transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.4; transition: opacity .4s ease;}
.insight-item:hover { transform: translateY(-12px) rotateX(3deg) rotateY(-3deg); box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 40px color-mix(in srgb,var(--accent) 50%, transparent);
 border-color: rgba(255,255,255,.2);}
.insight-item:hover .insight-glow { opacity:.8;}
.insight-item:hover::before { opacity:1;}
.insight-icon { font-size: 52px; margin-bottom: 26px; transition: transform .4s ease, filter .4s ease; position: relative; z-index: 2; color: #fff; text-shadow:  0 2px 8px rgba(0,0,0,0.6), 0 0 12px rgba(255,255,255,0.3); filter: brightness(1.2) contrast(1.1);}
.insight-item:hover .insight-icon { transform: translateZ(40px) scale(1.2); filter: brightness(1.3) contrast(1.2); text-shadow:  0 4px 12px rgba(0,0,0,0.7), 0 0 25px var(--accent), 0 0 40px color-mix(in srgb, var(--accent) 70%, transparent);}
.insight-item.blue .insight-icon { color: #6b9bff; }
.insight-item.green .insight-icon { color: #55e599; }
.insight-item.emerald .insight-icon { color: #20d5a6; }
.insight-item.gold .insight-icon { color: #ffd97a; }
.insight-item.cyan .insight-icon { color: #4edaff; }
.insight-item.red .insight-icon { color: #ff6a86; }
@media(max-width:768px){ .insight-icon { font-size: 42px; margin-bottom: 20px; text-shadow:  0 2px 6px rgba(0,0,0,0.5), 0 0 8px rgba(255,255,255,0.25); filter: brightness(1.1) contrast(1.05); } .insight-item:hover .insight-icon { transform: translateZ(20px) scale(1.15); text-shadow:  0 3px 8px rgba(0,0,0,0.6), 0 0 15px var(--accent), 0 0 25px color-mix(in srgb, var(--accent) 50%, transparent); }}.insight-title { font-size:28px; font-weight:700; margin-bottom:18px; color:#fff; position:relative; z-index:2; text-align: center;}.insight-desc { font-size:16px; color:rgba(255,255,255,.75); line-height:1.6; position:relative; z-index:2; text-align: center;}
@media(max-width:768px){ .insight-nav {  padding:40px 16px; margin: 30px auto; }  .insight-nav-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:18px; padding: 10px 0; }  .insight-item { flex:0 0 240px;  scroll-snap-align:start; transform:none !important; padding: 32px 24px; min-height: 280px; }  .insight-item:hover { box-shadow: 0 15px 30px rgba(0,0,0,.4), 0 0 20px color-mix(in srgb,var(--accent) 30%, transparent); border-color: rgba(255,255,255,.15); transform: translateY(-6px) !important;  }  .insight-icon { font-size:42px;  margin-bottom:20px; }  .insight-title { font-size:22px;margin-bottom:14px; }  .insight-desc { font-size:14px;  line-height:1.5; } .insight-item::before { display: none; }  .insight-glow { display: none; }}
/* ===== CHAPKA ===== */
:root { --chapka-bg: #080b14; --chapka-bg-gradient: linear-gradient(135deg, #080b14 0%, #05070d 100%); --chapka-text: #ffffff; --chapka-text-secondary: #a8b4d8; --chapka-accent: #6b9bff; --chapka-accent-light: #8a6bff; --chapka-glow: #00f3ff; --chapka-hot: #ff6b35; --chapka-border: rgba(107, 155, 255, 0.15); --chapka-quote-bg: rgba(15, 22, 38, 0.45);}
.chapka-hero { position: relative; min-height: 100vh; display: flex; align-items: center; border-radius: 28px; justify-content: center; padding: 120px 24px 100px; background: var(--chapka-bg-gradient); color: var(--chapka-text); overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; border-bottom: 1px solid var(--chapka-border);}
.chapka-background { position: absolute; inset: 0; pointer-events: none; z-index: 0;}
.chapka-bg-blur { position: absolute; inset: 0; background: rgb(8 11 20 / 46%);backdrop-filter: blur(2px); z-index: 1; pointer-events: none;}
.chapka-stars { position: absolute; inset: 0; z-index: 0;}
.chapka-hero .star { position: absolute; width: 2px; height: 2px; background: var(--chapka-accent); border-radius: 50%; box-shadow: 0 0 8px var(--chapka-accent); animation: chapka-starTwinkle var(--duration, 3s) ease-in-out infinite; opacity: var(--opacity, 0.4);}
.chapka-hero .star:nth-child(1) { top: 10%; left: 15%; --duration: 4s; --opacity: 0.6; width: 3px; height: 3px; }
.chapka-hero .star:nth-child(2) { top: 25%; left: 65%; --duration: 5s; --opacity: 0.3; }
.chapka-hero .star:nth-child(3) { top: 45%; left: 35%; --duration: 3.5s; --opacity: 0.5; width: 2.5px; height: 2.5px; }
.chapka-hero .star:nth-child(4) { top: 60%; left: 85%; --duration: 4.5s; --opacity: 0.4; }
.chapka-hero .star:nth-child(5) { top: 75%; left: 25%; --duration: 3s; --opacity: 0.7; width: 3px; height: 3px; }
.chapka-hero .star:nth-child(6) { top: 15%; left: 45%; --duration: 5.5s; --opacity: 0.2; }
.chapka-hero .star:nth-child(7) { top: 35%; left: 10%; --duration: 4s; --opacity: 0.5; width: 2.5px; height: 2.5px; }
.chapka-hero .star:nth-child(8) { top: 55%; left: 55%; --duration: 3.8s; --opacity: 0.6; }
.chapka-hero .star:nth-child(9) { top: 80%; left: 75%; --duration: 4.2s; --opacity: 0.3; width: 3px; height: 3px; }
.chapka-hero .star:nth-child(10) { top: 20%; left: 80%; --duration: 5s; --opacity: 0.4; }
.chapka-hero .star:nth-child(11) { top: 40%; left: 20%; --duration: 3.6s; --opacity: 0.5; }
.chapka-hero .star:nth-child(12) { top: 65%; left: 40%; --duration: 4.8s; --opacity: 0.6; width: 2.5px; height: 2.5px; }
.chapka-hero .star:nth-child(13) { top: 10%; left: 60%; --duration: 4s; --opacity: 0.3; }
.chapka-hero .star:nth-child(14) { top: 30%; left: 85%; --duration: 5.2s; --opacity: 0.4; width: 3px; height: 3px; }
.chapka-hero .star:nth-child(15) { top: 50%; left: 15%; --duration: 3.9s; --opacity: 0.5; }
.chapka-hero .star:nth-child(16) { top: 70%; left: 50%; --duration: 4.5s; --opacity: 0.6; width: 2.5px; height: 2.5px; }
.chapka-hero .star:nth-child(17) { top: 85%; left: 30%; --duration: 4.1s; --opacity: 0.4; }
.chapka-hero .star:nth-child(18) { top: 5%; left: 35%; --duration: 5s; --opacity: 0.5; width: 3px; height: 3px; }
.chapka-hero .star:nth-child(19) { top: 25%; left: 50%; --duration: 3.7s; --opacity: 0.6; }
.chapka-hero .star:nth-child(20) { top: 45%; left: 70%; --duration: 4.3s; --opacity: 0.3; }
@keyframes chapka-starTwinkle { 0%, 100% { opacity: var(--opacity, 0.4); transform: scale(1); } 50% { opacity: calc(var(--opacity, 0.4) + 0.3); transform: scale(1.2); }}
.chapka-particles { position: absolute; inset: 0; z-index: 0;}
.chapka-hero .particle { position: absolute; width: 6px; height: 6px; background: radial-gradient(circle, var(--chapka-glow) 0%, transparent 70%); border-radius: 50%; opacity: 0.2; animation: chapka-floatParticle 25s linear infinite; filter: blur(2px);}
.chapka-hero .particle:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; width: 4px; height: 4px; }
.chapka-hero .particle:nth-child(2) { top: 65%; left: 88%; animation-delay: 3s; width: 8px; height: 8px; }
.chapka-hero .particle:nth-child(3) { top: 35%; left: 45%; animation-delay: 6s; width: 6px; height: 6px; }
.chapka-hero .particle:nth-child(4) { top: 78%; left: 22%; animation-delay: 9s; width: 5px; height: 5px; }
.chapka-hero .particle:nth-child(5) { top: 8%; left: 72%; animation-delay: 12s; width: 10px; height: 10px; }
.chapka-hero .particle:nth-child(6) { top: 52%; left: 18%; animation-delay: 15s; width: 7px; height: 7px; }
.chapka-hero .particle:nth-child(7) { top: 28%; left: 63%; animation-delay: 18s; width: 4px; height: 4px; }
.chapka-hero .particle:nth-child(8) { top: 85%; left: 42%; animation-delay: 21s; width: 9px; height: 9px; }
@keyframes chapka-floatParticle { 0% { transform: translateY(100px) translateX(0) rotate(0deg); opacity: 0; } 10% { opacity: 0.3; } 50% { opacity: 0.6; } 90% { opacity: 0.3; } 100% { transform: translateY(-100px) translateX(80px) rotate(720deg); opacity: 0; }}
.chapka-grid { position: absolute; inset: 0; background-image:  linear-gradient(rgba(107, 155, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 155, 255, 0.02) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.15; z-index: 0;}
.chapka-seasonal { position: absolute; inset: 0; pointer-events: none; z-index: 0;}
.chapka-seasonal.winter .snowflake { position: absolute; font-size: var(--size, 16px); opacity: var(--opacity, 0.25); animation: snowfall var(--duration, 15s) linear infinite; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4)); z-index: 2;}
.chapka-seasonal.winter .snowflake:nth-child(1) { top: -10%; left: 10%; --size: 24px; --duration: 18s; --opacity: 0.3; animation-delay: 0s; }
.chapka-seasonal.winter .snowflake:nth-child(2) { top: -15%; left: 25%; --size: 18px; --duration: 20s; --opacity: 0.2; animation-delay: 2s; }
.chapka-seasonal.winter .snowflake:nth-child(3) { top: -5%; left: 45%; --size: 20px; --duration: 16s; --opacity: 0.25; animation-delay: 4s; }
.chapka-seasonal.winter .snowflake:nth-child(4) { top: -20%; left: 65%; --size: 22px; --duration: 19s; --opacity: 0.3; animation-delay: 6s; }
.chapka-seasonal.winter .snowflake:nth-child(5) { top: -12%; left: 80%; --size: 16px; --duration: 17s; --opacity: 0.22; animation-delay: 8s; }
.chapka-seasonal.winter .snowflake:nth-child(6) { top: -8%; left: 35%; --size: 20px; --duration: 18s; --opacity: 0.28; animation-delay: 10s; }
.chapka-seasonal.winter .snowflake:nth-child(7) { top: -18%; left: 55%; --size: 18px; --duration: 21s; --opacity: 0.24; animation-delay: 12s; }
.chapka-seasonal.winter .snowflake:nth-child(8) { top: -14%; left: 75%; --size: 22px; --duration: 19s; --opacity: 0.26; animation-delay: 14s; }
@keyframes snowfall { 0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: var(--opacity, 0.25); } 25% { transform: translateY(25vh) translateX(-10px) rotate(90deg); } 50% { transform: translateY(50vh) translateX(10px) rotate(180deg); opacity: calc(var(--opacity, 0.25) * 1.4); } 75% { transform: translateY(75vh) translateX(-5px) rotate(270deg); } 100% { transform: translateY(110vh) translateX(0) rotate(360deg); opacity: 0; }}
.chapka-seasonal.spring .raindrop { position: absolute; width: 3px; height: 20px; background: linear-gradient(to bottom, transparent, rgba(107, 155, 255, 0.3), transparent); border-radius: 0 0 3px 3px; animation: raindrop-fall var(--duration, 3s) linear infinite; opacity: 0.4; z-index: 2;}
.chapka-seasonal.spring .raindrop:nth-child(1) { top: -10%; left: 15%; --duration: 3.5s; animation-delay: 0s; }
.chapka-seasonal.spring .raindrop:nth-child(2) { top: -15%; left: 35%; --duration: 3.2s; animation-delay: 0.5s; }
.chapka-seasonal.spring .raindrop:nth-child(3) { top: -5%; left: 55%; --duration: 3.8s; animation-delay: 1s; }
.chapka-seasonal.spring .raindrop:nth-child(4) { top: -20%; left: 75%; --duration: 3.4s; animation-delay: 1.5s; }
.chapka-seasonal.spring .raindrop:nth-child(5) { top: -12%; left: 25%; --duration: 3.6s; animation-delay: 2s; }
.chapka-seasonal.spring .raindrop:nth-child(6) { top: -8%; left: 45%; --duration: 3.3s; animation-delay: 2.5s; }
.chapka-seasonal.spring .raindrop:nth-child(7) { top: -18%; left: 65%; --duration: 3.7s; animation-delay: 3s; }
.chapka-seasonal.spring .raindrop:nth-child(8) { top: -14%; left: 85%; --duration: 3.5s; animation-delay: 3.5s; }
@keyframes raindrop-fall { 0% { transform: translateY(0); opacity: 0.2; } 50% { opacity: 0.6; } 100% { transform: translateY(100vh); opacity: 0; }}
.chapka-seasonal.spring .flower { position: absolute; font-size: var(--size, 18px); opacity: 0.18; animation: flower-float var(--duration, 20s) ease-in-out infinite; z-index: 2;}
.chapka-seasonal.spring .flower:nth-child(9) { top: 20%; left: 10%; --size: 22px; --duration: 22s; animation-delay: 0s; }
.chapka-seasonal.spring .flower:nth-child(10) { top: 40%; left: 30%; --size: 16px; --duration: 24s; animation-delay: 5s; }
.chapka-seasonal.spring .flower:nth-child(11) { top: 60%; left: 50%; --size: 20px; --duration: 21s; animation-delay: 10s; }
.chapka-seasonal.spring .flower:nth-child(12) { top: 30%; left: 70%; --size: 18px; --duration: 23s; animation-delay: 15s; }
@keyframes flower-float { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.18; } 50% { transform: translateY(-15px) rotate(10deg); opacity: 0.25; }}
.chapka-seasonal.summer .sunbeam { position: absolute; width: var(--width, 4px); height: var(--height, 60px); background: linear-gradient(to bottom, transparent, rgba(255, 215, 0, 0.15), transparent); border-radius: 2px; opacity: 0.3; animation: sunbeam-fade var(--duration, 8s) ease-in-out infinite; transform-origin: top center; z-index: 2;}
.chapka-seasonal.summer .sunbeam:nth-child(1) { top: 5%; left: 15%; --width: 3px; --height: 50px; --duration: 8s; transform: rotate(-15deg); animation-delay: 0s; }
.chapka-seasonal.summer .sunbeam:nth-child(2) { top: 8%; left: 35%; --width: 4px; --height: 70px; --duration: 9s; transform: rotate(-8deg); animation-delay: 2s; }
.chapka-seasonal.summer .sunbeam:nth-child(3) { top: 12%; left: 55%; --width: 3px; --height: 60px; --duration: 8.5s; transform: rotate(5deg); animation-delay: 4s; }
.chapka-seasonal.summer .sunbeam:nth-child(4) { top: 6%; left: 75%; --width: 4px; --height: 80px; --duration: 9.5s; transform: rotate(12deg); animation-delay: 6s; }
@keyframes sunbeam-fade { 0%, 100% { opacity: 0.15; transform: scale(0.9); } 50% { opacity: 0.45; transform: scale(1.1); }}
.chapka-seasonal.autumn .leaf { position: absolute; font-size: var(--size, 20px); opacity: 0.22; animation: leaf-fall var(--duration, 12s) ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255, 107, 53, 0.5)); z-index: 2;}
.chapka-seasonal.autumn .leaf:nth-child(1) { top: -10%; left: 10%; --size: 24px; --duration: 14s; animation-delay: 0s; }
.chapka-seasonal.autumn .leaf:nth-child(2) { top: -15%; left: 25%; --size: 18px; --duration: 13s; animation-delay: 1.5s; }
.chapka-seasonal.autumn .leaf:nth-child(3) { top: -5%; left: 45%; --size: 22px; --duration: 15s; animation-delay: 3s; }
.chapka-seasonal.autumn .leaf:nth-child(4) { top: -20%; left: 65%; --size: 20px; --duration: 14s; animation-delay: 4.5s; }
.chapka-seasonal.autumn .leaf:nth-child(5) { top: -12%; left: 80%; --size: 24px; --duration: 16s; animation-delay: 6s; }
.chapka-seasonal.autumn .leaf:nth-child(6) { top: -8%; left: 35%; --size: 18px; --duration: 13s; animation-delay: 7.5s; }
.chapka-seasonal.autumn .leaf:nth-child(7) { top: -18%; left: 55%; --size: 22px; --duration: 15s; animation-delay: 9s; }
.chapka-seasonal.autumn .leaf:nth-child(8) { top: -14%; left: 75%; --size: 20px; --duration: 14s; animation-delay: 10.5s; }
@keyframes leaf-fall { 0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.15; } 25% { transform: translateY(25vh) translateX(-20px) rotate(45deg); opacity: 0.28; } 50% { transform: translateY(50vh) translateX(20px) rotate(90deg); opacity: 0.35; } 75% { transform: translateY(75vh) translateX(-10px) rotate(135deg); opacity: 0.28; } 100% { transform: translateY(110vh) translateX(0) rotate(180deg); opacity: 0.15; }}
.chapka-content { position: relative; z-index: 3; max-width: 900px; text-align: center;}
.chapka-badge { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(107, 155, 255, 0.1), rgba(138, 107, 255, 0.15)); padding: 10px 24px; border-radius: 32px; border: 1px solid rgba(107, 155, 255, 0.25); margin-bottom: 40px; animation: chapka-badgePulse 3s ease-in-out infinite; align-self: center; backdrop-filter: blur(12px);}
@keyframes chapka-badgePulse { 0%, 100% { box-shadow: 0 0 15px rgba(107, 155, 255, 0.2); } 50% { box-shadow: 0 0 25px rgba(107, 155, 255, 0.35); }}
.chapka-badge .badge-icon { font-size: 20px; animation: chapka-badgeIconFloat 2s ease-in-out infinite;}
@keyframes chapka-badgeIconFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(10deg); }}
.chapka-badge .badge-text { color: var(--chapka-accent); font-weight: 600; font-size: 14px; text-shadow: 0 0 8px rgba(107, 155, 255, 0.4);}
.chapka-title { font-size: 5.5rem; font-weight: 800; margin: 0 0 32px; line-height: 1.1; letter-spacing: -2px; position: relative; z-index: 4;}
.chapka-title span { background: linear-gradient(90deg,  var(--chapka-text), var(--chapka-accent), var(--chapka-glow), var(--chapka-accent-light), var(--chapka-text) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: var(--chapka-text); text-shadow: 0 0 20px rgba(107, 155, 255, 0.3); display: inline-block; animation: chapka-wordFloat 2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.15s); cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative;}
.chapka-title span:nth-child(1) { --i: 1; }.chapka-title span:nth-child(2) { --i: 2; }.chapka-title span:nth-child(3) { --i: 3; }.chapka-title span:nth-child(4) { --i: 4; }.chapka-title span:nth-child(5) { --i: 5; }.chapka-title span:nth-child(6) { --i: 6; }
.chapka-title span:hover { transform: translateY(-12px) scale(1.15) rotate(3deg) !important; text-shadow:  0 0 30px rgba(107, 155, 255, 0.8), 0 0 60px rgba(0, 243, 255, 0.6), 0 0 90px rgba(138, 107, 255, 0.5); animation: none !important; z-index: 10; filter: none !important;}
.chapka-title::after { content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 200px; height: 5px; background: linear-gradient(90deg, transparent, var(--chapka-accent), var(--chapka-glow), var(--chapka-accent-light), transparent); border-radius: 3px; box-shadow: 0 0 30px rgba(107, 155, 255, 0.6); animation: chapka-titleGlow 3s ease-in-out infinite; z-index: 3;}
.chapka-subtitle { font-size: 1.65rem; color: var(--chapka-text-secondary); line-height: 1.7; margin: 0 0 48px; font-weight: 400; opacity: 0.95; max-width: 750px; margin-left: auto; margin-right: auto; position: relative; z-index: 4;}
.chapka-subtitle::before { content: '«'; position: absolute; left: -25px; top: -15px; font-size: 4rem; color: rgba(107, 155, 255, 0.08); font-family: Georgia, serif; z-index: -1;}
.chapka-subtitle::after { content: '»'; position: absolute; right: -25px; bottom: -25px; font-size: 4rem; color: rgba(107, 155, 255, 0.08); font-family: Georgia, serif; z-index: -1;}
.chapka-actions { display: flex; gap: 20px; justify-content: center; margin-bottom: 60px; flex-wrap: wrap;}
.chapka-btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 36px; border-radius: 28px; font-size: 16px; font-weight: 700; text-decoration: none; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); z-index: 4;}
.chapka-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(107, 155, 255, 0.1), transparent); opacity: 0; transition: opacity 0.3s; z-index: -1;}
.chapka-btn.primary { background: linear-gradient(135deg, rgba(107, 155, 255, 0.2), rgba(138, 107, 255, 0.25)); color: var(--chapka-text); border-color: rgba(107, 155, 255, 0.3);}
.chapka-btn.primary:hover { background: linear-gradient(135deg, rgba(107, 155, 255, 0.35), rgba(138, 107, 255, 0.4)); transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 36px rgba(107, 155, 255, 0.4), 0 0 40px rgba(107, 155, 255, 0.3); border-color: rgba(107, 155, 255, 0.5);}
.chapka-btn.primary:hover::before { opacity: 1;}
.chapka-btn.primary i { font-size: 18px; transition: transform 0.3s;}
.chapka-btn.primary:hover i { transform: translateX(6px);}
.chapka-btn.secondary { background: rgba(255, 255, 255, 0.05); color: var(--chapka-text-secondary); border-color: var(--chapka-border);}
.chapka-btn.secondary:hover { background: rgba(255, 255, 255, 0.1); color: var(--chapka-text); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.2);}
.chapka-btn.register { background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 165, 0, 0.25)); color: var(--chapka-text); border-color: rgba(255, 107, 53, 0.3); box-shadow: 0 8px 24px rgba(255, 107, 53, 0.2);}
.chapka-btn.register:hover { background: linear-gradient(135deg, rgba(255, 107, 53, 0.35), rgba(255, 165, 0, 0.4)); transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 36px rgba(255, 107, 53, 0.4), 0 0 40px rgba(255, 165, 0, 0.3); border-color: rgba(255, 107, 53, 0.5);}
.chapka-btn.register:hover::before { background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), transparent); opacity: 1;}
.chapka-btn.register i { font-size: 18px; transition: transform 0.3s; animation: chapka-registerSparkle 2s ease-in-out infinite;}
@keyframes chapka-registerSparkle { 0%, 100% { transform: scale(1) rotate(0deg); color: var(--chapka-text); } 50% { transform: scale(1.3) rotate(180deg); color: #ffd700; }}
.chapka-btn.register:hover i { transform: translateX(6px) rotate(360deg);}
.chapka-stats { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 24px 40px; background: rgba(15, 22, 38, 0.4); border-radius: 24px; border: 1px solid var(--chapka-border); margin-top: 20px; backdrop-filter: blur(12px); z-index: 4; position: relative;}
.chapka-stats .stat-item { text-align: center;}
.chapka-stats .stat-number { font-size: 2.2rem; font-weight: 800; color: var(--chapka-accent); margin-bottom: 6px; background: linear-gradient(90deg, var(--chapka-accent), var(--chapka-glow), var(--chapka-accent-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 20px rgba(107, 155, 255, 0.4);}
.chapka-stats .stat-label { font-size: 14px; color: var(--chapka-text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 1px;}
.chapka-stats .stat-divider { width: 1px; height: 40px; background: var(--chapka-border);}
.chapka-symbols { position: absolute; inset: 0; pointer-events: none; z-index: 1;}
.chapka-symbols .symbol { position: absolute; font-size: 32px; left: var(--x); top: var(--y); animation: chapka-symbolFloat 20s ease-in-out infinite; animation-delay: var(--delay); opacity: 0.15; filter: drop-shadow(0 0 12px rgba(107, 155, 255, 0.4));}
@keyframes chapka-symbolFloat { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.15; } 25% { transform: translate(20px, -15px) rotate(90deg) scale(1.2); opacity: 0.25; } 50% { transform: translate(0, -30px) rotate(180deg) scale(0.9); opacity: 0.18; } 75% { transform: translate(-20px, -15px) rotate(270deg) scale(1.1); opacity: 0.22; }}
.chapka-content { animation: chapka-fadeIn 1s ease-out forwards;}
@keyframes chapka-fadeIn { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); }}
@media (max-width: 1200px) { .chapka-title { font-size: 4.8rem; } .chapka-subtitle { font-size: 1.5rem; } .chapka-quote { padding: 28px 32px; margin: 28px auto 40px; } .chapka-quote .quote-text { font-size: 1.3rem; } .chapka-quote .quote-author { font-size: 1rem; }}
@media (max-width: 1024px) { .chapka-hero { padding: 100px 24px 80px; min-height: auto; } .chapka-title { font-size: 4.2rem; letter-spacing: -1.5px; } .chapka-subtitle { font-size: 1.4rem; margin-bottom: 40px; } .chapka-quote { padding: 24px 28px; margin: 24px auto 36px; } .chapka-quote .quote-text { font-size: 1.25rem; } .chapka-quote .quote-author { font-size: 0.95rem; }}
@media (max-width: 768px) { .chapka-hero { padding: 80px 20px 60px; } .chapka-title { font-size: 3.6rem; line-height: 1.2; } .chapka-subtitle { font-size: 1.3rem; margin-bottom: 36px; } .chapka-quote { padding: 20px 24px; margin: 20px auto 32px; } .chapka-quote .quote-text { font-size: 1.15rem; } .chapka-quote .quote-author { font-size: 0.9rem; } .chapka-actions { flex-direction: column; align-items: center; width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; } .chapka-btn { width: 100%; justify-content: center; } .chapka-stats { flex-direction: column; gap: 16px; padding: 24px; width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; } .chapka-stats .stat-divider { display: none; }}
@media (max-width: 480px) { .chapka-hero { padding: 60px 16px 40px; } .chapka-title { font-size: 2.8rem; letter-spacing: -1px; } .chapka-title::after { width: 160px; height: 4px; bottom: -16px; } .chapka-subtitle { font-size: 1.2rem; line-height: 1.6; } .chapka-quote { padding: 18px 20px; margin: 18px auto 28px; border-radius: 16px; } .chapka-quote .quote-text { font-size: 1.1rem; } .chapka-quote .quote-author { font-size: 0.85rem; }}



/* ===== SONNIK===== */
:root {--sonnik-bg:#0a0d1a;--sonnik-text:#e8f0ff;--sonnik-text-secondary:#a8b4d8;--sonnik-accent:#8a6bff;--sonnik-accent-dark:#6a4acc;--sonnik-moon:#ffd700;--sonnik-moon-dark:#e6c000;--sonnik-card-bg:#121628;--sonnik-glow:#00f3ff;--sonnik-dream:#ff6b9d;--container-padding:24px;--hot-orange:#ff6b35;--hot-orange-dark:#d4552a;}
.sonnik-section {background:linear-gradient(135deg,var(--sonnik-bg) 0%,#080b16 100%);padding:0 var(--container-padding);margin-bottom:80px;color:var(--sonnik-text);font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;position:relative;overflow:hidden;border-radius:28px}
.night-stars {position:absolute;inset:0;pointer-events:none;z-index:0}
.star {position:absolute;width:2px;height:2px;background:var(--sonnik-moon);border-radius:50%;box-shadow:0 0 8px var(--sonnik-moon);animation:starTwinkle var(--duration,3s) ease-in-out infinite;opacity:var(--opacity,0.6)}
.star:nth-child(1) {top:10%;left:15%;--duration:4s;--opacity:0.8;width:3px;height:3px}
.star:nth-child(2) {top:25%;left:65%;--duration:5s;--opacity:0.5}
.star:nth-child(3) {top:45%;left:35%;--duration:3.5s;--opacity:0.7;width:2.5px;height:2.5px}
.star:nth-child(4) {top:60%;left:85%;--duration:4.5s;--opacity:0.6}
.star:nth-child(5) {top:75%;left:25%;--duration:3s;--opacity:0.9;width:3px;height:3px}
.star:nth-child(6) {top:15%;left:45%;--duration:5.5s;--opacity:0.4}
.star:nth-child(7) {top:35%;left:10%;--duration:4s;--opacity:0.7;width:2.5px;height:2.5px}
.star:nth-child(8) {top:55%;left:55%;--duration:3.8s;--opacity:0.8}
.star:nth-child(9) {top:80%;left:75%;--duration:4.2s;--opacity:0.5;width:3px;height:3px}
.star:nth-child(10) {top:20%;left:80%;--duration:5s;--opacity:0.6}
.star:nth-child(11) {top:40%;left:20%;--duration:3.6s;--opacity:0.7}
.star:nth-child(12) {top:65%;left:40%;--duration:4.8s;--opacity:0.8;width:2.5px;height:2.5px}
.star:nth-child(13) {top:10%;left:60%;--duration:4s;--opacity:0.5}
.star:nth-child(14) {top:30%;left:85%;--duration:5.2s;--opacity:0.6;width:3px;height:3px}
.star:nth-child(15) {top:50%;left:15%;--duration:3.9s;--opacity:0.7}
.star:nth-child(16) {top:70%;left:50%;--duration:4.5s;--opacity:0.8;width:2.5px;height:2.5px}
.star:nth-child(17) {top:85%;left:30%;--duration:4.1s;--opacity:0.6}
.star:nth-child(18) {top:5%;left:35%;--duration:5s;--opacity:0.7;width:3px;height:3px}
.star:nth-child(19) {top:25%;left:50%;--duration:3.7s;--opacity:0.8}
.star:nth-child(20) {top:45%;left:70%;--duration:4.3s;--opacity:0.5}
@keyframes starTwinkle {0%,100% {opacity:var(--opacity,0.6);transform:scale(1)}50% {opacity:calc(var(--opacity,0.6) + 0.3);transform:scale(1.2)}}


.dream-particles {position:absolute;inset:0;pointer-events:none;z-index:1}
.particle {position:absolute;width:6px;height:6px;background:radial-gradient(circle,var(--sonnik-glow),transparent 70%);border-radius:50%;opacity:0.3;animation:floatParticle 25s linear infinite;filter:blur(2px)}
.particle:nth-child(1) {top:15%;left:10%;animation-delay:0s;width:4px;height:4px}
.particle:nth-child(2) {top:65%;left:88%;animation-delay:3s;width:8px;height:8px}
.particle:nth-child(3) {top:35%;left:45%;animation-delay:6s;width:6px;height:6px}
.particle:nth-child(4) {top:78%;left:22%;animation-delay:9s;width:5px;height:5px}
.particle:nth-child(5) {top:8%;left:72%;animation-delay:12s;width:10px;height:10px}
.particle:nth-child(6) {top:52%;left:18%;animation-delay:15s;width:7px;height:7px}
.particle:nth-child(7) {top:28%;left:63%;animation-delay:18s;width:4px;height:4px}
.particle:nth-child(8) {top:85%;left:42%;animation-delay:21s;width:9px;height:9px}
@keyframes floatParticle {0% {transform:translateY(100px) translateX(0) rotate(0deg);opacity:0}10% {opacity:0.5}50% {opacity:0.8}90% {opacity:0.5}100% {transform:translateY(-100px) translateX(80px) rotate(720deg);opacity:0}}


.section-header {position:relative;z-index:3;text-align:center;padding:80px 0 60px;max-width:800px;margin:0 auto;background:radial-gradient(circle at center,rgba(138,107,255,0.05) 0%,transparent 70%);border-radius:24px;margin-bottom:40px}
.section-icon {width:100px;height:100px;margin:0 auto 24px;position:relative;display:flex;align-items:center;justify-content:center}
.sonnik-icon {font-size:48px;color:var(--sonnik-moon);position:relative;z-index:2;text-shadow:0 0 30px rgba(255,215,0,0.6),0 0 60px rgba(255,215,0,0.3);animation:moonPulse 4s ease-in-out infinite}
@keyframes moonPulse {0%,100% {text-shadow:0 0 20px rgba(255,215,0,0.4),0 0 40px rgba(255,215,0,0.2)}50% {text-shadow:0 0 40px rgba(255,215,0,0.8),0 0 80px rgba(255,215,0,0.4)}}
.section-icon::before {content:'';position:absolute;inset:-15px;background:radial-gradient(circle,var(--sonnik-moon) 0%,transparent 70%);border-radius:50%;animation:moonGlow 3s ease-in-out infinite;opacity:0.2}
.section-icon::after {
content:'';
position:absolute;
inset:-25px;
background:radial-gradient(circle,transparent 40%,rgba(255,215,0,0.1) 70%,transparent 80%);
border-radius:50%;
animation:moonPulse 4s ease-in-out infinite;
opacity:0.15
}
@keyframes moonGlow {0%,100% {transform:scale(0.9);opacity:0.15}50% {transform:scale(1.2);opacity:0.3}}
.section-header h2 {
font-size:3.2rem;
font-weight:800;
margin:0 0 16px;
color:var(--sonnik-text);
line-height:1.2;
text-shadow:0 0 30px rgba(255,215,0,0.5);
background:linear-gradient(90deg,var(--sonnik-text),var(--sonnik-moon),var(--sonnik-accent),var(--sonnik-text));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
position:relative;
letter-spacing:-1px
}
.section-header h2::after {content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:140px;height:4px;background:linear-gradient(90deg,transparent,var(--sonnik-moon),var(--sonnik-glow),transparent);border-radius:2px;box-shadow:0 0 20px rgba(255,215,0,0.4)}
.section-desc {font-size:1.35rem;color:var(--sonnik-text-secondary);line-height:1.7;max-width:650px;margin:0 auto;font-style:italic;position:relative;z-index:2}
.section-desc::before {content:'«';position:absolute;left:-20px;top:-10px;font-size:3rem;color:rgba(255,215,0,0.15);font-family:Georgia,serif;z-index:-1}
.section-desc::after {content:'»';position:absolute;right:-20px;bottom:-20px;font-size:3rem;color:rgba(255,215,0,0.15);font-family:Georgia,serif;z-index:-1}
.alphabet-nav-wrapper {background:linear-gradient(135deg,var(--sonnik-card-bg),#0f1222);border-radius:24px;padding:32px;margin-bottom:50px;box-shadow:0 12px 40px rgba(0,0,0,0.6),inset 0 0 40px rgba(138,107,255,0.1);border:1px solid rgba(138,107,255,0.2);position:relative;overflow:hidden;z-index:2}
.alphabet-nav-wrapper::before {content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--sonnik-moon),var(--sonnik-glow),transparent);z-index:3}
.alphabet-nav {display:flex;flex-wrap:wrap;gap:8px;justify-content:center;position:relative;z-index:2;max-width:1000px;margin:0 auto}
.alphabet-nav a {display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:rgba(18,22,40,0.6);color:var(--sonnik-text-secondary);text-decoration:none;font-size:16px;font-weight:600;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);border:1px solid rgba(138,107,255,0.15);box-shadow:0 3px 8px rgba(0,0,0,0.3);position:relative;overflow:hidden}
.alphabet-nav a::before {content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(138,107,255,0.1),transparent);opacity:0;transition:opacity 0.3s;z-index:-1}
.alphabet-nav a:hover {transform:translateY(-3px) scale(1.1);color:var(--sonnik-text);background:rgba(24,30,52,0.85);box-shadow:0 6px 16px rgba(138,107,255,0.3),0 0 20px rgba(255,215,0,0.2);border-color:rgba(138,107,255,0.3);z-index:10}
.alphabet-nav a:hover::before {opacity:1}.alphabet-nav a:active {transform:translateY(1px) scale(1.05);box-shadow:0 2px 6px rgba(0,0,0,0.4)}
.alphabet-nav a.active {background:linear-gradient(135deg,var(--sonnik-accent),var(--sonnik-accent-dark));color:white;box-shadow:0 4px 12px rgba(138,107,255,0.4),0 0 0 2px rgba(255,255,255,0.1);border-color:rgba(138,107,255,0.4);position:relative;z-index:5}
.alphabet-nav a.active::after {
content:'';position:absolute;inset:-3px;background:radial-gradient(circle,transparent 40%,rgba(138,107,255,0.3) 70%,transparent 80%);border-radius:14px;animation:pulseRing 2s infinite;z-index:-1}
@keyframes pulseRing {0% {transform:scale(0.8);opacity:0.6}70% {transform:scale(1.3);opacity:0}100% {transform:scale(1.5);opacity:0}}
.sonnik-categories-title {font-size:2.2rem;font-weight:700;margin:0 0 32px;color:var(--sonnik-text);text-align:center;position:relative;padding-bottom:20px;z-index:2}
.sonnik-categories-title::after {content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100px;height:3px;background:linear-gradient(90deg,transparent,var(--sonnik-glow),transparent);border-radius:2px;box-shadow:0 0 15px rgba(0,243,255,0.4)}
.sonnik-categories-wrapper {background:linear-gradient(135deg,var(--sonnik-card-bg),#0f1222);border-radius:24px;padding:40px;margin-bottom:60px;box-shadow:0 12px 40px rgba(0,0,0,0.6),inset 0 0 40px rgba(0,243,255,0.08);border:1px solid rgba(138,107,255,0.2);position:relative;overflow:hidden;z-index:2}
.sonnik-categories-wrapper::before {
content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--sonnik-glow),var(--sonnik-moon),transparent);z-index:3}
.sonnik-categories {display:grid;grid-template-columns:repeat(6,1fr);gap:20px;position:relative;z-index:2;max-width:1000px;margin:0 auto}
.sonnik-category {display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 18px;background:rgba(18,22,40,0.7);border-radius:100px;text-decoration:none;color:var(--sonnik-text-secondary);transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);border:1px solid rgba(138,107,255,0.15);box-shadow:0 6px 16px rgba(0,0,0,0.3);position:relative;overflow:hidden;text-align:center;gap:12px}
.sonnik-category::before {content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(138,107,255,0.08),transparent);opacity:0;transition:opacity 0.3s;z-index:-1}
.sonnik-category:hover {transform:translateY(-6px) scale(1.05);color:var(--sonnik-text);background:rgba(28,34,56,0.9);box-shadow:0 12px 32px rgba(138,107,255,0.3),0 0 30px rgba(0,243,255,0.2);border-color:rgba(138,107,255,0.3);z-index:10}
.sonnik-category:hover::before {opacity:1}
.sonnik-category i {font-size:32px;margin-bottom:8px;transition:all 0.3s;position:relative;z-index:2}
.sonnik-category span {font-size:15px;font-weight:600;transition:color 0.3s;position:relative;z-index:2;line-height:1.3;display:block}й */
.sonnik-love i {color:#ff6b9d;filter:drop-shadow(0 0 10px rgba(255,107,157,0.4))}
.sonnik-work i {color:#4ecdc4;filter:drop-shadow(0 0 10px rgba(78,205,196,0.4))}
.sonnik-mystic i {color:#9d4edd;filter:drop-shadow(0 0 10px rgba(157,78,221,0.4))}
.sonnik-emotions i {color:#ffd166;filter:drop-shadow(0 0 10px rgba(255,209,102,0.4))}
.sonnik-nature i {color:#06d6a0;filter:drop-shadow(0 0 10px rgba(6,214,160,0.4))}
.sonnik-health i {color:#ef476f;filter:drop-shadow(0 0 10px rgba(239,71,111,0.4))}
.sonnik-category:hover i {transform:scale(1.2) rotate(10deg);filter:drop-shadow(0 0 20px currentColor)}
.sonnik-category:hover span {color:currentColor}
.sonnik-posts-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px;margin-top: 40px;position: relative;z-index: 2;perspective: 1000px;}
.sonnik-post { display: block; background: transparent; border-radius: 28px; text-align: center; overflow: hidden; text-decoration: none; color: #e8f0ff; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6); border: 1px solid rgba(138, 107, 255, 0.15); will-change: transform; transform-style: preserve-3d; cursor: pointer;}
.sonnik-post { animation: sonnik-dream-float 8s ease-in-out infinite; animation-delay: calc(var(--delay, 0) * 0.5s);}
@keyframes sonnik-dream-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-8px) rotate(1deg); } 50% { transform: translateY(-4px) rotate(-1deg); } 75% { transform: translateY(-6px) rotate(0.5deg); }}
.sonnik-post::before { content: ''; position: absolute; inset: 0; background:  radial-gradient(circle at var(--x, 50%) var(--y, 50%),  rgba(138, 107, 255, 0.08) 0%,  transparent 40%), linear-gradient(135deg,  rgba(0, 243, 255, 0.05) 0%,  transparent 60%); opacity: 0.7; transition: opacity 0.4s, background 0.8s; z-index: 0; pointer-events: none;}
.sonnik-post:hover { transform: translateY(-4px) scale(1.03) rotate(0deg) !important; box-shadow:  0 25px 70px rgba(138, 107, 255, 0.5), 0 0 60px rgba(255, 215, 0, 0.3), 0 0 100px rgba(0, 243, 255, 0.2); border-color: rgba(138, 107, 255, 0.4); z-index: 20;}
.sonnik-post:hover::before { opacity: 1; background:  radial-gradient(circle at var(--x, 50%) var(--y, 50%),  rgba(138, 107, 255, 0.15) 0%,  transparent 50%), linear-gradient(135deg,  rgba(0, 243, 255, 0.1) 0%,  rgba(255, 215, 0, 0.05) 100%);}
.sonnik-post.hot { border-color: rgba(255, 107, 107, 0.3); box-shadow:  0 15px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 107, 107, 0.2), 0 0 50px rgba(255, 215, 0, 0.1); animation: sonnik-hot-pulse 2s ease-in-out infinite,  sonnik-dream-float-hot 8s ease-in-out infinite; animation-delay: calc(var(--delay, 0) * 0.5s); position: relative; overflow: hidden; border-radius: 28px; text-align: center;}
@keyframes sonnik-hot-pulse { 0%, 100% { box-shadow:  0 15px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 107, 107, 0.2), 0 0 50px rgba(255, 215, 0, 0.1); transform: scale(1) rotate(0deg); } 50% { box-shadow:  0 15px 50px rgba(0, 0, 0, 0.6), 0 0 45px rgba(255, 107, 107, 0.4), 0 0 70px rgba(255, 215, 0, 0.25), 0 0 90px rgba(255, 107, 107, 0.3); transform: scale(1.02) rotate(0.5deg); }}
@keyframes sonnik-dream-float-hot { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-12px) rotate(2deg); } 50% { transform: translateY(-8px) rotate(-2deg); } 75% { transform: translateY(-10px) rotate(1deg); }}
.sonnik-post.hot::after { content: ''; position: absolute; inset: -5px; border-radius: 28px; background: linear-gradient(45deg,  transparent,  rgba(255, 107, 107, 0.15),  rgba(255, 215, 0, 0.1),  rgba(255, 107, 107, 0.15),  transparent); z-index: -1; animation: sonnik-hot-glow 3s ease-in-out infinite; opacity: 0.7; filter: blur(10px); pointer-events: none;}
@keyframes sonnik-hot-glow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.05); }}
.sonnik-post.hot:hover { box-shadow:  0 25px 70px rgba(255, 107, 107, 0.6), 0 0 80px rgba(255, 107, 107, 0.5), 0 0 120px rgba(255, 215, 0, 0.4), 0 0 150px rgba(255, 107, 107, 0.3); border-color: rgba(255, 107, 107, 0.6); transform: translateY(-4px) scale(1.05) rotate(0deg) !important; overflow: hidden;}
.sonnik-post.hot:hover::before { opacity: 1; background:  radial-gradient(circle at var(--x, 50%) var(--y, 50%),  rgba(255, 107, 107, 0.2) 0%,  transparent 50%), linear-gradient(135deg,  rgba(255, 107, 107, 0.15) 0%,  rgba(255, 215, 0, 0.1) 100%);border-radius: 24px;}
.sonnik-post.hot:hover::after { opacity: 1; animation: sonnik-hot-glow-hover 2s ease-in-out infinite; filter: blur(15px);border-radius: 24px;}
@keyframes sonnik-hot-glow-hover { 0%, 100% { opacity: 0.8; transform: scale(1.1); } 50% { opacity: 1; transform: scale(1.2); }}
.sonnik-fire-icon { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; z-index: 10; animation: sonnik-fire-float 2s ease-in-out infinite; filter: drop-shadow(0 0 15px rgba(255, 107, 107, 0.8));}
.sonnik-fire-icon i { font-size: 20px; color: #ff6b6b; position: relative; z-index: 2; animation: sonnik-fire-dance 1.2s ease-in-out infinite; text-shadow:  0 0 10px rgba(255, 107, 53, 0.9), 0 0 20px rgba(255, 215, 0, 0.7), 0 0 30px rgba(255, 107, 107, 0.8);}
.sonnik-fire-icon::before { content: ''; position: absolute; width: 100%; height: 100%; background: radial-gradient(circle,  rgba(255, 215, 0, 0.6) 0%,  rgba(255, 107, 107, 0.4) 40%,  transparent 70%); border-radius: 50%; z-index: 1; animation: sonnik-fire-glow 1.5s ease-in-out infinite;}
.sonnik-fire-icon::after { content: ''; position: absolute; width: 120%; height: 120%; background: radial-gradient(circle,  rgba(255, 107, 107, 0.3) 0%,  rgba(255, 215, 0, 0.2) 30%,  transparent 70%); border-radius: 50%; z-index: 0; animation: sonnik-fire-pulse 1.8s ease-in-out infinite;}
@keyframes sonnik-fire-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.05); }}
@keyframes sonnik-fire-dance { 0%, 100% {  transform: scale(1) rotate(0deg); color: #ff6b6b; } 25% {  transform: scale(1.1) rotate(10deg); color: #ffd700; } 50% {  transform: scale(1.15) rotate(0deg); color: #ff8e53; } 75% {  transform: scale(1.05) rotate(-8deg); color: #ff4757; }}
@keyframes sonnik-fire-glow { 0%, 100% {  opacity: 0.7; transform: scale(1); } 50% {  opacity: 1; transform: scale(1.1); }}
@keyframes sonnik-fire-pulse { 0%, 100% {  opacity: 0.5; transform: scale(1); box-shadow: 0 0 15px rgba(255, 107, 107, 0.6); } 50% {  opacity: 0.8; transform: scale(1.2); box-shadow: 0 0 30px rgba(255, 107, 107, 0.9), 0 0 40px rgba(255, 215, 0, 0.7); }}
.sonnik-post-img,.sonnik-post-bg { height: 210px; position: relative; overflow: hidden; border-bottom: 1px solid rgba(138, 107, 255, 0.2);}
.sonnik-post-img::before { content: ''; position: absolute; inset: 0; background:  linear-gradient(180deg,  rgba(10, 13, 26, 0.15) 0%,  rgba(10, 13, 26, 0.4) 30%,  rgba(10, 13, 26, 0.85) 100%), radial-gradient(circle at 70% 30%,  rgba(255, 215, 0, 0.08) 0%,  transparent 40%); z-index: 1;}
.sonnik-post-img::after { content: ''; position: absolute; top: -50%; right: -20%; width: 120%; height: 120%; background: linear-gradient(135deg,  transparent 0%,  rgba(255, 215, 0, 0.08) 30%,  transparent 70%); transform: rotate(30deg); z-index: 2; opacity: 0; transition: opacity 0.5s;}
.sonnik-post:hover .sonnik-post-img::after { opacity: 1;}
.sonnik-post-img img { width: 100%; height: 100%; object-fit: cover; transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); filter: saturate(1) contrast(1.05) brightness(0.95); transform: scale(1.02);}
.sonnik-post:hover .sonnik-post-img img { transform: scale(1.15); filter: saturate(1.2) contrast(1.15) brightness(1.05) blur(0.5px);}
.sonnik-post-bg { background: linear-gradient(135deg, #121628 0%, #0a0d1a 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;}
.sonnik-post-bg::before { content: ''; position: absolute; inset: 0; background:  radial-gradient(circle at 30% 30%, rgba(138, 107, 255, 0.08) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(0, 243, 255, 0.05) 0%, transparent 60%), radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.03) 0%, transparent 70%);}
.sonnik-post-bg i { font-size: 68px; color: rgba(138, 107, 255, 0.25); position: relative; z-index: 2; text-shadow: 0 0 30px rgba(138, 107, 255, 0.4); animation: sonnik-symbol-float 6s ease-in-out infinite; animation-delay: calc(var(--delay, 0) * 0.3s);}
@keyframes sonnik-symbol-float { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.2; } 50% { transform: translateY(-10px) rotate(5deg); opacity: 0.35; }}
.sonnik-dream-symbols { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.3; transition: opacity 0.4s;}
.sonnik-dream-symbol { position: absolute; font-size: 24px; color: #ffd700; filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5)); animation: sonnik-symbol-drift var(--duration, 15s) linear infinite; opacity: var(--opacity, 0.4);}
.sonnik-dream-symbol:nth-child(1) { top: 15%; left: 20%; --duration: 18s; font-size: 28px; --opacity: 0.6; animation-delay: 0s; }
.sonnik-dream-symbol:nth-child(2) { top: 45%; left: 75%; --duration: 22s; font-size: 20px; --opacity: 0.3; animation-delay: 2s; }
.sonnik-dream-symbol:nth-child(3) { top: 70%; left: 35%; --duration: 20s; font-size: 24px; --opacity: 0.5; animation-delay: 4s; }
.sonnik-dream-symbol:nth-child(4) { top: 25%; left: 60%; --duration: 25s; font-size: 18px; --opacity: 0.2; animation-delay: 6s; }
.sonnik-dream-symbol:nth-child(5) { top: 60%; left: 15%; --duration: 19s; font-size: 22px; --opacity: 0.4; animation-delay: 8s; }
@keyframes sonnik-symbol-drift { 0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: var(--opacity, 0.4); } 25% { transform: translate(20px, -15px) rotate(90deg) scale(1.1); opacity: calc(var(--opacity, 0.4) + 0.2); } 50% { transform: translate(0, -30px) rotate(180deg) scale(0.9); opacity: var(--opacity, 0.4); } 75% { transform: translate(-20px, -15px) rotate(270deg) scale(1.05); opacity: calc(var(--opacity, 0.4) + 0.1); } 100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: var(--opacity, 0.4); }}
.sonnik-post:hover .sonnik-dream-symbols { opacity: 0.6; }
.sonnik-post-content { padding: 32px 28px; background: rgba(10, 13, 26, 0.88); backdrop-filter: blur(12px); position: relative;border-radius: 0px 0px 24px 24px; z-index: 3; border-top: 1px solid rgba(138, 107, 255, 0.25); transition: all 0.4s;}
.sonnik-post-content::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 70px; height: 3px; background: linear-gradient(90deg, transparent, #00f3ff, #ffd700, transparent); border-radius: 2px; box-shadow: 0 0 15px rgba(0, 243, 255, 0.4);}
.sonnik-post-content h3 { font-size: 20px; font-weight: 700; margin: 0 0 18px; line-height: 1.45; color: #e8f0ff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; position: relative; letter-spacing: -0.5px; transition: color 0.3s; text-shadow: 0 0 10px rgba(255, 215, 0, 0.2);}
.sonnik-post-content h3::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #8a6bff, transparent); opacity: 0; transition: opacity 0.4s; transform-origin: right; transform: scaleX(0); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.sonnik-post:hover .sonnik-post-content h3::after { opacity: 1; transform: scaleX(1); transform-origin: left;}
.sonnik-post.hot .sonnik-post-content::before { background: linear-gradient(90deg, transparent, #ff6b6b, #ffd700, #ff4757, transparent); box-shadow: 0 0 20px rgba(255, 107, 107, 0.6); animation: sonnik-hot-content-glow 2s ease-in-out infinite;}
@keyframes sonnik-hot-content-glow { 0%, 100% { opacity: 0.8; box-shadow: 0 0 20px rgba(255, 107, 107, 0.6); } 50% { opacity: 1; box-shadow: 0 0 30px rgba(255, 107, 107, 0.8); }}
.sonnik-post.hot .sonnik-post-content h3 { background: linear-gradient(135deg, #ffd700, #ff6b6b, #ffd700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 15px rgba(255, 107, 107, 0.4); animation: sonnik-hot-title-glow 3s ease-in-out infinite;}
@keyframes sonnik-hot-title-glow { 0%, 100% { text-shadow: 0 0 15px rgba(255, 107, 107, 0.4); } 50% { text-shadow: 0 0 25px rgba(255, 107, 107, 0.7), 0 0 35px rgba(255, 215, 0, 0.5); }}
.sonnik-post.hot:hover .sonnik-post-content h3 { text-shadow: 0 0 20px rgba(255, 107, 107, 0.6), 0 0 40px rgba(255, 215, 0, 0.6);}
.sonnik-meta { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2;}
.sonnik-category-meta,.sonnik-author { font-size: 13px; color: #a8b4d8; display: flex; align-items: center; gap: 10px; position: relative; padding-left: 6px; transition: all 0.3s; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));}
.sonnik-category-meta::before,.sonnik-author::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 14px; background: #8a6bff; border-radius: 2px; opacity: 0; transition: opacity 0.4s, transform 0.4s; transform: translateY(-50%) scaleY(0.5);}
.sonnik-post:hover .sonnik-category-meta::before,.sonnik-post:hover .sonnik-author::before { opacity: 1; transform: translateY(-50%) scaleY(1);}
.sonnik-category-meta[data-category="love"] { color: #ff6b9d; }
.sonnik-category-meta[data-category="work"] { color: #4ecdc4; }
.sonnik-category-meta[data-category="animals"] { color: #9d4edd; }
.sonnik-category-meta[data-category="emotions"] { color: #ffd166; }
.sonnik-category-meta[data-category="nature"] { color: #06d6a0; }
.sonnik-category-meta[data-category="health"] { color: #ef476f; }
.sonnik-post:hover .sonnik-category-meta { filter: drop-shadow(0 0 10px currentColor); color: currentColor !important;}
.sonnik-author { color: #00f3ff; font-weight: 600; font-style: italic;}
.sonnik-post:hover .sonnik-author { color: #ffd700; filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));}
@keyframes sonnik-post-fade-in { 0% { opacity: 0; transform: translateY(30px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); }}.sonnik-post { animation: sonnik-post-fade-in 0.8s ease-out forwards; animation-delay: calc(var(--index, 0) * 0.1s);}
@media (max-width:1024px) { .sonnik-posts-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .sonnik-post-img, .sonnik-post-bg { height: 190px; } .sonnik-post-content { padding: 28px; } .sonnik-post-content h3 { font-size: 19px; } sonnik-categories {grid-template-columns:repeat(3,1fr);gap:16px}.alphabet-nav a {width:38px;height:38px;font-size:14px}}
@media (max-width:840px) {.sonnik-categories {grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px) {.section-header {padding:50px 24px 40px}.section-header h2 {font-size:2.4rem}.section-desc {font-size:1.15rem}.alphabet-nav-wrapper {padding:24px;border-radius:20px}.alphabet-nav {gap:6px;justify-content:space-between}.alphabet-nav a {width:36px;height:36px;font-size:13px;flex:1;min-width:36px}.sonnik-categories {grid-template-columns:repeat(3,1fr);gap:12px}.sonnik-category {padding:20px 12px;gap:8px}.sonnik-category i {font-size:24px}.sonnik-category span {font-size:13px}.posts-grid {display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:24px;padding:8px var(--container-padding) 32px;margin-top:32px;scrollbar-width:none}.posts-grid::-webkit-scrollbar {display:none}.sonnik-post {flex:0 0 280px;min-width:280px;max-width:280px}}
@media (max-width: 768px) { .sonnik-posts-grid { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 28px; padding: 8px 24px 40px; margin-top: 40px; scrollbar-width: none;} .sonnik-posts-grid::-webkit-scrollbar { display: none; } .sonnik-post { flex: 0 0 300px; min-width: 300px; max-width: 300px; animation: none !important; } .sonnik-post-img, .sonnik-post-bg { height: 200px; } .sonnik-post-content { padding: 26px; } .sonnik-post-content h3 { font-size: 18px; } .sonnik-dream-symbol { display: none; }}
@media (max-width:640px) {.sonnik-post { flex: 0 0 280px; min-width: 280px;}.sonnik-categories {grid-template-columns:repeat(2,1fr)}.alphabet-nav a {width:34px;height:34px;font-size:12px}}
@media (max-width:480px) {.section-header h2 {font-size:2.0rem}.section-desc {font-size:1.05rem}.alphabet-nav {gap:4px}.alphabet-nav a {width:32px;height:32px;font-size:11px;flex:1;min-width:32px}.sonnik-categories {grid-template-columns:repeat(2,1fr);gap:10px}.sonnik-category {padding:16px 10px;gap:6px}.sonnik-category i {font-size:20px}.sonnik-category span {font-size:12px}.posts-grid {gap:20px}.sonnik-post {flex:0 0 100%;min-width:100%;max-width:100%}.sonnik-post-img,.sonnik-post-bg {height:200px}.sonnik-post-content {padding:24px}.sonnik-post-content h3 {font-size:18px}}


/* ===== GASTRONOMIJA ===== */
.gastronomija-section { background: linear-gradient(135deg, #1e1a15 0%, #2a241d 100%); padding: 80px 20px; position: relative; overflow: hidden; border-radius: 28px; margin: 50px 0; box-shadow:  0 30px 80px rgba(0, 0, 0, 0.5), inset 0 0 100px rgba(255, 165, 0, 0.06); color-scheme: light dark;}
.gastronomija-section::before { content: ''; position: absolute; inset: 0; background:  radial-gradient(circle at 20% 30%, rgba(255, 165, 0, 0.04) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.02) 0%, transparent 50%); z-index: 0;}
.gastronomija-header { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; position: relative; z-index: 2; margin-bottom: 60px; max-width: 1400px; margin-left: auto; margin-right: auto;}
.gastronomija-header-content { display: flex; flex-direction: column; gap: 20px; justify-content: center;}
.gastronomija-badge { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(255, 165, 0, 0.15), rgba(255, 107, 53, 0.2)); padding: 8px 20px; border-radius: 24px; border: 1px solid rgba(255, 165, 0, 0.25); backdrop-filter: blur(10px); animation: badge-pulse 3s ease-in-out infinite; align-self: flex-start;}
@keyframes badge-pulse { 0%, 100% { box-shadow: 0 0 15px rgba(255, 165, 0, 0.2); } 50% { box-shadow: 0 0 25px rgba(255, 165, 0, 0.35); }}
.badge-icon { font-size: 20px; animation: badge-icon-float 2s ease-in-out infinite;}
@keyframes badge-icon-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(10deg); }}
.badge-text { color: #ffd700; font-weight: 600; font-size: 14px; text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);}
.gastronomija-title { font-size: 52px; font-weight: 800; color: #fff; margin: 0; line-height: 1.1; position: relative; text-shadow: 0 4px 25px rgba(0, 0, 0, 0.7);}
.gastronomija-title::after { content: ''; position: absolute; bottom: -12px; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, transparent, #ff6b35, #ffd700, #ff6b35, transparent); border-radius: 2px; box-shadow: 0 0 18px rgba(255, 107, 53, 0.6);}
.gastronomija-subtitle { color: #e0d6c4; font-size: 19px; line-height: 1.7; margin: 0; max-width: 500px; position: relative;}
.gastronomija-header-image { position: relative; height: 300px; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #2a241d 0%, #383026 100%); border: 2px solid rgba(255, 165, 0, 0.18); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);}
.header-food-symbols { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 30px; pointer-events: none;}
.header-food-symbols .symbol { font-size: 48px; opacity: 0.18; animation: header-symbol-float var(--duration, 10s) ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(255, 165, 0, 0.4));}
.header-food-symbols .symbol:nth-child(1) { --duration: 8s; animation-delay: 0s; }.header-food-symbols .symbol:nth-child(2) { --duration: 12s; animation-delay: 2s; }.header-food-symbols .symbol:nth-child(3) { --duration: 10s; animation-delay: 4s; }.header-food-symbols .symbol:nth-child(4) { --duration: 14s; animation-delay: 6s; }.header-food-symbols .symbol:nth-child(5) { --duration: 9s; animation-delay: 8s; }
@keyframes header-symbol-float { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.18; } 50% { transform: translate(var(--x, 0), var(--y, -20px)) rotate(180deg) scale(1.2); opacity: 0.25; }}
.gastronomija-subtopics { position: relative; z-index: 2; margin-bottom: 60px;}
.subtopics-container { max-width: 1000px; margin: 0 auto;}
.subtopics-title { color: #ffd700; font-size: 24px; font-weight: 700; margin-bottom: 30px; text-align: center; position: relative;}
.subtopics-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(90deg, transparent, #ff6b35, transparent); border-radius: 2px;}
.subtopics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.subtopic-card { display: block; background: linear-gradient(135deg, rgba(45, 38, 28, 0.85), rgba(38, 32, 24, 0.9)); border-radius: 20px; padding: 28px 20px; text-align: center; text-decoration: none; color: #e0d6c4; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(255, 165, 0, 0.12); position: relative; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);}
.subtopic-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),  rgba(255, 165, 0, 0.08) 0%,  transparent 50%); opacity: 0; transition: opacity 0.3s; z-index: 0;}
.subtopic-card:hover { transform: translateY(-4px) scale(1.05); background: linear-gradient(135deg, rgba(52, 44, 32, 0.9), rgba(45, 38, 28, 0.95)); color: #ffd700; border-color: rgba(255, 165, 0, 0.25); box-shadow:  0 15px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 165, 0, 0.25); z-index: 10;}
.subtopic-card:hover::before { opacity: 1;}
.subtopic-icon { font-size: 42px; margin-bottom: 12px; display: block; transition: all 0.3s;}
.subtopic-card:hover .subtopic-icon { transform: scale(1.3) rotate(15deg); filter: drop-shadow(0 0 12px rgba(255, 165, 0, 0.5));}
.subtopic-name { font-size: 18px; font-weight: 700; margin-bottom: 6px; display: block;}
.subtopic-desc { font-size: 13px; opacity: 0.7; display: block; transition: opacity 0.3s;}
.subtopic-card:hover .subtopic-desc { opacity: 1;}
.gastronomija-description { background: rgba(40, 34, 26, 0.65); border-radius: 24px; padding: 32px; margin-bottom: 60px; color: #e0d6c4; line-height: 1.8; font-size: 17px; border: 1px solid rgba(255, 165, 0, 0.12); backdrop-filter: blur(10px); position: relative; z-index: 2; max-width: 800px; margin-left: auto; margin-right: auto;}
.gastronomija-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; z-index: 2; perspective: 1000px; max-width: 1400px; margin: 0 auto;}
.gastronomija-post { display: block; background: linear-gradient(135deg, rgba(45, 38, 28, 0.9), rgba(38, 32, 24, 0.95)); border-radius: 28px; overflow: hidden; text-decoration: none; color: #e0d6c4; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; box-shadow:  0 20px 50px rgba(0, 0, 0, 0.55), inset 0 0 30px rgba(255, 165, 0, 0.04); border: 2px solid rgba(255, 165, 0, 0.08); will-change: transform; cursor: pointer; transform-style: preserve-3d; text-align: center;}
.gastronomija-post { animation: post-float 10s ease-in-out infinite; animation-delay: calc(var(--index, 0) * 0.3s);}
@keyframes post-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-8px) rotate(1deg); } 50% { transform: translateY(-4px) rotate(-1deg); } 75% { transform: translateY(-6px) rotate(0.5deg); }}
.gastronomija-post.hot { border-color: rgba(255, 107, 53, 0.25); box-shadow:  0 20px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 107, 53, 0.35), 0 0 60px rgba(255, 215, 0, 0.18), inset 0 0 40px rgba(255, 107, 53, 0.05); animation: post-hot-pulse 1.8s ease-in-out infinite,  post-float-hot 10s ease-in-out infinite; animation-delay: calc(var(--delay, 0) * 0.3s); background: linear-gradient(135deg, rgba(52, 38, 28, 0.95), rgba(45, 32, 22, 1));}
@keyframes post-hot-pulse { 0%, 100% { box-shadow:  0 20px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 107, 53, 0.35), 0 0 60px rgba(255, 215, 0, 0.18), inset 0 0 40px rgba(255, 107, 53, 0.05); transform: scale(1) rotate(0deg); } 50% { box-shadow:  0 20px 50px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 107, 53, 0.5), 0 0 80px rgba(255, 215, 0, 0.3), 0 0 100px rgba(255, 107, 53, 0.25), inset 0 0 50px rgba(255, 107, 53, 0.08); transform: scale(1.03) rotate(0.5deg); }}
@keyframes post-float-hot { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-12px) rotate(2deg); } 50% { transform: translateY(-8px) rotate(-2deg); } 75% { transform: translateY(-10px) rotate(1deg); }}
.gastronomija-post:hover { transform: translateY(-4px) scale(1.04) rotate(0deg) !important; box-shadow:  0 4px 11px rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 165, 0, 0.4), 0 0 18px rgba(255, 215, 0, 0.25); border-color: rgba(255, 165, 0, 0.3); z-index: 20;}
.gastronomija-post.hot:hover {box-shadow:  0 4px 11px rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 107, 53, 0.6), 0 0 120px rgba(255, 215, 0, 0.4), 0 0 18px rgba(255, 107, 53, 0.35),inset 0 0 18px rgba(255, 107, 53, 0.1); border-color: rgba(255, 107, 53, 0.45); transform: translateY(-4px) scale(1.06) rotate(0deg) !important;}
.gastronomija-post-image { position: relative; height: 240px; overflow: hidden; border-bottom: 2px solid rgba(255, 165, 0, 0.18);}
.gastronomija-post-image img { width: 100%; height: 100%; object-fit: cover; transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); filter: brightness(0.92) contrast(1.1) saturate(1.2); transform: scale(1.05);}
.gastronomija-post:hover .gastronomija-post-image img { transform: scale(1.15); filter: brightness(1.05) contrast(1.15) saturate(1.3) blur(0.5px);}
.image-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,  transparent 0%,  rgba(30, 26, 21, 0.3) 30%,  rgba(30, 26, 21, 0.7) 70%,  rgba(30, 26, 21, 0.85) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; z-index: 2;}
.food-tags { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; z-index: 3;}
.tag { background: rgba(255, 165, 0, 0.15); color: #ffd700; padding: 6px 16px; border-radius: 16px; font-size: 12px; font-weight: 600; border: 1px solid rgba(255, 165, 0, 0.25); display: flex; align-items: center; gap: 6px; backdrop-filter: blur(5px);}
.time-tag i { font-size: 10px;}
.food-symbols { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.22;}
.food-symbol { position: absolute; font-size: var(--size, 28px); left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%); filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.4)); animation: food-float 20s ease-in-out infinite; animation-delay: var(--delay, 0s); opacity: 0.8; z-index: 2;}
@keyframes food-float { 0%, 100% {  transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1); } 25% {  transform: translate(-50%, -50%) translate(15px, -15px) rotate(45deg) scale(1.1); } 50% {  transform: translate(-50%, -50%) translate(0, -30px) rotate(90deg) scale(0.95); } 75% {  transform: translate(-50%, -50%) translate(-15px, -15px) rotate(135deg) scale(1.05); }}
.gastronomija-post:hover .food-symbols { opacity: 0.45;}
.gastronomija-post:hover .food-symbol { filter: drop-shadow(0 0 10px rgba(255, 165, 0, 0.7));}
.gastronomija-post-placeholder { height: 240px; background: linear-gradient(135deg, rgba(45, 38, 28, 0.8), rgba(38, 32, 24, 0.9)); display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 2px solid rgba(255, 165, 0, 0.18); position: relative; overflow: hidden;}
.gastronomija-post-placeholder::before { content: ''; position: absolute; inset: 0; background:  radial-gradient(circle at 30% 30%, rgba(255, 165, 0, 0.06) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(255, 215, 0, 0.03) 0%, transparent 60%);}
.placeholder-icon { font-size: 72px; color: rgba(255, 165, 0, 0.25); animation: placeholder-float 6s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(255, 165, 0, 0.35));}
@keyframes placeholder-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(5deg); }}
.placeholder-text { color: rgba(255, 215, 0, 0.4); font-size: 16px; margin-top: 12px; font-weight: 500;}
.gastronomija-hot-badge { position: absolute; top: 20px; right: 20px; background: linear-gradient(135deg, #ff4757, #ff6b35, #ff8e53); color: white; padding: 10px 20px; border-radius: 28px; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 10px; z-index: 10; box-shadow:  0 8px 30px rgba(255, 107, 53, 0.7), 0 0 0 3px rgba(255, 255, 255, 0.35), 0 0 35px rgba(255, 215, 0, 0.55), inset 0 0 15px rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.45); animation: hot-badge-float 1.8s ease-in-out infinite; backdrop-filter: blur(10px); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);}
@keyframes hot-badge-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.08); }}
.gastronomija-hot-badge i { font-size: 16px; animation: hot-badge-flame 1.2s ease-in-out infinite; text-shadow: 0 0 12px rgba(255, 107, 53, 0.8);}
@keyframes hot-badge-flame { 0%, 100% { transform: scale(1) rotate(0deg); color: #ff6b35; } 33% { transform: scale(1.3) rotate(18deg); color: #ffd700; } 66% { transform: scale(1.15) rotate(-12deg); color: #ff4757; }}
.gastronomija-post-content { padding: 32px 28px; position: relative; z-index: 3;}
.gastronomija-post-content::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(90deg, transparent, #ff6b35, #ffd700, #ff6b35, transparent); border-radius: 2px; box-shadow: 0 0 15px rgba(255, 107, 53, 0.5);}
.post-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 16px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; position: relative; letter-spacing: -0.5px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); transition: color 0.3s;}
.gastronomija-post:hover .post-title { color: #ffd700;}
.post-excerpt { color: #e0d6c4; font-size: 15px; line-height: 1.6; margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; opacity: 0.85; transition: opacity 0.3s;}
.gastronomija-post:hover .post-excerpt { opacity: 1;}
.post-cta { display: inline-flex; align-items: center; gap: 12px; color: #ffd700; font-weight: 700; font-size: 15px; padding: 12px 24px; background: rgba(255, 165, 0, 0.08); border-radius: 18px; border: 1px solid rgba(255, 165, 0, 0.18); transition: all 0.3s; position: relative; overflow: hidden; margin: 0 auto; display: block; width: fit-content;}
.post-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 165, 0, 0.15), transparent); opacity: 0; transition: opacity 0.3s;}
.gastronomija-post:hover .post-cta { background: rgba(255, 165, 0, 0.18); transform: translateX(8px); box-shadow: 0 6px 20px rgba(255, 165, 0, 0.25);}
.gastronomija-post:hover .post-cta::before { opacity: 1;}
.post-cta i { font-size: 15px; transition: transform 0.3s;}
.gastronomija-post:hover .post-cta i { transform: translateX(8px);}
@keyframes post-fade-in { 0% { opacity: 0; transform: translateY(40px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); }}
.gastronomija-post { animation: post-fade-in 0.8s ease-out forwards; animation-delay: calc(var(--index, 0) * 0.12s);}
@media (max-width: 1024px) { .gastronomija-section { padding: 60px 20px; } .gastronomija-header { grid-template-columns: 1fr; gap: 40px; } .gastronomija-title { font-size: 42px; } .gastronomija-subtitle { font-size: 17px; } .gastronomija-stats { gap: 16px; } .gastronomija-header-image { height: 250px; } .subtopics-grid { grid-template-columns: repeat(2, 1fr); } .gastronomija-posts-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .gastronomija-post-image, .gastronomija-post-placeholder { height: 220px; } .post-title { font-size: 20px; }}
@media (max-width: 768px) {.gastronomija-description {display: none;}.gastronomija-badge { display: none;}.gastronomija-header-content { text-align: center;}  .gastronomija-header-image { display: none;} .gastronomija-section { padding: 40px 15px; border-radius: 20px; } .gastronomija-title { font-size: 36px; } .gastronomija-subtitle { font-size: 16px; } .subtopics-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .subtopic-card { padding: 20px 16px; } .gastronomija-posts-grid { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 28px; padding: 36px; margin-top: 30px; scrollbar-width: none; } .gastronomija-posts-grid::-webkit-scrollbar { display: none; } .gastronomija-post { flex: 0 0 320px; min-width: 320px; max-width: 320px; animation: none !important; } .gastronomija-post-image, .gastronomija-post-placeholder { height: 240px; } .post-title { font-size: 20px; } .food-symbols .symbol { display: none; }}
@media (max-width: 640px) { .gastronomija-posts-grid { gap: 18px; } .gastronomija-post { flex: 0 0 300px; min-width: 300px; } .subtopics-grid { grid-template-columns: 1fr; }}
@media (max-width: 480px) { .gastronomija-section { padding: 30px 12px; border-radius: 16px; margin: 20px 0; } .gastronomija-title { font-size: 32px; } .gastronomija-subtitle { font-size: 15px; } .gastronomija-subtopics { padding: 0 10px; } .subtopics-container { max-width: 100%; } .subtopics-title { font-size: 20px; } .subtopics-grid { grid-template-columns: 1fr; gap: 12px; } .subtopic-card { padding: 18px 14px; } .gastronomija-posts-grid { gap: 20px; padding: 8px 15px 30px; } .gastronomija-post { flex: 0 0 100%; min-width: 100%; max-width: 100%; } .gastronomija-post-image, .gastronomija-post-placeholder { height: 260px; } .post-title { font-size: 22px; } .post-excerpt { font-size: 14px; } .post-meta { gap: 16px; flex-wrap: wrap; } .gastronomija-description { padding: 24px 16px; font-size: 15px; } .read-more-btn { padding: 10px 24px; font-size: 14px; }}
/* ===== OGOROD ===== */
:root { --sad-bg: #0a140a; --sad-bg-light: #0f1a0f; --sad-text: #f0f9f0; --sad-text-secondary: #b0d8b0; --sad-accent: #4caf50; --sad-accent-dark: #388e3c; --sad-success: #8bc34a; --sad-card-bg: rgba(15, 26, 15, 0.9); --sad-card-bg-hover: rgba(22, 38, 22, 0.95); --sad-border: rgba(76, 175, 80, 0.2); --sad-shadow: rgba(0, 0, 0, 0.6); --sad-hot: #ff6b35; --sad-hot-dark: #ff4757; --sad-glow: rgba(76, 175, 80, 0.4); --sad-glow-strong: rgba(76, 175, 80, 0.6); --sad-hot-glow: rgba(255, 107, 53, 0.5); --sad-soil: #2d1e12; --sad-soil-light: #3d2a18;}
.sad-section { background: linear-gradient(135deg, var(--sad-bg) 0%, #070f07 100%); padding: 0 20px; margin-bottom: 80px; color: var(--sad-text); font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; position: relative; overflow: hidden; border-radius: 32px; box-shadow:  0 40px 80px rgba(0, 0, 0, 0.8), 0 0 60px var(--sad-glow);}
.sad-background { position: absolute; inset: 0; pointer-events: none; z-index: 0;}
.sad-leaf { position: absolute; width: var(--size, 50px); height: var(--size, 50px); background: radial-gradient(circle at 30% 30%, var(--sad-glow) 0%, transparent 70%); border-radius: 50%; animation: sad-leaf-float var(--duration, 20s) ease-in-out infinite; opacity: var(--opacity, 0.15); filter: blur(2px);}
.sad-leaf:nth-child(1) { top: 8%; left: 12%; --size: 70px; --duration: 25s; --opacity: 0.25; }
.sad-leaf:nth-child(2) { top: 22%; left: 88%; --size: 50px; --duration: 22s; --opacity: 0.2; }
.sad-leaf:nth-child(3) { top: 38%; left: 32%; --size: 60px; --duration: 28s; --opacity: 0.22; }
.sad-leaf:nth-child(4) { top: 52%; left: 18%; --size: 55px; --duration: 24s; --opacity: 0.18; }
.sad-leaf:nth-child(5) { top: 68%; left: 72%; --size: 75px; --duration: 26s; --opacity: 0.28; }
.sad-leaf:nth-child(6) { top: 12%; left: 48%; --size: 52px; --duration: 21s; --opacity: 0.19; }
.sad-leaf:nth-child(7) { top: 32%; left: 68%; --size: 58px; --duration: 27s; --opacity: 0.21; }
.sad-leaf:nth-child(8) { top: 48%; left: 28%; --size: 52px; --duration: 23s; --opacity: 0.17; }
.sad-leaf:nth-child(9) { top: 72%; left: 42%; --size: 65px; --duration: 29s; --opacity: 0.24; }
.sad-leaf:nth-child(10) { top: 18%; left: 68%; --size: 58px; --duration: 25s; --opacity: 0.2; }
@keyframes sad-leaf-float { 0%, 100% { transform: translateY(0) translateX(0) scale(1) rotate(0deg); } 25% { transform: translateY(-20px) translateX(12px) scale(1.05) rotate(5deg); } 50% { transform: translateY(-10px) translateX(-12px) scale(0.95) rotate(-5deg); } 75% { transform: translateY(-15px) translateX(8px) scale(1.03) rotate(3deg); }}
.sad-hero { position: relative; background: linear-gradient(135deg, rgba(15, 26, 15, 0.95) 0%, rgba(10, 20, 10, 0.98) 100%); border-radius: 32px; margin: 48px 0 40px; border: 2px solid var(--sad-glow); overflow: hidden; isolation: isolate; z-index: 2; padding: 70px; backdrop-filter: blur(12px); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;}
.sad-hero::before { content: ''; position: absolute; inset: 0; background:  radial-gradient(circle at 20% 30%, rgba(76, 175, 80, 0.08) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(139, 195, 74, 0.06) 0%, transparent 50%); pointer-events: none; z-index: 0;}
.sad-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 40px; max-width: 650px; margin: 0 auto;}
.sad-hero-header { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap;}
.sad-hero-icon-wrapper { display: flex; align-items: center; gap: 24px;}
.sad-hero-icon { position: relative; width: 90px; height: 90px; background: radial-gradient(circle, var(--sad-glow) 0%, transparent 70%); border-radius: 22px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--sad-glow); box-shadow: 0 0 50px var(--sad-glow); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(10px);}
.sad-hero-icon:hover { transform: scale(1.15) rotate(10deg); box-shadow: 0 0 80px var(--sad-glow-strong); border-color: var(--sad-success);}
.sad-hero-icon i { font-size: 48px; color: var(--sad-accent); position: relative; z-index: 2; text-shadow: 0 0 30px var(--sad-glow); animation: sad-icon-pulse 3s ease-in-out infinite;}
@keyframes sad-icon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); }}
.sad-growth-particles { position: absolute; bottom: -12px; right: -12px; display: flex; gap: 6px;}
.sad-particle { width: 9px; height: 9px; background: var(--sad-accent); border-radius: 50%; animation: sad-particle-float 2s ease-in-out infinite; opacity: 0.9; box-shadow: 0 0 12px var(--sad-glow);}
.sad-particle:nth-child(1) { animation-delay: 0s; }
.sad-particle:nth-child(2) { animation-delay: 0.4s; }
.sad-particle:nth-child(3) { animation-delay: 0.8s; }
@keyframes sad-particle-float { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; } 50% { transform: translateY(-14px) scale(1.4); opacity: 1; }}
.sad-hero-text { display: flex; flex-direction: column; gap: 20px; text-align: center;}
.sad-hero-text h3 { font-size: 3.6rem; font-weight: 800; margin: 0; color: var(--sad-text); line-height: 1.15; text-shadow: 0 0 40px var(--sad-glow); background: linear-gradient(90deg, var(--sad-text), var(--sad-accent), var(--sad-success), var(--sad-text)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -1.2px; animation: sad-text-shimmer 4s ease-in-out infinite;}
@keyframes sad-text-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; }}
.sad-hero-text p { font-size: 1.25rem; color: var(--sad-text-secondary); line-height: 1.8; font-weight: 400; opacity: 0.92; margin: 0 auto; max-width: 650px;}
.sad-hero-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.sad-hero-category { display: block; background: rgba(22, 38, 22, 0.75); border-radius: 18px; padding: 22px 18px; text-align: center; text-decoration: none; color: var(--sad-text-secondary); transition: all 0.3s ease; position: relative; overflow: hidden; border: 2px solid var(--sad-border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); backdrop-filter: blur(8px);}
.sad-hero-category::before {position: absolute; inset: 0; background: linear-gradient(135deg, var(--sad-glow) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s; z-index: -1;}
.sad-hero-category:hover { transform: translateY(-1px); color: var(--sad-text); background: rgba(26, 43, 26, 0.92); box-shadow: 0 0px 11px var(--sad-glow), 0 0 11px var(--sad-success); border-color: var(--sad-glow);}
.sad-hero-category:hover::before { opacity: 0.18;}
.sad-hero-category-icon { width: 52px; height: 52px; margin: 0 auto 14px; background: rgba(76, 175, 80, 0.15); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--sad-accent); box-shadow: 0 0 18px var(--sad-glow); transition: all 0.3s; position: relative; border: 2px solid var(--sad-border);}
.sad-hero-category:hover .sad-hero-category-icon {
 transform: scale(1.18); background: rgba(76, 175, 80, 0.25); color: var(--sad-success); box-shadow: 0 0 26px var(--sad-glow-strong);}
.sad-hero-category-name { display: block; font-size: 14.5px; font-weight: 600; color: var(--sad-text); line-height: 1.4;}
.sad-hero-category-hot { background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 71, 87, 0.1)) !important; border-color: rgba(255, 107, 53, 0.35) !important; box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25) !important;}
.sad-hero-category-hot .sad-hero-category-icon { color: var(--sad-hot) !important; background: rgba(255, 107, 53, 0.15) !important; border-color: rgba(255, 107, 53, 0.35) !important;}
.sad-hero-category-hot:hover { box-shadow: 0 10px 25px rgba(255, 107, 53, 0.45), 0 0 18px rgba(255, 107, 53, 0.3) !important; border-color: rgba(255, 107, 53, 0.55) !important;}
.sad-hero-category-hot:hover .sad-hero-category-icon { color: var(--sad-hot-dark) !important; background: rgba(255, 107, 53, 0.3) !important; box-shadow: 0 0 26px rgba(255, 107, 53, 0.55) !important;}
.sad-hero-visual { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: 320px;}
.sad-plant-animation { position: relative; width: 240px; height: 280px;}
.sad-stem { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 10px; height: 200px; background: linear-gradient(to top, var(--sad-accent-dark), var(--sad-accent)); border-radius: 5px; box-shadow: 0 0 30px var(--sad-glow); animation: sad-stem-grow 3s ease-out forwards;}
@keyframes sad-stem-grow { 0% { height: 0; opacity: 0; } 50% { opacity: 0.5; } 100% { height: 200px; opacity: 1; }}
.sad-leaf-1,.sad-leaf-2,.sad-leaf-3,.sad-leaf-4,.sad-leaf-5 { position: absolute; width: 70px; height: 35px; background: var(--sad-accent); border-radius: 50% 50% 50% 0; opacity: 0.95; box-shadow: 0 0 18px var(--sad-glow);}
.sad-leaf-1 { top: 60px; left: -45px; transform: rotate(-35deg); animation: sad-leaf-sway-1 4s ease-in-out infinite;}
.sad-leaf-2 { top: 100px; right: -45px; transform: rotate(35deg); animation: sad-leaf-sway-2 4.5s ease-in-out infinite;}
.sad-leaf-3 { top: 140px; left: -35px; transform: rotate(-25deg); animation: sad-leaf-sway-3 5s ease-in-out infinite;}
.sad-leaf-4 { top: 80px; right: -30px; transform: rotate(25deg); animation: sad-leaf-sway-4 4.2s ease-in-out infinite;}
.sad-leaf-5 { top: 120px; left: -25px; transform: rotate(-15deg); animation: sad-leaf-sway-5 4.8s ease-in-out infinite;}
@keyframes sad-leaf-sway-1 { 0%, 100% { transform: rotate(-35deg) translateY(0); } 50% { transform: rotate(-30deg) translateY(-6px); }}
@keyframes sad-leaf-sway-2 { 0%, 100% { transform: rotate(35deg) translateY(0); } 50% { transform: rotate(40deg) translateY(-6px); }}
@keyframes sad-leaf-sway-3 { 0%, 100% { transform: rotate(-25deg) translateY(0); } 50% { transform: rotate(-20deg) translateY(-6px); }}
@keyframes sad-leaf-sway-4 { 0%, 100% { transform: rotate(25deg) translateY(0); } 50% { transform: rotate(30deg) translateY(-5px); }}
@keyframes sad-leaf-sway-5 { 0%, 100% { transform: rotate(-15deg) translateY(0); } 50% { transform: rotate(-10deg) translateY(-5px); }}
.sad-flower { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; background: linear-gradient(135deg, #ff6b35, #ff4757); border-radius: 50%; box-shadow: 0 0 40px rgba(255, 107, 53, 0.8); animation: sad-flower-bloom 2s ease-out 1s forwards, sad-flower-pulse 3s ease-in-out 3s infinite;}
@keyframes sad-flower-bloom { 0% { transform: translateX(-50%) scale(0); opacity: 0; } 50% { transform: translateX(-50%) scale(1.3); opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 1; }}
@keyframes sad-flower-pulse { 0%, 100% { box-shadow: 0 0 40px rgba(255, 107, 53, 0.8); } 50% { box-shadow: 0 0 55px rgba(255, 107, 53, 0.95); }}
.sad-categories-section,.sad-articles-section { margin: 48px 0; position: relative; z-index: 3;}
.sad-section-header { text-align: center; margin-bottom: 32px; padding: 0 16px;}
.sad-section-header h4 { font-size: 2rem; font-weight: 700; color: var(--sad-text); margin: 0 0 10px; position: relative; display: inline-block; text-shadow: 0 0 12px var(--sad-glow);}
.sad-section-header h4::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 52px; height: 3px; background: linear-gradient(90deg, var(--sad-accent), var(--sad-success)); border-radius: 2px; box-shadow: 0 0 10px var(--sad-glow); animation: sad-underline-pulse 2s ease-in-out infinite;}
@keyframes sad-underline-pulse { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.1); }}
.sad-section-subtitle { font-size: 14px; color: var(--sad-text-secondary); opacity: 0.8; display: block; letter-spacing: 0.5px;}
.sad-categories-swiper { background: linear-gradient(135deg, rgba(22, 38, 22, 0.85), rgba(26, 43, 26, 0.92)); border-radius: 22px; padding: 22px 16px; box-shadow: 0 10px 30px var(--sad-shadow), inset 0 0 40px var(--sad-glow); border: 2px solid var(--sad-border); overflow: hidden; position: relative; backdrop-filter: blur(10px); max-width: 1000px; margin: 0 auto;}
.sad-categories-swiper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--sad-accent), var(--sad-success), transparent); opacity: 0.4;}
.sad-categories { display: flex; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px; scroll-snap-type: x mandatory; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE и Edge */ margin: 0 -12px;}
.sad-categories::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */}
.sad-category-card { display: block; background: rgba(26, 43, 26, 0.75); border-radius: 18px; padding: 22px 16px; text-align: center; text-decoration: none; color: var(--sad-text-secondary); transition: all 0.3s ease; position: relative; overflow: hidden; border: 2px solid var(--sad-border); min-width: 130px; flex-shrink: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); scroll-snap-align: start;}
.sad-category-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--sad-glow) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s; z-index: -1;}
.sad-category-card:hover { transform: translateY(-1px); color: var(--sad-text); background: rgba(32, 52, 32, 0.9); box-shadow: 0 0px 4px var(--sad-glow), 0 0 7px var(--sad-success); border-color: var(--sad-glow);}
.sad-category-card:hover::before { opacity: 0.15;}
.sad-category-icon { width: 50px; height: 50px; margin: 0 auto 14px; background: rgba(76, 175, 80, 0.12); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 23px; color: var(--sad-accent); box-shadow: 0 0 15px var(--sad-glow); transition: all 0.3s; position: relative; border: 2px solid var(--sad-border);}
.sad-category-card:hover .sad-category-icon { transform: scale(1.15); background: rgba(76, 175, 80, 0.2); color: var(--sad-success); box-shadow: 0 0 18px var(--sad-glow-strong);}
.sad-category-name { display: block; font-size: 14px; font-weight: 600; color: var(--sad-text); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sad-articles-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 28px;margin-top: 32px;max-width: 1200px;margin: 32px auto 0;}
.sad-article-card { display: block; text-decoration: none; color: var(--sad-text); transition: all 0.3s ease; position: relative; will-change: transform; animation: sad-article-fade-in 0.5s ease-out forwards; animation-delay: calc(var(--index, 0) * 0.08s);}
@keyframes sad-article-fade-in { 0% { opacity: 0; transform: translateY(20px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); }}
.sad-article-card:hover { transform: translateY(-4px); z-index: 10;}
.sad-article-inner { background: linear-gradient(135deg, rgba(22, 38, 22, 0.9) 0%, rgba(15, 26, 15, 0.95) 100%); border-radius: 20px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); border: 2px solid var(--sad-border); transition: all 0.3s; position: relative; backdrop-filter: blur(10px); height: 100%;}
.sad-article-card:hover .sad-article-inner { box-shadow: 0 4px 11px var(--sad-glow), 0 0 4px var(--sad-success); border-color: var(--sad-glow); transform: scale(1.01);}
.sad-article-badge { position: absolute; top: 16px; left: 16px; background: rgba(76, 175, 80, 0.15); border: 2px solid var(--sad-glow); border-radius: 14px; padding: 6px 13px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--sad-accent); z-index: 3; backdrop-filter: blur(8px); transition: all 0.3s; box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);}
.sad-article-card:hover .sad-article-badge { background: rgba(76, 175, 80, 0.25); color: var(--sad-success); border-color: var(--sad-glow-strong); transform: translateX(4px);}
.sad-badge-icon { font-size: 12.5px;}
.sad-badge-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 105px;}
.sad-article-hot-badge { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; background: linear-gradient(135deg, var(--sad-hot), var(--sad-hot-dark)); border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; z-index: 3; box-shadow: 0 0 12px var(--sad-hot-glow), 0 0 20px var(--sad-hot-glow); animation: sad-fire-pulse 1.8s ease-in-out infinite; backdrop-filter: blur(6px);}
@keyframes sad-fire-pulse { 0%, 100% {  box-shadow: 0 0 10px var(--sad-hot-glow), 0 0 18px var(--sad-hot-glow); transform: scale(1); } 50% {  box-shadow: 0 0 14px var(--sad-hot-glow), 0 0 24px var(--sad-hot-glow); transform: scale(1.08); }}
.sad-article-img-wrapper { position: relative; height: 180px; overflow: hidden; background: linear-gradient(135deg, #0f1a0f, #0a140a);}
.sad-article-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; filter: saturate(1.15) contrast(1.05);}
.sad-article-card:hover .sad-article-img-wrapper img { transform: scale(1.1); filter: saturate(1.25) contrast(1.1) brightness(1.05);}
.sad-article-no-img { width: 100%; height: 100%; background: linear-gradient(135deg, #1a2b1a, #122012); display: flex; align-items: center; justify-content: center; position: relative;}
.sad-article-no-img i { font-size: 55px; color: rgba(76, 175, 80, 0.25); text-shadow: 0 0 18px rgba(76, 175, 80, 0.2);}
.sad-article-img-wrapper::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 26, 15, 0.1) 0%, rgba(15, 26, 15, 0.7) 100%); z-index: 1; transition: opacity 0.3s;}
.sad-article-card:hover .sad-article-img-wrapper::before { opacity: 0.8;}
.sad-article-text { padding: 20px;}
.sad-article-title { font-size: 17.5px; font-weight: 700; margin: 0 0 14px; line-height: 1.45; color: var(--sad-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -0.3px; transition: color 0.3s;}
.sad-article-card:hover .sad-article-title { color: var(--sad-success);}
.sad-article-stats { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1.5px solid var(--sad-border);}
.sad-stat-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sad-text-secondary); opacity: 0.85; transition: all 0.3s;}
.sad-stat-item i { font-size: 14px; color: var(--sad-accent); transition: all 0.3s;}
.sad-article-card:hover .sad-stat-item { opacity: 1; color: var(--sad-text);}
.sad-article-card:hover .sad-stat-item i { color: var(--sad-success);}
.sad-article-hot .sad-article-inner { border-bottom: 2px solid var(--sad-hot) !important; box-shadow:  0 0 18px rgba(255, 107, 53, 0.35), 0 4px 11px rgba(0, 0, 0, 0.55) !important; background: linear-gradient(135deg, rgba(28, 20, 15, 0.93) 0%, rgba(20, 14, 10, 0.96) 100%) !important; position: relative; overflow: hidden; animation: sad-hot-border-pulse 3s ease-in-out infinite !important;}
@keyframes sad-hot-border-pulse { 0%, 100% {  box-shadow: 0 0 11px rgba(255, 107, 53, 0.35), 0 8px 20px rgba(0, 0, 0, 0.55); border-color: var(--sad-hot); } 50% {  box-shadow: 0 0 18px rgba(255, 107, 53, 0.45), 0 10px 24px rgba(0, 0, 0, 0.6); border-color: var(--sad-hot-dark); }}
.sad-article-hot .sad-article-badge { background: rgba(255, 107, 53, 0.18) !important; color: var(--sad-hot) !important; border-color: rgba(255, 107, 53, 0.45) !important;}
.sad-article-hot:hover .sad-article-badge { background: rgba(255, 107, 53, 0.3) !important; color: var(--sad-hot-dark) !important; border-color: rgba(255, 107, 53, 0.6) !important;}
.sad-article-hot .sad-article-title { color: #fffaf5 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; position: relative;}
.sad-article-hot .sad-article-title::before { content: '🔥 '; color: var(--sad-hot); font-size: 1.1em; position: absolute; left: -22px; top: -2px; opacity: 0.9; animation: sad-fire-float 2s ease-in-out infinite;}
@keyframes sad-fire-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); }}
.sad-article-hot .sad-stat-item { color: var(--sad-hot) !important;}
.sad-article-hot .sad-stat-item i { color: var(--sad-hot) !important;}
.sad-article-hot:hover .sad-stat-item { color: var(--sad-hot-dark) !important;}
.sad-article-hot:hover .sad-article-inner { box-shadow:  0 0 18px rgba(255, 107, 53, 0.45), 0 4px 11px rgba(0, 0, 0, 0.65) !important; transform: scale(1.02) !important;}
.sad-article-hot:hover .sad-article-img-wrapper img { filter: saturate(1.3) contrast(1.1) brightness(1.08) !important;}
.sad-seo-block { background: linear-gradient(135deg, var(--sad-soil) 0%, var(--sad-soil-light) 100%); border-radius: 28px; margin: 60px 0 40px; padding: 60px; box-shadow:  0 25px 60px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(46, 30, 18, 0.5), 0 0 30px rgba(61, 42, 24, 0.4); border: 2px solid rgba(61, 42, 24, 0.4); backdrop-filter: blur(10px); position: relative; overflow: hidden; z-index: 2;}
.sad-seo-block::before { content: ''; position: absolute; inset: 0; background:  radial-gradient(circle at 20% 30%, rgba(76, 175, 80, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(139, 195, 74, 0.04) 0%, transparent 60%); pointer-events: none; z-index: 0;}
.sad-seo-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; text-align: center;}
.sad-seo-title { font-size: 2.2rem; font-weight: 700; color: var(--sad-text); margin: 0 0 24px; line-height: 1.3; text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);}
.sad-seo-text { font-size: 1.15rem; color: var(--sad-text-secondary); line-height: 1.8; opacity: 0.95; margin: 0;}
.sad-seo-highlight { color: var(--sad-accent); font-weight: 600; position: relative;}
.sad-seo-highlight::after { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 2px; background: var(--sad-accent); opacity: 0.3; border-radius: 1px;}
.sad-seo-list { display: flex; justify-content: center; gap: 20px; margin: 28px 0 0; flex-wrap: wrap;}
.sad-seo-item { background: rgba(46, 30, 18, 0.6); border-radius: 14px; padding: 10px 18px; font-size: 14px; color: var(--sad-text); font-weight: 500; border: 1px solid rgba(61, 42, 24, 0.5); backdrop-filter: blur(6px); transition: all 0.3s;}
.sad-seo-item:hover { background: rgba(56, 38, 24, 0.8); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);}
@media (max-width: 1200px) { .sad-articles-grid { grid-template-columns: repeat(2, 1fr); } .sad-article-img-wrapper { height: 170px; } .sad-article-title { font-size: 16.5px; } .sad-hero { padding: 60px 50px; grid-template-columns: 1fr; } .sad-hero-visual { order: -1; } .sad-plant-animation { width: 180px; height: 220px; } .sad-stem { width: 7px; height: 160px; } .sad-seo-block { display: none; }}
@media (max-width: 968px) { .sad-articles-grid { grid-template-columns: repeat(2, 1fr); } .sad-article-img-wrapper { height: 160px; } .sad-article-text { padding: 18px; } .sad-article-title { font-size: 16px; } .sad-article-badge { padding: 5px 11px; font-size: 12px; } .sad-article-hot-badge { width: 26px; height: 26px; font-size: 12px; } .sad-hero { padding: 50px 40px; } .sad-hero-text h3 { font-size: 2.8rem; } .sad-hero-text p { font-size: 1.15rem; } .sad-hero-categories { grid-template-columns: repeat(2, 1fr); } .sad-categories { gap: 14px; padding-left: 12px; padding-right: 12px; } .sad-category-card { min-width: 120px; padding: 20px 14px; } .sad-category-icon { width: 46px; height: 46px; font-size: 21px; }}
@media (max-width: 768px) { .sad-section { padding: 0 16px; } .sad-hero { padding: 45px 30px; margin: 40px 0 30px; border-radius: 26px; grid-template-columns: 1fr; gap: 40px; } .sad-hero-visual { display: none; } .sad-hero-content { gap: 30px; } .sad-hero-header { flex-direction: column; align-items: center; gap: 20px; } .sad-hero-icon { width: 75px; height: 75px; } .sad-hero-icon i { font-size: 40px; } .sad-growth-particles { bottom: -8px; right: -8px; } .sad-particle { width: 7px; height: 7px; } .sad-hero-text h3 { font-size: 2.5rem; } .sad-hero-text p { font-size: 1.1rem; } .sad-hero-season { padding: 12px 16px; min-width: 140px; } .sad-hero-season-label { font-size: 20px; } .sad-hero-categories { grid-template-columns: repeat(2, 1fr); gap: 14px; } .sad-hero-category { padding: 18px 14px; } .sad-hero-category-icon { width: 44px; height: 44px; font-size: 20px; } .sad-hero-category-name { font-size: 13px; } .sad-section-header h4 { font-size: 1.85rem; } .sad-section-header h4::after { width: 48px; } .sad-categories-swiper { padding: 18px 12px; border-radius: 20px; } .sad-categories { gap: 12px; padding: 8px 8px; margin: 0 -8px; scroll-snap-type: unset; } .sad-categories .sad-category-card { scroll-snap-align: unset; } .sad-category-card { min-width: 110px; padding: 18px 12px; } .sad-category-icon { width: 44px; height: 44px; font-size: 20px; } .sad-category-name { font-size: 13px; } .sad-articles-grid { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 22px; padding: 8px 12px 30px; grid-template-columns: unset; scroll-snap-type: x mandatory; } .sad-article-card { flex: 0 0 270px; min-width: 270px; max-width: 270px; scroll-snap-align: start; animation: none !important; } .sad-article-card:hover { transform: translateY(-4px); } .sad-article-img-wrapper { height: 155px; } .sad-article-text { padding: 18px; } .sad-article-title { font-size: 15.5px; margin-bottom: 12px; } .sad-article-hot .sad-article-inner:hover { box-shadow: 0 0 20px rgba(255, 107, 53, 0.4), 0 6px 16px rgba(0, 0, 0, 0.55) !important; transform: scale(1) !important; } .sad-article-inner:hover { box-shadow: 0 6px 16px var(--sad-glow), 0 0 12px var(--sad-success); transform: scale(1); } .sad-seo-block { display: none; }}
@media (max-width: 640px) { .sad-hero { padding: 40px 25px; } .sad-hero-text h3 { font-size: 2.3rem; } .sad-hero-text p { font-size: 1.05rem; } .sad-hero-season-label { font-size: 18px; } .sad-article-card { flex: 0 0 255px; min-width: 255px; } .sad-article-img-wrapper { height: 150px; } .sad-seo-block { display: none; }}
@media (max-width: 480px) { .sad-section { padding: 0 12px; } .sad-hero { padding: 35px 20px; margin: 35px 0 25px; border-radius: 24px; } .sad-hero-icon { width: 68px; height: 68px; } .sad-hero-icon i { font-size: 36px; } .sad-growth-particles { display: none; } .sad-hero-text h3 { font-size: 2.1rem; } .sad-hero-text p { font-size: 1rem; } .sad-hero-season { padding: 10px 14px; min-width: 120px; } .sad-hero-season-title { font-size: 13px; } .sad-hero-season-label { font-size: 18px; } .sad-hero-categories { grid-template-columns: repeat(2, 1fr); gap: 12px; } .sad-hero-category { padding: 16px 12px; } .sad-hero-category-icon { width: 40px; height: 40px; font-size: 19px; } .sad-hero-category-name { font-size: 12px; } .sad-section-header h4 { font-size: 1.75rem; } .sad-section-header h4::after { width: 45px; height: 2.5px; } .sad-section-subtitle { font-size: 13px; } .sad-categories-swiper { padding: 16px 10px; border-radius: 18px; } .sad-categories { gap: 10px; padding: 6px 6px; margin: 0 -6px; } .sad-category-card { min-width: 100px; padding: 16px 10px; } .sad-category-icon { width: 40px; height: 40px; font-size: 19px; } .sad-category-name { font-size: 12px; } .sad-article-card { flex: 0 0 100%; min-width: 100%; max-width: 100%; } .sad-article-img-wrapper { height: 180px; } .sad-article-text { padding: 20px; } .sad-article-title { font-size: 17px; } .sad-article-card:hover { transform: translateY(-3px); } .sad-article-hot .sad-article-inner:hover { box-shadow: 0 0 18px rgba(255, 107, 53, 0.4), 0 5px 14px rgba(0, 0, 0, 0.5) !important; } .sad-article-inner:hover { box-shadow: 0 5px 14px var(--sad-glow), 0 0 10px var(--sad-success); } .sad-seo-block { display: none; }}
@keyframes sad-fade-in { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); }}



.install-banner {    position: fixed;    bottom: 0;    left: 0;    right: 0;    background: #1a2b45;    color: white;    padding: 12px 16px;    display: flex;    align-items: center;    justify-content: space-between;    gap: 12px;    z-index: 9000;    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);    font-size: 14px;}
.install-btn {    background: #4DA0FF;    color: #000;    border: none;    padding: 6px 12px;    border-radius: 6px;    font-weight: 600;    cursor: pointer;}
.dismiss-btn {    background: transparent;    border: none;    color: #aaa;    font-size: 20px;    cursor: pointer;}
a {    color: inherit;    text-decoration: none;}
.container {    max-width: 1400px;    margin: 0 auto;    padding: 11px;}
section {    margin-bottom: 80px;}
h1, h2, h3 {    font-weight: 600;}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px var(--container-padding);
    background: transparent;
    /* прозрачный фон */
    backdrop-filter: blur(0);
    /* без blur */
    -webkit-backdrop-filter: blur(0);
    position: relative;
    z-index: 1000;
}

.logo {    font-size: 22px;    font-weight: 800;    letter-spacing: -0.5px;}
.logo-highlight {    display: inline-block;    background: linear-gradient(90deg, var(--accent), var(--accent-dark));    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    animation: logoPulse 3s infinite alternate;}

@keyframes logoPulse {    0% {        opacity: 0.85;        text-shadow: 0 0 4px rgba(0, 255, 163, 0.3);    }    100% {        opacity: 1;        text-shadow: 0 0 12px rgba(0, 255, 163, 0.6);    }}
.sticky-header {    position: sticky;    top: 0;}
.header-actions {    display: flex;    align-items: center;    gap: 16px;}

.avatar-btn,.icon-btn,.theme-toggle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--accent);
    background: var(--card-bg);
    position: relative;
}

.avatar-btn {    width: 40px;    height: 40px;    overflow: hidden;}
.avatar-btn img {    width: 100%;    height: 100%;    object-fit: cover;}

.icon-btn {    width: 40px;    height: 40px;    color: var(--accent);    font-size: 18px;}

.user-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 12px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    padding: 12px 0;
    min-width: 180px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease;
}

.user-menu:hover .user-panel,.user-menu.active .user-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-panel a {
    display: block;
    padding: 10px 20px;
    color: var(--text-secondary);
    font-size: 15px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.user-panel a:hover {
    background: rgba(0, 168, 107, 0.1);
    color: var(--accent);
}

.notification-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}


.quick-nav-wrapper {    display: none;}

@media (min-width: 993px) {
    .quick-nav-wrapper {
        display: block;
        position: sticky;
        top: 0;
        z-index: 990;
        background: #ffffff00;
    }
}

.quick-nav a {    color: #c4d4ff;}

.quick-nav a:hover {    color: #fff;}

.quick-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #f8f8f800;
    padding: 12px var(--container-padding);
    display: flex;
    justify-content: center;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.light .quick-nav {    border-bottom-color: rgba(0,0,0,0.1);}

.quick-nav-list {    display: flex;    gap: 20px;    list-style: none;    padding: 0;    margin: 0;    flex-wrap: wrap;    justify-content: center;}
.quick-nav-item {    display: flex;    align-items: center;    background-color: #2c2e32;    gap: 6px;    color: #00ff89;    padding: 11px;    border-radius: 11px;    font-size: 15px;    opacity: 0.85;    transition: opacity 0.2s;    white-space: nowrap;}

.quick-nav-item:hover {    opacity: 1;    color: #fff;}

.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--accent);
    background: var(--card-bg);
    color: var(--accent);
    font-size: 16px;
}

.theme-toggle:hover {    background: rgba(0, 168, 107, 0.1);}


.catsTable {
    width: 100%;
    border-collapse: collapse;
}

.catsTd {
    padding: 6px 0;
    line-height: 1.4;
}

.catNumData {
    display: none !important;
}

.catName {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.2s;
    display: block;
    padding: 4px 0;
}

.catName:hover {
    color: var(--accent);
}

.mini-banners {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 12px 0 24px;
    margin-bottom: 20px;
    scrollbar-width: none;
}

.mini-banners::-webkit-scrollbar {
    display: none;
}

.mini-banner {
    white-space: nowrap;
    padding: 8px 16px;
    background: var(--card-bg);
    border-radius: 20px;
    font-size: 14px;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.mini-banner:hover {
    opacity: 1;
    background: var(--accent);
    color: #000;
}

.collapsible-text {
    position: relative;
    max-height: 60px;
    overflow: hidden;
}

.collapsible-text.expanded {
    max-height: none;
}

.read-more {
    display: inline-block;
    margin-top: 12px;
    color: var(--accent);
    font-size: 14px;
    cursor: pointer;
}

.cta-box {
    background: var(--card-bg);
    padding: 20px;
    border-radius: var(--border-radius);
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cta-box h4 {
    margin-bottom: 12px;
}

.cta-box a {
    color: var(--accent);
    font-weight: 600;
}

footer {
    text-align: center;
    padding: 40px 0;
    color: var(--text-secondary);
    font-size: 14px;
    opacity: 0.7;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.light footer {
    border-top-color: rgba(0,0,0,0.1);
}

@media (max-width: 500px) {
    .subtopics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-banner {
        height: 180px;
    }
}

div[id^="sData-"] {
    position: absolute;
    display: flex;
    top: 10px;
    color: #fff;
    background: #ffffff00;
    ; box-shadow: 0 0 5px #969696;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 14px;
    border-radius: 6px;
    z-index: 1;
}

div[id^="sData-"] a {
    display: flex;
    padding: 2px 5px;
    text-decoration: none;
    color: #020203;
}

div[id^="sData-"] a:hover {
    background: #507fff33;
    color: #507fff;
}

div[id^="sData-"] .sTit {
    display: flex;
    color: #fff;
    padding: 10px;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}

.search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 3000;
    padding-top: 72px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
}

.search-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-modal {
    position: relative;
    width: 96%;
    max-width: 600px;
    background: #f8f8f800;
    border-radius: 16px;
    padding: 20px;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.search-modal-overlay.active .search-modal {
    transform: scale(1);
}

.search-modal-close {
    position: absolute;
    top: -11px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.search-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    transform: rotate(90deg);
}

.search-modal-form {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.search-modal-input {
    flex: 1;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bg);
    color: var(--text);
    font-size: 17px;
    font-weight: 500;
    outline: none;
}

.search-modal-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 255, 163, 0.2);
}

.light .search-modal-input {
    border-color: rgba(0, 0, 0, 0.1);
    background: white;
}

.search-modal-submit {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--accent);
    color: #000;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.search-modal-submit:hover {
    background: var(--accent-dark);
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 255, 163, 0.3);
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none !important;
}

.mobile-menu-trigger-wrapper {
    display: none;
}

.mobile-bottom-menu {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 7px 18px;
    border-radius: 50px;
    background: var(--card-bg);
    border: 1px solid rgb(64 64 64 / 7%);
    z-index: 1000;
    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.25);
}

.mobile-menu-btn {
    width: 45px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    position: relative;
    transition: color 0.2s, background 0.2s;
}

.mobile-menu-btn:hover,.mobile-menu-btn.active {
    color: var(--accent);
    background: rgb(0 70 168 / 7%);
}

.mobile-menu-btn img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.notification-dot.mobile-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
}

@media (min-width: 769px) {
    .search-modal-close {
        top: -11px;
    }

    .search-modal-overlay {
        align-items: center;
        padding-top: 0;
    }

    .search-modal {
        padding: 28px;
        border-radius: 20px;
    }
}

@media (max-width: 768px) {
    .mobile-bottom-menu {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 45px;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: inline-flex !important;
        position: fixed;
        bottom: 72px;
        right: 16px;
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--accent), var(--accent-dark));
        color: white;
        text-decoration: none;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 999;
        font-size: 20px;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .mobile-only:hover {
        transform: scale(1.08);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }
}

@media (max-width: 768px) {
    .mobile-menu-trigger-wrapper {
        display: block;
        position: fixed;
        top: 16px;
        left: 16px;
        z-index: 9000;
    }

    .mobile-menu-trigger {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--accent), var(--accent-dark));
        color: white;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        border: none;
    }
}

/* === Боковое меню === */
.menu-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.menu-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.guest-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--accent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
}

.theme-toggle-mobile {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--accent);
    color: var(--accent);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gus-section {
    margin-top: 8px;
}

.gus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: var(--text);
    font-weight: 600;
    font-size: 16px;
    width: 100%;
    padding: 4px 0;
    cursor: pointer;
    text-align: left;
}

.gus-chevron {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.gus-header[aria-expanded="true"] .gus-chevron {
    transform: rotate(180deg);
}

.gus-panel {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0 0;
}

.gus-panel a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    padding: 4px 0;
    transition: color 0.2s;
}

.gus-panel a:hover {
    color: var(--accent);
}

.gus-panel.show {
    display: flex;
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100dvh;
    background: var(--card-bg);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
    z-index: 9001;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mobile-sidebar.open {
    left: 0;
}

.mobile-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    /* Только здесь! */
    padding: 16px;
}

.mobile-sidebar-top {
    flex-shrink: 0;
    padding: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-sidebar-scrollable {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 16px;
}

.mobile-sidebar-scrollable::-webkit-scrollbar {
    display: none;
}

.mobile-sidebar-scrollable {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.mobile-sidebar .catsTable {
    width: 100%;
    border-collapse: collapse;
}

.mobile-sidebar .catsTd {
    padding: 4px 0;
}

.mobile-sidebar .catName {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
    text-decoration: none;
    line-height: 1.4;
}

.mobile-sidebar .catName:hover {
    color: var(--accent);
}

.mobile-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.mobile-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

::-webkit-scrollbar-button {
    background-image: url('');
    background-repeat: no-repeat;
    width: 5px;
    height: 0
}

::-webkit-scrollbar-track {
    background-color: #e8effa00
}

::-webkit-scrollbar-thumb {
    background-image: linear-gradient(125deg,#2196f3 0,#0a84ba 100%);
    border-radius: 18px
}

::-webkit-scrollbar-thumb:hover {
    background-image: linear-gradient(125deg,#0a84ba 0,#2196f3 100%);
}

::-webkit-resizer {
    background-repeat: no-repeat;
    width: 4px;
    height: 0
}

::-webkit-scrollbar {
    width: 5px
}