.finwebo-form-card {
--finwebo-navy: #071a3b;
--finwebo-navy-2: #0b2b59;
--finwebo-cyan: #12d8f4;
--finwebo-blue: #2f6cff;
--finwebo-purple: #7a3cff;
--finwebo-pink: #ff35b8;
--finwebo-text: #0b1739;
--finwebo-muted: #7d86a0;
--finwebo-border: #d7ddea;
width: min(100%, 1050px);
margin: 32px auto;
display: grid;
grid-template-columns: minmax(330px, 45%) minmax(0, 55%);
background: #fff;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 24px 70px rgba(7, 26, 59, .18);
font-family: inherit;
color: var(--finwebo-text);
}
.finwebo-info-panel {
position: relative;
min-height: 670px;
padding: 44px 48px 42px;
background:
radial-gradient(circle at 28% 58%, rgba(18, 216, 244, .16), transparent 28%),
radial-gradient(circle at 86% 8%, rgba(122, 60, 255, .20), transparent 26%),
linear-gradient(145deg, var(--finwebo-navy) 0%, #082449 58%, #061833 100%);
color: #fff;
overflow: hidden;
}
.finwebo-info-panel::before {
content: "";
position: absolute;
width: 520px;
height: 220px;
left: -170px;
bottom: -85px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(18,216,244,.96), rgba(47,108,255,.60) 52%, rgba(122,60,255,.16));
transform: rotate(12deg);
filter: drop-shadow(0 0 22px rgba(18,216,244,.25));
}
.finwebo-info-panel::after {
content: "";
position: absolute;
width: 480px;
height: 170px;
right: -165px;
bottom: 110px;
border-top: 1px solid rgba(18,216,244,.18);
border-radius: 50%;
box-shadow:
0 9px 0 rgba(18,216,244,.08),
0 18px 0 rgba(18,216,244,.07),
0 27px 0 rgba(122,60,255,.06),
0 36px 0 rgba(255,53,184,.05),
0 45px 0 rgba(18,216,244,.04);
transform: rotate(-12deg);
}
.finwebo-brand,
.finwebo-service-copy,
.finwebo-service-icon,
.finwebo-contact-box {
position: relative;
z-index: 2;
}
.finwebo-brand {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 62px;
}
.finwebo-brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 68px;
height: 52px;
font-weight: 900;
font-size: 30px;
letter-spacing: -5px;
line-height: 1;
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(135deg, var(--finwebo-cyan), var(--finwebo-blue) 45%, var(--finwebo-purple) 70%, var(--finwebo-pink));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 12px rgba(18,216,244,.16));
}
.finwebo-brand-name {
font-weight: 750;
font-size: 30px;
letter-spacing: -.6px;
}
.finwebo-service-copy::before {
content: "";
display: block;
width: 58px;
height: 3px;
border-radius: 999px;
margin-bottom: 28px;
background: linear-gradient(90deg, var(--finwebo-cyan), var(--finwebo-purple), var(--finwebo-pink));
}
.finwebo-service-copy h3 {
margin: 0 0 14px;
color: #fff;
font-size: clamp(34px, 4vw, 48px);
line-height: 1.07;
letter-spacing: -1.5px;
font-weight: 800;
}
.finwebo-service-copy p {
max-width: 390px;
margin: 0;
color: rgba(255,255,255,.88);
font-size: 17px;
line-height: 1.65;
}
.finwebo-service-icon {
width: 155px;
height: 155px;
margin: 34px 0 34px 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 3px solid transparent;
background:
linear-gradient(var(--finwebo-navy), var(--finwebo-navy)) padding-box,
linear-gradient(135deg, var(--finwebo-cyan), var(--finwebo-purple), var(--finwebo-pink)) border-box;
box-shadow: inset 0 0 32px rgba(18,216,244,.10), 0 0 32px rgba(18,216,244,.08);
}
.finwebo-service-icon svg {
width: 88px;
height: 88px;
stroke: #fff;
stroke-width: 1.8;
fill: none;
}
.finwebo-contact-box {
margin-top: auto;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px;
box-sizing: border-box;
width: 100%;
border: 1px solid rgba(160, 190, 230, .26);
border-radius: 16px;
background: rgba(4, 23, 50, .34);
backdrop-filter: blur(7px);
}
.finwebo-contact-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 2px solid rgba(18,216,244,.55);
color: var(--finwebo-cyan);
}
.finwebo-contact-icon svg {
width: 23px;
height: 23px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.finwebo-contact-label {
display: block;
font-size: 13px;
color: rgba(255,255,255,.72);
margin-bottom: 3px;
}
.finwebo-contact-box > span:last-child {
flex: 1 1 auto;
min-width: 0;
}
.finwebo-contact-email {
display: block;
color: #fff;
font-size: clamp(11.5px, 1.05vw, 13.5px);
font-weight: 750;
line-height: 1.35;
white-space: nowrap;
word-break: normal;
overflow-wrap: normal;
hyphens: none;
letter-spacing: -0.25px;
}
.finwebo-form-panel {
scroll-margin-top: 24px;
position: relative;
padding: 58px 58px 52px;
background: #fff;
}
.finwebo-form-panel::before {
content: "";
position: absolute;
left: -1px;
top: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--finwebo-cyan), var(--finwebo-blue), var(--finwebo-purple), var(--finwebo-pink));
}
.finwebo-message {
border-radius: 13px;
padding: 13px 16px;
margin-bottom: 20px;
font-weight: 650;
}
.finwebo-success {
background: rgba(38, 194, 113, .12);
color: #157d48;
}
.finwebo-error {
background: rgba(255, 53, 101, .11);
color: #a7244e;
}
.finwebo-field {
margin-bottom: 24px;
}
.finwebo-field label {
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: 800;
color: var(--finwebo-text);
}
.finwebo-input-wrap {
position: relative;
}
.finwebo-input-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
color: #8590aa;
pointer-events: none;
}
.finwebo-textarea-wrap .finwebo-input-icon {
top: 21px;
transform: none;
}
.finwebo-input-icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
}
.finwebo-field input,
.finwebo-field textarea,
.finwebo-field select {
width: 100%;
box-sizing: border-box;
border: 1.5px solid var(--finwebo-border);
border-radius: 12px;
background: #fff;
color: var(--finwebo-text);
font: inherit;
font-size: 16px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.finwebo-field input {
min-height: 66px;
padding: 15px 18px 15px 58px;
}
.finwebo-field select {
min-height: 66px;
padding: 15px 46px 15px 18px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
background-image:
linear-gradient(45deg, transparent 50%, var(--finwebo-purple) 50%),
linear-gradient(135deg, var(--finwebo-purple) 50%, transparent 50%);
background-position:
calc(100% - 22px) 29px,
calc(100% - 16px) 29px;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
.finwebo-field textarea {
min-height: 170px;
resize: vertical;
padding: 18px 18px 18px 58px;
}
.finwebo-field input::placeholder,
.finwebo-field textarea::placeholder {
color: #6b7489;
}
.finwebo-field input:focus,
.finwebo-field textarea:focus,
.finwebo-field select:focus {
outline: none;
border-color: var(--finwebo-cyan);
box-shadow: 0 0 0 4px rgba(18,216,244,.10), 0 8px 24px rgba(47,108,255,.05);
}
.finwebo-actions {
margin-top: 30px;
}
.finwebo-actions button {
width: 100%;
min-height: 70px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
border: none;
border-radius: 13px;
padding: 17px 24px;
color: #fff;
font: inherit;
font-size: 19px;
font-weight: 800;
cursor: pointer;
background: linear-gradient(100deg, #087d91 0%, #087486 28%, #2450c7 54%, #5d2cc8 78%, #a51471 100%);
box-shadow: 0 12px 28px rgba(47,108,255,.22);
transition: transform .2s ease, box-shadow .2s ease;
}
.finwebo-actions button:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(122,60,255,.25);
}
.finwebo-actions button svg {
width: 24px;
height: 24px;
fill: currentColor;
}
.finwebo-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
@media (max-width: 900px) {
.finwebo-form-card {
grid-template-columns: 1fr;
max-width: 700px;
}
.finwebo-info-panel {
min-height: auto;
padding: 36px 34px 34px;
}
.finwebo-brand {
margin-bottom: 34px;
}
.finwebo-service-icon {
margin-left: 0;
}
.finwebo-contact-box {
margin-top: 24px;
}
.finwebo-form-panel {
padding: 40px 34px 36px;
}
}
@media (max-width: 560px) {
.finwebo-form-card {
border-radius: 20px;
margin: 18px auto;
}
.finwebo-info-panel,
.finwebo-form-panel {
padding-left: 22px;
padding-right: 22px;
}
.finwebo-brand-name {
font-size: 25px;
}
.finwebo-service-copy h3 {
font-size: 36px;
}
.finwebo-service-icon {
width: 124px;
height: 124px;
}
.finwebo-service-icon svg {
width: 72px;
height: 72px;
}
.finwebo-field input {
min-height: 60px;
}
.finwebo-actions button {
min-height: 64px;
font-size: 17px;
}
} .finwebo-field-error{color:#b3264c;display:block;font-size:12.5px;font-weight:650;line-height:1.35;margin-top:7px;min-height:0}
.finwebo-form [aria-invalid="true"]{border-color:rgba(207,50,91,.55)!important;box-shadow:0 0 0 3px rgba(207,50,91,.08)!important}
.finwebo-actions button[disabled]{cursor:not-allowed;opacity:.72;transform:none!important}
.finwebo-actions button.is-loading svg{animation:finwebo-send-pulse 1s ease-in-out infinite}
.finwebo-privacy-note{color:#5f687d;font-size:12.5px;line-height:1.5;margin:14px 0 0;text-align:center}
.finwebo-privacy-note a{color:#4054c7;font-weight:750;text-decoration:underline;text-underline-offset:2px}
@keyframes finwebo-send-pulse{0%,100%{opacity:.55;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.finwebo-actions button.is-loading svg{animation:none}} .finwebo-type-kapcsolat .finwebo-form-panel{align-content:center}
.finwebo-type-kapcsolat .finwebo-form{max-width:none}
.finwebo-type-kapcsolat .finwebo-actions{margin-top:4px}
.finwebo-type-kapcsolat .finwebo-info-panel{background:linear-gradient(150deg,#10214d 0%,#4436a8 62%,#a82ab8 100%)}