:root { --p: #e67e22; --p-dark: #d35400; --s: #2980b9; --bg: #f5f6fa; --t-dark: #2c3e50; --white: #ffffff; --f-main: 'Arial Black', Impact, sans-serif; --f-txt: 'Georgia', serif;}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--f-txt); background: var(--bg); color: var(--t-dark); font-size:18px; line-height: 1.8; overflow-x:hidden; }
h1, h2, h3, h4 { font-family: var(--f-main); color: var(--s); text-transform: uppercase; line-height:1.2; margin-bottom: 25px; letter-spacing: -1px; }
a { color: var(--p); text-decoration: none; transition:0.2s; }

/* Grid Layout Header */
header { display: flex; justify-content:space-between; border-bottom: 15px solid var(--p); background: var(--white); align-items:stretch; }
.logo { padding: 30px 40px; background: var(--s); color: var(--white); font-family: var(--f-main); font-size: 28px; text-align:center; letter-spacing:2px; flex-shrink:0; }
.nav-wrap { display: flex; align-items:center; padding: 0 50px; gap: 40px; flex-wrap:wrap;}
.nav-wrap a { font-family: var(--f-main); font-size: 18px; color: var(--t-dark); padding: 10px 0; border-bottom: 4px solid transparent; }
.nav-wrap a:hover, .nav-wrap a.active { color: var(--p); border-color: var(--p); }

.masonry { column-count: 2; column-gap: 40px; padding: 80px 4%; max-width: 1400px; margin: 0 auto;}
@media (max-width: 900px) { .masonry { column-count: 1; } header { flex-direction: column; } .nav-wrap { justify-content:center; padding:20px; gap:20px; } }
.m-item { break-inside: avoid; background: var(--white); padding: 50px; border-radius: 15px; margin-bottom: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.05); }

/* Custom bullet lists */
ul { margin-left: 20px; margin-bottom: 20px; }
li { margin-bottom: 15px; }

/* SVG abstract hero */
.hero-box { background: var(--p); color: var(--white); padding: 120px 40px; position:relative; overflow:hidden;}
.hero-box h1 { color: var(--white); font-size: 5vw; position:relative; z-index:2; max-width:1200px; margin:0 auto; text-align:center; font-style:italic;}
.hero-box p { color: var(--white); font-size: 1.5rem; text-align:center; position:relative; z-index:2; font-family:var(--f-main); margin-top:20px; letter-spacing:2px; text-transform:uppercase; }
.hero-bg { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.1; z-index:1; }

.btn-loud { background: var(--s); color: var(--white); font-family:var(--f-main); padding: 20px 50px; border-radius: 40px; font-size: 20px; display:inline-block; transition: 0.3s; margin-top: 20px; border:4px solid transparent;}
.btn-loud:hover { background: var(--t-dark); color: var(--white); border-color:var(--p); transform:translateY(-5px);}

.feature-img { width: 100%; height: 300px; background: var(--s); margin-bottom: 30px; border-radius: 10px; position:relative; overflow:hidden;}
.feature-svg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width: 80%; opacity:0.3; }

footer { background: var(--t-dark); color: var(--white); padding: 80px 4%; text-align:center; margin-top: 50px;}
footer h2 { color: var(--p); }
footer a { color: var(--white); margin: 0 20px; font-family: var(--f-main); text-decoration:underline; }
footer a:hover { color: var(--p); }