:root {
    --red: #E53935;
    --black: #1A1A1A;
    --cream: #F5F1E8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Oswald', 'Impact', 'Arial Black', sans-serif;
    background: var(--cream);
    color: var(--black);
    line-height: 1.5;
    overflow-x: hidden;
}
.geo-circle { position: fixed; width: 300px; height: 300px; background: var(--red); border-radius: 50%; top: -100px; right: -80px; z-index: 0; opacity: 0.9; }
.geo-rect { position: fixed; width: 200px; height: 600px; background: var(--black); bottom: -150px; left: 50px; transform: rotate(-15deg); z-index: 0; opacity: 0.95; }
.geo-cross { position: fixed; width: 150px; height: 150px; top: 40%; left: -50px; z-index: 0; }
.geo-cross::before, .geo-cross::after { content: ''; position: absolute; background: var(--red); }
.geo-cross::before { width: 100%; height: 30px; top: 60px; }
.geo-cross::after { width: 30px; height: 100%; left: 60px; }

header {
    background: white;
    border-bottom: 6px solid var(--red);
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 10;
}
.logo-text { font-size: 42px; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; }
.logo-text span { color: var(--red); }

.container { max-width: 1100px; margin: 40px auto; padding: 0 20px; position: relative; z-index: 5; }
.card { background: white; padding: 30px; margin-bottom: 25px; border-left: 8px solid var(--red); position: relative; box-shadow: 6px 6px 0 var(--black); }
h1, h2, h3 { font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
h1 { font-size: 48px; border-bottom: 4px solid var(--black); padding-bottom: 10px; display: inline-block; }
h2 { font-size: 32px; color: var(--red); }
.btn { display: inline-block; padding: 14px 32px; background: var(--red); color: white; text-decoration: none; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; border: 3px solid var(--black); cursor: pointer; font-size: 15px; font-family: inherit; }
.btn-danger { background: var(--red); }

.hero { background: white; padding: 60px 40px; border: 6px solid var(--black); position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; bottom: -100px; right: -100px; width: 400px; height: 400px; background: var(--red); border-radius: 50%; opacity: 0.15; }
.hero h1 { font-size: 72px; line-height: 1; margin-bottom: 20px; }
.hero h1 span { display: block; color: var(--red); transform: skewX(-10deg); display: inline-block; }
.hero p { font-size: 20px; max-width: 600px; font-family: 'Georgia', serif; }