*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
padding:20px;
}

.container{
background:#f1f5f9;
padding:40px;
border-radius:12px;
width:900px;
max-width:95%;
text-align:center;
}

h1{
margin-bottom:20px;
}

/* SWITCH */

.switcher{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin-bottom:30px;
font-weight:500;
}

.toggle{
position:relative;
width:52px;
height:26px;
display:inline-block;
}

.toggle input{
display:none;
}

.slider{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#ccc;
border-radius:30px;
cursor:pointer;
transition:0.3s;
}

.slider::before{
content:"";
position:absolute;
height:20px;
width:20px;
left:3px;
top:3px;
background:white;
border-radius:50%;
transition:0.3s;
}

.toggle input:checked + .slider{
background:#2563eb;
}

.toggle input:checked + .slider::before{
transform:translateX(26px);
}

/* PRICING */

.pricing{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.card{
background:#e2e8f0;
padding:25px;
border-radius:10px;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
}

.popular{
border:2px solid #2563eb;
}

.card h2{
margin-bottom:10px;
}

.price{
font-size:32px;
font-weight:bold;
margin-bottom:15px;
}

ul{
list-style:none;
margin-bottom:15px;
}

ul li{
margin-bottom:6px;
font-size:14px;
}

button{
padding:10px 15px;
border:none;
background:#2563eb;
color:white;
border-radius:6px;
cursor:pointer;
}

button:hover{
background:#1d4ed8;
}