/* ============================================================
   미래일터 탐험대 · 홈(첫 화면) 전용 CSS
   접두사: hm-   (Home)
   로드 순서: tokens → base → comp → anim → home
   원칙
     · 외부 이미지 0. 인라인 SVG + CSS 그라데이션만 사용한다.
     · 시차(패럴랙스)는 CSS 키프레임만 쓴다. 스크롤 JS 없음.
     · 모든 모션은 prefers-reduced-motion 에서 완전히 정지한다.
     · 우주 배경 위 텍스트는 #fff / --space-text / --space-muted 만 쓴다.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. 히어로 — 풀블리드 우주
   ════════════════════════════════════════════════════════════ */
.hm-hero{
  padding-block:clamp(40px,8vw,104px) clamp(48px,9vw,116px);
  background:
    radial-gradient(1200px 620px at 78% 8%, #17265C 0%, transparent 62%),
    radial-gradient(900px 520px at 8% 96%, #101C44 0%, transparent 64%),
    linear-gradient(180deg,#070C1B 0%, var(--space-1) 42%, #0A1330 100%);
}
.hm-hero .hero__inner{ gap:clamp(28px,5vw,56px); }
@media (min-width:900px){
  .hm-hero .hero__inner{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (min-width:1180px){
  .hm-hero .hero__inner{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); }
}
.hm-hero .hero__visual{
  max-width:min(560px,100%); aspect-ratio:1/1; overflow:visible;
}
.hm-hero__copy{ min-width:0; }
.hm-hero .hero__title{ margin-bottom:var(--sp-3); }
.hm-hero .hero__sub{ color:var(--space-text); opacity:.92; }
.hm-hero__lede{
  color:var(--space-muted); font-size:var(--fs-small); line-height:1.7;
  max-width:46ch; margin:var(--sp-5) 0 0;
}
.hm-hero__meta{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.hm-chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  border-radius:var(--radius-pill); font-size:13px; font-weight:750; line-height:1.4;
  color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24);
}
.hm-hero .hero__actions{ gap:var(--sp-3); }
@media (max-width:420px){
  .hm-hero .hero__actions .btn{ width:100%; }
}

/* ── 별 배경 3겹 시차 (CSS 전용) ─────────────────────────── */
.hm-stars{ will-change:transform; }
.hm-stars--far i{ opacity:.42; }
.hm-stars--mid i{ opacity:.72; }
.hm-stars--near i{ opacity:.95; transform:scale(1.8); box-shadow:0 0 7px 1px rgba(255,247,224,.55); }
@keyframes hm-drift-far{
  0%{ transform:scale(1.10) translate3d(0,0,0); }
  50%{ transform:scale(1.10) translate3d(-1.1%,.7%,0); }
  100%{ transform:scale(1.10) translate3d(0,0,0); }
}
@keyframes hm-drift-mid{
  0%{ transform:scale(1.14) translate3d(0,0,0); }
  50%{ transform:scale(1.14) translate3d(2.4%,-1.4%,0); }
  100%{ transform:scale(1.14) translate3d(0,0,0); }
}
@keyframes hm-drift-near{
  0%{ transform:scale(1.20) translate3d(0,0,0); }
  50%{ transform:scale(1.20) translate3d(-4.4%,2.6%,0); }
  100%{ transform:scale(1.20) translate3d(0,0,0); }
}
.hm-stars--far{ animation:hm-drift-far 190s ease-in-out infinite; }
.hm-stars--mid{ animation:hm-drift-mid 120s ease-in-out infinite; }
.hm-stars--near{ animation:hm-drift-near 74s ease-in-out infinite; }

/* ── 성운 블롭 ───────────────────────────────────────────── */
.hm-neb{
  position:absolute; z-index:-2; border-radius:50%; pointer-events:none;
  filter:blur(58px); opacity:.4; will-change:transform;
}
.hm-neb--1{ inset:-8% auto auto -12%; width:46vw; height:46vw; max-width:560px; max-height:560px;
  background:radial-gradient(circle at 40% 40%,#3B2A8C 0%,transparent 68%);
  animation:hm-neb-a 46s ease-in-out infinite; }
.hm-neb--2{ inset:auto -14% -18% auto; width:52vw; height:52vw; max-width:620px; max-height:620px;
  background:radial-gradient(circle at 55% 45%,#0E5A6E 0%,transparent 68%);
  animation:hm-neb-b 62s ease-in-out infinite; }
@keyframes hm-neb-a{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(3%,-3%,0) scale(1.08); } }
@keyframes hm-neb-b{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-4%,2%,0) scale(1.1); } }

/* ════════════════════════════════════════════════════════════
   2. 태양계 SVG
   좌표계: viewBox 0 0 620 620, 항성 중심 (310,310)
   .hm-orb  = 항성 중심 공전 (transform-origin 310,310)
   .hm-cr   = 행성 자기 위치에서 역회전 → 이모지·툴팁이 항상 수평
   ════════════════════════════════════════════════════════════ */
.hm-sys{ width:100%; height:auto; overflow:visible; display:block; }
.hm-sys__ring{ fill:none; stroke:rgba(255,255,255,.15); stroke-width:1.1; }
.hm-sys__ring--dash{ stroke-dasharray:4 9; stroke:rgba(255,255,255,.13); }

@keyframes hm-orbit{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes hm-orbit-rev{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }

.hm-orb{
  transform-box:view-box; transform-origin:310px 310px;
  animation:hm-orbit var(--dur,40s) linear infinite;
}
.hm-cr{
  transform-box:view-box; transform-origin:var(--ox,310px) var(--oy,310px);
  animation:hm-orbit-rev var(--dur,40s) linear infinite;
}

/* 행성 링크 */
.hm-pl{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.hm-pl:focus{ outline:none; }
.hm-pl__hit{ fill:transparent; }
.hm-pl__disc{
  stroke:rgba(255,255,255,.55); stroke-width:1.2;
  transition:transform var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
  transform-box:fill-box; transform-origin:center;
  transform:scale(var(--ps,1));
}
.hm-pl__glyph{
  font-size:var(--gsz,19px); text-anchor:middle; dominant-baseline:central;
  pointer-events:none; user-select:none;
}
.hm-pl__halo{ fill:none; stroke:var(--pc,#fff); stroke-width:2.4; opacity:0;
  transition:opacity var(--dur-2) var(--ease); }
.hm-pl:hover .hm-pl__halo{ opacity:.75; }
.hm-pl:hover .hm-pl__disc{ transform:scale(calc(var(--ps,1) * 1.16)); }
/* 키보드 포커스 링 */
.hm-pl__focus{ fill:none; stroke:#FFF7E0; stroke-width:3; stroke-dasharray:3 4; opacity:0; }
.hm-pl:focus-visible .hm-pl__focus{ opacity:1; }
.hm-pl:focus-visible .hm-pl__disc{ transform:scale(calc(var(--ps,1) * 1.16)); }

/* 좁은 화면: 행성을 키우고, 6px 로 줄어드는 툴팁은 감춘다
   (모바일은 탭하면 곧바로 이동하므로 툴팁이 필요 없다. 이름은 aria-label 로 제공) */
@media (max-width:700px){
  .hm-sys{ --ps:1.3; }
  .hm-pl__glyph{ font-size:calc(var(--gsz,19px) * 1.3); }
  .hm-tip{ display:none; }
}

/* 툴팁 */
.hm-tip{ opacity:0; pointer-events:none; transition:opacity var(--dur-2) var(--ease); }
.hm-pl:hover .hm-tip,
.hm-pl:focus-visible .hm-tip{ opacity:1; }
.hm-tip__box{ fill:#08122E; stroke:rgba(255,255,255,.34); stroke-width:1; }
.hm-tip__text{
  font-family:var(--font-sans); font-size:13px; font-weight:800; fill:#fff;
  text-anchor:middle; dominant-baseline:central;
}

/* 중앙 항성 = 나 */
.hm-sun__glow{ filter:blur(18px); opacity:.62; }
.hm-sun__label{
  font-family:var(--font-sans); font-size:19px; font-weight:850; fill:#2A1200;
  text-anchor:middle; dominant-baseline:central; pointer-events:none;
}
.hm-sun__pulse{
  fill:none; stroke:#FFD08A; stroke-width:1.4; transform-box:view-box; transform-origin:310px 310px;
  animation:pulse-ring 4.6s ease-out infinite;
}
.hm-sun__pulse--2{ animation-delay:1.55s; }
.hm-sun__pulse--3{ animation-delay:3.1s; }
.hm-sys__spin{ transform-box:view-box; transform-origin:310px 310px;
  animation:spin-slow 170s linear infinite; }

.hm-sys__cap{
  margin:var(--sp-3) 0 0; text-align:center; color:var(--space-muted);
  font-size:var(--fs-small);
}
.hm-sys__cap kbd{
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.32);
  padding:.1em .45em;
}

/* ── 움직임 멈추기 (WCAG 2.2.2 · JS 없이 체크박스만으로) ───
   체크박스는 눈에 보이는 버튼(label) 바로 앞에 둔다 → 키보드 포커스 순서와
   화면 위치가 어긋나지 않는다. 애니메이션 정지는 :has() 로 히어로 전체에 건다.
   :has() 를 모르는 브라우저에서는 버튼 자체를 숨긴다(눌러도 안 되는 버튼 금지). */
.hm-motion{ position:absolute; width:1px; height:1px; opacity:0; margin:0; }
.hm-motion__row{ display:block; margin-top:var(--sp-3); }
@supports not selector(:has(*)){
  .hm-motion__row{ display:none; }
}
.hm-motion__btn{
  display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 var(--sp-4);
  border-radius:var(--radius-pill); cursor:pointer; user-select:none;
  font-size:14px; font-weight:750; color:#fff;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.32);
  transition:background var(--dur-2) var(--ease);
}
.hm-motion__btn:hover{ background:rgba(255,255,255,.20); }
.hm-motion__off{ display:none; }
.hm-motion:checked ~ .hm-motion__btn .hm-motion__on{ display:none; }
.hm-motion:checked ~ .hm-motion__btn .hm-motion__off{ display:inline; }
.hm-motion:focus-visible ~ .hm-motion__btn{
  outline:3px solid #FFF7E0; outline-offset:2px;
}
.hm-hero:has(.hm-motion:checked) .hm-stars,
.hm-hero:has(.hm-motion:checked) .hm-neb,
.hm-hero:has(.hm-motion:checked) .hm-orb,
.hm-hero:has(.hm-motion:checked) .hm-cr,
.hm-hero:has(.hm-motion:checked) .hm-sun__pulse,
.hm-hero:has(.hm-motion:checked) .hm-sys__spin{
  animation-play-state:paused;
}
/* 마우스를 올리거나 Tab 으로 들어오면 조준할 수 있게 그 동안 공전을 멈춘다 */
.hm-sys:hover .hm-orb,
.hm-sys:hover .hm-cr,
.hm-sys:focus-within .hm-orb,
.hm-sys:focus-within .hm-cr{ animation-play-state:paused; }

/* ── 우주 배경 섹션 위 텍스트 대비 보정 (WCAG AA) ────────── */
.section--space .card__eyebrow{ color:#8FD3FF; }
.section--space .lead,
.section--space .lead.muted{ color:var(--space-text); }
.section--space .small.muted{ color:var(--space-muted); }
.stat--space .stat__src{ color:#C3D4F0; }

/* ════════════════════════════════════════════════════════════
   3. 누구를 위한 곳인가
   ════════════════════════════════════════════════════════════ */
.hm-who{ display:grid; gap:var(--gut); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.hm-who__card{
  --gc:var(--brand); --gt:var(--brand-tint); --gi:var(--brand-strong);
  display:flex; flex-direction:column; gap:var(--sp-3);
  border:1.5px solid var(--border); border-left:6px solid var(--gc);
  border-radius:var(--radius-kid); background:var(--bg); padding:var(--sp-5);
  transition:box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.hm-who__card:hover{ box-shadow:var(--shadow-2); transform:translateY(-3px); }
.hm-who__card--elem{ --gc:var(--g-elem); --gt:var(--g-elem-tint); --gi:var(--g-elem-ink); }
.hm-who__card--middle{ --gc:var(--g-middle); --gt:var(--g-middle-tint); --gi:var(--g-middle-ink); }
.hm-who__card--high{ --gc:var(--g-high); --gt:var(--g-high-tint); --gi:var(--g-high-ink); }
.hm-who__icon{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  font-size:26px; background:var(--gt);
}
.hm-who__title{ margin:0; font-size:var(--fs-h3); color:var(--gi); }
.hm-who__grade{ font-size:13px; font-weight:800; color:var(--gc); letter-spacing:.04em; }
.hm-who__desc{ margin:0; font-size:15.5px; line-height:1.65; }
.hm-who__list{ margin:0; padding-left:1.1em; font-size:14.5px; color:var(--text-muted); }
.hm-who__btn{
  margin-top:auto; align-self:flex-start; background:var(--gc); color:#fff;
  box-shadow:0 4px 0 var(--gi);
}
.hm-who__btn:hover{ background:var(--gi); box-shadow:0 2px 0 var(--gi); transform:translateY(2px); color:#fff; }

/* ════════════════════════════════════════════════════════════
   4. 숫자로 보는 미래일터
   ════════════════════════════════════════════════════════════ */
.hm-stats{ display:grid; gap:var(--gut); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.hm-stat .stat__value{ display:flex; align-items:baseline; gap:2px; flex-wrap:wrap; }
.hm-stat__unit{ font-size:.62em; font-weight:800; }
.hm-stats__note{ margin:var(--sp-5) 0 0; }

/* ════════════════════════════════════════════════════════════
   5. 12개 행성 우주지도
   ════════════════════════════════════════════════════════════ */
.hm-map__grid{ display:grid; gap:var(--gut); grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); }
.hm-progress{
  display:grid; gap:var(--sp-3); margin-bottom:var(--sp-6);
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius-kid); padding:var(--sp-4) var(--sp-5);
}
.hm-progress__row{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); align-items:baseline; }
.hm-progress__text{ margin:0; font-weight:750; color:var(--text-strong); }
.hm-progress__text b{ color:var(--brand); font-variant-numeric:tabular-nums; }
.hm-progress__hint{ margin:0; }
.hm-progress .bar__fill{ display:block; }
.hm-check{
  display:none; position:absolute; top:12px; right:14px; z-index:1;
  width:26px; height:26px; border-radius:50%; background:var(--success); color:#fff;
  font-size:14px; font-weight:800; place-items:center;
}
.planet-card.is-visited .hm-check{ display:grid; }
.planet-card.is-visited{ border-color:var(--success); }
.hm-map__head{ display:flex; align-items:flex-start; gap:var(--sp-3); }
.hm-map__emoji{
  flex:0 0 auto; width:54px; height:54px; border-radius:17px; display:grid; place-items:center;
  font-size:29px;
  /* color-mix() 를 모르는 엔진은 아래 선언을 통째로 버린다. 폴백을 먼저 둔다. */
  background:var(--planet-tint,#EEF0FE);
  background:color-mix(in srgb,var(--pc,var(--planet)) 13%,#fff);
}

/* ════════════════════════════════════════════════════════════
   6. 3분 사용법 — CSS 전용 탭 (라디오)
   ════════════════════════════════════════════════════════════ */
/* fieldset 로 라디오 2개를 묶어 그룹 이름(legend)을 준다.
   기본 테두리·여백·min-inline-size 를 지워 기존 div 와 같은 상자로 만든다. */
.hm-tabs{
  position:relative; display:block; border:0; margin:0; padding:0;
  min-inline-size:0; /* fieldset 기본값이 그리드/플렉스 안에서 넘치는 것을 막는다 */
}
.hm-tabs__radio{ position:absolute; width:1px; height:1px; opacity:0; margin:0; }
.hm-tabs__bar{
  display:inline-flex; flex-wrap:wrap; gap:4px; padding:5px; margin-bottom:var(--sp-5);
  background:var(--surface-2); border-radius:var(--radius-pill);
}
.hm-tabs__label{
  display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 var(--sp-5);
  border-radius:var(--radius-pill); font-weight:800; font-size:15px; color:var(--text-muted);
  cursor:pointer; user-select:none;
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.hm-tabs__label:hover{ color:var(--text-strong); }
.hm-tabs__panel{ display:none; }
#hm-tab-stu:checked ~ .hm-tabs__bar .hm-tabs__label[for="hm-tab-stu"],
#hm-tab-tea:checked ~ .hm-tabs__bar .hm-tabs__label[for="hm-tab-tea"]{
  background:var(--bg); color:var(--text-strong); box-shadow:var(--shadow-1);
}
#hm-tab-stu:focus-visible ~ .hm-tabs__bar .hm-tabs__label[for="hm-tab-stu"],
#hm-tab-tea:focus-visible ~ .hm-tabs__bar .hm-tabs__label[for="hm-tab-tea"]{
  outline:3px solid var(--brand-link); outline-offset:2px;
}
#hm-tab-stu:checked ~ #hm-panel-stu,
#hm-tab-tea:checked ~ #hm-panel-tea{ display:block; }
.hm-how{ display:grid; gap:var(--gut); grid-template-columns:1fr; align-items:start; }
@media (min-width:860px){ .hm-how{ grid-template-columns:1.25fr .75fr; } }
.hm-how__aside{
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius-kid); padding:var(--sp-5);
}
.hm-how__aside h3{ font-size:16.5px; margin-bottom:var(--sp-3); }
.hm-how__aside ul{ margin:0; padding-left:1.15em; font-size:14.5px; color:var(--text-muted); }

/* ════════════════════════════════════════════════════════════
   7. 역량 프레임 미리보기
   ════════════════════════════════════════════════════════════ */
.hm-frame{ display:grid; gap:var(--gut); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.hm-frame__card{
  background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-kid);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:8px;
  border-top:5px solid var(--brand);
}
.hm-frame__no{ font-size:12px; font-weight:800; color:var(--brand); letter-spacing:.1em; }
.hm-frame__ko{ margin:0; font-size:17.5px; font-weight:800; color:var(--text-strong); }
.hm-frame__en{ margin:0; font-size:12.5px; color:var(--text-muted); letter-spacing:.01em; }
.hm-frame__desc{ margin:0; font-size:14.8px; line-height:1.65; color:var(--text); }

/* ════════════════════════════════════════════════════════════
   8. 교사·강사를 위해
   ════════════════════════════════════════════════════════════ */
.hm-fmt{ display:grid; gap:var(--gut); grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); }
.hm-fmt__card{
  background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-kid);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2);
  text-decoration:none; color:inherit;
  transition:box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease);
}
.hm-fmt__card:hover{ box-shadow:var(--shadow-2); transform:translateY(-3px); border-color:var(--brand); }
.hm-fmt__time{
  font-size:clamp(21px,2vw,26px); font-weight:850; color:var(--brand); letter-spacing:-.02em;
}
.hm-fmt__name{ font-size:16px; font-weight:800; color:var(--text-strong); }
.hm-fmt__desc{ margin:0; font-size:14.5px; color:var(--text-muted); line-height:1.6; }
.hm-fmt__go{ margin-top:auto; font-size:14px; font-weight:750; color:var(--brand-link); }
.hm-dl{
  margin-top:var(--sp-6); background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--radius-kid); padding:var(--sp-5);
}
.hm-dl h3{ font-size:17px; margin-bottom:var(--sp-3); }

/* ════════════════════════════════════════════════════════════
   9. 바이브코딩 / 10. 출처와 신뢰
   ════════════════════════════════════════════════════════════ */
.hm-vibe{ position:relative; overflow:hidden; }
.hm-vibe .wrap{ position:relative; z-index:1; }
.hm-vibe__grid{ display:grid; gap:var(--gut); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .hm-vibe__grid{ grid-template-columns:1.1fr .9fr; } }
.hm-vibe p{ color:var(--space-text); }
.hm-vibe__code{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-kid); padding:var(--sp-5);
  font-family:ui-monospace,SFMono-Regular,"Cascadia Code",Consolas,monospace;
  font-size:13.5px; line-height:1.85; color:#CFE0FF; overflow-x:auto;
}
.hm-vibe__code b{ color:#FFB59C; font-weight:700; }
.hm-vibe__code i{ color:#8FD3FF; font-style:normal; }
.hm-vibe__cursor{
  display:inline-block; width:8px; height:15px; background:#FFB59C; vertical-align:-2px;
  animation:hm-blink 1.1s steps(1) infinite;
}
@keyframes hm-blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

.hm-trust{ display:grid; gap:var(--gut); grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); }
.hm-trust__card{
  background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-kid);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2);
}
.hm-trust__card p{ margin:0; font-size:14.8px; line-height:1.65; color:var(--text); }
.hm-trust__eg{ font-size:13.5px; color:var(--text-muted); }

/* ════════════════════════════════════════════════════════════
   접근성 · 모션 최소화
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .hm-stars--far,.hm-stars--mid,.hm-stars--near,
  .hm-neb--1,.hm-neb--2,
  .hm-orb,.hm-cr,.hm-sun__pulse,.hm-sys__spin,.hm-vibe__cursor{
    animation:none !important;
  }
  .hm-orb,.hm-cr{ transform:none !important; }
  .hm-stars--far{ transform:none; }
  .hm-sun__pulse{ opacity:.28; }
  .hm-vibe__cursor{ opacity:1; }
  .hm-pl:hover .hm-pl__disc,
  .hm-pl:focus-visible .hm-pl__disc{ transform:scale(var(--ps,1)); }
  /* 이미 멈춰 있으므로 '멈추기' 버튼은 숨긴다 (아무 일도 안 하는 버튼을 두지 않는다) */
  .hm-motion__row{ display:none; }
}

/* 인쇄 */
@media print{
  .hm-hero,.hm-vibe{ background:#fff !important; color:#000 !important; }
  .hm-hero .hero__title,.hm-hero .hero__sub,.hm-vibe p{ color:#000 !important; }
  .hm-stars,.hm-neb,.hm-sys{ display:none !important; }
}