:root {
--dark-teal: #005c46;
--lime: #B1D249;
--light-gray: #f5f5f5;
}

body {
font-family: 'Montserrat', sans-serif;
margin: 0;
overflow-x: hidden;
}

.hero-container {
display: flex;
flex-wrap: wrap;
min-height: 90vh;
}

.hero-left {
flex: 1;
background-color: white;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 350px;
}

.hero-right {
flex: 1.2;
background-color: var(--dark-teal);
color: white;
padding: 60px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 350px;
}

.form-box {
max-width: 400px;
width: 100%;
background: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.coupon-border {
border: 2px dashed var(--lime);
padding: 15px;
text-align: center;
margin-bottom: 20px;
position: relative;
}

.coupon-border i.fa-scissors {
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
background: white;
padding: 5px;
color: var(--dark-teal);
}

.form-control, .form-select {
border-radius: 0;
border: 1px solid #eee;
margin-bottom: 10px;
padding: 12px;
}

.btn-main {
background-color: var(--lime);
color: white;
border: none;
width: 100%;
padding: 15px;
font-weight: 800;
letter-spacing: 1px;
transition: 0.3s;
}

.btn-main:hover {
background-color: #286090;
color: white;
}

.btn-lime {
border-radius: 50px;
background-color: var(--lime);
color: var(--dark-teal);
border-radius: 50px;
padding: 12px 35px;
font-weight: 700;
border: none;
display: inline-block;
text-decoration: none;
}

.skills {
padding: 80px 0;
text-align: center;
}

.skill-icon {
font-size: 50px;
margin-bottom: 20px;
}

.why-us {
background-color: var(--dark-teal);
color: white;
padding: 80px 0;
text-align: center;
}

.circle-frame {
width: 100px;
height: 100px;
border: 2px solid white;
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
}

.cta-bar {
background-color: #f1f1f1;
padding: 30px 0;
}

@media (max-width: 768px) {
.hero-right { padding: 40px 20px; text-align: center; }
.hero-left { padding: 20px; }
}
.text-lime {
color: var(--lime);
}
/* ===== MODAL PODZIĘKOWANIA ===== */
.thankyou-modal .modal-content {
border-radius: 15px;
text-align: center;
padding: 40px 20px;
}

.thankyou-icon {
font-size: 60px;
color: var(--lime);
margin-bottom: 20px;
animation: pop 0.6s ease;
}

@keyframes pop {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* ===== FAJERWERKI ===== */
.firework {
position: fixed;
width: 6px;
height: 6px;
background: var(--lime);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
animation: explode 1s ease-out forwards;
}

@keyframes explode {
0% { transform: translate(0,0); opacity: 1; }
100% { transform: translate(var(--x), var(--y)); opacity: 0; }
}