.ph-wrap {
position: relative;
width: 100%;
height: clamp(360px, 55svh, 600px);
overflow: hidden;
border-radius: 18px 18px 0 0;
background: #080e22;
isolation: isolate;
cursor: pointer;
margin-top: 0 !important;
} .ph-slides {
position: absolute;
inset: 0;
}
.ph-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.3s ease;
}
.ph-slide.is-active {
opacity: 1;
} .ph-bg {
position: absolute;
inset: -4%;
background-size: cover;
background-position: center;
will-change: transform, filter;
transform-origin: center center;
transform-style: preserve-3d;
animation: ph-zoom 10s ease-in-out infinite alternate;
}
@keyframes ph-zoom {
from { transform: scale(1); }
to   { transform: scale(1.06); }
} .ph-bg-deep {
position: absolute;
inset: -5%;
background-size: cover;
background-position: center;
opacity: 0.28;
mix-blend-mode: screen;
will-change: transform;
transform-origin: center center;
} .ph-bg::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.28) 100%);
opacity: 0.6;
} .ph-ambient {
position: absolute;
inset: 0;
z-index: 4;
overflow: hidden;
pointer-events: none;
}
.ph-ambient .ambient-logo {
position: absolute;
opacity: 0.50;
transform: translate3d(0, -50%, 0);
will-change: transform;
user-select: none;
pointer-events: none;
}
.ph-ambient .ambient-logo.is-active {
opacity: 1;
} .ph-wrap::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
transparent 30%,
rgba(5, 10, 26, .45) 60%,
rgba(5, 10, 26, .82) 100%
);
pointer-events: none;
z-index: 3;
} .ph-text {
position: absolute;
inset: 0;
z-index: 20;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 24px;
pointer-events: auto;
user-select: text;
-webkit-user-select: text;
}
.ph-eyebrow {
display: inline-block;
margin: 0 0 14px;
padding: 5px 18px;
border-radius: 100px;
background: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #203c85;
}
.ph-title {
margin: 0;
font-size: clamp(28px, 5vw, 58px);
font-weight: 800;
line-height: 1.1;
color: #fff !important;
text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.ph-desc {
margin: 16px 0 0;
font-size: clamp(13px, 1.4vw, 17px);
font-weight: 400;
line-height: 1.6;
color: rgba(255,255,255,.78) !important;
text-shadow: 0 1px 10px rgba(0,0,0,.35);
max-width: 560px;
}
.ph-desc .ph-hi {
color: #fff;
font-weight: 600;
} .ph-bar {
--sw-text:   #ffffff;
--sw-muted:  rgba(255,255,255,.58);
--sw-card:   rgba(255,255,255,.05);
--sw-card-h: rgba(255,255,255,.09);
--sw-line:   rgba(255,255,255,.10);
margin-top: 0;
padding: 28px 26px 30px;
background: linear-gradient(160deg, #1e2f74 0%, #182a63 55%, #13224f 100%);
border-radius: 0 0 22px 22px;
box-shadow: 0 18px 50px rgba(10,18,48,.35);
color: #fff;
overflow: hidden;
} .ph-cards {
display: flex;
gap: 10px;
align-items: stretch;
}
.ph-cards .sw-card {
flex: 1;
min-width: 0;
} .ph-cards .sw-card-v,
.ph-cta__text {
transition: opacity .32s cubic-bezier(.22,1,.36,1),
transform .32s cubic-bezier(.22,1,.36,1);
will-change: transform, opacity;
} .ph-cards .sw-card-v.is-leaving,
.ph-cta__text.is-leaving {
opacity: 0;
transform: translateY(-5px);
} .ph-cards .sw-card-v.is-entering,
.ph-cta__text.is-entering {
opacity: 0;
transform: translateY(7px);
transition: none;
} .ph-cta {
flex: 0 0 auto;
align-self: center;
margin-left: 14px;
display: inline-flex !important;
align-items: center;
text-decoration: none;
white-space: nowrap;
background: #fff;
color: var(--color-primary, #203c85) !important;
padding: 12px 16px;
border-radius: var(--radius-pill, 999px);
font-weight: 700;
font-size: var(--font-size-body);
border: 1.5px solid rgba(255,255,255,.9);
transition: transform var(--transition-fast, .15s ease), box-shadow var(--transition-fast, .15s ease);
}
.ph-cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px -8px rgba(0,0,0,.5);
}
.kf-sep {
opacity: .55;
font-weight: 400;
} @media (max-width: 640px) { .ph-wrap {
height: auto;
aspect-ratio: 1 / 1;
border-radius: 12px 12px 0 0;
} .ph-text {
padding: 0 20px;
}
.ph-eyebrow {
font-size: 9px;
padding: 3px 10px;
letter-spacing: .12em;
margin-bottom: 10px;
}
.ph-title {
font-size: clamp(28px, 8vw, 42px);
line-height: 1.05;
font-weight: 900;
}
.ph-desc {
font-size: 13px;
margin-top: 10px;
}
.ph-desc-br { display: none; } .ph-bg,
.ph-bg-deep {
background-position: center center;
}
.ph-bar {
padding: 18px 16px 20px;
border-radius: 0 0 16px 16px;
}
.ph-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.ph-cta {
grid-column: 1 / -1;
justify-content: center;
margin-top: 6px;
}
}