:root{
    --bg:#FFFFFF;           
    --text:#1449E4;         
    --text-body:#4A4B4C;   
    --white:#ffffff;
    --maxw:900px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:#0e2244; background:var(--bg);}
img{max-width:100%; display:block}
a{color:inherit}
figure {margin: 0; padding: 0}

.wrap{
    min-height:100dvh; 
    display:grid; 
    grid-template-rows: 1fr auto; 
    position:relative;
    overflow:hidden; 
}
.container{
    width:min(100% - 32px, var(--maxw));
    margin-inline:auto;
}

.hero{ 
    display:grid; 
    place-items:center; 
    padding: clamp(32px, 6vw, 80px) 0 32px; 
    text-align:center; 
    position:relative;
}
.brand{ width: clamp(160px, 22vw, 140px); margin: 0 auto clamp(24px, 3.5vw, 36px); }

h1{
    font-weight: 800; 
    letter-spacing:.2px; 
    margin: 0 0 16px;
    color: var(--text);
    font-size: clamp(18px, 2.2vw, 20px);
}

.lead{
    margin:0 auto; 
    line-height:1.7; 
    font-size: clamp(16px, 2.1vw, 18px);
    color: var(--text-body);
    text-wrap:balance;
}

.accent{ color: var(--text); font-weight: 800; }

.brands{
    display:flex; 
    gap: clamp(16px, 4vw, 20px); 
    justify-content:center; 
    align-items:center; 
    padding: 24px 0 48px; 
    flex-wrap: wrap;
}
.brands img{ 
    height: clamp(34px, 5.2vw, 40px); 
    width:auto; 
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

.brands .logo-gtr {
    height: clamp(34px, 5.2vw, 70px); 
}
.brands .logo-savetravel {
    height: clamp(34px, 5.2vw, 66px); 
}

.brands .logo-helpandcare{
    height: clamp(34px, 5.2vw, 70px); 
}

.bubble{ position:absolute;}

.bubble img{ width:100%; height:100%; object-fit: cover; }

.bubble.tr{
    top: 0; 
    right: 0; 
    max-width: 100%; 
}

.bubble.bl{
    left: 0; 
    bottom: 0; 
    max-width: 100%; 
}

@media (max-width: 560px){
    .brands{ gap: 18px; }
    .bubble.tr{ display: none;}
    .bubble.bl{ display: none;}
}