:root {
    --bg: #ffffff;
    --text: #545454;
    --dark: #2f3138;
    --panel: #f3f3f3;
    --input: #ffffff;
    --accent: #ffd200;
    --footer: #1f2229;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Roboto Condensed', Arial, sans-serif;
}

.page {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 60px 20px 90px;
}

.hero { text-align: center; }

.logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 34px;
}

.logo-image {
    width: min(100%, 420px);
    height: auto;
    display: block;
}

h1 {
    margin: 26px 0 28px;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: clamp(2.2rem, 2vw + 1.5rem, 3.4rem);
    line-height: 1.05;
    color: #4a4a4a;
    font-weight: 700;
}

.cursor { font-weight: 400; }

.intro-text {
    max-width: 980px;
    margin: 0 auto 88px;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #666;
}

.contact-box {
    max-width: 980px;
    margin: 0 auto;
    background: var(--panel);
    padding: 78px 66px 92px;
}

.contact-box h2 {
    margin: 0 auto;
    text-align: center;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: clamp(2.1rem, 1.6vw + 1.3rem, 3.2rem);
    line-height: 1.08;
    color: var(--dark);
    font-weight: 800;
    max-width: 720px;
}

.note {
    text-align: center;
    margin: 10px 0 42px;
    font-size: 0.86rem;
    color: #434343;
}

.alert {
    max-width: 670px;
    margin: 0 auto 24px;
    padding: 14px 18px;
    border-radius: 6px;
    text-align: center;
    font-size: 0.95rem;
}

.alert.success { background: #e7f6e7; color: #246024; }
.alert.error { background: #fbe8e8; color: #8b2222; }

.contact-form {
    max-width: 760px;
    margin: 0 auto;
}

.row { margin-bottom: 18px; }

.two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

input,
textarea {
    width: 100%;
    border: 0;
    background: var(--input);
    padding: 15px 18px;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-size: 0.95rem;
    color: #444;
    outline: none;
}

input { height: 48px; }
textarea { min-height: 176px; resize: vertical; }

input::placeholder,
textarea::placeholder { color: #9b9b9b; }

.submit-row {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

button {
    border: 0;
    background: var(--accent);
    color: #232323;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
    padding: 14px 34px;
    border-radius: 8px;
    cursor: pointer;
}

button:hover { filter: brightness(0.96); }

.site-footer {
    background: var(--footer);
    color: #fff;
    text-align: center;
    padding: 24px 20px;
    font-size: 0.95rem;
}

.site-footer p { margin: 0; }

@media (max-width: 900px) {
    .contact-box { padding: 54px 28px 68px; }
    .two-cols { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 640px) {
    .page { padding: 36px 16px 64px; }
    h1 { font-size: 2rem; }
    .intro-text { font-size: 0.98rem; margin-bottom: 56px; }
    .contact-box h2 { font-size: 1.85rem; }
    .site-footer { font-size: 0.82rem; line-height: 1.5; }
}