.market-problem{

padding:160px 8%;

background:#060B0F;

}

.problem-container{

max-width:1100px;
margin:auto;

}


/* HEADER */

.problem-header{

max-width:640px;

margin-bottom:100px;

}

.problem-eyebrow{

font-size:.7rem;

letter-spacing:3px;

color:var(--accent);

margin-bottom:16px;

display:block;

}

.problem-title{

font-size:2.2rem;

margin-bottom:18px;

}

.problem-intro{

color:var(--text-soft);

}


/* GRID */

.problem-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

}


/* CARD */

.problem-card{

background:rgba(255,255,255,.02);

border:1px solid var(--border-soft);

border-radius:16px;

padding:34px;

transition:all .35s var(--transition);

}

.problem-card:hover{

transform:translateY(-6px);

box-shadow:0 20px 50px rgba(0,0,0,.4);

}


/* BAD */

.problem-bad{

border-color:rgba(255,255,255,.08);

}

.problem-bad li{

color:rgba(255,255,255,.6);

}


/* GOOD */

.problem-good{

border-color:rgba(38,166,154,.35);

}

.problem-good li{

color:#fff;

}


/* LIST */

.problem-card ul{

list-style:none;

margin-top:18px;

}

.problem-card li{

margin-bottom:14px;

position:relative;

padding-left:18px;

}

.problem-card li::before{

content:"";

position:absolute;

left:0;
top:8px;

width:6px;
height:6px;

border-radius:50%;

background:var(--accent);

opacity:.7;

}

.problem-good{

box-shadow:0 0 40px rgba(38,166,154,.08);

}

.problem-header{
max-width:720px;
margin-bottom:120px;
}

.problem-title{
max-width:620px;
}

.market-problem{
padding:200px 8%;
}

.problem-card{

position:relative;
overflow:hidden;

}

.problem-card::before{

content:"";

position:absolute;
inset:0;

background: radial-gradient(
220px circle at var(--x, 50%) var(--y, 50%),
rgba(38,166,154,.12),
transparent 40%
);

opacity:0;

transition:opacity .25s ease;

pointer-events:none;

}

.problem-card:hover::before{

opacity:1;

}

.problem-card:hover{

transform:translateY(-6px) scale(1.02);

box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.problem-card{

opacity:0;
transform:translateY(40px);

transition:

opacity .8s ease,
transform .8s var(--transition);

}

.problem-visible .problem-card{

opacity:1;
transform:translateY(0);

}

.problem-grid{

display:grid;

grid-template-columns:1fr 120px 1fr;

align-items:center;

gap:40px;

}

.problem-connector{

position:relative;

height:100%;

display:flex;
align-items:center;
justify-content:center;

}

.connector-line{

width:100%;
height:2px;

background:rgba(255,255,255,.08);

position:absolute;

}

.connector-arrow{

position:absolute;

right:-4px;

width:0;
height:0;

border-top:6px solid transparent;
border-bottom:6px solid transparent;

border-left:10px solid var(--accent);

}

.connector-flow{

position:absolute;

width:100%;
height:10px;

pointer-events:none;

}

.connector-flow span{

position:absolute;

width:6px;
height:6px;

border-radius:50%;

background:var(--accent);

box-shadow:0 0 10px rgba(38,166,154,.8);

animation:connectorFlow 4s linear infinite;

}

.connector-flow span:nth-child(2){
animation-delay:1.3s;
}

.connector-flow span:nth-child(3){
animation-delay:2.6s;
}