* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;

```
font-family: Arial, sans-serif;

background-color: #f5efe6;

color: #29231f;
```

}

/* =========================
HEADER
========================= */

header {
min-height: 75px;

```
background-color: #29231f;

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 50px;
```

}

.logo {
display: flex;

```
align-items: center;

gap: 10px;

color: white;

font-size: 28px;

font-weight: bold;

letter-spacing: 2px;
```

}

.logo-mark {
width: 38px;

```
height: 38px;

background-color: #9b452f;

color: white;

display: flex;

align-items: center;

justify-content: center;

font-size: 22px;

font-weight: bold;

border-radius: 50%;
```

}

nav {
display: flex;

```
gap: 30px;
```

}

nav a {
color: white;

```
text-decoration: none;

font-size: 16px;
```

}

nav a:hover {
color: #d8895d;
}

/* =========================
HERO
========================= */

.hero {
min-height: 600px;

```
display: flex;

align-items: center;

padding: 70px 8%;

background-color: #e9ddcd;
```

}

.hero-content {
width: 55%;
}

.hero-small-title {
color: #9b452f;

```
font-size: 14px;

font-weight: bold;

letter-spacing: 2px;
```

}

.hero h1 {
font-size: 58px;

```
line-height: 1.05;

margin: 20px 0 25px;

color: #29231f;
```

}

.hero-description {
font-size: 18px;

```
line-height: 1.7;

max-width: 600px;

color: #5b5149;
```

}

.hero-buttons {
margin-top: 35px;

```
display: flex;

gap: 15px;
```

}

.btn {
display: inline-block;

```
padding: 15px 25px;

text-decoration: none;

font-weight: bold;

border-radius: 4px;
```

}

.primary-btn {
background-color: #9b452f;

```
color: white;

border: 2px solid #9b452f;
```

}

.primary-btn:hover {
background-color: #7e3625;

```
border-color: #7e3625;
```

}

.secondary-btn {
border: 2px solid #9b452f;

```
color: #9b452f;

background-color: transparent;
```

}

.secondary-btn:hover {
background-color: #9b452f;

```
color: white;
```

}

/* =========================
HERO VISUAL
========================= */

.hero-image {
width: 45%;

```
min-height: 400px;

margin-left: 50px;

background:

    linear-gradient(
        rgba(41, 35, 31, 0.25),
        rgba(41, 35, 31, 0.55)
    ),

    linear-gradient(
        135deg,
        #9b452f,
        #5c3428
    );

display: flex;

align-items: center;

justify-content: center;
```

}

.hero-image-text {
color: white;

```
text-align: center;
```

}

.hero-image-text span {
display: block;

```
font-size: 18px;

letter-spacing: 4px;

margin-bottom: 20px;
```

}

.hero-image-text strong {
font-size: 55px;

```
line-height: 0.95;
```

}

/* =========================
HIGHLIGHTS
========================= */

.highlights {
display: grid;

```
grid-template-columns:
    repeat(3, 1fr);

gap: 25px;

padding: 60px 8%;

background-color: #f5efe6;
```

}

.highlight-box {
background-color: white;

```
padding: 30px;

border-left: 5px solid #9b452f;

box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.08);
```

}

.highlight-box h3 {
margin-top: 0;

```
font-size: 22px;

color: #29231f;
```

}

.highlight-box p {
color: #665c54;

```
line-height: 1.6;
```

}

/* =========================
PRODUCTS
========================= */

.products-section {
padding: 90px 8%;

```
background-color: #e9ddcd;
```

}

.section-heading {
max-width: 700px;

```
margin-bottom: 50px;
```

}

.section-label {
color: #9b452f;

```
font-size: 14px;

font-weight: bold;

letter-spacing: 2px;
```

}

.section-heading h2,
.demo-content h2,
.careers-section h2,
.contact-section h2 {
font-size: 42px;

```
margin: 15px 0;

color: #29231f;
```

}

.section-heading p,
.demo-content p,
.careers-section p,
.contact-section p {
font-size: 17px;

```
line-height: 1.7;

color: #665c54;
```

}

.products-grid {
display: grid;

```
grid-template-columns: repeat(2, 1fr);

gap: 30px;
```

}

.product-card {
background-color: white;

```
box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.08);
```

}

.product-image {
height: 280px;

```
display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 28px;

font-weight: bold;

letter-spacing: 2px;
```

}

.crack-image {
background:
linear-gradient(
rgba(70, 45, 35, 0.45),
rgba(70, 45, 35, 0.65)
),
linear-gradient(
135deg,
#a85b42,
#5a3328
);
}

.seep-image {
background:
linear-gradient(
rgba(40, 60, 65, 0.35),
rgba(40, 60, 65, 0.65)
),
linear-gradient(
135deg,
#637b78,
#304441
);
}

.product-content {
padding: 35px;
}

.product-number {
color: #9b452f;

```
font-weight: bold;

font-size: 14px;
```

}

.product-content h3 {
font-size: 30px;

```
margin: 10px 0;
```

}

.product-content p {
color: #665c54;

```
line-height: 1.7;
```

}

.product-link {
display: inline-block;

```
margin-top: 15px;

color: #9b452f;

font-weight: bold;

text-decoration: none;
```

}

/* =========================
DEMO
========================= */

.demo-section {
padding: 90px 8%;

```
background-color: #29231f;

color: white;
```

}

.demo-content {
max-width: 700px;
}

.demo-content h2 {
color: white;
}

.demo-content p {
color: #d5ccc4;
}

/* =========================
CAREERS
========================= */

.careers-section {
padding: 80px 8%;

```
display: flex;

align-items: center;

justify-content: space-between;

gap: 40px;

background-color: #f5efe6;
```

}

.careers-section > div {
max-width: 700px;
}

/* =========================
CONTACT
========================= */

.contact-section {
padding: 80px 8%;

```
text-align: center;

background-color: #e9ddcd;
```

}

.contact-section p {
max-width: 650px;

```
margin: 0 auto 30px;
```

}

/* =========================
FOOTER
========================= */

footer {
background-color: #29231f;

```
color: white;

text-align: center;

padding: 45px 20px;
```

}

footer .logo {
justify-content: center;

```
margin-bottom: 15px;
```

}

footer p {
color: #cfc5bb;

```
margin: 8px 0;
```

}

/* =========================
MOBILE
========================= */

@media (max-width: 800px) {

```
header {
    padding: 20px;

    flex-direction: column;

    gap: 20px;
}


nav {
    gap: 15px;

    flex-wrap: wrap;

    justify-content: center;
}


.hero {
    flex-direction: column;

    padding: 50px 25px;
}


.hero-content {
    width: 100%;
}


.hero h1 {
    font-size: 42px;
}


.hero-image {
    width: 100%;

    margin: 40px 0 0 0;

    min-height: 300px;
}


.highlights {
    grid-template-columns: 1fr;

    padding: 40px 25px;
}


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


.products-section {
    padding: 60px 25px;
}


.section-heading h2,
.demo-content h2,
.careers-section h2,
.contact-section h2 {
    font-size: 34px;
}


.careers-section {
    flex-direction: column;

    align-items: flex-start;

    padding: 60px 25px;
}


.hero-buttons {
    flex-direction: column;
}


.btn {
    text-align: center;
}
```

}
.product-image {
    position: relative;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-image span {
    position: absolute;

    left: 25px;
    bottom: 25px;

    background-color: rgba(41, 35, 31, 0.85);

    color: white;

    padding: 10px 15px;

    font-size: 18px;
}

/* =========================
ACCESSIBILITY / FINAL POLISH
========================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #d8895d;
    outline-offset: 3px;
}

img {
    max-width: 100%;
}