/* ==========================================================================
   HASAKEI — VISUAL REFRESH V3
   Layered on top of site.css and the inline visual themes.
   Goals: stronger hero composition, richer color depth, better legibility,
   a cinematic skin wall, tactile cards and a smoother browsing rhythm.
   ========================================================================== */

:root {
  --ink: #f5faff;
  --muted: #a9bdd6;
  --muted-2: #7c92ae;
  --line: rgb(126 200 255 / .16);
  --line-strong: rgb(90 233 255 / .42);
  --fx-cyan: #5ae9ff;
  --fx-violet: #b28cff;
  --fx-pink: #ff7ad9;
  --fx-gold: #ffd36e;
  --fx-green: #5ef2a0;
}

::selection { background: rgb(90 233 255 / .3); color: #fff; }
html { scroll-padding-top: 112px; }
:is([role="button"], .skin-tile):focus-visible {
  outline: 2px solid var(--fx-cyan);
  outline-offset: 4px;
}

/* ---------- scrollbar ---------- */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: #02050c; }
  ::-webkit-scrollbar-thumb {
    border: 2px solid #02050c;
    border-radius: 999px;
    background: linear-gradient(180deg, #1d6d86, #263466 60%, #4a2a66);
  }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #37cae8, #4a5fb6 58%, #8c4b9f); }
}

/* ---------- ambient pointer glow ---------- */
.pointer-aura {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgb(90 233 255 / .12), rgb(178 140 255 / .045) 42%, transparent 68%);
  mix-blend-mode: screen;
  transition: opacity .6s ease;
  will-change: transform;
}
.pointer-aura.is-on { opacity: .8; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .pointer-aura { display: none; } }

/* ---------- scroll progress ---------- */
.scroll-progress { height: 3px; background: rgb(255 255 255 / .05); }
.scroll-progress i {
  background: linear-gradient(90deg, var(--fx-cyan), #7aa7ff 34%, var(--fx-violet) 64%, var(--fx-pink));
  box-shadow: 0 0 16px rgb(90 233 255 / .9), 0 0 34px rgb(178 140 255 / .45);
}

/* ---------- navigation ---------- */
.site-header { top: 14px; }
.site-nav {
  position: relative;
  border-color: rgb(90 233 255 / .22) !important;
  background: linear-gradient(180deg, rgb(8 18 36 / .82), rgb(3 9 19 / .72)) !important;
  box-shadow:
    0 24px 60px rgb(0 0 0 / .48),
    inset 0 1px rgb(255 255 255 / .1),
    0 0 44px rgb(90 233 255 / .1) !important;
  backdrop-filter: blur(28px) saturate(1.45) !important;
}
.site-nav::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(90 233 255 / .75), rgb(178 140 255 / .65), transparent);
  opacity: .6;
}
.site-nav::before {
  content: '';
  position: absolute;
  top: 0;
  right: 22%;
  left: 22%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent);
}
.brand-mark {
  background: #020711 !important;
  border-color: rgb(90 233 255 / .34) !important;
  box-shadow: 0 0 24px rgb(90 233 255 / .24), inset 0 0 20px rgb(90 233 255 / .14) !important;
}
.brand-mark img { transform: scale(1.04); }
.brand-copy strong { color: #fff; text-shadow: 0 0 22px rgb(90 233 255 / .2); }
.brand-copy small { color: #7b93b3; letter-spacing: .16em; }
.nav-links { color: #9fb5d0; font-weight: 650; }
.nav-links a { position: relative; }
.nav-links a:hover, .nav-links a.is-active { color: #fff; }
.nav-links a.is-active::after { transform: scaleX(1); }
.nav-download { box-shadow: 0 10px 28px rgb(90 233 255 / .22) !important; }

/* ---------- hero ---------- */
.hero-section { background: #02050c; }
.hero-copy h1 {
  text-wrap: balance;
  text-shadow: 0 26px 80px rgb(0 0 0 / .62), 0 0 90px rgb(90 233 255 / .08);
}
.hero-line { display: inline-block; white-space: nowrap; }
.hero-copy h1 em {
  filter: drop-shadow(0 0 38px rgb(90 233 255 / .45)) drop-shadow(0 0 92px rgb(178 140 255 / .22));
}
.hero-kicker {
  display: inline-flex;
  min-height: 30px;
  padding: 0 12px 0 9px;
  border: 1px solid rgb(90 233 255 / .16);
  border-radius: 999px;
  color: #adc4df !important;
  background: rgb(5 14 28 / .52);
  backdrop-filter: blur(10px);
  letter-spacing: .15em;
}
.hero-kicker .pulse-dot { width: 7px; height: 7px; }
.hero-lead { max-width: 530px; color: #aec3dc; font-size: 16.5px; }
.hero-cta .btn-primary { min-width: 235px; }
.hero-footnote { gap: 8px; }
.hero-footnote span {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgb(126 200 255 / .13);
  border-radius: 999px;
  color: #8ea6c3;
  background: rgb(4 11 23 / .46);
  backdrop-filter: blur(10px);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.hero-footnote span:hover {
  border-color: rgb(90 233 255 / .36);
  color: #dff8ff;
  background: rgb(90 233 255 / .08);
}

.hero-visual::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: min(94%, 660px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(90 233 255 / .15), rgb(178 140 255 / .12) 42%, transparent 70%);
  filter: blur(46px);
  opacity: .9;
}
.hero-visual { isolation: isolate; }
.hero-visual .preview-stack { border-color: rgb(126 200 255 / .2) !important; }
.preview-window {
  background: linear-gradient(150deg, rgb(7 20 43 / .93), rgb(2 6 16 / .97)) !important;
  box-shadow:
    0 40px 110px rgb(0 0 0 / .65),
    0 0 76px rgb(var(--acc-rgb, 79 230 255) / .26),
    inset 0 0 42px rgb(var(--acc-rgb, 79 230 255) / .1) !important;
}
.preview-window-topbar {
  background: linear-gradient(90deg, rgb(255 255 255 / .045), transparent 68%);
  color: #7f95b0;
}
.preview-image-wrap img { object-position: center 26%; }
.preview-image-copy strong { text-shadow: 0 2px 22px rgb(0 0 0 / .6); }
.preview-controls button { background: #09111f; }
.preview-controls button:hover, .preview-controls button.active {
  box-shadow: 0 0 18px rgb(var(--acc-rgb, 79 230 255) / .38);
}
.preview-float {
  border-color: rgb(90 233 255 / .24) !important;
  background: linear-gradient(150deg, rgb(11 25 49 / .78), rgb(4 10 22 / .8)) !important;
}

/* keep the two headline lines intact on wide screens */
@media (min-width: 921px) {
  .hero-inner {
    grid-template-columns: minmax(0, .95fr) minmax(500px, 1.05fr);
    gap: 20px;
  }
  .hero-copy { max-width: 660px; }
  .hero-copy h1 {
    font-size: clamp(58px, 6.1vw, 88px);
    letter-spacing: -.068em;
  }
}

/* ---------- signal rail ---------- */
.signal-strip {
  border-top-color: rgb(90 233 255 / .24) !important;
  border-bottom-color: rgb(90 233 255 / .18) !important;
  background:
    linear-gradient(90deg, rgb(5 14 31 / .92), rgb(9 23 48 / .9) 42%, rgb(5 14 31 / .92)) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / .04), 0 28px 70px rgb(0 0 0 / .22);
  backdrop-filter: blur(18px) saturate(1.2);
}
.signal-item { padding-top: 24px; padding-bottom: 24px; }
.signal-item strong { color: #ecf8ff; letter-spacing: .01em; }
.signal-icon { box-shadow: inset 0 0 22px rgb(var(--sc) / .16), 0 0 0 1px rgb(var(--sc) / .08); }

/* ---------- skin marquee ---------- */
.skin-marquee {
  border-bottom-color: rgb(90 233 255 / .18) !important;
  background: linear-gradient(90deg, rgb(90 233 255 / .1), rgb(178 140 255 / .12) 46%, rgb(255 122 217 / .09)) !important;
}
.skin-track { padding: 14px 0; }
.skin-track span { color: #d9ebfc; font-size: 11px; letter-spacing: .23em; }
.skin-track i { color: #bff6ff; opacity: .9; }

/* ---------- shared section heading ---------- */
.page-section { scroll-margin-top: 112px; }
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #89ecff !important;
  text-shadow: 0 0 22px rgb(90 233 255 / .36);
}
.section-kicker::before {
  content: '';
  width: 26px;
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--fx-cyan), transparent);
  box-shadow: 0 0 10px var(--fx-cyan);
}
.section-heading h2 { font-weight: 650; text-shadow: 0 22px 58px rgb(0 0 0 / .5); }
.section-description { color: #97aecb; }
h1 em, h2 em {
  background-size: 200% 100% !important;
  animation: gradientPan 8s ease-in-out infinite alternate;
}
@keyframes gradientPan { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { h1 em, h2 em { animation: none; } }

/* ==========================================================================
   SKIN WALL
   ========================================================================== */
.skin-showcase {
  position: relative;
  padding: var(--section-y) var(--pad-x);
  overflow: hidden;
  background:
    radial-gradient(920px 560px at 8% 0%, rgb(90 233 255 / .11), transparent 62%),
    radial-gradient(820px 580px at 94% 100%, rgb(178 140 255 / .14), transparent 62%),
    linear-gradient(180deg, #02050c, #040b18 46%, #02050c) !important;
}
.skin-showcase::before {
  content: 'HASAKEI / SKIN WALL';
  position: absolute;
  top: 58px;
  right: var(--pad-x);
  color: rgb(255 255 255 / .12);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
}
.skin-showcase::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(90 233 255 / .45), rgb(178 140 255 / .45), transparent);
}
.showcase-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(300px, .7fr);
  align-items: end;
  gap: clamp(30px, 6vw, 90px);
}
.showcase-head .section-heading { max-width: 720px; }
.showcase-aside { display: grid; justify-self: end; gap: 22px; max-width: 440px; }
.showcase-aside > p { margin: 0; color: #91a8c5; font-size: 14px; line-height: 1.9; }
.showcase-stats {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  list-style: none;
}
.showcase-stats li { display: grid; gap: 1px; }
.showcase-stats strong {
  color: #f1fbff;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -.05em;
  line-height: 1;
}
.showcase-stats strong sup { color: var(--fx-cyan); font-size: 12px; }
.showcase-stats span { color: #7188a5; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.skin-wall {
  position: relative;
  z-index: 2;
  margin-top: clamp(34px, 4.4vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(210px, 18vw, 268px);
  gap: 14px;
}
.skin-tile {
  --tone-rgb: 90 233 255;
  position: relative;
  display: block;
  min-width: 0;
  padding: 0;
  border: 1px solid rgb(var(--tone-rgb) / .27);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #050b16;
  text-align: left;
  cursor: zoom-in;
  box-shadow: 0 18px 44px rgb(0 0 0 / .34), inset 0 1px rgb(255 255 255 / .08);
  transform: translateZ(0);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .35s ease;
}
.skin-tile-wide { grid-column: span 2; }
.skin-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(1.12) contrast(1.05) brightness(.86);
  transition: transform .85s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
}
.skin-tile::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0), rgb(var(--tone-rgb) / .24), transparent 66%);
  transition: opacity .4s ease;
}
.skin-tile::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 28%, rgb(2 5 12 / .34) 56%, rgb(2 5 12 / .94) 100%),
    linear-gradient(90deg, rgb(2 5 12 / .62), transparent 58%);
}
.skin-tile:hover, .skin-tile:focus-visible {
  transform: translateY(-8px);
  border-color: rgb(var(--tone-rgb) / .72);
  box-shadow: 0 32px 74px rgb(0 0 0 / .58), 0 0 46px rgb(var(--tone-rgb) / .24);
}
.skin-tile:hover img, .skin-tile:focus-visible img {
  transform: scale(1.075);
  filter: saturate(1.25) contrast(1.08) brightness(1);
}
.skin-tile:hover::before, .skin-tile:focus-visible::before { opacity: 1; }
.skin-tile-index {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 17px;
  color: rgb(var(--tone-rgb) / .95);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-shadow: 0 0 14px rgb(var(--tone-rgb) / .8);
}
.skin-tile-copy {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 17px;
  left: 18px;
  display: grid;
  gap: 3px;
}
.skin-tile-copy small {
  color: rgb(var(--tone-rgb) / .95);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
  text-shadow: 0 0 16px rgb(var(--tone-rgb) / .65);
}
.skin-tile-copy strong {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgb(0 0 0 / .62);
}
.skin-tile-copy > span {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #c9e5ff;
  font-size: 10px;
  font-weight: 650;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s ease, transform .3s ease;
}
.skin-tile-copy > span svg { width: 12px; height: 12px; }
.skin-tile:hover .skin-tile-copy > span, .skin-tile:focus-visible .skin-tile-copy > span {
  opacity: 1;
  transform: none;
}

.skin-tile-more {
  --tone-rgb: 90 233 255;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 22px;
  cursor: pointer;
  border-color: rgb(90 233 255 / .36);
  background:
    radial-gradient(360px 280px at 84% 6%, rgb(90 233 255 / .24), transparent 58%),
    linear-gradient(150deg, rgb(8 23 45 / .98), rgb(3 8 18 / .99));
}
.skin-tile-more::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(rgb(90 233 255 / .1) 1px, transparent 1px),
    linear-gradient(90deg, rgb(90 233 255 / .1) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(155deg, black, transparent 68%);
}
.skin-tile-more::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -72px;
  right: -52px;
  width: 230px;
  height: 230px;
  border: 1px solid rgb(90 233 255 / .26);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgb(90 233 255 / .045), 0 0 0 50px rgb(90 233 255 / .025);
  pointer-events: none;
}
.skin-tile-more:hover, .skin-tile-more:focus-visible {
  transform: translateY(-8px);
  border-color: rgb(90 233 255 / .8);
}
.skin-tile-more small {
  position: relative;
  z-index: 3;
  color: var(--fx-cyan);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .19em;
}
.skin-tile-more strong {
  position: relative;
  z-index: 3;
  margin-top: 2px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(42px, 4.4vw, 58px);
  font-weight: 650;
  letter-spacing: -.07em;
  line-height: .9;
  text-shadow: 0 0 40px rgb(90 233 255 / .34);
}
.skin-tile-more strong span { color: var(--fx-cyan); font-size: .5em; vertical-align: super; }
.skin-more-copy {
  position: relative;
  z-index: 3;
  margin-top: 7px;
  color: #b5cbe2;
  font-size: 11px;
  line-height: 1.55;
}
.skin-more-link {
  position: relative;
  z-index: 3;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fx-cyan);
  font-size: 11px;
  font-weight: 800;
}
.skin-more-link svg { width: 13px; height: 13px; transition: transform .25s ease; }
.skin-tile-more:hover .skin-more-link svg { transform: translate(2px, -2px); }

@media (max-width: 1120px) {
  .showcase-head { grid-template-columns: 1fr; align-items: start; gap: 26px; }
  .showcase-aside { justify-self: start; max-width: 580px; }
  .skin-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(210px, 25vw, 290px);
  }
  .skin-tile-wide { grid-column: span 2; }
}

@media (max-width: 760px) {
  .skin-showcase { padding-top: var(--section-y); padding-bottom: var(--section-y); }
  .skin-showcase::before { display: none; }
  .showcase-stats { gap: 14px 24px; }
  .showcase-stats strong { font-size: 24px; }
  .skin-wall {
    display: flex;
    grid-auto-rows: auto;
    gap: 12px;
    margin: 30px calc(var(--gutter) * -1) 0;
    padding: 4px var(--gutter) 22px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .skin-wall::-webkit-scrollbar { display: none; }
  .skin-tile {
    flex: 0 0 74%;
    max-width: 520px;
    min-height: 216px;
    aspect-ratio: 16 / 11;
    scroll-snap-align: start;
  }
  .skin-tile-wide { flex-basis: 86%; }
  .skin-tile-more { flex-basis: 68%; max-width: 420px; aspect-ratio: auto; min-height: 216px; }
  .skin-tile-copy strong { font-size: 17px; }
  .skin-tile-copy > span { opacity: 1; transform: none; }
}

/* ==========================================================================
   PRODUCT / INTERFACE
   ========================================================================== */
.product-section {
  border-top: 1px solid rgb(90 233 255 / .12);
  background:
    radial-gradient(900px 540px at 16% 4%, rgb(90 233 255 / .1), transparent 60%),
    radial-gradient(820px 560px at 88% 72%, rgb(178 140 255 / .1), transparent 62%),
    #02050c !important;
}
.product-section::before { content: 'HASAKEI / INTERFACE' !important; color: rgb(90 233 255 / .18) !important; }
.product-section::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(90 233 255 / .42), rgb(178 140 255 / .4), transparent);
  pointer-events: none;
}
.product-hint {
  margin: 18px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #7991ae;
  font-size: 11px;
  font-weight: 650;
}
.product-hint svg { width: 14px; height: 14px; color: var(--fx-cyan); filter: drop-shadow(0 0 6px rgb(90 233 255 / .6)); }
.product-stage { margin-top: clamp(42px, 5vw, 68px); }
.product-shot {
  border-color: rgb(90 233 255 / .2) !important;
  background: linear-gradient(160deg, rgb(8 19 36 / .96), rgb(4 9 18 / .99)) !important;
  box-shadow:
    0 24px 62px rgb(0 0 0 / .46),
    0 0 0 1px rgb(255 255 255 / .035),
    inset 0 1px rgb(255 255 255 / .07) !important;
  cursor: zoom-in;
  transform:
    perspective(1300px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateY(var(--lift, 0px));
  transition: transform .32s ease, border-color .35s ease, box-shadow .35s ease;
}
.product-shot:hover, .product-shot:focus-visible {
  --lift: -7px;
  border-color: rgb(90 233 255 / .55) !important;
  box-shadow:
    0 38px 98px rgb(0 0 0 / .62),
    0 0 66px rgb(90 233 255 / .18),
    inset 0 0 0 1px rgb(90 233 255 / .14) !important;
}
.product-shot::before {
  content: '查看大图';
  position: absolute;
  z-index: 4;
  top: 15px;
  right: 15px;
  padding: 7px 11px;
  border: 1px solid rgb(90 233 255 / .4);
  border-radius: 999px;
  color: #dffaff;
  background: rgb(3 12 24 / .76);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  backdrop-filter: blur(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.product-shot:hover::before, .product-shot:focus-visible::before { opacity: 1; transform: none; }
.product-shot::after {
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0), rgb(90 233 255 / .2), transparent 64%) !important;
}
.product-shot:hover img { transform: scale(1.03); }
.product-shot figcaption {
  border-top-color: rgb(90 233 255 / .16) !important;
  background: linear-gradient(90deg, rgb(90 233 255 / .07), rgb(255 255 255 / .015) 58%, rgb(178 140 255 / .045)) !important;
}
.product-shot figcaption small { color: var(--fx-cyan) !important; }
.product-shot figcaption strong { color: #e6f4ff; }
.shot-label {
  border-color: rgb(90 233 255 / .35) !important;
  color: #e2f8ff !important;
  background: rgb(3 12 24 / .7) !important;
  box-shadow: 0 0 24px rgb(90 233 255 / .16);
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing-section {
  border-top: 1px solid rgb(90 233 255 / .12);
  background:
    radial-gradient(900px 560px at 50% -4%, rgb(178 140 255 / .14), transparent 62%),
    linear-gradient(180deg, #02050c, #040b18 34%, #060f21 68%, #02050c) !important;
}
.pricing-section::after {
  background: linear-gradient(90deg, transparent, rgb(90 233 255 / .7), rgb(178 140 255 / .65), rgb(255 122 217 / .45), transparent) !important;
  height: 1px;
}
.pricing-section::before { color: rgb(90 233 255 / .17) !important; }
.pricing-grid { gap: 16px !important; }
.pricing-card {
  background:
    radial-gradient(120% 88% at 50% -16%, rgb(var(--acc-rgb) / .22), transparent 58%),
    linear-gradient(165deg, rgb(9 21 40 / .97), rgb(4 10 20 / .99)) !important;
  border-color: rgb(var(--acc-rgb) / .3) !important;
  box-shadow:
    0 24px 64px rgb(0 0 0 / .48),
    inset 0 1px rgb(255 255 255 / .07),
    inset 0 0 34px rgb(var(--acc-rgb) / .035) !important;
}
.pricing-card.featured {
  border-color: rgb(var(--acc-rgb) / .48) !important;
  box-shadow:
    0 30px 74px rgb(0 0 0 / .55),
    0 0 52px rgb(var(--acc-rgb) / .16),
    inset 0 1px rgb(255 255 255 / .1) !important;
}
.pricing-card:hover {
  box-shadow:
    0 40px 96px rgb(0 0 0 / .64),
    0 0 64px rgb(var(--acc-rgb) / .26),
    inset 0 0 46px rgb(var(--acc-rgb) / .09) !important;
}
.pricing-card::before {
  background: linear-gradient(90deg, transparent, rgb(var(--acc-rgb) / .98), transparent) !important;
  box-shadow: 0 0 22px rgb(var(--acc-rgb) / .8) !important;
}
.pricing-card .pricing-label { color: #edf8ff; }
.pricing-card .pricing-description { color: #a4b8d1 !important; }
.pricing-card ul li { color: #a8bdd6 !important; }
.pricing-card .pricing-price strong { filter: drop-shadow(0 0 26px rgb(var(--acc-rgb) / .2)); }
.pricing-card .pricing-action {
  min-height: 44px !important;
  background: rgb(var(--acc-rgb) / .13) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / .08);
}
.pricing-card .pricing-popular {
  box-shadow: 0 0 22px rgb(var(--acc-rgb) / .24);
  animation: badgePulse 3.4s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 16px rgb(var(--acc-rgb) / .18); }
  50% { box-shadow: 0 0 30px rgb(var(--acc-rgb) / .36); }
}
@media (prefers-reduced-motion: reduce) { .pricing-card .pricing-popular { animation: none; } }
.pricing-note { color: #8198b4; }
.community-offer {
  border-color: rgb(178 140 255 / .45) !important;
  box-shadow:
    0 24px 66px rgb(0 0 0 / .32),
    inset 0 1px rgb(255 255 255 / .11),
    0 0 72px rgb(178 140 255 / .14) !important;
}
.community-offer::before { content: 'COMMUNITY / 5H BONUS' !important; }

.pricing-perks {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid rgb(90 233 255 / .16);
  border-radius: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  background: linear-gradient(90deg, rgb(90 233 255 / .055), rgb(178 140 255 / .055));
  box-shadow: inset 0 1px rgb(255 255 255 / .04);
}
.pricing-perks span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #94aac6;
  font-size: 11.5px;
}
.pricing-perks svg { width: 15px; height: 15px; color: var(--fx-cyan); filter: drop-shadow(0 0 7px rgb(90 233 255 / .55)); }
.pricing-perks b { color: #e9f8ff; font-weight: 750; }

/* ==========================================================================
   CLOSING + FOOTER
   ========================================================================== */
.closing-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid rgb(90 233 255 / .16);
  background:
    radial-gradient(760px 540px at 10% 10%, rgb(90 233 255 / .17), transparent 62%),
    radial-gradient(820px 580px at 92% 88%, rgb(178 140 255 / .2), transparent 62%),
    linear-gradient(180deg, #02050c, #050d1d) !important;
}
.closing-section::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 54%;
  width: min(860px, 92vw);
  aspect-ratio: 1;
  border: 1px solid rgb(90 233 255 / .14);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 46px rgb(90 233 255 / .035),
    0 0 0 96px rgb(178 140 255 / .025),
    0 0 90px rgb(90 233 255 / .08) inset;
  pointer-events: none;
}
.closing-section::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 12%;
  right: 8%;
  width: 280px;
  height: 480px;
  background: linear-gradient(180deg, transparent, rgb(90 233 255 / .1) 46%, transparent);
  filter: blur(28px);
  transform: rotate(22deg);
  pointer-events: none;
}
.closing-copy, .closing-panel { position: relative; z-index: 2; }
.closing-copy > p:not(.section-kicker) { color: #9cb2cd; }
.closing-copy h2 em { filter: drop-shadow(0 0 34px rgb(178 140 255 / .35)); }
.closing-panel {
  border-color: rgb(90 233 255 / .28) !important;
  background: linear-gradient(160deg, rgb(9 23 44 / .9), rgb(4 10 21 / .94)) !important;
  box-shadow:
    0 26px 70px rgb(0 0 0 / .46),
    0 0 54px rgb(90 233 255 / .1),
    inset 0 1px rgb(255 255 255 / .07) !important;
  backdrop-filter: blur(18px);
}
.closing-panel > div { border-radius: 12px; transition: background .3s ease, transform .3s ease; }
.closing-panel > div:hover { background: rgb(90 233 255 / .055); transform: translateX(3px); }
.closing-panel strong { color: #eefaff; }

.site-footer {
  position: relative;
  padding-top: var(--footer-y);
  padding-bottom: var(--footer-y);
  border-top-color: rgb(90 233 255 / .2) !important;
  background: linear-gradient(180deg, rgb(2 5 12 / .96), #02050c) !important;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(90 233 255 / .45), rgb(178 140 255 / .45), transparent);
}
.site-footer a:not(.brand):hover { color: var(--fx-cyan); }

/* ---------- back to top ---------- */
.to-top {
  position: fixed;
  z-index: 110;
  right: clamp(14px, 2.2vw, 28px);
  bottom: clamp(14px, 2.2vw, 28px);
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgb(90 233 255 / .4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--fx-cyan);
  background: rgb(4 12 25 / .8);
  box-shadow: 0 16px 38px rgb(0 0 0 / .46), 0 0 26px rgb(90 233 255 / .16);
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  backdrop-filter: blur(16px);
  transition: opacity .3s ease, transform .3s ease, border-color .25s ease, box-shadow .25s ease;
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover {
  border-color: rgb(90 233 255 / .85);
  box-shadow: 0 20px 46px rgb(0 0 0 / .5), 0 0 36px rgb(90 233 255 / .34);
  transform: translateY(-2px);
}
.to-top svg { width: 18px; height: 18px; transform: rotate(180deg); }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  z-index: 500;
  inset: 0;
  padding: clamp(12px, 3.5vw, 44px);
  display: grid;
  place-items: center;
  background: rgb(2 5 12 / .9);
  backdrop-filter: blur(22px) saturate(1.1);
  opacity: 0;
  transition: opacity .28s ease;
}
.lightbox.open { opacity: 1; }
.lightbox-panel {
  position: relative;
  width: min(1180px, 96vw);
  max-height: 90vh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border: 1px solid rgb(90 233 255 / .34);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(160deg, rgb(9 21 40 / .98), rgb(3 8 17 / .99));
  box-shadow: 0 60px 160px rgb(0 0 0 / .72), 0 0 88px rgb(90 233 255 / .14);
  transform: translateY(16px) scale(.975);
  transition: transform .36s cubic-bezier(.2, .8, .2, 1);
}
.lightbox.open .lightbox-panel { transform: none; }
.lightbox-panel img {
  width: 100%;
  max-height: calc(90vh - 76px);
  object-fit: contain;
  background: #02050c;
}
.lightbox-caption {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-top: 1px solid rgb(90 233 255 / .18);
  background: linear-gradient(90deg, rgb(5 16 33 / .96), rgb(3 9 19 / .96));
}
.lightbox-caption small { color: var(--fx-cyan); font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.lightbox-caption strong { color: #eefaff; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.lightbox-caption span { margin-left: auto; color: #7288a4; font-size: 10px; white-space: nowrap; }
.lightbox-close {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .24);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgb(3 10 20 / .72);
  backdrop-filter: blur(14px);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.lightbox-close:hover {
  border-color: rgb(90 233 255 / .7);
  background: rgb(90 233 255 / .16);
  transform: rotate(90deg);
}
.lightbox-close svg { width: 18px; height: 18px; }

/* ==========================================================================
   REVEAL / MOTION
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .nexus-reveal {
    opacity: .38;
    translate: 0 20px;
    transition: opacity .58s ease, translate .58s cubic-bezier(.2, .8, .2, 1);
    will-change: opacity, translate;
  }
  .nexus-reveal.is-visible { opacity: 1; translate: 0 0; }
  .pricing-card.nexus-reveal:nth-child(2) { transition-delay: .06s; }
  .pricing-card.nexus-reveal:nth-child(3) { transition-delay: .12s; }
  .pricing-card.nexus-reveal:nth-child(4) { transition-delay: .18s; }
  .product-shot.nexus-reveal:nth-child(2) { transition-delay: .08s; }
  .product-gallery-extra .product-shot:nth-child(2) { transition-delay: .08s; }
}

@media (hover: none) {
  .product-shot::before { display: none; }
  .skin-tile-copy > span { opacity: 1; transform: none; }
}

/* ==========================================================================
   SMALL SCREEN POLISH
   ========================================================================== */
@media (max-width: 920px) {
  .hero-copy h1 { font-size: clamp(52px, 8.4vw, 78px); }
}

@media (max-width: 640px) {
  .hero-copy h1 { font-size: clamp(42px, 12.8vw, 78px); letter-spacing: -.064em; }
  .hero-kicker { max-width: 100%; font-size: 9px; letter-spacing: .11em; }
  .hero-footnote span { padding: 0 9px; font-size: 9.5px; }
  .showcase-aside > p { font-size: 13px; }
  .pricing-perks { display: grid; gap: 9px; padding: 15px 16px; }
  .closing-section::before { width: 130vw; }
  .lightbox { padding: 10px; }
  .lightbox-panel { width: 100%; max-height: 92vh; border-radius: 18px; }
  .lightbox-panel img { max-height: calc(92vh - 96px); }
  .lightbox-caption { gap: 10px; padding: 13px 16px; }
  .lightbox-caption strong { font-size: 13px; }
  .lightbox-caption span { font-size: 9px; }
  .lightbox-close { top: 8px; right: 8px; width: 38px; height: 38px; }
  .to-top { width: 42px; height: 42px; }
}


/* ==========================================================================
   UX & A11Y LAYER  —  可读性 / 动效性能 / 无障碍
   追加于 visual-refresh.css 末尾：本表最后加载，故以下规则优先级最高。
   ========================================================================== */

/* ---------- 1. 字号可读性下限 ----------
   审计发现 69 处 <12px 字号（最小 7px）。其中 4 类元素承载中文正文
   （"换肤工作台""游戏内换肤""再次启用更快就绪"等），中文低于 12px 基本不可辨认。
   策略：中文内容 -> 12px；纯英文全大写徽章 -> 10px（配合 letter-spacing 仍保持精致感）。
   -------------------------------------------------------------------------- */

/* 中文承载元素：提升到 12px 最小可读线 */
.shot-label,
.preview-float small,
.preview-image-copy small,
.closing-panel small {
  font-size: 12px;
  line-height: 1.5;
}

/* 中文标签在大字号下需要略宽的留白，避免文字贴边 */
.shot-label { padding: 8px 12px; letter-spacing: .04em; }
.closing-panel small { margin-top: -6px; }

/* 纯英文全大写徽章：7-9px -> 10px 可读下限 */
.brand-copy small,
.signal-item small,
.preview-window-footer small,
.preview-window-footer strong span,
.pricing-popular,
.companion-badge,
.picker-titlebar small,
.skin-tile-copy small,
.preview-image-copy span,
.preview-float span,
.lightbox-caption {
  font-size: 10px;
}

/* ---------- 2. 动效性能 ----------
   审计发现 21 个常驻无限动画。移动端同时运行大面积背景动画会持续占用
   GPU/CPU 并显著耗电，这里对最重型的 3 个装饰性背景动画做小屏降级，
   内容层动画（轮播、悬停、进场）全部保留。
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .site-root::before,      /* 透视网格 */
  .site-root::after,       /* 扫描线 */
  .hero-section::before {  /* 极光旋涡 */
    animation: none !important;
  }
  .hero-background { animation: none !important; }
}

/* ---------- 3. 无障碍：尊重系统"减少动态效果" ----------
   一次性覆盖全部 21 个动画，无需逐个枚举（此前仅覆盖 7 处，不完整）。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 4. 可点击区域 ----------
   移动端最小 44x44 触控目标（WCAG 2.5.5 / iOS HIG）
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .nav-links a,
  .preview-controls button,
  .site-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .preview-controls button { min-width: 44px; justify-content: center; }
}

/* ---------- 5. 焦点可见性（键盘导航） ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fx-cyan, #5ae9ff);
  outline-offset: 3px;
  border-radius: 6px;
}