/* ETG homepage — "Sound familiar?" as a pinned horizontal route (dark band, parallax) */
.hp-pf { position: relative; isolation: isolate; overflow: hidden; color: #DCE8F2;
  background: linear-gradient(160deg, #04121F 0%, #08254A 55%, #0A2E45 100%) !important; }
.hp-pf__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hp-pf__glow { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.hp-pf__glow--a { width: 820px; height: 560px; left: -12%; top: -18%; background: radial-gradient(closest-side, rgba(0,163,217,.42), transparent); }
.hp-pf__glow--b { width: 720px; height: 520px; right: -10%; bottom: -20%; background: radial-gradient(closest-side, rgba(63,185,122,.28), transparent); }
.hp-pf__dots { position: absolute; inset: -20% 0; will-change: transform; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%); }
.hp-pf__ghost { position: absolute; left: 4%; bottom: 4%; white-space: nowrap; will-change: transform;
  font: 800 clamp(90px, 14vw, 220px)/1 var(--f-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); }

.hp-pf__pin { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(80px, 10vh, 120px) 0 clamp(64px, 8vh, 96px); }
.hp-pf__head { display: grid; gap: 22px; margin-bottom: clamp(30px, 5vh, 54px); }
@media (min-width: 960px) { .hp-pf__head { grid-template-columns: 1.25fr 1fr; align-items: end; gap: 72px; } }
.hp-kick--dark .hp-kick__n { color: #fff; }
.hp-kick--dark .hp-kick__t { color: #9FC0D8; }
.hp-pf__title { margin: 0; font: 700 clamp(38px, 1.4rem + 3.2vw, 66px)/1.05 var(--f-display); letter-spacing: -.03em; color: #fff; max-width: 15ch; }
.hp-mark--dark { color: #5FD3F3 !important; }
.hp-pf__lead { margin: 0; font-size: clamp(17px, 1rem + .3vw, 20px); line-height: 1.6; color: #B5CADB; max-width: 46ch; }

.hp-pf__road { position: relative; height: 4px; margin: 0 clamp(16px, 4vw, 56px) clamp(26px, 4vh, 42px); border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(220,232,242,.22) 0 30px, transparent 30px 52px); }
.hp-pf__fill { position: absolute; inset: 0; border-radius: 2px; transform-origin: left; transform: scaleX(.04);
  background: linear-gradient(90deg, #00A3D9, #2ED3C6 55%, #FFB81C); box-shadow: 0 0 18px rgba(46,211,198,.5); }

.hp-pf__track { display: flex; gap: 24px; margin: 0; padding: 0 clamp(16px, 4vw, 56px); list-style: none; width: max-content; will-change: transform; }
.hp-pf-card { --s1: #1D3F8F; --s2: #00A3D9; position: relative; flex: none; width: min(400px, 82vw); display: flex; flex-direction: column; gap: 14px;
  padding: 30px 30px 28px; border-radius: 22px; border: 1px solid rgba(160,200,230,.16);
  background: linear-gradient(180deg, rgba(18,46,82,.72), rgba(6,24,44,.55)); backdrop-filter: blur(6px);
  transition: border-color 300ms, transform 400ms cubic-bezier(.2,.7,.1,1), box-shadow 400ms; }
.hp-pf-card:hover { border-color: rgba(95,211,243,.55); transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,163,217,.45); }
.hp-pf-card:nth-child(2) { --s1: #0A6FA8; --s2: #00B2A9; }
.hp-pf-card:nth-child(3) { --s1: #08776F; --s2: #2ED3C6; }
.hp-pf-card:nth-child(4) { --s1: #1A3A86; --s2: #5A8CF0; }
.hp-pf-card:nth-child(5) { --s1: #2E7D3A; --s2: #3FB97A; }
.hp-pf-card:nth-child(6) { --s1: #C77700; --s2: #FFB81C; }
.hp-pf-shield { position: relative; width: 74px; height: 86px; margin-bottom: 6px; transform-origin: 50% 60%; }
.hp-pf-shield svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.hp-pf-shield__l, .hp-pf-shield__n { position: absolute; left: 0; right: 0; text-align: center; color: #fff; }
.hp-pf-shield__l { top: 19px; font: 700 9.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.hp-pf-shield__n { top: 35px; font: 700 23px/1 var(--f-display); letter-spacing: -.02em; }
.hp-pf-card__q { margin: 0; font: 500 17px/1.45 var(--f-body); color: #9FC0D8; }
.hp-pf-card__who { display: block; margin-bottom: 6px; font: 600 12.5px/1 var(--f-body); color: #FFB81C; }
.hp-pf-card__t { margin: 4px 0 0; font: 700 clamp(23px, 1rem + .7vw, 27px)/1.2 var(--f-display); letter-spacing: -.02em; color: #fff; }
.hp-pf-card__d { margin: 0; font-size: 16px; line-height: 1.6; color: #B5CADB; }
.hp-pf-card__a { margin-top: auto; padding-top: 8px; font: 600 15px/1.3 var(--f-body); color: #5FD3F3; text-decoration: none; }
.hp-pf-card__a:hover { color: #FFB81C; }
.hp-pf-card--cta { justify-content: center; background: none; border: 1.5px dashed rgba(220,232,242,.28); backdrop-filter: none; }
.hp-pf-card--cta .btn { align-self: flex-start; margin-top: 8px; }

/* Phones & tablets: native swipe instead of the pinned route */
@media (max-width: 899px) {
  .hp-pf__pin { min-height: 0; }
  .hp-pf__road { display: none; }
  .hp-pf__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
  .hp-pf__viewport::-webkit-scrollbar { display: none; }
  .hp-pf-card { scroll-snap-align: center; }
  .hp-pf__ghost { font-size: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-pf__pin { min-height: 0; }
  .hp-pf__viewport { overflow-x: auto; }
  .hp-pf-card, .hp-pf-card:hover { transition: none; transform: none; }
}
.hp-pf-shield { color: var(--s1); }
.hp-pf-shield svg { color: inherit; }
.hp-pf .hp-mark.hp-mark--dark { color: #5FD3F3 !important; }