/* Qronos reference composition, with GeekOnUp's original copy and violet palette. */
.qronos-hero {
  --hero-purple: #5439ff;
  position: relative;
  min-height: 100svh;
  display: block;
  isolation: isolate;
  padding: 0;
  background: #080812 url('/hero/presales-hero-dark-hd-v2.webp') center bottom / cover no-repeat;
  border-bottom: 0;
}
.qronos-hero::before { display: none; }
.qronos-hero::after {
  content: '';
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(96px, 9vw, 128px);
  background: linear-gradient(180deg, transparent 0%, rgba(18, 9, 66, .28) 34%, rgba(5, 4, 24, .82) 74%, #02020a 100%);
  pointer-events: none;
}
.qronos-hero .vortex-scene {
  display: none;
  position: absolute;
  inset: 0;
  max-width: none;
  margin-inline: auto;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
}
.qronos-hero canvas { display: block; width: 100%; height: 100%; }
.qronos-hero .vortex-scene::before,
.qronos-hero .vortex-scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.qronos-hero .vortex-scene::before { background: linear-gradient(90deg,rgba(0,0,8,.6),rgba(2,1,14,.18),transparent); }
.qronos-hero .vortex-scene::after { background: radial-gradient(ellipse at 50% 58%,rgba(51,27,163,.13),transparent 68%),linear-gradient(180deg,rgba(0,0,8,.12),transparent 50%,rgba(0,0,6,.5)); }
.qronos-hero .hero-frame {
  display: none;
}
.qronos-hero .hero-frame::before,
.qronos-hero .hero-frame::after {
  content: '';
  position: absolute;
  top: -5px;
  width: 11px;
  height: 11px;
  background: radial-gradient(ellipse,#b7b2ffb3,transparent 63%);
}
.qronos-hero .hero-frame::before { left: -6px; }
.qronos-hero .hero-frame::after { right: -6px; }
.qronos-hero .hero-inner {
  width: 84%;
  max-width: none;
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(100px,12vh,132px) 0 0;
  position: relative;
  top: 0;
  z-index: 2;
  text-align: left;
}
.qronos-hero .eyebrow {
  position: static;
  transform: none;
  margin: 0 0 36px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
  color: #9a95da;
  font-size: 11px;
  letter-spacing: 0;
}
.qronos-hero .eyebrow .dot {
  width: 26px;
  height: 1px;
  border-radius: 0;
  background: rgba(255,255,255,.72);
  box-shadow: none;
}
.qronos-hero h1.hero-title {
  max-width: 980px;
  margin: 0;
  font-family: 'Google Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 82px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
  color: #fff;
  text-wrap: balance;
}
.qronos-hero .hero-title-line { display: block; white-space: nowrap; }
.qronos-hero .hero-title-line:last-child {
  margin-top: 2px;
  color: #fff;
}
.qronos-hero .hero-title b { font-weight: inherit; background: none; color: #fff; -webkit-text-fill-color: currentColor; white-space: nowrap; }
.qronos-hero .hero-sub {
  max-width: 1020px;
  margin: 44px 0 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.8;
  color: #e4e2f2;
}
.qronos-hero .hero-sub b { color: inherit; font-weight: inherit; }
.qronos-hero .hero-sub-line { display: block; }
.qronos-hero .hero-chips { margin-top: 40px; gap: 12px; }
.qronos-hero .chip {
  position: relative;
  isolation: isolate;
  min-height: 40px;
  padding: 8px 18px;
  font-size: 13px;
  line-height: 22px;
  color: #f0eeff;
  background: rgba(4,3,15,.86);
  border: 1px solid rgba(126,109,255,.55);
  overflow: hidden;
  transition: border-color .25s,box-shadow .25s,transform .25s;
}
.qronos-hero .chip:first-child::before {
  content: '';
  position: absolute;
  inset: -130%;
  z-index: -2;
  background: conic-gradient(from 0deg,transparent 0 285deg,#5840ff 310deg,#d0ceff 330deg,transparent 355deg);
  animation: hero-border-orbit 3s linear infinite;
}
.qronos-hero .chip:first-child::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; background: #05030f; z-index: -1; }
.qronos-hero .chip:nth-child(2) { color: #fff; background: #5439ff; border-color: #7863ff; }
.qronos-hero .chip svg,.qronos-hero .chip b { color: inherit; }
.qronos-hero .chip:hover { transform: translateY(-2px); border-color: #8e7fff; box-shadow: 0 0 24px #5439ff44; }
.qronos-hero .scroll-hint {
  position: static;
  transform: none;
  margin: 42px 0 0;
  padding: 11px 22px;
  flex-direction: row;
  gap: 12px;
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}
.qronos-hero .scroll-hint:hover { color: #f4ebff; }
.qronos-hero .scroll-hint:focus-visible { outline: 1px solid #9283ff; outline-offset: 8px; border-radius: 5px; }
.qronos-hero.hero-enter .hero-title { animation: hero-title-enter 1000ms cubic-bezier(.4,0,.2,1) both; }
.qronos-hero.hero-enter .hero-sub { animation: hero-content-enter 700ms cubic-bezier(.4,0,.2,1) 150ms both; }
.qronos-hero.hero-enter .hero-chips { animation: hero-content-enter 700ms cubic-bezier(.4,0,.2,1) 200ms both; }
.qronos-hero.hero-enter .eyebrow { animation: hero-fade-in 1000ms ease both; }
.qronos-hero.hero-enter .scroll-hint { animation: hero-fade-in 700ms ease 500ms both; }
@keyframes hero-title-enter { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-content-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-border-orbit { to { transform: rotate(360deg); } }
@media(max-width:1023px) {
  .qronos-hero .hero-inner { width: calc(100% - 64px); padding-top: 96px; }
  .qronos-hero h1.hero-title { max-width: 760px; font-size: 56px; line-height: 1.16; }
  .qronos-hero .hero-sub { max-width: 760px; margin-top: 34px; font-size: 17px; }
  .qronos-hero .scroll-hint { margin-top: 34px; font-size: 13px; }
}
@media(max-width:639px) {
  .qronos-hero { background-image: url('/hero/presales-hero-dark-mobile-v2.webp'); background-size: auto 62%; }
  .qronos-hero .hero-inner { width: calc(100% - 40px); padding-top: 82px; }
  .qronos-hero .eyebrow { font-size: 10px; margin-bottom: 22px; }
  .qronos-hero h1.hero-title { max-width: 100%; font-size: clamp(26px,7.9vw,34px); line-height: 1.12; }
  .qronos-hero .hero-title-line { white-space: normal; }
  .qronos-hero .hero-title-line:last-child { margin-top: 2px; }
  .qronos-hero .hero-sub { max-width: 352px; font-size: 14px; line-height: 1.7; margin: 24px 0 0; text-wrap: pretty; }
  .qronos-hero .hero-sub-line { display: inline; }
  .qronos-hero .hero-chips { max-width: 352px; margin: 28px auto 0; gap: 10px; }
  .qronos-hero .chip { padding: 7px 14px; min-height: 38px; font-size: 12px; gap: 6px; }
  .qronos-hero .chip:last-child { background: transparent; border-color: #7f6aff55; }
  .qronos-hero .scroll-hint { margin-top: 24px; padding: 8px 14px; font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) {
  .qronos-hero *, .qronos-hero *::before { animation: none !important; transition: none !important; }
}