@layer utilities {
.content-auto {
content-visibility: auto;
}

.article-content h2 {
font-size: 1.5rem;
font-weight: bold;
margin-top: 2rem;
margin-bottom: 1rem;
color: #1F2937;
}
.article-content p {
margin-bottom: 1rem;
line-height: 1.7;
}
.article-content ul {
margin-bottom: 1rem;
padding-left: 1.5rem;
list-style-type: disc;
}
.article-content li {
margin-bottom: 0.5rem;
line-height: 1.7;
}

.breadcrumb-container {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.breadcrumb-item {
display: flex;
align-items: center;
position: relative;
}
.breadcrumb-item:not(:last-child)::after {
content: "/";
margin: 0 0.75rem;
color: #9CA3AF;
font-size: 0.875rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.breadcrumb-item a,
.breadcrumb-item span {
display: flex;
align-items: center;
line-height: 1;
}
.breadcrumb-item i {
margin-right: 0.5rem;
width: 1em;
text-align: center;
}
.breadcrumb-item:last-child {
color: #1F2937;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
@media (min-width: 768px) {
.breadcrumb-item:last-child {
max-width: none;
}
}

.article-card:hover {
transform: translateY(-2px);
}

.text-shadow {
text-shadow: 0 2px 10px rgba(10, 132, 255, 0.2);
}
.bg-grid {
background-image: linear-gradient(rgba(156, 163, 175, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(156, 163, 175, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
.menu-backdrop {
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}

.text-gradient-h1 {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(135deg, #0F172A, #0A84FF, #00F5D4);
}
.text-gradient-h2 {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(135deg, #3D5AFE, #0A84FF, #00F5D4);
}
.text-gradient-h3 {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(135deg, #9B51E0, #3D5AFE, #0A84FF);
}
.text-gradient-h4 {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(135deg, #0A84FF, #00F5D4);
}
}

#menuToggle {
display: none;
}

#menuToggle:not(:checked) ~ header .menu-icon-close,
#menuToggle:checked ~ header .menu-icon-open {
display: none;
}

#menuToggle:checked ~ #mobileMenu {
opacity: 1;
visibility: visible;
}

#menuToggle:checked ~ #mobileMenu .menu-content {
max-height: 100vh;
}

#menuToggle:checked ~ .page-wrapper {
overflow: hidden;
}

.menu-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobileMenu {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

#video-demo .aspect-video {
background-color: #1e293b;
background-image: linear-gradient(135deg, rgba(10, 132, 255, 0.05) 25%, transparent 25%),
linear-gradient(45deg, rgba(0, 245, 212, 0.05) 25%, transparent 25%);
background-size: 12px 12px;
background-repeat: repeat;
}

.pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 2rem;
align-items: center;
}

.pagination a {
padding: 0.5rem 1rem;
border-radius: 4px;
color: rgb(75 85 99);
text-decoration: none;
transition: all 0.3s ease;
background: #fff;
border: 1px solid #94a3b8;
}

.pagination .pageinfo {
padding: 0.5rem 1rem;
border-radius: 4px;
background: none;
color: #64748b;
border: none;
}

.pagination .pageinfo strong {
color: #3b82f6;
margin: 0 0.3rem;
}

.pagination a:hover:not(.nopage),
.pagination .curpage {
background: #3b82f6;
border-color: #2563eb;
color: white;
transform: translateY(-2px);
}

.pagination .nopage {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
background: rgba(75, 85, 99, 0.3);
border-color: #cbd5e1;
color: #94a3b8;
}

.pagination .listpage {
min-width: 2.5rem;
text-align: center;
}

@media (max-width: 768px) {
.pagination {
margin-top: 2rem;
padding-top: 1.5rem;
}
}