<style>
/* ======================================================
SMALL CORPORATE FACADE UI
PREMIUM PROFESSIONAL STYLE
====================================================== */

/* ======================================================
ROOT
====================================================== */

:root{

    --primary:#071c3c;
    --secondary:#0052cc;
    --accent:#0a66ff;

    --text:#64748b;
    --white:#ffffff;

    --bg:#f8fbff;

    --shadow:
    0 16px 45px rgba(15,23,42,.05);
}

/* ======================================================
GLOBAL
====================================================== */

.facade-hero,
.facade-services,
.why-facade,
.facade-cta{

    position:relative;

    overflow:hidden;
}

img{

    width:100%;

    display:block;

    object-fit:cover;
}

a{

    text-decoration:none;

    transition:.35s ease;
}

/* ======================================================
SECTION TITLE
====================================================== */

.section-title{

    text-align:center;

    max-width:760px;

    margin:0 auto 60px;
}

.section-title span{

    display:inline-block;

    color:#0052cc;

    font-size:11px;
    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:14px;
}

.section-title h2{

    font-size:42px;

    line-height:1.3;

    font-weight:800;

    color:#071c3c;

    margin-bottom:18px;
}

.section-title p{

    font-size:14px;

    line-height:1.9;

    color:#64748b;
}

/* ======================================================
HERO
====================================================== */

.facade-hero{

    padding:150px 0 105px;

    background:
    url('../../images/facades-banner.jpg');

    background-size:cover;
    background-position:center;
}

/* OVERLAY */

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(7,28,60,.93),
        rgba(7,28,60,.86)
    );
}

/* GRID */

.facade-hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
    1.05fr .95fr;

    gap:55px;

    align-items:center;
}

/* ======================================================
LEFT CONTENT
====================================================== */

.facade-content{

    color:#ffffff;
}

.hero-mini{

    display:inline-block;

    padding:9px 16px;

    border-radius:40px;

    background:
    rgba(255,255,255,.08);

    color:#7ec3ff;

    font-size:11px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:22px;
}

.facade-content h1{

    font-size:58px;

    line-height:1.12;

    font-weight:800;

    margin-bottom:24px;

    max-width:700px;
}

.facade-content p{

    font-size:15px;

    line-height:1.95;

    color:#dbeafe;

    max-width:620px;

    margin-bottom:30px;
}

/* FEATURES */

.hero-features{

    margin-bottom:32px;
}

.hero-feature{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;
}

.hero-feature i{

    width:24px;
    height:24px;

    border-radius:50%;

    background:#0052cc;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#ffffff;

    font-size:10px;
}

.hero-feature span{

    font-size:14px;

    color:#ffffff;
}

/* BUTTONS */

.hero-btns{

    display:flex;

    gap:16px;

    flex-wrap:wrap;
}

.btn-main{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:14px 28px;

    border-radius:12px;

    background:
    linear-gradient(
        135deg,
        #0052cc,
        #0a66ff
    );

    color:#ffffff;

    font-size:14px;
    font-weight:700;

    box-shadow:
    0 16px 35px rgba(0,82,204,.20);
}

.btn-main:hover{

    transform:translateY(-3px);
}

.btn-outline{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:13px 28px;

    border-radius:12px;

    border:
    2px solid rgba(255,255,255,.14);

    color:#ffffff;

    font-size:14px;
    font-weight:700;
}

.btn-outline:hover{

    background:#ffffff;

    color:#071c3c;
}

/* ======================================================
RIGHT CARD
====================================================== */

.facade-card{

    background:
    rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    border:
    1px solid rgba(255,255,255,.08);

    border-radius:26px;

    padding:36px;

    color:#ffffff;

    box-shadow:
    0 22px 55px rgba(0,0,0,.15);
}

.facade-icon{

    width:74px;
    height:74px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #0052cc,
        #0a66ff
    );

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:24px;
}

.facade-icon i{

    font-size:28px;

    color:#ffffff;
}

.facade-card h3{

    font-size:32px;

    line-height:1.35;

    margin-bottom:16px;

    font-weight:800;
}

.facade-card p{

    font-size:14px;

    line-height:1.9;

    color:#dbeafe;

    margin-bottom:22px;
}

.facade-card ul li{

    position:relative;

    padding-left:24px;

    margin-bottom:12px;

    font-size:13px;
}

.facade-card ul li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#7ec3ff;

    font-weight:700;
}

/* ======================================================
SERVICES
====================================================== */

.facade-services{

    padding:100px 0;

    background:
    linear-gradient(
        180deg,
        #f8fbff 0%,
        #ffffff 100%
    );
}

/* GRID */

.facade-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:22px;
}

/* CARD */

.facade-card-box{

    background:#ffffff;

    border-radius:22px;

    overflow:hidden;

    border:
    1px solid rgba(0,82,204,.05);

    box-shadow:var(--shadow);

    transition:.35s ease;
}

.facade-card-box:hover{

    transform:translateY(-8px);

    box-shadow:
    0 24px 55px rgba(15,23,42,.08);
}

/* IMAGE */

.facade-image{

    position:relative;

    overflow:hidden;
}

.facade-image img{

    height:220px;

    transition:.45s ease;
}

.facade-card-box:hover img{

    transform:scale(1.06);
}

/* CONTENT */

.facade-box-content{

    padding:28px 24px 24px;
}

/* ICON */

.facade-service-icon{

    width:60px;
    height:60px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #0052cc,
        #0a66ff
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#ffffff;

    font-size:22px;

    margin-top:-38px;

    position:relative;

    z-index:2;

    box-shadow:
    0 15px 30px rgba(0,82,204,.18);
}

/* TEXT */

.facade-box-content h3{

    font-size:20px;

    line-height:1.45;

    margin:18px 0 12px;

    font-weight:800;

    color:#071c3c;
}

.facade-box-content p{

    font-size:13px;

    line-height:1.85;

    color:#64748b;

    margin-bottom:18px;
}

/* LIST */

.facade-box-content ul{

    margin-bottom:12px;
}

.facade-box-content ul li{

    position:relative;

    padding-left:18px;

    margin-bottom:9px;

    font-size:12px;

    color:#334155;
}

.facade-box-content ul li::before{

    content:"◆";

    position:absolute;

    left:0;

    top:1px;

    color:#38bdf8;

    font-size:8px;
}

/* BUTTON */

.facade-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:100%;

    padding:12px 18px;

    border-radius:10px;

    background:
    linear-gradient(
        135deg,
        #071c3c,
        #0b2d5f
    );

    color:#ffffff;

    font-size:13px;
    font-weight:700;
}

.facade-btn:hover{

    background:
    linear-gradient(
        135deg,
        #0052cc,
        #0a66ff
    );
}

/* ======================================================
WHY SECTION
====================================================== */

.why-facade{

    padding:100px 0;

    background:#ffffff;
}

.why-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:20px;
}

.why-box{

    background:#ffffff;

    border-radius:22px;

    padding:36px 28px;

    text-align:center;

    border:
    1px solid rgba(0,82,204,.05);

    box-shadow:var(--shadow);

    transition:.35s ease;
}

.why-box:hover{

    transform:translateY(-6px);
}

.why-icon{

    width:74px;
    height:74px;

    border-radius:22px;

    background:
    linear-gradient(
        135deg,
        #0052cc,
        #0a66ff
    );

    display:flex;
    align-items:center;
    justify-content:center;

    margin:auto auto 22px;
}

.why-icon i{

    color:#ffffff;

    font-size:28px;
}

.why-box h3{

    font-size:20px;

    line-height:1.45;

    margin-bottom:12px;

    font-weight:800;
}

.why-box p{

    font-size:13px;

    line-height:1.85;

    color:#64748b;
}

/* ======================================================
CTA
====================================================== */

.facade-cta{

    padding:100px 0;

    background:
    linear-gradient(
        135deg,
        #f7faff,
        #edf4ff
    );
}

/* GRID */

.facade-cta-grid{

    display:grid;

    grid-template-columns:
    .9fr 1.1fr;

    gap:55px;

    align-items:center;
}

/* IMAGE */

.facade-cta-image{

    position:relative;

    display:flex;

    justify-content:center;
}

.cta-bg{

    position:absolute;

    width:320px;
    height:320px;

    border-radius:
    60% 40% 50% 50% /
    45% 60% 40% 55%;

    background:
    linear-gradient(
        135deg,
        #dbeafe,
        #eff6ff
    );

    transform:rotate(-8deg);
}

.facade-cta-image img{

    width:300px;
    height:300px;

    border-radius:
    60% 40% 50% 50% /
    45% 60% 40% 55%;

    position:relative;

    z-index:2;

    box-shadow:
    0 18px 45px rgba(15,23,42,.08);
}

/* CONTENT */

.facade-cta-content span{

    display:inline-block;

    color:#0052cc;

    font-size:12px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:16px;
}

.facade-cta-content h2{

    font-size:42px;

    line-height:1.3;

    font-weight:800;

    margin-bottom:20px;

    color:#071c3c;
}

.facade-cta-content p{

    font-size:15px;

    line-height:1.9;

    color:#64748b;

    margin-bottom:26px;
}

/* FEATURES */

.cta-features{

    margin-bottom:30px;
}

.cta-feature{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;
}

.cta-feature i{

    width:24px;
    height:24px;

    border-radius:50%;

    background:#0052cc;

    color:#ffffff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:10px;
}

.cta-feature span{

    color:#334155;

    font-size:14px;

    font-weight:600;
}

/* ======================================================
LAPTOP
====================================================== */

@media(max-width:1200px){

.facade-grid{

    grid-template-columns:
    repeat(3,1fr);
}

.facade-content h1{

    font-size:50px;
}

}

/* ======================================================
TABLET
====================================================== */

@media(max-width:992px){

.facade-hero-grid,
.facade-cta-grid{

    grid-template-columns:1fr;

    gap:45px;
}

.facade-grid,
.why-grid{

    grid-template-columns:
    repeat(2,1fr);
}

.facade-content h1{

    font-size:42px;
}

.section-title h2{

    font-size:34px;
}

.facade-cta-content{

    text-align:center;
}

}

/* ======================================================
MOBILE
====================================================== */

@media(max-width:768px){

.facade-hero,
.facade-services,
.why-facade,
.facade-cta{

    padding:75px 0;
}

.facade-content h1{

    font-size:32px;

    line-height:1.25;
}

.facade-content p{

    font-size:13px;
}

.hero-btns{

    flex-direction:column;
}

.btn-main,
.btn-outline{

    width:100%;
}

.facade-card{

    padding:26px 22px;
}

.facade-card h3{

    font-size:24px;
}

.facade-grid,
.why-grid{

    grid-template-columns:
    repeat(2,1fr);

    gap:14px;
}

.facade-card-box,
.why-box{

    border-radius:18px;
}

.facade-image img{

    height:160px;
}

.facade-box-content{

    padding:20px 14px 18px;
}

.facade-service-icon{

    width:52px;
    height:52px;

    font-size:20px;

    border-radius:15px;

    margin-top:-48px;
}

.facade-box-content h3{

    font-size:16px;
}

.facade-box-content p{

    font-size:11px;
}

.facade-box-content ul li{

    font-size:10px;
}

.facade-btn{

    font-size:11px;
}

.why-box{

    padding:22px 16px;
}

.why-box h3{

    font-size:15px;
}

.why-box p{

    font-size:10px;
}

.facade-cta-content h2{

    font-size:28px;
}

.facade-cta-content p{

    font-size:13px;
}

.cta-bg,
.facade-cta-image img{

    width:220px;
    height:220px;
}

}

/* ======================================================
SMALL MOBILE
====================================================== */

@media(max-width:480px){

.facade-content h1{

    font-size:26px;
}

.section-title h2{

    font-size:24px;
}

.facade-grid,
.why-grid{

    gap:10px;
}

.facade-box-content h3{

    font-size:14px;
}

.facade-box-content p{

    font-size:10px;
}

.facade-btn{

    font-size:10px;
}

.why-box h3{

    font-size:13px;
}

.why-box p{

    font-size:9px;
}

.facade-cta-content h2{

    font-size:22px;
}

}
</style>