/* 
    Product Page Main Styles
    Modern High-Fidelity Design
*/

/* 1. RESET CONFLICTS */
* { align-items: initial; }
.ta-main { 
    position: relative; 
    background: #fff; 
    overflow: hidden; 
    font-family: 'Inter', sans-serif !important;
}

/* 2. HEADER TOUCH-UP */
#taHeader {
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 15px 0 !important;
}
.ta-header .ta-btn-gradient-primary {
    background: linear-gradient(135deg, #fb923c, #f97316) !important;
    border-radius: 50px !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.2) !important;
}

/* 3. SECTION FIXES - Matching Mockup Dimensions */
.ta-main > section { 
    position: relative !important; 
    display: block !important; 
    width: 100% !important; 
    clear: both !important;
}

/* Hero Section (tas-full-banner) - Reducing excessive padding */
.tas-full-banner { 
    padding: 80px 0 60px 0 !important; 
    background: #fff !important; 
}
.tas-banner-container.container {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 60px !important; 
    align-items: center !important;
}
.tas-banner-title { 
    font-size: 42px !important; 
    line-height: 1.15 !important; 
    font-weight: 700 !important; 
    color: #040404 !important; 
    margin-bottom: 22px !important;
}
.tas-banner-desc {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #323232 !important;
    max-width: 520px !important;
    margin-bottom: 30px !important;
}

/* Hero Buttons */
.tas-btn-primary {
    padding: 12px 24px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    background: linear-gradient(135deg, #fb923c, #f97316) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.2) !important;
}

/* 4. HIGHLIGHTS SECTION (ta-elegance) */
.tas-elegance { padding: 40px 0 !important; border-bottom: 1px solid #f0f0f0; }
.tas-container.container {
    padding: 40px 24px !important; 
    gap: 60px !important; 
}
.tas-content h2 { font-size: 32px !important; font-weight: 600 !important; line-height: 1.2 !important; }
.tas-content p, .tas-content { font-size: 14px !important; color: #666 !important; line-height: 1.7 !important; }

.tas-style-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.tas-style-card { position: relative; border-radius: 24px; overflow: hidden; display: block; height: 100%; }
.tas-style-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.tas-style-card-large { height: 500px; }
.tas-style-right { display: grid; gap: 24px; height: 500px; }
.tas-style-overlay {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    color: #fff;
}
.tas-style-arrow {
    position: absolute; top: 20px; right: 20px; width: 40px; height: 40px;
    background: rgba(255,255,255,0.2); border-radius: 50%; color: #fff;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px);
}
.tas-style-card:hover img { transform: scale(1.05); }

/* 5. CORE CAPABILITIES (services/products) */
.services { padding: 40px 24px !important; background: #fafafa !important; }
.service-card {
    padding: 18px !important; 
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
    background: #fff !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column;
    transition: all 0.3s ease !important;
    height: 100%;
}
.service-card:hover { transform: translateY(-5px); }
.service-card img { height: 160px !important; border-radius: 14px !important; width: 100%; object-fit: cover; margin-bottom: 15px; }
.service-card h3 { font-size: 18px !important; font-weight: 600 !important; margin: 15px 0 10px !important; color: #0f172a !important; }
.service-card p { font-size: 14px !important; color: #666 !important; line-height: 1.6 !important; flex-grow: 1; }
.read-more-link { color: #f97316 !important; font-weight: 700 !important; font-size: 14px !important; display: flex !important; align-items: center !important; }
.read-more-link span { margin-left: 8px; transition: transform 0.3s ease; }
.service-card:hover .read-more-link span { transform: translateX(5px); }

/* 6. CTA SECTION */
.tas-cta { padding: 60px 20px; background: #fff; }
.tas-cta__container {
    padding: 50px 30px; border-radius: 28px; 
    background: linear-gradient(135deg, #0b132b 0%, #1e293b 100%);
    text-align: center;
}
.tas-cta h2 { font-size: 42px; font-weight: 700; color: #fff; margin-bottom: 20px; }
.tas-cta p { font-size: 18px; color: rgba(255,255,255,0.8); max-width: 640px; margin: 0 auto 35px auto; }