/* ═══════════════════════════════════════
   HELIA — Polished Hero
   Sits on top of the existing #HL-GC canvas bg
═══════════════════════════════════════ */

.HP-IN {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}

/* ── ORBIT RINGS (dashed purple, spinning) ── */
.HP-ORBIT {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1400px;
  height: 1200px;
  pointer-events: none;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.HP-RING {
  position: absolute;
  border: 1px dashed rgba(124, 58, 237, 0.12);
  border-radius: 50%;
  animation: hpSpin linear infinite;
}
.HP-RING.r1 { width: 680px;  height: 680px;  animation-duration: 55s; }
.HP-RING.r2 { width: 960px;  height: 960px;  animation-duration: 90s; animation-direction: reverse; }
.HP-RING.r3 { width: 1240px; height: 1240px; animation-duration: 160s; }
@keyframes hpSpin { to { transform: rotate(360deg); } }

.HP-DOT {
  position: absolute;
  width: 7px; height: 7px;
  background: var(--p1);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--p1);
  animation: hpDotPulse 3s ease-in-out infinite;
}
@keyframes hpDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.6); }
}

/* ── STATUS BAR ── */
.HP-STATUS {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--p1);
  border-radius: 100px;
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--k);
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: hpFadeUp .8s .1s forwards cubic-bezier(.22,1,.36,1);
}
.HP-STATUS::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.12), transparent);
  transform: translateX(-100%);
  animation: hpScan 3s ease-in-out infinite;
}
@keyframes hpScan {
  0%       { transform: translateX(-100%); }
  50%,100% { transform: translateX(100%); }
}
.HP-STATUS > * { position: relative; z-index: 1; }
.HP-STATUS strong {
  color: var(--p3);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.HP-SEP {
  width: 3px; height: 3px;
  background: var(--k);
  border-radius: 50%;
  opacity: .3;
}
.HP-LIVE {
  width: 8px; height: 8px;
  background: var(--p1);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--p1);
  animation: hpLivePulse 1.5s ease-in-out infinite;
}
@keyframes hpLivePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .5; transform: scale(1.3); }
}

/* ── TITLE (1 line + 1 line italic-serif typed) ── */
.HP-TI {
  font-family: var(--S);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 96px);
  line-height: .94;
  letter-spacing: -.03em;
  margin-bottom: 32px;
  max-width: 1200px;
  color: var(--k);
  white-space: nowrap;
}
.HP-L {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  animation: hpWordUp .9s forwards cubic-bezier(.22,1,.36,1);
}
.HP-L1 { animation-delay: .3s; }
.HP-L2 {
  animation-delay: .55s;
  margin-top: 12px;
  font-family: var(--R);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.012em;
  font-size: 1.18em;
  white-space: nowrap;
  color: var(--k);
}
@keyframes hpWordUp { to { opacity: 1; transform: translateY(0); } }

.HP-TYPED {
  color: var(--p1);
  font-weight: 600;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.HP-TYPED::after {
  content: "|";
  display: inline-block;
  color: var(--p1);
  font-weight: 300;
  font-style: normal;
  margin-left: 4px;
  animation: hpCaret 1s steps(2) infinite;
  font-family: var(--S);
}
@keyframes hpCaret { 50% { opacity: 0; } }

.HP-TW {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
.HP-TW::before {
  content: "";
  position: absolute;
  inset: -20% -8%;
  background: radial-gradient(ellipse, rgba(124,58,237,.22) 0%, transparent 70%);
  z-index: -1;
  filter: blur(20px);
  animation: hpGlowPulse 3s ease-in-out infinite;
}
@keyframes hpGlowPulse {
  0%,100% { opacity: .6; }
  50%     { opacity: 1; }
}

/* ── OFFERING PILLS with floating tilted info cards ── */
.HP-OFF {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 28px;
  max-width: 1100px;
  opacity: 0;
  animation: hpFadeUp .8s 1s forwards cubic-bezier(.22,1,.36,1);
}
.HP-P {
  background: linear-gradient(145deg, rgba(22,22,26,.88) 0%, rgba(14,14,18,.92) 100%);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  color: rgba(244,242,236,.9);
  font-family: var(--S);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.005em;
  padding: 11px 20px 11px 34px;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
  transition: all .3s cubic-bezier(.22,1,.36,1);
  display: inline-flex;
  align-items: center;
}
.HP-P::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  background: var(--p1);
  border-radius: 50%;
  animation: hpChipDot 2s ease-in-out infinite;
  z-index: 2;
}
.HP-P:nth-child(1)::before { animation-delay: 0s; }
.HP-P:nth-child(2)::before { animation-delay: .2s; }
.HP-P:nth-child(3)::before { animation-delay: .4s; }
.HP-P:nth-child(4)::before { animation-delay: .6s; }
.HP-P:nth-child(5)::before { animation-delay: .8s; }
.HP-P:nth-child(6)::before { animation-delay: 1s; }
@keyframes hpChipDot {
  0%,100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%     { opacity: .6; transform: translateY(-50%) scale(.7); }
}
.HP-P:hover {
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(145deg, rgba(28,28,34,.92) 0%, rgba(18,18,22,.94) 100%);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(155,139,247,.18) inset;
}
.HP-P:hover::before {
  background: #fff;
  animation: none;
  box-shadow: 0 0 10px rgba(255,255,255,.8);
}

/* Floating tilted info card */
.HP-IC {
  position: absolute;
  bottom: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%) rotate(-4deg) scale(.85);
  width: 260px;
  background: var(--k);
  color: var(--c);
  border-radius: 16px;
  padding: 18px 20px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.22,1,.36,1);
  z-index: 10;
  box-shadow:
    0 25px 50px -12px rgba(10,9,8,.4),
    0 0 0 1px rgba(124,58,237,.3);
}
.HP-P:nth-child(even) .HP-IC { transform: translateX(-50%) rotate(4deg) scale(.85); }
.HP-P:hover .HP-IC {
  opacity: 1;
  transform: translateX(-50%) rotate(-2deg) scale(1);
  pointer-events: auto;
}
.HP-P:nth-child(even):hover .HP-IC {
  transform: translateX(-50%) rotate(2deg) scale(1);
}
.HP-IC::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: var(--k);
  border-right: 1px solid rgba(124,58,237,.3);
  border-bottom: 1px solid rgba(124,58,237,.3);
}
.HP-IC-L {
  font-family: var(--M);
  font-size: 10px;
  color: var(--p2);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
.HP-IC-P {
  font-family: var(--S);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -.02em;
  margin-bottom: 12px;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.HP-IC-AB {
  font-family: var(--M);
  font-size: 11px;
  font-weight: 400;
  color: rgba(244,242,236,.5);
  letter-spacing: .1em;
}
.HP-IC-D {
  font-family: var(--S);
  font-size: 12.5px;
  color: rgba(244,242,236,.75);
  line-height: 1.5;
  margin-bottom: 14px;
}
.HP-IC-M {
  display: flex;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(244,242,236,.12);
}
.HP-IC-MI {
  font-family: var(--M);
  font-size: 9.5px;
  color: rgba(244,242,236,.5);
  letter-spacing: .05em;
  line-height: 1.4;
}
.HP-IC-MI strong {
  display: block;
  font-family: var(--S);
  font-size: 14px;
  font-weight: 700;
  color: var(--p2);
  margin-bottom: 2px;
  letter-spacing: -.01em;
}

/* ── LEAD ── */
.HP-LEAD {
  font-size: 15.5px;
  color: var(--m);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 24px;
  opacity: 0;
  animation: hpFadeUp .8s 1.2s forwards cubic-bezier(.22,1,.36,1);
  font-weight: 400;
}
.HP-LEAD strong { color: var(--k); font-weight: 600; }

/* ── CTAS ── */
.HP-CTAS {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  opacity: 0;
  animation: hpFadeUp .8s 1.35s forwards cubic-bezier(.22,1,.36,1);
  flex-wrap: wrap;
}
.HP-BF {
  padding: 14px 26px;
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #fff;
  border: 2px solid transparent;
  border-radius: 100px;
  font-family: var(--S);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all .25s ease;
  position: relative;
  letter-spacing: .005em;
  text-decoration: none;
}
.HP-BF:hover {
  background: linear-gradient(135deg, #9B7BFF 0%, #7C3AED 100%);
  transform: translateY(-2px);
  box-shadow: 0 20px 50px -12px rgba(139,92,246,.6);
}
.HP-BF::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(155,139,247,.5);
  border-radius: 100px;
  opacity: 0;
  animation: hpRingPulse 2.5s ease-out infinite;
}
@keyframes hpRingPulse {
  0%   { opacity: .6; transform: scale(.93); }
  70%  { opacity: 0;  transform: scale(1.15); }
  100% { opacity: 0;  transform: scale(1.2); }
}
.HP-BG {
  padding: 14px 24px;
  background: transparent;
  color: var(--k);
  border: 2px solid var(--k);
  border-radius: 100px;
  font-family: var(--S);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.HP-BG::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--k);
  transform: translateY(100%);
  transition: transform .3s ease;
  z-index: 0;
}
.HP-BG > * { position: relative; z-index: 1; }
.HP-BG:hover::before { transform: translateY(0); }
.HP-BG:hover { color: var(--c); }

/* ── TRUST ROW ── */
.HP-TRUST {
  display: flex;
  gap: 32px;
  justify-content: center;
  padding: 14px 26px;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line, rgba(12,11,8,.08));
  border-radius: 100px;
  opacity: 0;
  animation: hpFadeUp .8s 1.5s forwards cubic-bezier(.22,1,.36,1);
  flex-wrap: wrap;
}
.HP-TI-I {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--M);
  font-size: 10px;
  color: var(--m);
  letter-spacing: .08em;
}
.HP-TI-I strong {
  font-family: var(--S);
  font-size: 14px;
  font-weight: 700;
  color: var(--k);
  letter-spacing: -.01em;
}
.HP-TI-I::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--p1);
  border-radius: 50%;
}

/* ── SERVICE CARDS — DARK MODE · stack w/ modal overlay ── */
.HPC-WRAP {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 24px;
  opacity: 0;
  animation: hpFadeUp .9s 1.7s forwards cubic-bezier(.22,1,.36,1);
}
.HPC-GRID {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  transition: opacity .3s, filter .3s;
}
.HPC-WRAP:has(.HPC-MODAL.open) .HPC-GRID {
  opacity: .35;
  filter: blur(2px);
  pointer-events: none;
}
.HPC {
  position: relative;
  background: linear-gradient(145deg, rgba(22,22,26,.85) 0%, rgba(14,14,18,.9) 100%);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  text-align: left;
  overflow: hidden;
  outline: none;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.HPC::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(155,139,247,.06) 0%, transparent 55%);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.HPC > * { position: relative; z-index: 1 }

.HPC-HEAD {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
}
.HPC-ICO {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(139,92,246,.14);
  color: var(--p2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s;
  border: 1px solid rgba(167,139,250,.12);
}
.HPC-NUM {
  font-family: var(--M);
  font-size: 10px;
  color: rgba(244,242,236,.35);
  letter-spacing: .15em;
}
.HPC-N {
  font-family: var(--S);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.2;
}
.HPC-LIST {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.HPC-LIST li {
  font-family: var(--M);
  font-size: 11px;
  color: rgba(244,242,236,.62);
  line-height: 1.5;
  letter-spacing: .02em;
  display: flex;
  gap: 8px;
}
.HPC-LIST li::before {
  content: '→';
  color: var(--p2);
  opacity: .8;
  flex-shrink: 0;
}
.HPC-FOOT {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid rgba(244,242,236,.08);
}
.HPC-PR { display: flex; align-items: baseline; gap: 5px }
.HPC-AB {
  font-family: var(--M);
  font-size: 9px;
  letter-spacing: .12em;
  color: rgba(244,242,236,.4);
  text-transform: uppercase;
}
.HPC-VAL {
  font-family: var(--M);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}
.HPC-LINK {
  font-family: var(--M);
  font-size: 10px;
  font-weight: 600;
  color: var(--p2);
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: all .25s;
}

/* ── MODAL OVERLAY — covers the grid, shows detail ── */
.HPC-MODAL {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #14131A 0%, #08070A 85%);
  border: 1px solid rgba(167,139,250,.28);
  border-radius: 18px;
  padding: 44px 44px 36px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: scale(.97);
  transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
  box-shadow: 0 35px 80px -20px rgba(139,92,246,.45), 0 0 0 1px rgba(167,139,250,.08) inset;
}
.HPC-MODAL.open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.HPC-MODAL::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(139,92,246,.3) 0%, transparent 65%);
  pointer-events: none;
}
.HPC-MODAL::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(167,139,250,.2) 0%, transparent 65%);
  pointer-events: none;
}

.HPC-CLOSE {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(244,242,236,.08);
  color: rgba(244,242,236,.7);
  border: 1px solid rgba(244,242,236,.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: all .25s;
}
.HPC-CLOSE:hover {
  background: var(--p1);
  color: #fff;
  border-color: var(--p1);
  transform: rotate(90deg);
}

.HPC-MODAL-BODY {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  color: var(--c);
  text-align: left;
}

.HPC-M-HEAD { margin-bottom: 16px }
.HPC-M-TAG {
  display: inline-flex;
  align-items: center;
  font-family: var(--M);
  font-size: 10px;
  color: var(--p2);
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid rgba(167,139,250,.3);
  border-radius: 100px;
  background: rgba(167,139,250,.08);
  font-weight: 500;
}
.HPC-M-TI {
  font-family: var(--S);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0 0 14px;
}
.HPC-M-LEAD {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(244,242,236,.7);
  margin: 0 0 28px;
  max-width: 680px;
}

.HPC-M-FEAT {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  margin-bottom: 28px;
}
.HPC-M-F {
  padding: 14px 0;
  border-top: 1px solid rgba(244,242,236,.08);
}
.HPC-M-F-H {
  font-family: var(--S);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.HPC-M-F-H::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--p1);
  box-shadow: 0 0 8px var(--p1);
}
.HPC-M-F-D {
  font-size: 12.5px;
  color: rgba(244,242,236,.6);
  line-height: 1.55;
}

.HPC-M-META {
  padding: 16px 0;
  border-top: 1px solid rgba(244,242,236,.1);
  border-bottom: 1px solid rgba(244,242,236,.1);
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 18px;
}
.HPC-M-MI { display: flex; flex-direction: column; gap: 5px }
.HPC-M-MI-L {
  font-family: var(--M);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,242,236,.4);
}
.HPC-M-MI-V {
  font-size: 12.5px;
  color: rgba(244,242,236,.85);
  line-height: 1.4;
}

.HPC-M-FOOT {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.HPC-M-PR { display: flex; align-items: baseline; gap: 6px }
.HPC-M-AB {
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .15em;
  color: rgba(244,242,236,.45);
  text-transform: uppercase;
}
.HPC-M-VAL {
  font-family: var(--S);
  font-weight: 900;
  font-size: 40px;
  color: #fff;
  letter-spacing: -.025em;
}
.HPC-M-CTA {
  padding: 14px 28px;
  background: var(--p1);
  color: #fff;
  font-family: var(--S);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 100px;
  transition: all .3s;
  box-shadow: 0 10px 30px -10px rgba(139,92,246,.5);
}
.HPC-M-CTA:hover {
  background: var(--p3);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -10px rgba(109,40,217,.7);
}

/* ── SCROLL HINT ── */
.HP-SCROLL {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--M);
  font-size: 10px;
  color: var(--m);
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: 0;
  animation: hpFadeUp .8s 1.8s forwards;
}

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

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .HP-TI { white-space: normal; font-size: clamp(40px, 8vw, 76px); }
  .HP-L2 { white-space: normal; }
}
@media (max-width: 980px) {
  .HPC-GRID { grid-template-columns: repeat(2, 1fr); }
  .HPC-MODAL { padding: 34px 28px 28px; }
  .HPC-M-FEAT { grid-template-columns: 1fr; gap: 0 }
  .HPC-M-META { grid-template-columns: 1fr; gap: 12px }
}
@media (max-width: 768px) {
  .HP-IN { padding: 100px 20px 48px; }
  .HP-TRUST { gap: 16px; padding: 14px 18px; border-radius: 20px; }
  .HP-TI { font-size: 44px; }
  .HP-P { font-size: 14px; padding: 11px 18px 11px 32px; }
  .HP-BF, .HP-BG { padding: 14px 22px; font-size: 14px; }
  .HP-STATUS { font-size: 10px; padding: 8px 14px; gap: 8px; }
  .HP-IC { width: 220px; }
  .HP-ORBIT { width: 900px; height: 900px; }
  .HP-RING.r3 { display: none; }
  .HP-SCROLL { display: none; }
  .HPC-GRID { grid-template-columns: 1fr; margin: 28px auto 32px; }
  .HPC { min-height: 0; }
}