/* Home Page Specific Styles - PEL-BRUK */

/* Hero Section */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}

.hero__media {
position: absolute;
inset: 0;
z-index: 0;
}

.hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.4) 60%, transparent 100%);
z-index: 1;
}

.hero__content {
position: relative;
z-index: 2;
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}

.hero__text {
max-width: 720px;
}

.hero__kicker {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
margin-bottom: var(--space-4);
}

.hero__title {
font-size: clamp(var(--text-4xl), 5vw, var(--text-5xl));
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: #ffffff;
margin-bottom: var(--space-6);
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero__subtitle {
font-size: var(--text-xl);
color: rgba(255, 255, 255, 0.9);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-8);
max-width: 60ch;
}

.hero__actions {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
}

/* Buttons Variants */
.btn-outline--light {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.5);
}

.btn-outline--light:hover {
border-color: var(--color-accent);
color: var(--color-accent);
background-color: rgba(234, 88, 12, 0.1);
}

.btn--large {
padding: var(--space-4) var(--space-8);
font-size: var(--text-base);
}

/* Section Base */
.section {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}

.section--bg-alt {
background-color: var(--color-bg-alt);
}

.section--bg-dark {
background-color: var(--color-asphalt);
color: #ffffff;
}

.section--bg-dark .section__title,
.section--bg-dark .section__kicker {
color: #ffffff;
}

.section--bg-dark .section__lead {
color: rgba(255, 255, 255, 0.8);
}

.section__header {
margin-bottom: var(--space-16);
}

.section__header--center {
text-align: center;
margin-left: auto;
margin-right: auto;
}

.section__kicker {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
margin-bottom: var(--space-3);
}

.section__title {
font-size: var(--text-4xl);
margin-bottom: var(--space-6);
}

.section__lead {
font-size: var(--text-xl);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}

.section__footer {
margin-top: var(--space-12);
}

.section__footer--center {
text-align: center;
}

/* Services Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-8);
margin-bottom: var(--space-12);
}

.service-card {
background-color: var(--color-bg);
border: 1px solid var(--color-surface);
border-radius: var(--radius-md);
padding: var(--space-8);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}

.service-card__icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-surface);
border-radius: var(--radius-md);
color: var(--color-primary);
margin-bottom: var(--space-6);
}

.service-card__title {
font-size: var(--text-xl);
margin-bottom: var(--space-3);
}

.service-card__desc {
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
line-height: var(--line-height-relaxed);
}

.service-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
text-transform: uppercase;
font-size: var(--text-sm);
letter-spacing: 0.05em;
}

.service-card__link:hover {
color: var(--color-accent);
}

/* Feature Sections */
.feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
}

.feature-grid--reverse .feature__content {
order: 2;
}

.feature-grid--reverse .feature__media {
order: 1;
}

.feature__media {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-heavy);
}

.feature__media img {
width: 100%;
height: auto;
display: block;
}

.feature__text {
font-size: var(--text-lg);
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}

.feature__list {
list-style: none;
margin-bottom: var(--space-8);
}

.feature__list li {
position: relative;
padding-left: var(--space-6);
margin-bottom: var(--space-3);
color: var(--color-text);
}

.feature__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 8px;
height: 8px;
background-color: var(--color-accent);
border-radius: 50%;
}

.feature__highlights {
display: flex;
gap: var(--space-8);
margin-bottom: var(--space-8);
}

.highlight {
display: flex;
flex-direction: column;
}

.highlight strong {
font-size: var(--text-2xl);
color: var(--color-accent);
font-weight: var(--font-weight-bold);
}

.highlight span {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}

/* Project Showcase */
.project-showcase {
margin-bottom: var(--space-12);
}

.project-showcase__media {
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-8);
box-shadow: var(--shadow-heavy);
}

.project-showcase__media img {
width: 100%;
height: auto;
}

.project-showcase__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}

.stat-item {
text-align: center;
padding: var(--space-6);
background-color: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item__number {
display: block;
font-size: var(--text-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-accent);
line-height: 1;
margin-bottom: var(--space-2);
}

.stat-item__label {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.05em;
}

/* Engineering Grid */
.engineering-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-6);
}

.engineering-card {
background-color: var(--color-bg);
border: 2px solid var(--color-surface);
border-radius: var(--radius-md);
padding: var(--space-6);
transition: border-color var(--transition-base);
}

.engineering-card:hover {
border-color: var(--color-primary);
}

.engineering-card__header {
margin-bottom: var(--space-4);
}

.engineering-card__spec {
display: block;
font-size: var(--text-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
font-family: var(--font-mono);
margin-bottom: var(--space-2);
}

.engineering-card__title {
font-size: var(--text-lg);
margin: 0;
}

.engineering-card__desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
margin: 0;
}

/* Split Grid (Quality/Safety) */
.split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
}

.split-card {
background-color: var(--color-bg);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-md);
}

.split-card__media {
height: 280px;
overflow: hidden;
}

.split-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}

.split-card__content {
padding: var(--space-8);
}

.split-card__title {
font-size: var(--text-2xl);
margin-bottom: var(--space-4);
}

.split-card p {
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}

.split-card__list {
list-style: none;
}

.split-card__list li {
position: relative;
padding-left: var(--space-5);
margin-bottom: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text);
}

.split-card__list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--color-success);
font-weight: var(--font-weight-bold);
}

/* CTA Section */
.cta-section {
background-color: var(--color-surface);
}

.cta-box {
background-color: var(--color-asphalt);
border-radius: var(--radius-lg);
padding: var(--space-16) var(--space-12);
text-align: center;
position: relative;
overflow: hidden;
}

.cta-box::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
pointer-events: none;
}

.cta-box__content {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}

.cta-box__title {
color: #ffffff;
font-size: var(--text-4xl);
margin-bottom: var(--space-6);
}

.cta-box__text {
color: rgba(255, 255, 255, 0.85);
font-size: var(--text-lg);
margin-bottom: var(--space-8);
}

.cta-box__actions {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}

/* Testimonials */
.testimonials-preview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--space-8);
margin-bottom: var(--space-12);
}

.testimonial-card {
background-color: var(--color-bg);
border: 1px solid var(--color-surface);
border-radius: var(--radius-md);
padding: var(--space-8);
position: relative;
}

.testimonial-card__quote {
color: var(--color-accent);
margin-bottom: var(--space-4);
opacity: 0.3;
}

.testimonial-card__text {
font-size: var(--text-lg);
font-style: italic;
color: var(--color-text);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-6);
}

.testimonial-card__footer {
border-top: 1px solid var(--color-surface);
padding-top: var(--space-4);
}

.testimonial-card__author {
display: block;
font-weight: var(--font-weight-bold);
color: var(--color-text);
font-style: normal;
}

.testimonial-card__role {
display: block;
font-size: var(--text-sm);
color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 968px) {
.feature-grid,
.split-grid {
grid-template-columns: 1fr;
gap: var(--space-12);
}

.feature-grid--reverse .feature__content,
.feature-grid--reverse .feature__media {
order: unset;
}

.project-showcase__stats {
grid-template-columns: repeat(2, 1fr);
}

.hero__title {
font-size: var(--text-3xl);
}

.cta-box {
padding: var(--space-10) var(--space-6);
}

.cta-box__title {
font-size: var(--text-3xl);
}
}

@media (max-width: 640px) {
.hero__actions {
flex-direction: column;
}

.hero__actions .btn {
width: 100%;
}

.services-grid {
grid-template-columns: 1fr;
}

.project-showcase__stats {
grid-template-columns: 1fr;
}

.feature__highlights {
flex-direction: column;
gap: var(--space-4);
}

.testimonials-preview {
grid-template-columns: 1fr;
}

.cta-box__actions {
flex-direction: column;
}

.cta-box__actions .btn {
width: 100%;
}
}