.hbot-sessions {
--hbot-cyan: #20b9e8;
--hbot-red: #ff1000;
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(4rem, 8vw, 7rem) 0 3rem;
background:
radial-gradient(circle at 12% 24%, rgba(255, 16, 0, 0.2), transparent 34rem),
radial-gradient(circle at 88% 76%, rgba(32, 185, 232, 0.18), transparent 36rem),
linear-gradient(180deg, rgba(6, 6, 7, 0.82), #08090b 32%, #101010),
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 8px);
color: #fff;
}
.hbot-sessions__glow {
position: absolute;
z-index: -1;
width: 34rem;
height: 34rem;
border-radius: 50%;
filter: blur(90px);
opacity: 0.16;
pointer-events: none;
}
.hbot-sessions__glow--red {
top: 8rem;
left: -20rem;
background: var(--hbot-red);
}
.hbot-sessions__glow--cyan {
right: -22rem;
bottom: 4rem;
background: var(--hbot-cyan);
}
.hbot-sessions__header {
max-width: 70rem;
margin: 0 auto clamp(2.5rem, 6vw, 5rem);
}
.hbot-sessions__eyebrow {
margin-bottom: 0.7rem;
color: #fff;
font-size: clamp(0.85rem, 2vw, 1.05rem);
font-variation-settings: "wght" 740, "wdth" 92;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.hbot-sessions__title {
margin: 0;
color: #fff;
font-size: clamp(4rem, 13vw, 9.5rem);
font-variation-settings: "wght" 850, "wdth" 72;
line-height: 0.82;
letter-spacing: -0.045em;
text-transform: uppercase;
text-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.65);
}
.hbot-sessions__title::after {
content: "";
display: block;
width: min(18rem, 58vw);
height: 0.28rem;
margin: 1.4rem auto 1.2rem;
background: linear-gradient(90deg, var(--hbot-red) 0 48%, transparent 48% 52%, var(--hbot-cyan) 52%);
box-shadow: 0 0 1rem rgba(32, 185, 232, 0.35);
}
.hbot-sessions__claim {
margin: 0;
color: #d9d9d9;
font-size: clamp(1rem, 2.8vw, 1.55rem);
font-style: italic;
font-variation-settings: "wght" 680, "wdth" 82;
letter-spacing: 0.035em;
text-transform: uppercase;
}
.hbot-sessions__feature {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
gap: clamp(2rem, 6vw, 5.5rem);
align-items: center;
}
.hbot-sessions__visual {
position: relative;
overflow: hidden;
min-height: 32rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.4rem 2.5rem 0.4rem 2.5rem;
background: #090a0c;
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.4);
}
.hbot-sessions__visual::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 0.22rem;
background: linear-gradient(90deg, var(--hbot-red), var(--hbot-cyan));
box-shadow:
-10rem 0 2rem var(--hbot-red),
10rem 0 2rem var(--hbot-cyan);
}
.hbot-sessions__visual img {
width: 100%;
height: 100%;
min-height: 32rem;
object-fit: cover;
object-position: center;
filter: saturate(0.88) contrast(1.04);
}
.hbot-sessions__content {
padding-block: 1rem;
}
.hbot-sessions__kicker {
margin-bottom: 1rem;
color: #fff;
font-size: clamp(1.75rem, 4vw, 2.7rem);
font-variation-settings: "wght" 760, "wdth" 82;
line-height: 1.02;
}
.hbot-sessions__intro {
max-width: 38rem;
margin-bottom: 2rem;
color: #c7c7c7;
font-size: clamp(1.05rem, 2vw, 1.3rem);
line-height: 1.55;
}
.hbot-sessions__benefits {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
margin: 0 0 2.5rem;
padding: 0;
list-style: none;
border-top: 1px solid rgba(255, 255, 255, 0.14);
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.hbot-sessions__benefit {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 0.85rem;
align-items: center;
min-height: 7rem;
padding: 1rem;
border-right: 1px solid rgba(255, 255, 255, 0.14);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
color: #f2f2f2;
font-size: 0.96rem;
font-variation-settings: "wght" 650, "wdth" 88;
line-height: 1.25;
text-transform: uppercase;
}
.hbot-sessions__benefit-icon {
display: grid;
width: 3rem;
height: 3rem;
place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
color: var(--hbot-red);
font-size: 1.35rem;
}
.hbot-sessions__benefit:nth-child(even) .hbot-sessions__benefit-icon {
color: var(--hbot-cyan);
}
.hbot-sessions__actions {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.4rem;
align-items: center;
}
.hbot-sessions__cta {
min-height: 3.5rem;
font-variation-settings: "wght" 720, "wdth" 88;
text-transform: uppercase;
}
.hbot-sessions__reception {
flex: 1 1 14rem;
margin: 0;
color: #bcbcbc;
font-size: 0.95rem;
line-height: 1.35;
}
.hbot-sessions__legal {
max-width: 72rem;
margin: clamp(3rem, 6vw, 5rem) auto 0;
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.13);
color: #9d9d9d;
font-size: 0.82rem;
line-height: 1.55;
text-align: center;
}
@media (max-width: 991.98px) {
.hbot-sessions__feature {
grid-template-columns: 1fr;
}
.hbot-sessions__visual,
.hbot-sessions__visual img {
min-height: min(70vw, 35rem);
}
}
@media (max-width: 575.98px) {
.hbot-sessions {
padding-top: 3.5rem;
}
.hbot-sessions__benefits {
grid-template-columns: 1fr;
}
.hbot-sessions__benefit {
min-height: 5.5rem;
}
.hbot-sessions__actions,
.hbot-sessions__cta {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.hbot-sessions *,
.hbot-sessions *::before,
.hbot-sessions *::after {
scroll-behavior: auto !important;
animation: none !important;
transition: none !important;
}
}