:root {
   --bg: #050505;
   --line: rgba(88, 167, 218, 0.38);
   --soft-line: rgba(242, 243, 244, 0.10);
   --blue: #58A7DA;
   --light: #F2F3F4;
   --text-soft: rgba(242, 243, 244, 0.76);
 }

 * {
   box-sizing: border-box;
 }

 html,
 body {
   margin: 0;
   min-height: 100%;
   background: var(--bg);
   color: var(--light);
   font-family: Arial, Helvetica, sans-serif;
   overflow: hidden;
 }

 body.entered {
   overflow: auto;
 }

 .site-shell {
   position: relative;
   width: 100%;
 }

 .hero {
   position: relative;
   min-height: 100vh;
   overflow: hidden;
   transition: transform 1.15s ease, opacity 0.9s ease;
   z-index: 2;
   background: var(--bg);
 }

 body.entered .hero {
   transform: translateY(-100vh);
   opacity: 0;
   pointer-events: none;
 }

 .hero canvas {
   display: block;
 }

 #fog {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   opacity: 0;
   transition: opacity 1800ms ease;
   mix-blend-mode: screen;
 }

 #c {
   position: absolute;
   inset: 0;
   z-index: 3;
   pointer-events: none;
 }

 .center-logo {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   z-index: 10;
   opacity: 0;
   transition: opacity 1200ms ease;
 }

 .center-logo.show {
   opacity: 1;
 }

 .center-logo svg {
   width: min(82vw, 980px);
   height: auto;
   display: block;
   filter: drop-shadow(0 0 12px rgba(15, 98, 254, 0.20)) drop-shadow(0 0 28px rgba(15, 98, 254, 0.12));
 }

 .enter-wrap {
   position: absolute;
   left: 50%;
   bottom: 8vh;
   transform: translateX(-50%);
   z-index: 20;
   opacity: 0;
   transition: opacity 1200ms ease;
   pointer-events: none;
 }

 .enter-wrap.show {
   opacity: 1;
   pointer-events: auto;
 }

 .btn-rtxid {
   border: 1px solid rgba(120, 180, 255, 0.18);
   background:
     radial-gradient(circle at 18% 20%, rgba(0, 170, 255, 0.16), transparent 28%),
     radial-gradient(circle at 82% 82%, rgba(0, 120, 255, 0.18), transparent 30%),
     linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
   border-radius: 18px;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.08),
     0 8px 24px rgba(0, 0, 0, 0.35),
     0 0 18px rgba(15, 98, 254, 0.10);
   color: rgba(220, 235, 255, 0.92);
   text-align: center;
   padding: 14px 38px;
   text-transform: uppercase;
   letter-spacing: 0.22em;
   font-weight: 700;
   font-size: 0.92rem;
   font-family: Arial, Helvetica, sans-serif;
   cursor: pointer;
   user-select: none;
   display: inline-block;
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
   position: relative;
   overflow: hidden;
 }

 .btn-rtxid:hover {
   transform: translateY(-2px);
   border-color: rgba(140, 210, 255, 0.35);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.10),
     0 12px 30px rgba(0, 0, 0, 0.42),
     0 0 24px rgba(80, 160, 255, 0.22);
   color: rgba(240, 248, 255, 0.98);
 }

 .btn-rtxid:active {
   transform: translateY(1px);
 }

 .btn-rtxid::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.14) 45%, transparent 70%);
   transform: translateX(-140%);
   transition: transform 0.9s ease;
 }

 .btn-rtxid:hover::before {
   transform: translateX(140%);
 }