body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#1e1e1e;
color:#e6e6e6;
}



/* HEADER */

/* HEADER */

.header{
background:#0f0f0f;
border-bottom:3px solid #c65a24;
}

.header-inner{
display:flex;
align-items:center;
justify-content:center;
padding:60px 60px;   /* bigger header height */
position:relative;
}

.logo{
height:180px;
position:absolute;
left:40px;
top:50%;
transform:translateY(-50%);
}

.brand{
font-size:64px;      /* stronger title */
font-weight:700;
letter-spacing:2px;
color:#c65a24;
}



/* HERO */

.hero{
text-align:center;
padding:24px 20px 14px;

background-image:
linear-gradient(rgba(30,30,30,.92), rgba(30,30,30,.92)),
url("https://www.transparenttextures.com/patterns/brick-wall.png");
}

.hero h1{
font-size:46px;
margin-bottom:16px;
}

.hero p{
font-size:21px;
color:#cfcfcf;
}

.brick{
color:#c65a24;
}



/* DIVIDER */

.divider{
height:3px;
background:#c65a24;
width:80%;
margin:30px auto 40px auto;
}



/* PRODUCTS */

.products{
max-width:1000px;
margin:auto;
padding-bottom:70px;
}

.products h2{
text-align:center;
font-size:32px;
margin-bottom:30px;
}



/* ACCORDION */

.accordion-item{
border-top:2px solid #c65a24;
}

.accordion-item:last-child{
border-bottom:2px solid #c65a24;
}

.accordion-header{
width:100%;
background:none;
border:none;
color:#ffffff;
font-size:24px;
padding:18px;
text-align:left;
cursor:pointer;
display:flex;
align-items:center;
gap:14px;
}



/* CHEVRON */

.chevron{
color:#9aa4ad;
font-size:18px;
transition:transform .3s ease;
}



/* PRODUCT COLORS */

.product-title.live{
color:#ffffff;
}

.product-title.future{
color:#7a7a7a;
}



/* ACCORDION CONTENT */

.accordion-content{
max-height:0;
overflow:hidden;
transition:max-height .35s ease;
padding:0 18px;
color:#d0d0d0;
}



/* BUTTONS */

.product-buttons{
margin-top:20px;
display:flex;
flex-direction:column;
gap:10px;
max-width:300px;
}

.btn{
text-decoration:none;
border:1px solid #555;
padding:12px;
text-align:center;
border-radius:5px;
color:#e6e6e6;
transition:all .2s;
}

.btn:hover{
background:#444;
}

.primary{
background:#c65a24;
border:none;
color:#111;
font-weight:600;
}

.primary:hover{
background:#d96b2c;
}



/* FOOTER */

.footer{
text-align:center;
padding:30px;
background:#0f0f0f;
border-top:2px solid #c65a24;
font-size:14px;
color:#aaaaaa;
}