*{
box-sizing:border-box;
}

body{

margin:0;
padding:40px 20px;

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;

background:linear-gradient(180deg,#3a9fb7,#2f8ea6);

color:white;

text-align:center;

}

/* HEADER */

.logo{
width:48px;
margin-bottom:10px;
}

.header h1{
font-size:42px;
margin:0;
}

.topbar{

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

padding:0 30px;

}

.tagline{
opacity:0.9;
margin-top:8px;
}

.lang-switch{

display:flex;
gap:10px;

}

.lang-btn{

background:rgba(255,255,255,0.25);
border:none;

padding:6px 12px;

border-radius:6px;

font-size:14px;

cursor:pointer;

color:white;

font-weight:600;

transition:all 0.2s;

}

.lang-btn:hover{

background:rgba(255,255,255,0.4);

}

/* BREATHING CIRCLE */

.breathing-section{
    
display:flex;
justify-content:center;
align-items:center;

padding:80px 0 40px 0;

}

.breathing-circle{

width:140px;
height:140px;

border-radius:50%;

background:rgba(255,255,255,0.35);

backdrop-filter: blur(6px);

animation:breathing 6s ease-in-out infinite;

box-shadow:
0 10px 30px rgba(0,0,0,0.15),
inset 0 0 20px rgba(255,255,255,0.4);

}

@keyframes breathing{

0%{
transform:scale(0.85);
}

50%{
transform:scale(1.15);
}

100%{
transform:scale(0.85);
}

}

/* GRID */

.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:26px;

max-width:1000px;

margin:40px auto;

}

/* CARD */

.card{

text-decoration:none;

color:white;

background:rgba(255,255,255,0.2);

padding:30px;

border-radius:20px;

backdrop-filter:blur(10px);

box-shadow:0 10px 30px rgba(0,0,0,0.25);

transition:0.2s;

text-align:left;

}

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

.card h3{
margin:10px 0 6px 0;
}

.icon{
font-size:28px;
}

/* FOOTER */

footer{
margin-top:60px;
opacity:0.8;
}

.disclaimer{
font-size:13px;
}