:root {
--ceox-primary: #173F6D;
--ceox-accent: #F28C28;
--ceox-background: #FFFFFF;
--ceox-surface: #F5F7FA;
--ceox-text: #1F2937;
--ceox-text-light: #6B7280;
--ceox-border: #E5E7EB;
--ceox-radius: 12px;
--ceox-shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.08);
--ceox-shadow-lg: 0 30px 80px rgba(15, 23, 42, 0.12);
--ceox-transition: 300ms ease;
}

.ceox-hero{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 100% 0,
        rgba(242,140,40,.10),
        transparent 32%),
        linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
}


.ceox-hero__columns{
    min-height:780px;
    gap:96px;
    align-items:center;
}

.ceox-hero__content {
display: flex;
flex-direction: column;
justify-content: center;
}

.ceox-hero__eyebrow {
margin: 0 0 24px;
color: var(--ceox-accent);
font-size: 14px;
font-weight: 700;
line-height: 1.6;
letter-spacing: .16em;
text-transform: uppercase;
}

.ceox-hero__title {
margin: 0;
max-width: 640px;
color: var(--ceox-primary);
font-size: 72px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
}

.ceox-hero__description {
max-width: 560px;
margin: 32px 0 0;
color: var(--ceox-text-light);
font-size: 18px;
line-height: 1.8;
}

.ceox-hero__buttons {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 48px;
}

.ceox-button-primary .wp-element-button,
.ceox-button-secondary .wp-element-button {
min-height: 56px;
padding: 0 32px;
border-radius: 10px;
font-size: 16px;
font-weight: 700;
transition: all var(--ceox-transition);
}

.ceox-button-primary .wp-element-button {
background: var(--ceox-accent);
border: 2px solid var(--ceox-accent);
color: #FFFFFF;
box-shadow: var(--ceox-shadow-sm);
}

.ceox-button-primary .wp-element-button:hover,
.ceox-button-primary .wp-element-button:focus-visible {
background: #D97A1D;
border-color: #D97A1D;
transform: translateY(-2px);
box-shadow: var(--ceox-shadow-lg);
}

.ceox-button-secondary .wp-element-button {
background: transparent;
border: 2px solid var(--ceox-primary);
color: var(--ceox-primary);
}

.ceox-button-secondary .wp-element-button:hover,
.ceox-button-secondary .wp-element-button:focus-visible {
background: var(--ceox-primary);
color: #FFFFFF;
}

.ceox-hero__kpis {
margin-top: 64px;
gap: 24px;
}

.ceox-kpi__value {
margin: 0;
color: var(--ceox-primary);
font-size: 40px;
font-weight: 800;
line-height: 1;
}

.ceox-kpi__label {
margin: 10px 0 0;
color: var(--ceox-text-light);
font-size: 15px;
line-height: 1.6;
}

.ceox-hero__media {
display: flex;
align-items: center;
justify-content: center;
}

.ceox-hero__cover{
    aspect-ratio:4/5;
    border-radius:16px;
    overflow:hidden;
}
.ceox-hero__image,
.ceox-hero__image img,
.ceox-hero__cover img {
width: 100%;
border-radius: 20px;
overflow: hidden;
}

.ceox-hero__cover {
min-height: 640px;
box-shadow: var(--ceox-shadow-lg);
}

.ceox-hero__image img,
.ceox-hero__cover img {
width: 100%;
height: 640px;
object-fit: cover;
display: block;
}

.ceox-hero__content,
.ceox-hero__media {
animation: ceoxFadeUp .7s ease both;
}

.ceox-hero__media {
animation-delay: .15s;
}

@keyframes ceoxFadeUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@media (max-width: 1279px) {
.ceox-hero__columns {
gap: 56px;
}

.ceox-hero__title {
    font-size: 60px;
}

}

@media (max-width: 1024px) {
.ceox-hero {
padding-top: 80px;
padding-bottom: 80px;
}

.ceox-hero .ceox-container{
    width:100%;
    max-width:var(--ceox-container);
    margin:0 auto;
    padding:0 24px;
}

.ceox-hero__columns {
    min-height: auto;
    gap: 48px;
}

.ceox-hero__title {
    font-size: 52px;
}

.ceox-hero__description {
    font-size: 17px;
}

.ceox-hero__cover {
    min-height: 520px;
}

.ceox-hero__image img,
.ceox-hero__cover img {
    height: 520px;
}

.ceox-kpi__value {
    font-size: 34px;
}

}

@media (max-width: 781px) {
.ceox-hero {
padding-top: 56px;
padding-bottom: 56px;
}

.ceox-hero .ceox-container {
    padding: 0 20px;
}

.ceox-hero__columns {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.ceox-hero__content,
.ceox-hero__media {
    flex-basis: 100% !important;
    width: 100%;
}

.ceox-hero__title {
    font-size: 40px;
    line-height: 1.12;
}

.ceox-hero__description {
    margin:40px 0 0;
font-size:16px;
line-height:1.8;
}

.ceox-hero__buttons {
    flex-direction: column;
    margin-top: 32px;
}

.ceox-button-primary,
.ceox-button-secondary,
.ceox-button-primary .wp-element-button,
.ceox-button-secondary .wp-element-button {
    width: 100%;
}

.ceox-hero__kpis {
    gap: 24px;
    margin-top: 40px;
}

.ceox-kpi__value {
    font-size: 30px;
}

.ceox-kpi__label {
    font-size: 14px;
}

.ceox-hero__cover {
    aspect-ratio:4/5;
    border-radius: 16px;
}

.ceox-hero__image img,
.ceox-hero__cover img {
    height: auto;
    border-radius: 16px;
}

}

@media (prefers-reduced-motion: reduce) {

.ceox-hero *,
.ceox-hero::before,
.ceox-hero::after{

animation:none !important;
transition:none !important;
scroll-behavior:auto !important;

}

}
/* ======================================================
   HERO PREMIUM v2
====================================================== */

.ceox-hero__cover{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    box-shadow:
        0 30px 80px rgba(15,23,42,.16);
}

.ceox-hero__cover::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(23,63,109,0) 40%,
        rgba(23,63,109,.10) 100%);
    pointer-events:none;
}

.ceox-hero__cover img{
    transition:transform .8s ease;
}

.ceox-hero:hover .ceox-hero__cover img{
    transform:scale(1.03);
}

/* KPI */

.ceox-hero__kpis{
    gap:20px;
}

.ceox-hero__kpis .wp-block-column{
    background:#fff;
    padding:22px;
    border:1px solid #E8EDF3;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
    transition:.35s ease;
}

.ceox-hero__kpis .wp-block-column:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 45px rgba(15,23,42,.12);
}

.ceox-kpi__value{
    font-size:44px;
}

.ceox-kpi__label{
    margin-top:8px;
}