/* Front page (front-page.php) specific styles extracted from style.css */
.hero { height: 100vh; background: url('../../../images/hero.png') center center / cover no-repeat; display: flex; align-items: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to right, rgba(11, 11, 11, 0.95) 0%, rgba(11, 11, 11, 0.8) 30%, rgba(53, 0, 0, 0.7) 60%, rgba(11, 11, 11, 0.85) 100%); z-index: 1; }
.hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%); z-index: 1; }
.hero-content { position: relative; z-index: 2; max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--container-padding); width: 100%; animation: heroContentFadeIn 1.2s ease-out; }
.hero h1 { font-family: var(--font-serif); font-size: var(--font-size-heading-xl); line-height: 0.85; font-weight: var(--font-weight-extrabold); margin-bottom: var(--spacing-2xl); color: var(--color-text-primary); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px var(--color-gold-overlay-medium); letter-spacing: -0.03em; max-width: 700px; text-transform: uppercase; position: relative; }
.hero h1::after { content: ''; position: absolute; bottom: -16px; left: 0; width: 120px; height: 4px; background: linear-gradient(90deg, var(--color-gold), transparent); border-radius: 2px; }
.hero-subtitle { font-size: var(--font-size-body-xl); font-weight: var(--font-weight-normal); color: var(--color-text-secondary); margin-bottom: var(--spacing-2xl); max-width: 560px; line-height: 1.7; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); font-family: var(--font-sans); letter-spacing: 0.02em; }
.hero .button { font-size: var(--font-size-body-md); padding: 20px var(--spacing-2xl); min-width: 180px; box-shadow: var(--shadow-gold-lg); transform: scale(1); transition: var(--transition-smooth); }
.hero .button:hover { transform: scale(1.05) translateY(-3px); box-shadow: var(--shadow-gold-lg), 0 0 30px var(--color-gold-overlay-medium); }
@keyframes heroContentFadeIn { 0% { opacity: 0; transform: translateY(40px);} 100% { opacity: 1; transform: translateY(0);} }

.features { background: var(--color-black-secondary); padding: var(--section-padding) 0; border-top: var(--border-width-regular) solid var(--color-gold); border-bottom: var(--border-width-thin) solid var(--color-gold-overlay-medium); position: relative; overflow: hidden; }
.features::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 25% 25%, var(--color-gold-overlay-light) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(53, 0, 0, 0.03) 0%, transparent 50%); pointer-events: none; }
.features .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-2xl); align-items: start; position: relative; z-index: 1; }
.feature-card { text-align: center; padding: var(--spacing-2xl) var(--spacing-xl); border-radius: var(--border-radius-lg); transition: var(--transition-slow); position: relative; background: var(--color-black); border: var(--border-width-regular) solid transparent; cursor: pointer; overflow: hidden; }
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--color-gold), var(--color-red)); opacity: 0; border-radius: var(--border-radius-lg); transition: var(--transition-slow); z-index: -1; }
.feature-card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, var(--color-gold-overlay-light) 90deg, transparent 180deg, var(--color-gold-overlay-light) 270deg, transparent 360deg); opacity: 0; transition: var(--transition-slow); z-index: -1; animation: rotate 10s linear infinite; }
.feature-card:hover { transform: translateY(-12px) scale(1.02); border-color: var(--color-gold); box-shadow: var(--shadow-xl), 0 0 40px var(--color-gold-overlay-strong); }
.feature-card:hover::before { opacity: 0.08; }
.feature-card:hover::after { opacity: 1; }
.feature-card img { width: 72px; height: 72px; filter: brightness(0) saturate(100%) invert(76%) sepia(14%) saturate(1018%) hue-rotate(11deg) brightness(97%) contrast(89%); transition: var(--transition-slow); position: relative; z-index: 1; }
.feature-card:hover img { filter: brightness(0) saturate(100%) invert(76%) sepia(14%) saturate(1018%) hue-rotate(11deg) brightness(120%) contrast(120%); transform: scale(1.15) rotate(8deg); animation: iconGlow 0.6s ease-out; }
.feature-card h3 { font-family: var(--font-sans); font-size: var(--font-size-heading-sm); font-weight: var(--font-weight-bold); color: var(--color-gold); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition-smooth); position: relative; }
.feature-card h3::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0; height: var(--border-width-regular); background: var(--color-gold); transition: var(--transition-smooth); }
.feature-card:hover h3 { color: var(--color-gold-light); transform: translateY(-2px); }
.feature-card:hover h3::after { width: 60px; }
.feature-card p { font-size: var(--font-size-body-sm); color: var(--color-text-secondary); line-height: 1.7; margin: 0; transition: var(--transition-smooth); }
.feature-card:hover p { color: var(--color-text-primary); }
@keyframes rotate { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
@keyframes iconGlow { 0%,100% { filter: brightness(0) saturate(100%) invert(76%) sepia(14%) saturate(1018%) hue-rotate(11deg) brightness(120%) contrast(120%);} 50% { filter: brightness(0) saturate(100%) invert(76%) sepia(14%) saturate(1018%) hue-rotate(11deg) brightness(150%) contrast(150%);} }

.product-grid { background: var(--color-black); padding: var(--section-padding) 0; position: relative; overflow: hidden; }
.product-grid::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200px; height: var(--border-width-regular); background: linear-gradient(90deg, transparent, var(--color-gold), transparent); z-index: 1; }
.product-grid .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--container-padding); }

.section-columns { background: var(--color-black-premium); padding: var(--spacing-4xl) var(--spacing-2xl); border-top: var(--border-width-thin) solid var(--color-gold-accent); position: relative; overflow: hidden; }
.section-columns::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 20%, var(--color-gold-overlay-light) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(53, 0, 0, 0.05) 0%, transparent 50%); pointer-events: none; }
.section-columns .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-2xl); max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.info-card { padding: var(--spacing-2xl) 36px; background: var(--color-card-dark); border: var(--border-width-thin) solid var(--color-gold-accent); border-radius: var(--border-radius-md); transition: var(--transition-slow); position: relative; overflow: hidden; backdrop-filter: blur(10px); }
.info-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--color-red-overlay), transparent 60%); opacity: 0.8; transition: var(--transition-slow); z-index: -1; }
.info-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--color-gold-overlay-light) 0%, transparent 40%, rgba(53, 0, 0, 0.2) 100%); opacity: 0; transition: var(--transition-slow); z-index: -1; }
.info-card:hover { transform: translateY(-8px); border-color: var(--color-gold-accent); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 40px var(--color-gold-overlay-light); }
.info-card:hover::before { opacity: 1; }
.info-card:hover::after { opacity: 1; }
.info-card h3 { font-family: var(--font-heading); font-size: 24px; font-weight: var(--font-weight-bold); color: var(--color-gold-accent); margin-bottom: var(--spacing-lg); text-transform: uppercase; letter-spacing: 1px; position: relative; z-index: 1; }
.info-card h3::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 40px; height: var(--border-width-regular); background: linear-gradient(90deg, var(--color-gold-accent), transparent); transition: var(--transition-smooth); }
.info-card:hover h3::after { width: 80px; }
.info-card p { font-size: 17px; font-weight: var(--font-weight-normal); color: var(--color-text-premium); line-height: 1.6; margin-bottom: var(--spacing-md); position: relative; z-index: 1; }
.info-card strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }

@media (max-width: 1024px) {
    .features .container { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
    .hero h1 { font-size: clamp(32px, 8vw, 48px); margin-bottom: var(--spacing-lg); }
    .hero-subtitle { font-size: var(--font-size-body-md); margin-bottom: var(--spacing-xl); }
    .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .features .container { grid-template-columns: 1fr; gap: var(--spacing-lg); }
    .feature-card { padding: var(--spacing-xl) var(--spacing-lg); }
    .product-grid .container { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); }
    .section-columns .container { grid-template-columns: 1fr; gap: var(--spacing-xl); }
    .info-card { padding: var(--spacing-xl) var(--spacing-lg); }
}
@media (max-width: 480px) {
    :root { --container-padding: var(--spacing-md); --section-padding: 60px; }
    .hero h1 { font-size: clamp(28px, 7vw, 36px); }
    .product-grid .container { grid-template-columns: 1fr; }
    .feature-card { padding: var(--spacing-lg) var(--spacing-md); }
    .info-card { padding: var(--spacing-lg) 20px; }
}