.pricing{

padding:200px 8%;

background:#060B0F;

}

.pricing-container{

max-width:900px;
margin:auto;

text-align:center;

}

.pricing-header{

max-width:600px;

margin:auto;

margin-bottom:80px;

}

.pricing-eyebrow{

font-size:.7rem;

letter-spacing:3px;

color:var(--accent);

display:block;

margin-bottom:16px;

}

.pricing-title{

font-size:2.2rem;

margin-bottom:16px;

}

.pricing-intro{

color:var(--text-soft);

}

.pricing-card{

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

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

border-radius:18px;

padding:60px;

max-width:520px;

margin:auto;

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

}

.pricing-card{

box-shadow:
0 0 60px rgba(38,166,154,.05),
0 20px 60px rgba(0,0,0,.4);

}

.pricing-price{

margin-bottom:40px;

}

.price{

font-size:3rem;

font-weight:500;

}

.price-note{

display:block;

color:var(--text-soft);

margin-top:6px;

}

.pricing-features{

list-style:none;

margin-bottom:40px;

text-align:left;

}

.pricing-features li{

margin-bottom:12px;

padding-left:18px;

position:relative;

color:var(--text-soft);

}

.pricing-features li::before{

content:"";

position:absolute;

left:0;
top:8px;

width:6px;
height:6px;

border-radius:50%;

background:var(--accent);

}

.pricing-cta{

margin-top:10px;

}

.pricing-card{

position:relative;

overflow:hidden;

}

.pricing-card::before{

content:"";

position:absolute;

inset:0;

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

opacity:0;

transition:opacity .25s ease;

pointer-events:none;

}

.pricing-card:hover::before{

opacity:1;

}

.pricing-payment,
.pricing-includes{

margin-top:30px;
padding-top:30px;

border-top:1px solid rgba(255,255,255,.06);

}

.price-label{

display:block;

font-size:.75rem;

letter-spacing:2px;

text-transform:uppercase;

color:var(--accent);

margin-bottom:10px;

opacity:.8;

}

.pricing-payment,
.pricing-includes{

margin-top:36px;
padding-top:36px;

border-top:1px solid rgba(255,255,255,.06);

}

.pricing-includes li::before{

content:"";

position:absolute;

left:0;
top:9px;

width:6px;
height:6px;

border-radius:50%;

background:var(--accent);

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

}

.pricing-legal{

margin-top:20px;

font-size:.8rem;

color:var(--text-soft);

text-align:center;

}

.pricing-legal a{

color:var(--accent);

text-decoration:none;

border-bottom:1px solid rgba(38,166,154,.4);

}

.pricing-card:hover{

transform:translateY(-6px);

box-shadow:
0 0 80px rgba(38,166,154,.08),
0 25px 60px rgba(0,0,0,.5);

}