/* ==================== HUB MEDIA - SHARED STYLES ==================== */
/* Used by all product pages. index.html has its own inline copy. */

:root {
    --hub-red: #D32F2F;
    --hub-orange: #F57600;
    --hub-blue: #1976D2;
    --hub-dark-blue: #0D47A1;
    --black: #111111;
    --dark-gray: #555555;
    --light-gray: #8D8B8B;
    --white: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { font-family: 'Inter', sans-serif; color: var(--black); background: var(--white); overflow-x: clip; line-height: 1.75; }
h1,h2,h3,h4,h5,h6 { font-family: 'Outfit', sans-serif; font-weight: 700; line-height: 1.2; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 60px; }

/* ==================== BUTTONS ==================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 32px; font-family: 'Outfit', sans-serif; font-weight: 600;
    font-size: 14px; text-decoration: none; border-radius: 8px;
    transition: all 0.3s ease; cursor: pointer; border: none;
    position: relative; overflow: hidden;
}
.btn::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); z-index: 1; pointer-events: none;
}
.btn:hover::after { animation: glossShine 0.75s; }
@keyframes glossShine { 0% { left: -100%; } 100% { left: 200%; } }

.btn-primary { background: linear-gradient(135deg, #F57600 0%, #D32F2F 100%); color: var(--white); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(211,47,47,0.35); }
.btn-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.4); }
.btn-outline:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-dark { background: var(--black); color: var(--white); }
.btn-dark:hover { background: var(--hub-dark-blue); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,0.08); color: var(--white); border: 1.5px solid rgba(255,255,255,0.3); }
.btn-ghost:hover { background: rgba(255,255,255,0.15); }
.btn-blue { background: var(--hub-blue); color: var(--white); }
.btn-blue:hover { background: var(--hub-dark-blue); transform: translateY(-2px); }

/* ==================== NAVIGATION ==================== */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 24px 0; transition: all 0.4s ease;
    background: rgba(5,21,48,0.92); backdrop-filter: blur(12px);
}
.nav.scrolled {
    background: rgba(5,21,48,0.97); backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0,0,0,0.2); padding: 16px 0;
}
.nav.scrolled .nav-links a { color: var(--white); }
.nav.scrolled .nav-links a:hover { color: var(--hub-orange); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav .logo-img { height: 64px; width: auto; object-fit: contain; }
.nav.scrolled .logo-img { height: 56px; }
.footer-brand .logo-img { height: 44px; width: auto; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 44px; list-style: none; }
.nav-links a { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 15px; color: rgba(255,255,255,0.9); text-decoration: none; transition: color 0.3s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--hub-orange); }
.nav-dark .nav-links a { color: var(--dark-gray); }
.nav-dark .nav-links a:hover { color: var(--hub-blue); }

/* Mobile toggle */
.mobile-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: all 0.3s ease; }
.mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
    display: none; position: fixed; inset: 0; background: rgba(5,21,48,0.97);
    backdrop-filter: blur(12px); z-index: 999; flex-direction: column;
    align-items: center; justify-content: center; gap: 32px; padding: 80px 24px 40px;
}
.mobile-menu.active { display: flex; }
.mobile-menu .nav-links { flex-direction: column; gap: 28px; text-align: center; }
.mobile-menu .nav-links a { font-size: 24px; color: rgba(255,255,255,0.9); }

/* ==================== FOOTER ==================== */
.footer { background: linear-gradient(135deg, #0D47A1 0%, #051530 100%); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 40px; }
.footer-brand p { color: rgba(255,255,255,0.65); margin-top: 20px; font-size: 15px; line-height: 1.8; max-width: 280px; }
.footer-column h4 { color: var(--white); font-size: 17px; margin-bottom: 24px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.footer-links a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 15px; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
.footer-bottom p { color: rgba(255,255,255,0.45); font-size: 14px; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.85); margin-bottom: 20px; flex-wrap: wrap; }
.breadcrumb a { color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--hub-orange); }
.breadcrumb .sep { opacity: 0.6; }
.breadcrumb .current { color: #ffffff; font-weight: 600; }

/* ==================== ANIMATIONS ==================== */
.fade-up { opacity: 0; transform: translateY(40px); filter: blur(4px); transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.7s ease, filter 0.7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.slide-left { opacity: 0; transform: translateX(-60px); filter: blur(4px); transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.7s ease, filter 0.7s ease; }
.slide-left.visible { opacity: 1; transform: translateX(0); filter: blur(0); }
.slide-right { opacity: 0; transform: translateX(60px); filter: blur(4px); transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.7s ease, filter 0.7s ease; }
.slide-right.visible { opacity: 1; transform: translateX(0); filter: blur(0); }
.fade-up.stagger-1, .slide-left.stagger-1, .slide-right.stagger-1 { transition-delay: 0.1s; }
.fade-up.stagger-2, .slide-left.stagger-2, .slide-right.stagger-2 { transition-delay: 0.2s; }
.fade-up.stagger-3, .slide-left.stagger-3, .slide-right.stagger-3 { transition-delay: 0.3s; }
.fade-up.stagger-4, .slide-left.stagger-4, .slide-right.stagger-4 { transition-delay: 0.4s; }

/* Section labels */
.section-label { display: inline-block; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px; color: var(--hub-blue); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 16px; }
.section-title { font-size: clamp(36px, 4vw, 50px); color: var(--black); margin-bottom: 18px; }
.section-subtitle { font-size: 18px; color: var(--dark-gray); max-width: 550px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 70px; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .container { padding: 0 40px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (max-width: 768px) {
    .container { padding: 0 24px; }
    .nav .logo-img { height: 48px; }
    .nav.scrolled .logo-img { height: 44px; }
    .footer-brand .logo-img { height: 36px; }
    .nav-links { display: none; }
    .mobile-toggle { display: flex; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}