.hero-chat{
position:relative;
overflow:hidden;
min-height:650px;
padding:9px 24px 88px;
isolation:isolate;
border-bottom:1px solid rgba(255,255,255,0.12);
background:
radial-gradient(circle at 18% 18%, rgba(147,205,255,0.28) 0, rgba(147,205,255,0) 26%),
radial-gradient(circle at 82% 26%, rgba(255,196,231,0.22) 0, rgba(255,196,231,0) 24%),
var(--hero-chat-custom-background, linear-gradient(135deg, #1d5fe6 0%, #4663f3 24%, #7a52f7 58%, #bb62f2 76%, #ff9ab8 100%));
}

.hero-chat > *{
position:relative;
z-index:3;
}

.hero-chat .hero-inner,
.hero-chat .container,
.hero-chat .wrapper,
.hero-chat .hero-chat__container{
position:relative;
z-index:4;
}

.hero-chat-widget{
font-family:inherit;
}

.hero-chat__container{
max-width:1240px;
margin:0 auto;
}

.hero-chat__overlay-image{
position:absolute;
left:0;
right:0;
top:96px;
bottom:0;
z-index:2;
pointer-events:none;
opacity:.7;
overflow:hidden;
}

.hero-chat__overlay-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center bottom;
display:block;
}

.hero-chat__topbar{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:28px;
padding-bottom:24px;
}

.hero-chat__brand{
display:flex;
align-items:center;
gap:14px;
min-width:0;
}

.hero-chat__brand-logo img{
display:block;
max-width:72px;
width:100%;
height:auto;
}

.hero-chat__brand-title{
color:#fff;
font-size:clamp(26px, 3vw, 36px);
font-weight:800;
line-height:1;
letter-spacing:-.03em;
text-shadow:0 5px 20px rgba(35, 31, 84, 0.18);
}

.hero-chat__brand-subtitle{
margin-top:4px;
color:rgba(255,255,255,.9);
font-size:14px;
line-height:1.35;
}

.hero-chat__nav{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.hero-chat__nav a{
position:relative;
color:#fff;
font-size:16px;
font-weight:600;
text-decoration:none;
padding:8px 10px;
text-shadow:0 2px 14px rgba(35, 31, 84, 0.16);
}

.hero-chat__nav a + a::before{
content:"";
position:absolute;
left:-6px;
top:50%;
width:3px;
height:3px;
border-radius:50%;
background:rgba(255,255,255,.42);
transform:translateY(-50%);
}

.hero-chat__login{
display:flex;
justify-content:flex-end;
}

.hero-chat__login-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:126px;
padding:14px 30px;
border-radius:999px;
border:1px solid rgba(255,255,255,.24);
background:linear-gradient(180deg, rgba(187,111,255,.42) 0%, rgba(135,83,255,.28) 100%);
box-shadow:0 12px 24px rgba(64, 35, 133, .2), inset 0 1px 0 rgba(255,255,255,.28);
backdrop-filter:blur(10px);
color:#fff;
font-size:17px;
font-weight:700;
text-decoration:none;
}

.hero-chat__body{
display:grid;
grid-template-columns:minmax(0, 1fr);
align-items:center;
gap:36px;
position:relative;
z-index:4;
padding-top: 32px;
}

.hero-chat--has-visual .hero-chat__body{
grid-template-columns:minmax(0, 1fr);
}

.hero-chat__content{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding-top:0;
max-width:860px;
margin:0 auto;
width:100%;
}

.hero-chat__actions{
margin-bottom:28px;
}

.hero-chat__badge-wrap{
display:flex;
justify-content:center;
margin-top:28px;
}

.hero-chat__visual{
position:absolute;
right:max(24px, calc((100vw - 1440px) / 2 + 24px));
bottom:0;
display:flex;
align-items:flex-end;
justify-content:flex-end;
width:min(33vw, 470px);
min-height:390px;
z-index:3;
pointer-events:none;
}

.hero-chat__visual img{
display:block;
width:100%;
max-width:100%;
height:auto;
object-fit:contain;
object-position:bottom right;
filter:drop-shadow(0 22px 36px rgba(65, 32, 111, .16));
}

.hero-chat::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:1;
background:
linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.18)),
radial-gradient(rgba(255,255,255,0.52) 1.1px, transparent 1.2px),
radial-gradient(rgba(255,255,255,0.3) 0.9px, transparent 1px);
background-size:
100% 2px,
96px 96px,
62px 62px;
background-position:
0 78px,
0 0,
18px 22px;
background-repeat:no-repeat;
opacity:.72;
}

.hero-chat::after{
content:"";
position:absolute;
inset:auto -6% -120px;
height:340px;
pointer-events:none;
z-index:2;
background:
linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 100%);
clip-path:ellipse(76% 66% at 50% 100%);
filter:blur(.5px);
}

.hero-chat h1{
margin:0 0 24px;
font-size:clamp(42px, 6vw, 58px);
line-height:1.05;
font-weight:800;
letter-spacing:-0.03em;
color:#fff;
text-align:center;
text-shadow:0 6px 24px rgba(35, 31, 84, 0.28);
}

.hero-chat p{
max-width:760px;
margin:0 auto;
color:rgba(255,255,255,0.92);
font-size:clamp(17px, 2vw, 22px);
line-height:1.7;
text-align:center;
text-shadow:0 2px 14px rgba(35, 31, 84, 0.16);
}

.hero-chat .hero-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:18px 42px;
border-radius:999px;
border:1px solid rgba(255,255,255,0.28);
background:linear-gradient(135deg, #ff4f8d 0%, #ff6c70 48%, #ff9548 100%);
color:#fff;
font-weight:700;
font-size:20px;
text-decoration:none;
box-shadow:0 14px 28px rgba(92, 37, 114, 0.26), inset 0 1px 0 rgba(255,255,255,0.28);
transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.hero-chat .hero-btn:hover{
transform:translateY(-3px) scale(1.01);
box-shadow:0 18px 34px rgba(92, 37, 114, 0.32), inset 0 1px 0 rgba(255,255,255,0.32);
filter:saturate(1.08);
}

.online-badge{
display:inline-flex;
align-items:center;
gap:12px;
padding:14px 28px;
border:1px solid rgba(255,255,255,0.14);
border-radius:999px;
background:linear-gradient(135deg, rgba(84,63,236,0.92) 0%, rgba(138,57,223,0.92) 100%);
backdrop-filter:blur(12px);
color:#fff;
font-size:18px;
box-shadow:0 14px 28px rgba(49, 27, 111, 0.22);
}

.online-badge::before{
content:"";
width:11px;
height:11px;
background:#39e57a;
border-radius:50%;
display:inline-block;
box-shadow:0 0 0 6px rgba(57,229,122,0.14);
}

@media (max-width: 767px){
.hero-chat{
min-height:auto;
padding:14px 18px 84px;
}

.hero-chat::before{
background-size:
100% 2px,
72px 72px,
48px 48px;
opacity:.82;
}

.hero-chat::after{
height:220px;
bottom:-90px;
}

.hero-chat__overlay-image{
top:84px;
}

.hero-chat__topbar{
grid-template-columns:1fr;
justify-items:center;
gap:18px;
padding-bottom:28px;
}

.hero-chat__brand{
flex-direction:column;
text-align:center;
}

.hero-chat__nav{
gap:4px 10px;
}

.hero-chat__nav a{
font-size:15px;
}

.hero-chat__nav a + a::before{
display:none;
}

.hero-chat__login{
justify-content:center;
width:100%;
}

.hero-chat__login-btn{
width:100%;
max-width:280px;
}

.hero-chat__body{
grid-template-columns:1fr;
gap:26px;
}

.hero-chat__content{
padding-top:0;
}

.hero-chat__visual{
position:relative;
right:auto;
bottom:auto;
width:100%;
min-height:auto;
justify-content:center;
pointer-events:auto;
}

.hero-chat h1{
margin-bottom:18px;
}

.hero-chat p{
font-size:16px;
line-height:1.65;
}

.hero-chat .hero-btn{
width:100%;
max-width:320px;
padding:16px 28px;
font-size:18px;
}

.online-badge{
padding:12px 20px;
font-size:16px;
}
}

@media (min-width: 768px) and (max-width: 1024px){
.hero-chat__overlay-image{
top:88px;
}

.hero-chat__topbar{
grid-template-columns:1fr;
justify-items:center;
gap:20px;
}

.hero-chat__brand{
justify-content:center;
}

.hero-chat__login{
justify-content:center;
}

.hero-chat__body{
grid-template-columns:1fr;
justify-items:center;
}

.hero-chat__visual{
position:relative;
right:auto;
bottom:auto;
width:100%;
justify-content:center;
}
}