.petrocore-home-hero { position: relative; height: 620px; overflow: hidden; background: var(--global-palette1, #003f51); color: #fff; }
.petrocore-home-hero__slides { height: 100%; }
.petrocore-home-hero__slide { position: absolute; inset: 0; height: 100%; display: grid; align-items: center; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.petrocore-home-hero__slide.is-active { position: relative; opacity: 1; pointer-events: auto; }
.petrocore-home-hero__image, .petrocore-home-hero__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.petrocore-home-hero__image { object-fit: cover; }
.petrocore-home-hero__overlay { background: linear-gradient(96deg, rgba(0, 63, 81, .95) 0%, rgba(0, 63, 81, .84) 37%, rgba(0, 63, 81, .26) 76%, rgba(0, 63, 81, .18) 100%); }
.petrocore-home-hero__content { position: relative; z-index: 1; width: 100%; max-width: var(--global-content-width, 1290px); margin: 0 auto; padding: 0 var(--global-content-edge-padding, 1.5rem); }
.petrocore-home-hero__eyebrow { margin: 0 0 16px; color: var(--global-palette2, #f15a24); font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }
.petrocore-home-hero h1 { max-width: 650px; margin: 0; color: #fff; font-size: clamp(1.65rem, 2.5vw, 2.45rem); font-weight: 500; line-height: 1.18; }
.petrocore-home-hero__text { max-width: 560px; margin: 22px 0 30px; font-size: clamp(.94rem, 1.15vw, 1.02rem); line-height: 1.7; }
.petrocore-home-hero__button { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; border-radius: 4px; background: var(--global-palette2, #ff9d00); color: #fff; font-weight: 700; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.petrocore-home-hero__button:hover, .petrocore-home-hero__button:focus-visible { background: #e78e00; color: #fff; transform: translateY(-2px); }
.petrocore-home-hero__controls { position: absolute; z-index: 2; right: max(var(--global-content-edge-padding, 1.5rem), calc((100vw - var(--global-content-width, 1290px)) / 2 + var(--global-content-edge-padding, 1.5rem))); bottom: 32px; display: flex; align-items: center; gap: 14px; }
.petrocore-home-hero__arrow { width: 28px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 3rem; font-weight: 300; line-height: .7; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.petrocore-home-hero__progress { width: 112px; height: 3px; overflow: hidden; background: rgba(255,255,255,.38); }
.petrocore-home-hero__progress::after { display: block; width: 100%; height: 100%; background: #fff; content: ''; transform: translateX(-100%); }
.petrocore-home-hero__progress.is-running::after { animation: petrocore-hero-progress 6.5s linear forwards; }
.petrocore-home-hero__progress.is-paused::after { animation-play-state: paused; }
.petrocore-home-hero__arrow:focus-visible { outline: 3px solid #ffbd4a; outline-offset: 3px; }
@keyframes petrocore-hero-progress { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.petrocore-home-about { background: var(--global-palette9, #fff); color: var(--global-palette4, #374151); }
.petrocore-home-about__inner { display: grid; grid-template-columns: minmax(0, .95fr) minmax(420px, 1fr); align-items: center; gap: clamp(56px, 8vw, 136px); width: 100%; max-width: var(--global-content-width, 1290px); margin: 0 auto; padding: clamp(80px, 10vw, 148px) var(--global-content-edge-padding, 1.5rem); }
.petrocore-home-about__eyebrow { margin: 0 0 18px; color: var(--global-palette2, #f15a24); font-size: .92rem; font-weight: 600; letter-spacing: .04em; }
.petrocore-home-about h2 { max-width: 560px; color: var(--global-palette3, #003f51); font-size: clamp(1.7rem, 2.45vw, 2.65rem); font-weight: 500; line-height: 1.15; }
.petrocore-home-about__copy { max-width: 535px; margin-top: 28px; }
.petrocore-home-about__copy p { margin: 0 0 22px; font-size: 1.05rem; line-height: 1.68; }
.petrocore-home-about__copy p:last-child { margin-bottom: 0; }
.petrocore-home-about__gallery { display: grid; grid-template-columns: .82fr 1.18fr; grid-template-rows: 1fr 1fr; gap: 10px; height: clamp(360px, 35vw, 510px); }
.petrocore-home-about__gallery figure { min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: var(--global-palette3, #003f51); }
.petrocore-home-about__gallery figure:first-child { border-radius: 42px 0 0 0; }
.petrocore-home-about__gallery figure:nth-child(2) { border-radius: 0 42px 0 0; }
.petrocore-home-about__gallery figure:nth-child(3) { border-radius: 0 0 0 112px; }
.petrocore-home-about__gallery figure:nth-child(4) { border-radius: 0 0 42px 0; }
.petrocore-home-about__gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.petrocore-home-about__gallery figure:hover img { transform: scale(1.04); }
.petrocore-home-about__button { margin-top: 26px; }
.petrocore-home-services { position: relative; isolation: isolate; overflow: hidden; background: var(--global-palette1, #003f51); color: #fff; }
.petrocore-home-services::before, .petrocore-home-services::after { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; content: ''; pointer-events: none; }
.petrocore-home-services::before { width: 180px; height: 180px; left: -88px; bottom: 48px; background: radial-gradient(circle, transparent 0 26%, rgba(20,86,160,.2) 26.5% 27.2%, transparent 27.7% 48%, rgba(255,255,255,.07) 48.5% 49.2%, transparent 49.7%); box-shadow: 0 0 0 22px rgba(241,90,36,.04); }
.petrocore-home-services::after { width: 142px; height: 142px; right: -58px; top: 70px; background: radial-gradient(circle at 28% 68%, rgba(241,90,36,.72) 0 3px, transparent 4px), radial-gradient(circle, transparent 0 30%, rgba(255,255,255,.07) 30.5% 31.2%, transparent 31.7% 54%, rgba(20,86,160,.2) 54.5% 55.2%, transparent 55.7%); }
.petrocore-home-services__inner { position: relative; z-index: 1; width: 100%; max-width: var(--global-content-width, 1290px); margin: 0 auto; padding: clamp(80px, 9vw, 136px) var(--global-content-edge-padding, 1.5rem); }
.petrocore-home-services__eyebrow { margin: 0 0 16px; color: var(--global-palette2, #f15a24); font-size: .9rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.petrocore-home-services h2 { max-width: 560px; color: #fff; font-size: clamp(1.65rem, 2.4vw, 2.5rem); font-weight: 500; line-height: 1.16; }
.petrocore-home-services__heading > p:not(.petrocore-home-services__eyebrow) { max-width: 620px; margin: 20px 0 44px; color: rgba(255,255,255,.76); line-height: 1.7; }
.petrocore-home-services__heading { position: relative; }
.petrocore-home-services__controls { position: absolute; top: 0; right: 0; display: flex; gap: 18px; }
.petrocore-home-services__slider { display: block; }
.petrocore-home-services__viewport { display: flex; gap: 24px; overflow-x: auto; padding: 8px 2px 18px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.petrocore-home-services__viewport::-webkit-scrollbar { display: none; }
.petrocore-home-services__card { flex: 0 0 calc((100% - 48px) / 3); overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 16px 34px rgba(0,0,0,.23); color: var(--global-palette4, #374151); scroll-snap-align: start; }
.petrocore-home-services__card > img { width: 100%; height: 170px; object-fit: cover; }
.petrocore-home-services__card-body { min-height: 255px; padding: 22px; }
.petrocore-home-services__number { color: var(--global-palette2, #f15a24); font-size: .83rem; font-weight: 700; letter-spacing: .08em; }
.petrocore-home-services__card h3 { margin: 10px 0 10px; color: var(--global-palette3, #003f51); font-size: 1.18rem; line-height: 1.3; }
.petrocore-home-services__card p { margin: 0 0 18px; font-size: .94rem; line-height: 1.55; }
.petrocore-home-services__card a { color: var(--global-palette2, #f15a24); font-size: .92rem; font-weight: 700; text-decoration: none; }
.petrocore-home-services__card a:hover span, .petrocore-home-services__card a:focus-visible span { display: inline-block; transform: translateX(4px); }
.petrocore-home-why { overflow: hidden; background: #f4f7f6; color: var(--global-palette4, #374151); }
.petrocore-home-why__inner { width: 100%; max-width: var(--global-content-width, 1290px); margin: 0 auto; padding: clamp(80px, 9vw, 126px) var(--global-content-edge-padding, 1.5rem) clamp(40px, 5vw, 64px); }
.petrocore-home-why__eyebrow { margin: 0 0 16px; color: var(--global-palette2, #f15a24); font-size: .9rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.petrocore-home-why h2 { max-width: 560px; color: var(--global-palette3, #003f51); font-size: clamp(1.65rem, 2.4vw, 2.5rem); font-weight: 500; line-height: 1.16; }
.petrocore-home-why__intro > p:not(.petrocore-home-why__eyebrow) { max-width: 690px; margin: 22px 0 0; line-height: 1.7; }
.petrocore-home-why__marquee { display: grid; gap: 20px; overflow: hidden; padding-bottom: clamp(80px, 8vw, 120px); }
.petrocore-home-why__track { display: flex; width: max-content; gap: 20px; }
.petrocore-home-why__track--left { animation: petrocore-why-left 64s linear infinite; }
.petrocore-home-why__track--right { animation: petrocore-why-right 64s linear infinite; }
.petrocore-home-why__track article { display: flex; align-items: flex-start; gap: 18px; width: min(510px, calc(100vw - 48px)); min-height: 154px; padding: 25px 28px; border-radius: 16px; background: #fff; box-shadow: 0 16px 32px rgba(0,47,81,.1); color: var(--global-palette4, #374151); }
.petrocore-home-why__icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #fff0e9; }
.petrocore-home-why__icon img { width: 24px; height: 24px; object-fit: contain; }
.petrocore-home-why__track h3 { margin: 1px 0 9px; color: var(--global-palette3, #003f51); font-size: 1.22rem; line-height: 1.3; }
.petrocore-home-why__track p { margin: 0; color: var(--global-palette4, #374151); font-size: 1rem; line-height: 1.65; }
@keyframes petrocore-why-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes petrocore-why-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.petrocore-home-trusted { position: relative; isolation: isolate; overflow: hidden; background: var(--global-palette1, #003f51); }
.petrocore-home-trusted::before, .petrocore-home-trusted::after { position: absolute; z-index: -1; border-radius: 50%; content: ''; pointer-events: none; }
.petrocore-home-trusted::before { width: 270px; height: 270px; top: -132px; right: -94px; border: 1px solid rgba(255,255,255,.1); background: radial-gradient(circle, transparent 0 28%, rgba(33,105,181,.16) 28.5% 29.5%, transparent 30% 50%, rgba(241,90,36,.1) 50.5% 51.2%, transparent 51.7%); box-shadow: 0 0 0 36px rgba(255,255,255,.025); }
.petrocore-home-trusted::after { width: 210px; height: 210px; bottom: -116px; left: -72px; border: 1px solid rgba(255,255,255,.09); background: radial-gradient(circle, transparent 0 34%, rgba(241,90,36,.1) 34.5% 35.2%, transparent 35.7% 57%, rgba(33,105,181,.13) 57.5% 58.2%, transparent 58.7%); }
.petrocore-home-trusted__inner { position: relative; z-index: 1; width: 100%; max-width: var(--global-content-width, 1290px); margin: 0 auto; padding: clamp(60px, 7vw, 96px) var(--global-content-edge-padding, 1.5rem); }
.petrocore-home-trusted__heading { margin-bottom: clamp(30px, 4vw, 48px); }
.petrocore-home-trusted__eyebrow { margin: 0; color: var(--global-palette2, #f15a24); font-size: .84rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.petrocore-home-trusted h2 { margin: 10px 0 0; color: #fff; font-size: clamp(1.55rem, 2.25vw, 2.3rem); font-weight: 500; line-height: 1.15; }
.petrocore-home-trusted__logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.petrocore-home-trusted__logo { display: grid; min-height: 116px; place-items: center; padding: 20px; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(0,63,81,.08); transition: transform .24s ease, box-shadow .24s ease; }
.petrocore-home-trusted__logo img { display: block; width: 100%; max-width: 145px; max-height: 58px; object-fit: contain; mix-blend-mode: multiply; filter: saturate(.92); transition: filter .24s ease, transform .24s ease; }
.petrocore-home-trusted__logo:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0,63,81,.13); }
.petrocore-home-trusted__logo:hover img { filter: saturate(1); transform: scale(1.035); }
.petrocore-home-partners { background: #f4f7f6; }
.petrocore-home-partners__inner { width: 100%; max-width: var(--global-content-width, 1290px); margin: 0 auto; padding: clamp(60px, 7vw, 96px) var(--global-content-edge-padding, 1.5rem); }
.petrocore-home-partners .petrocore-home-trusted__heading { margin-bottom: clamp(30px, 4vw, 48px); }
.petrocore-home-partners h2 { margin: 10px 0 0; color: var(--global-palette3, #003f51); font-size: clamp(1.55rem, 2.25vw, 2.3rem); font-weight: 500; line-height: 1.15; }
.petrocore-home-trusted__partner-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.petrocore-home-trusted__partner-logo { display: grid; min-height: 94px; place-items: center; padding: 16px 20px; border-radius: 12px; background: #fff; box-shadow: 0 7px 20px rgba(0,63,81,.065); transition: transform .24s ease, box-shadow .24s ease; }
.petrocore-home-trusted__partner-logo img { display: block; width: 100%; max-width: 132px; max-height: 44px; object-fit: contain; mix-blend-mode: multiply; filter: saturate(.82); transition: filter .24s ease, transform .24s ease; }
.petrocore-home-trusted__partner-name { color: var(--global-palette3, #003f51); font-size: .87rem; font-weight: 500; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.petrocore-home-trusted__partner-logo:hover { transform: translateY(-3px); box-shadow: 0 13px 26px rgba(0,63,81,.11); }
.petrocore-home-trusted__partner-logo:hover img { filter: saturate(1); transform: scale(1.03); }
.petrocore-home-hse { position: relative; display: grid; align-items: center; min-height: 520px; overflow: hidden; color: #fff; }
.petrocore-home-hse__image, .petrocore-home-hse__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.petrocore-home-hse__image { object-fit: cover; object-position: center; }
.petrocore-home-hse__overlay { background: linear-gradient(90deg, rgba(0,63,81,.94) 0%, rgba(0,63,81,.83) 42%, rgba(0,63,81,.32) 100%); }
.petrocore-home-hse__inner { position: relative; z-index: 1; width: 100%; max-width: var(--global-content-width, 1290px); margin: 0 auto; padding: 80px var(--global-content-edge-padding, 1.5rem); }
.petrocore-home-hse__eyebrow { margin: 0 0 16px; color: var(--global-palette2, #f15a24); font-size: .9rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.petrocore-home-hse h2 { max-width: 580px; color: #fff; font-size: clamp(1.7rem, 2.7vw, 2.8rem); font-weight: 500; line-height: 1.16; }
.petrocore-home-hse__inner > p:not(.petrocore-home-hse__eyebrow):not(.petrocore-home-hse__commitment) { max-width: 600px; margin: 20px 0 24px; font-size: .98rem; line-height: 1.7; }
.petrocore-home-hse__commitment { margin: 0 0 30px; color: #fff; font-size: .87rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.petrocore-home-hse__commitment span { margin: 0 8px; color: var(--global-palette2, #f15a24); }
.petrocore-home-hse__button { background: var(--global-palette2, #f15a24); color: #fff; }
.petrocore-home-hse__button:hover, .petrocore-home-hse__button:focus-visible { background: #d84b1c; color: #fff; }
@media (max-width: 1024px) { .petrocore-home-hero { height: 580px; } }
@media (max-width: 900px) { .petrocore-home-services__card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 760px) { .petrocore-home-about__inner { grid-template-columns: 1fr; gap: 42px; } .petrocore-home-about__gallery { height: min(104vw, 440px); gap: 7px; } .petrocore-home-about__gallery figure:first-child { border-radius: 28px 0 0 0; } .petrocore-home-about__gallery figure:nth-child(2) { border-radius: 0 28px 0 0; } .petrocore-home-about__gallery figure:nth-child(3) { border-radius: 0 0 0 72px; } .petrocore-home-about__gallery figure:nth-child(4) { border-radius: 0 0 28px 0; } .petrocore-home-trusted__heading { display: block; } .petrocore-home-trusted h2 { margin-top: 10px; text-align: left; } .petrocore-home-trusted__logos, .petrocore-home-trusted__partner-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .petrocore-home-trusted__logo { min-height: 102px; padding: 16px; } .petrocore-home-trusted__partner-logo { min-height: 84px; padding: 14px; } .petrocore-home-trusted__logo img { max-width: 122px; max-height: 48px; } .petrocore-home-trusted__partner-logo img { max-width: 112px; max-height: 38px; } }
@media (max-width: 560px) { .petrocore-home-services__card { flex-basis: 100%; } }
@media (max-width: 640px) { .petrocore-home-hero { height: 540px; } .petrocore-home-hero__overlay { background: linear-gradient(0deg, rgba(0,63,81,.94), rgba(0,63,81,.46)); } .petrocore-home-hero__controls { bottom: 20px; gap: 10px; } .petrocore-home-hero__arrow { width: 24px; font-size: 2.6rem; } .petrocore-home-hero__progress { width: 88px; } .petrocore-home-about__copy p { font-size: 1rem; } .petrocore-home-hse { min-height: 570px; } .petrocore-home-hse__overlay { background: linear-gradient(0deg, rgba(0,63,81,.94), rgba(0,63,81,.38)); } .petrocore-home-hse__commitment { line-height: 1.8; } }
@media (prefers-reduced-motion: reduce) { .petrocore-home-hero__slide, .petrocore-home-hero__button { transition: none; } .petrocore-home-why__track { animation: none; } }