/* ======================================
HERO
====================================== */

.pricing-hero{

padding-top:140px;

padding-bottom:80px;

background:
linear-gradient(
135deg,
#050816,
#0D1324
);

color:white;

}

.pricing-hero .section-header{

margin-bottom:0;

}

.pricing-hero h1{

font-size:clamp(
42px,
6vw,
72px
);

line-height:1.05;

margin-bottom:20px;

}

.pricing-hero p{

max-width:850px;

margin:auto;

}

/* ======================================
PRICING COMPONENTS
====================================== */

.pricing-components-section{

padding:100px 0;

background:white;

}

.pricing-components-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:25px;

margin-top:50px;

}

.pricing-component-card{

padding:40px;

border-radius:32px;

background:white;

border:1px solid rgba(15,23,42,.06);

box-shadow:
0 15px 40px rgba(0,0,0,.04);

transition:.3s;

}

.pricing-component-card:hover{

transform:translateY(-8px);

box-shadow:
0 30px 70px rgba(0,0,0,.08);

}

.component-label{

font-size:14px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:#22d3cc;

margin-bottom:20px;

}

.pricing-component-card h3{

font-size:42px;

margin-bottom:12px;

color:#050816;

}

.pricing-component-card p{

color:#666;

line-height:1.7;

}

/* ======================================
CALCULATOR
====================================== */

.pricing-calculator-section{

padding:100px 0 140px;

background:#f8fafc;

}

.pricing-layout{

display:grid;

grid-template-columns:
1.6fr 1fr;

gap:40px;

margin-top:50px;

}

.calculator-card{

background:white;

padding:40px;

border-radius:36px;

border:1px solid rgba(15,23,42,.06);

box-shadow:
0 15px 40px rgba(0,0,0,.04);

}

.calculator-group{

margin-bottom:35px;

}

.calculator-group label{

display:block;

margin-bottom:12px;

font-weight:600;

color:#050816;

}

.calculator-feature{

padding:30px;

border-radius:24px;

background:#f8fafc;

margin-bottom:25px;

}

.calculator-feature h3{

font-size:28px;
line-height:1.2;
margin-bottom:20px;

color:#050816;

}

.calc-row{

display:grid;

grid-template-columns:
1fr 1fr;

gap:15px;

}

.calculator-card input,
.calculator-card select{

appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

background:white;

border:1px solid #d9dee8;

padding-right:50px;

cursor:pointer;

font-weight:600;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23050816' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

background-repeat:no-repeat;

background-position:right 16px center;

background-size:18px;

}

/* ======================================
SUMMARY
====================================== */

.summary-card{

position:sticky;

top:120px;

padding:45px;

border-radius:36px;

background:
linear-gradient(
180deg,
white,
#f8fafc
);

border:1px solid rgba(15,23,42,.06);

box-shadow:
0 25px 80px rgba(0,0,0,.08);

}

.summary-header{

font-size:15px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:#22d3cc;

margin-bottom:20px;

}

.summary-price{

font-size:52px;

font-weight:800;

line-height:1;

color:#050816;

margin-bottom:20px;

}

.saving-badge{

display:inline-flex;

align-items:center;

padding:10px 18px;

border-radius:999px;

background:
rgba(34,211,204,.1);

color:#22d3cc;

font-size:14px;

font-weight:700;

margin-bottom:35px;

}

.summary-card hr{

border:none;

border-top:1px solid #e5e7eb;

margin:30px 0;

}

.summary-row{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

font-size:16px;

}

.summary-row span:last-child{

font-weight:700;

}

.pricing-btn{

width:100%;

justify-content:center;

margin-top:40px;

}

/* ======================================
TABLET
====================================== */

@media(max-width:1100px){

.pricing-layout{

grid-template-columns:1fr;

}

.summary-card{

position:relative;

top:auto;

}

}

/* ======================================
MOBILE
====================================== */

@media(max-width:768px){

.pricing-hero{

padding-top:120px;

padding-bottom:60px;

}

.pricing-components-grid{

grid-template-columns:1fr;

}

.pricing-layout{

grid-template-columns:1fr;

gap:25px;

}

.calculator-feature h3{

font-size:18px;

}
.calculator-card{

padding:24px;

border-radius:24px;

}



.calculator-feature{

padding:28px;

}

.calc-row{

grid-template-columns:1fr;

}

.summary-card{

padding:24px;

border-radius:24px;

}

.summary-price{

font-size:38px;

}

.pricing-component-card{

padding:28px;

}

.pricing-component-card h3{

font-size:32px;

}

}