:root{
    --ph3-navy:#102B52;
    --ph3-blue:#3F6098;
    --ph3-orange:#FF7A32;
    --ph3-light:#F6F8FB;
    --ph3-border:#E1E6EC;
    --ph3-text:#1B2733;
    --ph3-muted:#5D6875;
    --ph3-white:#FFFFFF;
}

.petronal-homepage-v3,
.petronal-homepage-v3 *{
    box-sizing:border-box;
}

.petronal-homepage-v3{
    width:100%;
    background:#fff;
    color:var(--ph3-text);
    font-family:inherit;
}

.ph3-shell{
    width:min(1200px,calc(100% - 40px));
    margin:0 auto;
}

/* HERO */
.ph3-hero{
    width:100%;
    background:#fff;
    border-bottom:1px solid var(--ph3-border);
}

.ph3-hero-inner{
    min-height:520px;
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
    overflow:hidden;
}

.ph3-copy{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:54px 48px 54px 0;
}

.ph3-copy h1{
    margin:0 0 24px;
    color:var(--ph3-navy);
    font-size:clamp(46px,5vw,68px);
    line-height:1.03;
    letter-spacing:-.045em;
    font-weight:800;
}

.ph3-copy h1 span{
    color:var(--ph3-orange);
}

.ph3-copy p{
    max-width:650px;
    margin:0 0 30px;
    color:var(--ph3-text);
    font-size:18px;
    line-height:1.65;
}

.ph3-actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.ph3-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 28px;
    border-radius:8px;
    text-decoration:none!important;
    font-size:15px;
    font-weight:700;
    transition:all .18s ease;
}

.ph3-btn-primary{
    background:var(--ph3-navy);
    color:#fff!important;
}

.ph3-btn-primary:hover{
    background:#0B2346;
    transform:translateY(-1px);
}

.ph3-btn-accent{
    background:var(--ph3-orange);
    color:#fff!important;
}

.ph3-btn-accent:hover{
    background:#F06C25;
    transform:translateY(-1px);
}

/* visual side - deliberately restrained */
.ph3-hero-image{
    position:relative;
    min-height:520px;
    background:
        linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.65) 18%,rgba(255,255,255,.05) 52%),
        linear-gradient(135deg,#EDF2F7 0%,#C9D3DE 45%,#8A99A8 100%);
}

.ph3-hero-image:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 64% 40%,rgba(16,43,82,.16) 0 7%,transparent 7.5%),
        radial-gradient(circle at 74% 56%,rgba(16,43,82,.12) 0 8%,transparent 8.5%),
        linear-gradient(90deg,transparent 46%,rgba(255,255,255,.15) 47% 49%,transparent 50%);
    opacity:.9;
}

.ph3-hero-image:after{
    content:"";
    position:absolute;
    right:8%;
    top:15%;
    width:240px;
    height:310px;
    border-radius:24px;
    background:
        linear-gradient(180deg,#A6B2BF,#7E8D9B);
    box-shadow:
        inset 0 0 0 16px rgba(255,255,255,.18),
        0 18px 55px rgba(16,43,82,.12);
    transform:skewY(-3deg);
}

/* THREE PILLARS */
.ph3-pillars{
    padding:38px 0 56px;
    background:#fff;
}

.ph3-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.ph3-card{
    min-height:290px;
    display:grid;
    grid-template-columns:74px 1fr;
    gap:18px;
    padding:28px 26px;
    background:linear-gradient(180deg,#FBFCFE,#F6F8FB);
    border:1px solid var(--ph3-border);
    border-radius:14px;
}

.ph3-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    color:var(--ph3-navy);
    border:1px solid #D9E1EA;
    font-size:24px;
    font-weight:700;
}

.ph3-card h2{
    margin:0 0 10px;
    color:var(--ph3-navy);
    font-size:20px;
    line-height:1.1;
    letter-spacing:.01em;
}

.ph3-card h3{
    margin:0 0 14px;
    color:#111;
    font-size:20px;
    line-height:1.45;
}

.ph3-card p{
    margin:0 0 28px;
    color:#333;
    font-size:14px;
    line-height:1.65;
}

.ph3-card a{
    color:var(--ph3-navy)!important;
    text-decoration:none!important;
    font-size:14px;
    font-weight:800;
}

@media(max-width:1024px){
    .ph3-hero-inner{
        grid-template-columns:1fr;
    }

    .ph3-copy{
        padding:52px 0 30px;
    }

    .ph3-hero-image{
        min-height:300px;
    }

    .ph3-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:767px){
    .ph3-shell{
        width:min(100% - 28px,1200px);
    }

    .ph3-copy h1{
        font-size:42px;
    }

    .ph3-copy p{
        font-size:16px;
    }

    .ph3-actions{
        flex-direction:column;
    }

    .ph3-btn{
        width:100%;
    }

    .ph3-card{
        grid-template-columns:1fr;
    }
}