.hero-background { background: linear-gradient(125deg, #252139, #1e2039 65%, #26223e); }
.particle-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }
.hero-grid { opacity: .65; }
.aurora-ribbon { position: absolute; width: 85%; height: 70%; border-radius: 45%; filter: blur(54px); opacity: .7; will-change: transform; }
.ribbon-one { right: -18%; top: -16%; background: radial-gradient(ellipse, #a366f970, #684acf30 45%, transparent 70%); animation: aurora-drift 16s ease-in-out infinite alternate; }
.ribbon-two { left: -24%; bottom: -38%; background: radial-gradient(ellipse, #5fcdbb48, #6960db34 45%, transparent 72%); animation: aurora-drift 19s ease-in-out infinite alternate-reverse; }
.title-accent { background-image: linear-gradient(105deg, #eadfff, #b895ff 32%, #b4ffe0 52%, #bf9bff 72%, #eadfff); background-size: 240% 100%; animation: title-spectrum 10s ease-in-out infinite; }
.stage-spark { position: absolute; color: #d8b5ff; z-index: 3; pointer-events: none; text-shadow: 0 0 24px #b98dff99; animation: spark-float 6s ease-in-out infinite; }
.spark-one { font-size: 38px; top: -16px; right: 50px; }
.spark-two { font-size: 24px; bottom: 11px; left: 40px; color: #b3f6da; animation-delay: -3s; }
.demo-shell { box-shadow: 0 22px 65px #08051155, 0 0 45px #b084ff26; }
.primary { overflow: hidden; }
.primary::after { content: ""; position: absolute; inset: -100% -50%; pointer-events: none; background: linear-gradient(115deg, transparent 40%, #ffffff35 49%, transparent 58%); transform: translateX(-80%); animation: button-sheen 7s ease-in-out infinite; }
.kinetic-band { overflow: hidden; border-block: 1px solid #bca0ed36; background: linear-gradient(100deg, #342948, #26343c 55%, #342948); padding: 17px 0; }
.kinetic-track { display: flex; width: max-content; animation: ticker-travel 34s linear infinite; }
.kinetic-track > span { display: flex; align-items: center; justify-content: space-around; flex: 0 0 auto; min-width: 100vw; gap: 37px; padding-inline: 18.5px; white-space: nowrap; font-size: 12px; font-weight: 650; letter-spacing: 2.8px; color: #e5d9f7; }
.kinetic-track i { font-size: 17px; font-style: normal; color: #b7eadb; }
.project-art { background-image: radial-gradient(ellipse at 25% 20%, color-mix(in srgb, var(--card-color) 25%, transparent), transparent 75%); }
.art-shape { animation: art-drift 9s ease-in-out infinite alternate; }
.art-1 .art-shape, .art-4 .art-shape, .art-7 .art-shape { animation-delay: -3s; }
.art-2 .art-shape, .art-5 .art-shape, .art-6 .art-shape { animation-delay: -6s; }
.art-bars i { animation: equalizer 1.9s ease-in-out infinite alternate; transform-origin: bottom; }
.art-bars i:nth-child(2n) { animation-delay: -.7s; }
.art-bars i:nth-child(3n) { animation-delay: -1.2s; }
.project-card { transition: transform .3s, border-color .3s, box-shadow .3s; }
.project-card:hover { box-shadow: 0 18px 36px #0b091c45, 0 0 22px color-mix(in srgb, var(--card-color) 12%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .motion-enabled .project-card:hover { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-5px); }
}
.hub-preview { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 50px; padding: 45px; margin-top: 24px; border: 1px solid #b59ed34f; border-radius: 16px; background: linear-gradient(125deg, #30293e, #242c3c); }
.hub-preview::before { content: ""; position: absolute; pointer-events: none; z-index: -1; width: 520px; height: 520px; top: -180px; right: -130px; border-radius: 50%; background: radial-gradient(circle, #9580e734, transparent 68%); }
.wip-badge { display: inline-flex; align-items: center; gap: 8px; color: #f1d2a3; border: 1px solid #d9b48055; background: #b9832520; border-radius: 5px; padding: 7px 9px; font-size: 9px; font-weight: 650; letter-spacing: 1.1px; }
.wip-badge > span { width: 5px; height: 5px; border-radius: 50%; background: #efc68b; box-shadow: 0 0 12px #edbd7655; }
.hub-preview-brand { display: flex; gap: 11px; align-items: center; margin-top: 29px; color: #d5cbe4; font-size: 10px; font-weight: 650; letter-spacing: 2px; }
.hub-preview-brand img { width: 36px; height: 36px; border-radius: 9px; }
.hub-preview h3 { margin: 18px 0; font-size: clamp(30px, 3.1vw, 42px); line-height: 1.12; letter-spacing: -1.6px; }
.hub-preview h3 span { color: #c7b1f4; }
.hub-preview-copy > p { color: #c5bed3; font-size: 13px; line-height: 1.85; max-width: 390px; }
.wip-note { display: flex; align-items: center; gap: 11px; font-size: 11px; line-height: 1.9; color: #c7bed6; margin-top: 24px; }
.wip-note > span:first-child { color: #efc68b; font-size: 21px; }
.wip-note strong { font-weight: 500; color: #ebd8bd; }
.hub-blueprint { position: relative; overflow: hidden; border: 1px solid #ab9dc366; border-radius: 12px; background: #222334; box-shadow: 0 25px 55px #10101c50; transform: perspective(1200px) rotateY(-7deg) rotateX(3deg); animation: blueprint-float 8s ease-in-out infinite alternate; }
.blueprint-top { height: 43px; display: flex; align-items: center; gap: 13px; padding: 0 17px; border-bottom: 1px solid #af9ad22a; background: #2e2a40; font-size: 8px; letter-spacing: 1.2px; color: #dbd0ef; }
.blueprint-top > span:first-child { display: flex; gap: 4px; }
.blueprint-top i { width: 5px; height: 5px; background: #927fa9; border-radius: 50%; }
.blueprint-top > span:last-child { margin-left: auto; color: #b8abc9; font-size: 6px; }
.blueprint-body { display: flex; min-height: 265px; }
.blueprint-sidebar { width: 54px; border-right: 1px solid #af9ad226; display: flex; flex-direction: column; gap: 19px; align-items: center; padding-top: 22px; background: #242333; }
.blueprint-sidebar b { display: grid; place-items: center; background: #c35b72; width: 25px; height: 25px; border-radius: 6px; font-size: 14px; color: white; }
.blueprint-sidebar i { width: 12px; height: 12px; border: 1px solid #b5a6ce70; border-radius: 3px; }
.blueprint-sidebar i:first-of-type { background: #aa86f080; border-color: #c7a3ff; }
.blueprint-main { flex: 1; min-width: 0; padding: 24px 20px; }
.blueprint-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 17px; font-weight: 600; }
.blueprint-heading small { font-size: 8px; color: #c6aedf; font-weight: 400; border: 1px solid #9074b24f; border-radius: 4px; padding: 3px 6px; }
.blueprint-search { width: 70%; height: 10px; background: #66587b50; border-radius: 3px; margin: 13px 0 21px; }
.blueprint-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.blueprint-games > div { height: 108px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; border: 1px solid #c6b0eb3a; border-radius: 6px; background: linear-gradient(140deg, #705291, #3b3658); }
.blueprint-games > div:nth-child(2) { background: linear-gradient(140deg, #457d82, #303e57); }
.blueprint-games > div:nth-child(3) { background: linear-gradient(140deg, #926479, #513b60); }
.blueprint-games span { font-size: 35px; font-weight: 700; color: #ffffff35; letter-spacing: -3px; }
.blueprint-games i { height: 4px; width: 70%; border-radius: 2px; background: #e7d8ff80; }
.blueprint-task { display: flex; gap: 7px; align-items: center; margin-top: 19px; font-size: 8px; color: #c6cad6; }
.blueprint-scan { position: absolute; inset: 43px 0 0; pointer-events: none; background: linear-gradient(transparent, #c9afff0b 47%, #c9afff30 50%, transparent 53%); transform: translateY(-110%); animation: blueprint-scan 9s ease-in-out infinite; }
@keyframes aurora-drift { to { transform: translate(12%, 14%) rotate(18deg) scale(1.18); } }
@keyframes title-spectrum { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes spark-float { 0%, 100% { transform: translateY(0) rotate(-8deg); opacity: .65; } 50% { transform: translateY(-15px) rotate(12deg); opacity: 1; } }
@keyframes button-sheen { 0%, 65% { transform: translateX(-80%); } 90%, 100% { transform: translateX(80%); } }
@keyframes ticker-travel { to { transform: translateX(-50%); } }
@keyframes art-drift { to { translate: 10px -6px; rotate: 12deg; } }
@keyframes equalizer { from { scale: 1 .35; } to { scale: 1 1; } }
@keyframes blueprint-float { to { transform: perspective(1200px) rotateY(-3deg) rotateX(0) translateY(-8px); } }
@keyframes blueprint-scan { 0%, 25% { transform: translateY(-110%); } 75%, 100% { transform: translateY(110%); } }
body:is(.motion-paused, .motion-suspended) :is(.aurora-ribbon, .title-accent, .stage-spark, .kinetic-track, .art-shape, .art-bars i, .hub-blueprint, .blueprint-scan), body:is(.motion-paused, .motion-suspended) .primary::after { animation-play-state: paused; }
.effects-outside :is(.aurora-ribbon, .title-accent, .stage-spark, .orbit, .aura) { animation-play-state: paused; }
@media (max-width: 1000px) { .hub-preview { padding: 32px; gap: 30px; } .blueprint-main { padding-inline: 15px; } .blueprint-top { padding-inline: 12px; gap: 9px; } }
@media (max-width: 800px) { .hub-preview { grid-template-columns: 1fr; gap: 35px; } .hub-preview-copy > p { max-width: 520px; } .hub-blueprint { max-width: 550px; width: 100%; justify-self: center; } .aurora-ribbon { filter: blur(34px); } }
@media (max-width: 480px) {
  .kinetic-band { padding: 13px 0; }
  .kinetic-track > span { font-size: 10px; letter-spacing: 1.5px; gap: 22px; padding-inline: 11px; }
  .kinetic-track i { font-size: 14px; }
  .hub-preview { padding: 25px 21px; }
  .wip-badge { font-size: 7px; letter-spacing: .7px; }
  .hub-preview h3 { font-size: 35px; }
  .hub-preview-copy > p { font-size: 12px; }
  .hub-blueprint { transform: none; animation-name: none; }
  .blueprint-body { min-height: 218px; }
  .blueprint-sidebar { width: 36px; gap: 17px; }
  .blueprint-sidebar b { width: 22px; height: 22px; }
  .blueprint-main { padding: 18px 12px; }
  .blueprint-heading { font-size: 15px; }
  .blueprint-games { gap: 7px; }
  .blueprint-games > div { height: 82px; padding: 8px; }
  .blueprint-games span { font-size: 29px; }
  .blueprint-top > span:last-child { font-size: 5px; letter-spacing: .6px; }
  .blueprint-task { font-size: 7px; }
  .spark-one { right: 9px; font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-ribbon, .title-accent, .stage-spark, .kinetic-track, .art-shape, .art-bars i, .hub-blueprint, .blueprint-scan, .primary::after { animation: none !important; }
  .hub-blueprint { transform: none; }
  .project-card:hover { transform: none; }
  .blueprint-scan { display: none; }
}