:root{
    --navy:#123a5a;
    --text:#1f2937;
    --muted:#6b7280;
    --line:#eef2f7;
    --bg:#f5f6f8;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--bg);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:var(--text);
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:24px;
}

.card{
    width:100%;
    max-width:1100px;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    position:relative;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.side-bar{
    position:absolute;
    top:0;
    right:0;
    width:90px;
    height:100%;
    background:var(--navy);
}

.side-logo{
    position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
}

.side-logo img{
    width:52px;
    opacity:.15;
    filter:brightness(0) invert(1);
}

.content{
    padding:60px 140px 60px 60px;
}

.brand{
    display:flex;
    align-items:center;
    gap:36px;
    margin-bottom:50px;
}

.brand-logo img{
    width:180px;
    display:block;
}

.company{
    font-size:32px;
    font-weight:600;
    color:var(--navy);
}

.name{
    font-size:48px;
    font-weight:700;
}

.title{
    margin-top:10px;
    font-size:24px;
    color:var(--muted);
}

.title-line{
    width:72px;
    height:5px;
    background:var(--navy);
    border-radius:999px;
    margin-top:22px;
}

.section{
    margin-top:36px;
    padding-top:28px;
    border-top:2px solid var(--line);
}

.contact-item{
    margin-bottom:30px;
}

.contact-item:last-child{
    margin-bottom:0;
}

.contact-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

.icon{
    width:24px;
    font-size:20px;
    text-align:center;
}

.divider{
    width:2px;
    height:18px;
    background:var(--navy);
    border-radius:99px;
}

.label{
    color:var(--navy);
    font-size:14px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.contact-value{
    margin-left:38px;
    font-size:18px;
    line-height:1.8;
}

.contact-value a{
    color:var(--text);
    text-decoration:none;
}

.contact-value a:hover{
    color:var(--navy);
}

.footer{
    margin-top:48px;
    padding-top:36px;
    border-top:2px solid var(--line);
}

.footer-top{
    display:flex;
    align-items:center;
    gap:40px;
}

.qr img{
    width:260px;
    display:block;
}

.connect{
    flex:1;
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.connect h2{
    color:var(--navy);
    font-size:36px;
    font-weight:700;
    white-space:nowrap;
}

.connect h2::after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    margin-top:12px;
    background:var(--navy);
    border-radius:999px;
}

.connect .save-wrap{
    margin-top:24px;
}

.btn{
    display:inline-block;
    background:var(--navy);
    color:#fff;
    text-decoration:none;
    padding:15px 30px;
    border-radius:12px;
    font-weight:600;
    transition:.25s ease;
}

.btn:hover{
    transform:translateY(-2px);
}

@media (max-width:768px){

    .side-bar{
        display:none;
    }

    .content{
        padding:28px;
    }

    .brand{
        gap:16px;
        margin-bottom:32px;
    }

    .brand-logo img{
        width:84px;
    }

    .company{
        font-size:20px;
    }

    .name{
        font-size:30px;
    }

    .title{
        font-size:16px;
    }

    .footer-top{
        gap:16px;
        flex-wrap:nowrap;
    }

    .qr img{
        width:120px;
    }

    .connect{
        min-width:140px;
    }

    .connect h2{
        font-size:clamp(18px,5vw,24px);
        white-space:nowrap;
    }

    .connect .save-wrap{
        margin-top:16px;
    }

    .btn{
        width:100%;
        text-align:center;
    }
}