@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Cardo",serif;
}

.seo-heading {
    position:absolute;
    left:-9999px;
}

a, a *  {
    color: white;
}

body{
height:100vh;
width:100vw;
overflow:hidden;
color:white;
background:white;
}

/* GRID */

.grid{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
height:100vh;
width:100vw;
gap:1px;
background: black;
}

/* TILE */

.tile{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
text-decoration:none;
color:white;
position:relative;
overflow:hidden;
cursor:pointer;
background-blend-mode:overlay;
}

.tile::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
    180deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.25)
    );
    pointer-events:none;
    }

.tile::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
    circle at 50% 30%,
    rgba(255,255,255,0.08),
    transparent 60%
    );
    pointer-events:none;
}

/* jemný světelný gradient při hover */

.tile::before{
content:"";
position:absolute;
width:200%;
height:200%;
background:radial-gradient(circle at center,rgba(255,255,255,0.08),transparent 60%);
opacity:0;
transition:0.4s;
}

.tile:hover::before{
opacity:1;
}

.tile:hover > div{
transform:scale(1.08);
}

.tile:active > div{
transform:scale(0.96);
}

/* CONTENT */

.content{
max-width:420px;
padding:20px;
transition:0.35s;
z-index: 1;
}

.content img{
height:80px;
width:auto;
object-fit:contain;
margin-bottom:30px;
opacity:0.95;
}

.content h2{
font-size:34px;
margin-bottom:15px;
letter-spacing:0.5px;
}

.content p{
font-size:20px;
opacity:0.9;
line-height:1.5;
}

/* COLORS */

.royalbuild{
background:#00365E;
}

.revize{
background:#d86504;
}

.datilo{
background:#000925;
}

.adam{
background:white;
}

.adam *{
color:black;
}

/* CENTER HOLDING */

footer{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    text-align:center;
    padding:35px 40px;
    
    background:rgba(255,255,255,0.75);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.4);
    
    box-shadow:
    0 20px 40px rgba(0,0,0,0.15),
    0 5px 10px rgba(0,0,0,0.08);
    }

.center img{
height:90px;
margin-bottom:15px;
}

.center h1{
font-size:38px;
letter-spacing:2px;
margin-bottom:10px;
color:black;
}

.center p{
font-size:16px;
margin-bottom:15px;
opacity:0.9;
color:black;
}

.center span{
font-size:12px;
opacity:0.7;
color:black;
}

.center * {
    color: black;
}

/* ========================= */
/* MOBILE VERSION */
/* ========================= */

@media (max-width:768px){

body{
overflow:auto;
height:auto;
}

/* grid změníme na sloupec */

.grid{
grid-template-columns:1fr;
grid-template-rows:auto;
height:auto;
}

/* center card nahoře */

footer{
position:relative;
top:auto;
left:auto;
transform:none;
margin:40px auto 30px auto;
width:90%;
max-width:420px;
pointer-events:auto;
order:-1;
}

/* tiles */

.tile{
min-height:22vh;
padding:40px 20px;
}

.content{
max-width:90%;
}

.content img{
height:60px;
margin-bottom:20px;
}

.content h2{
font-size:26px;
}

.content p{
font-size:18px;
}

/* holding card */

.center h1{
font-size:28px;
}

.center p{
font-size:15px;
}

.center span{
font-size:11px;
}

}