/* Page template "About" (templates/about.php).
   Enqueued by artinfo_enqueue_page_styles() in inc/core/enqueue.php. */

:root {
    --brand-yellow: #FFC107;
    --brand-black: #121212;
    --brand-dark: #1a1a1a;
    --brand-gray: #666666;
    --brand-light: #F8F9FA;
}
body { font-family: 'Inter', sans-serif; color: var(--brand-black); background-color: #ffffff; }
.text-brand-yellow { color: var(--brand-yellow) !important; }
.bg-brand-yellow { background-color: var(--brand-yellow) !important; }
.text-brand-black { color: var(--brand-black) !important; }
.bg-brand-black { background-color: var(--brand-black) !important; }
.text-brand-gray { color: var(--brand-gray) !important; }
.bg-brand-light { background-color: var(--brand-light) !important; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-wider { letter-spacing: 0.05em; }
.text-sm { font-size: 0.875rem !important; }
.text-xs { font-size: 0.75rem !important; }
.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.max-w-5xl { max-width: 1024px; margin-left: auto; margin-right: auto; }
.max-w-3xl { max-width: 768px; margin-left: auto; margin-right: auto; }
.underline-brand { text-decoration: underline; text-decoration-color: var(--brand-yellow); text-decoration-thickness: 4px; text-underline-offset: 4px; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-3xl { border-radius: 1.5rem !important; }
.aspect-video { aspect-ratio: 16 / 9; }
a { text-decoration: none; }
.btn-brand {
    background-color: var(--brand-yellow);
    color: var(--brand-black);
    font-weight: 700;
    border-radius: 9999px;
    border: none;
    transition: all 0.3s;
    display: inline-block;
}
.btn-brand:hover {
    background-color: #ffcd39;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 193, 7, 0.3);
    color: var(--brand-black);
}
.hover-card-effect { transition: all 0.3s ease; }
.hover-card-effect:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); }
.video-group { cursor: pointer; }
.video-img { transition: opacity 0.5s ease; opacity: 0.7; }
.video-group:hover .video-img { opacity: 0.5; }
.play-btn { transition: transform 0.3s ease; }
.video-group:hover .play-btn { transform: scale(1.1); }
.blur-blob { filter: blur(40px); opacity: 0.2; z-index: 0; }