:root{
--text:#07333a;
--surface:rgba(255,255,255,0.92);
--primary:#0f8e95;
--primary-dark:#0b6f75;
--shadow:0 16px 40px rgba(6,40,43,0.2);
}

*{box-sizing:border-box}

body,html{
margin:0;
font-family:"Inter",Arial,sans-serif;
color:var(--text);
}

body::before{
content:"";
position:fixed;
inset:0;
background:linear-gradient(160deg,#e8faff,#e6fff6,#dff2f7);
opacity:.75;
z-index:-2;
}

#bg-video{
position:fixed;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-3;
pointer-events:none;
}

.page-content{
max-width:1100px;
margin:auto;
padding:.5rem 1rem 2rem;
}

.hero{
text-align:center;
background:var(--surface);
border-radius:24px;
padding:3rem 1rem;
box-shadow:var(--shadow);
backdrop-filter:blur(8px);
}

.hero h1{
font-size:clamp(2.4rem,6.75vw,4.25rem);
margin:0;
}

.hero-badge{
display:inline-block;
margin-top:1rem;
background:#e4f7f8;
padding:.4rem .9rem;
border-radius:999px;
font-weight:600;
font-size:.84rem;
}

.hero-text{
margin-top:1rem;
font-size:clamp(.72rem,1.12vw,.88rem);
}

.note{
margin-top:.8rem;
font-size:.48rem;
color:#c62828;
font-style:italic;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:1.5rem;
margin-top:1.6rem;
align-items:stretch;
}

.card{
background:white;
border-radius:20px;
padding:2rem 1.4rem;
text-align:center;
box-shadow:var(--shadow);
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:420px;
transition:transform .25s ease, box-shadow .25s ease;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 22px 50px rgba(0,0,0,.18);
}

.card-icon{
width:clamp(150px,18vw,230px);
height:clamp(150px,18vw,230px);
border-radius:50%;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto .8rem;
}

.card-icon img{
width:100%;
height:100%;
object-fit:contain;
}

.card h2{
margin:.5rem 0 1rem;
font-size:clamp(1.2rem,2vw,1.6rem);
}

.search-form{
display:flex;
flex-direction:column;
gap:.8rem;
width:100%;
}

.search-form input{
width:100%;
border-radius:10px;
border:1px solid #ccc;
padding:.8rem;
font-size:1rem;
}

.action-button{
display:block;
width:100%;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:white;
padding:1rem 1.7rem;
border-radius:14px;
text-decoration:none;
font-weight:700;
font-size:1.15rem;
border:none;
cursor:pointer;
transition:.2s;
margin-top:auto;
text-align:center;
}

.action-button:hover{
transform:translateY(-2px);
box-shadow:0 14px 26px rgba(15,111,117,.36);
}

footer{
text-align:center;
margin-top:2rem;
font-size:.9rem;
color:#234d53;
}

@media(max-width:600px){

.hero{
padding:2rem .8rem;
}

.cards{
gap:1rem;
}

.card{
padding:1.6rem 1rem;
min-height:auto;
}

}