:root{
--blue:#2367e8;
--pink:#f75ca9;
--bg:#f7f5f7;
--text:#2a2a33;
}

*{box-sizing:border-box}

body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
}

.hero{
min-height:390px;
position:relative;
display:grid;
place-items:center;
text-align:center;
color:white;
overflow:hidden;
}

.hero-bg{
position:absolute;
inset:0;
background:
linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.36)),
url('vise.jpg') center 45%/cover no-repeat;
}

.hero-content{
position:relative;
padding:24px 18px 58px;
}

.logo{
width:min(160px,42vw);
margin-bottom:16px;
filter:drop-shadow(0 12px 22px rgba(0,0,0,.25));
}

h1{
margin:0;
font-size:clamp(2.2rem,5.4vw,4.4rem);
font-weight:900;
line-height:1;
letter-spacing:-0.04em;
text-shadow:0 5px 22px rgba(0,0,0,.35);
}

.tagline{
margin:14px 0 0;
font-size:clamp(1.1rem,2.6vw,1.7rem);
font-weight:700;
text-shadow:0 4px 18px rgba(0,0,0,.45);
}

main{
width:min(1100px,calc(100% - 32px));
margin:-24px auto 48px;
position:relative;
z-index:2;
}

.card{
background:white;
border-radius:24px;
padding:34px;
box-shadow:0 18px 50px rgba(20,20,30,.09);
}

.intro{
margin-bottom:28px;
}

h2{
margin:0 0 12px;
font-size:clamp(1.6rem,3vw,2.2rem);
line-height:1.15;
}

p{
margin:0 0 16px;
font-size:1.08rem;
}

a{
color:var(--blue);
font-weight:700;
}

.grid{
display:grid;
grid-template-columns:0.8fr 1.2fr;
gap:28px;
align-items:stretch;
}

.news-card{
background:
radial-gradient(circle at top right, rgba(247,92,169,.18), transparent 42%),
white;
}

.label{
display:inline-block;
padding:6px 12px;
border-radius:999px;
background:rgba(247,92,169,.16);
color:#b71f70;
font-weight:800;
font-size:.9rem;
margin-bottom:14px;
}

.buttons{
display:flex;
gap:14px;
margin-top:20px;
flex-wrap:wrap;
}

.button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:13px 22px;
border-radius:999px;
text-decoration:none;
border:2px solid var(--blue);
color:var(--blue);
font-weight:700;
}

.button.primary{
background:var(--blue);
color:white;
}

footer{
text-align:center;
padding:25px;
color:#777;
}

@media(max-width:760px){
.hero{min-height:340px}
.hero-content{padding-bottom:48px}
.logo{width:min(140px,45vw)}
main{
width:min(100% - 22px,1100px);
margin-top:-20px;
}
.grid{grid-template-columns:1fr}
.buttons{display:grid}
.button{width:100%}
}