/* 
 * ScrollAR4U Technologies - Unified Orbit Design System
 * Pure Black & White Monochromatic Palette, Frosted Dark Glass, Precision Inter Typography
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:wght@400;500;600&display=swap');

@font-face {
  font-family: "InterVar";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url(../fonts/inter-var.woff2) format("woff2");
}

:root {
  --u: max( min(calc(100vw / 1563), calc(100vh / 460)), 0.80px );
  --ink: #ffffff;
  --ink-mark: rgba(255,255,255,.98);
  --ink-nav: rgba(255,255,255,.91);
  --ink-sub: rgba(255,255,255,.50);
  --ink-pill: rgba(255,255,255,.88);
  --ink-dark: #000000;
  --hairline: rgba(255,255,255,.15);
  --hairline-bright: rgba(255,255,255,.30);
  --glass-bg: rgba(18,18,20,.88);
  --glass-line: rgba(255,255,255,.15);
  --r-btn: calc(10 * var(--u));

  --e-reveal: cubic-bezier(.18,.85,.26,1);
  --e-soft:   cubic-bezier(.22,1,.36,1);
  --e-nav:    cubic-bezier(.33,1,.68,1);
  --rise:     calc(10 * var(--u));
  --rise-lg:  calc(13 * var(--u));
}

@supports (height:100dvh) {
  :root { --u: max( min(calc(100vw / 1563), calc(100dvh / 460)), 0.80px ); }
}
@supports not (width: max(1px,1vw)) {
  :root { --u: calc(100vw / 1563); }
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  background: #000000;
}

body {
  margin: 0;
  background: #000000;
  color: #ffffff;
  font-family: "InterVar", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-optical-sizing: none;
  font-feature-settings: "kern" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #9b8cff;
  outline-offset: 3px;
  border-radius: 4px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------
   1. HERO & LAYER STRUCTURE
---------------------------------------------------- */
.orbit-hero-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

video.sky {
  position: absolute;
  top: calc(-1.5 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  min-height: calc(100% + calc(1.5 * var(--u)));
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

div.veil {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.06);
  z-index: 1;
  pointer-events: none;
}

div.screen {
  position: relative;
  width: 100%;
  max-width: calc(1563 * var(--u));
  height: calc(1006 * var(--u));
  z-index: 2;
  margin: 0 auto;
  pointer-events: none;
}

main.hero {
  position: absolute;
  left: calc(0.9 * var(--u));
  right: calc(-0.9 * var(--u));
  top: 0;
  text-align: center;
  pointer-events: auto;
}

/* ----------------------------------------------------
   2. HEADER & NAVIGATION BAR (EXACT ORBIT SPEC)
---------------------------------------------------- */
/* ----------------------------------------------------
   2. HEADER & NAVIGATION BAR (UNIFIED FLOATING CAPSULE)
---------------------------------------------------- */
header.bar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, 92vw);
  height: 52px;
  background: rgba(18, 18, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: 9999px;
  padding: 0 8px 0 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

header.bar.scrolled {
  background: rgba(12, 12, 14, 0.94);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.70);
}

a.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: var(--ink-mark);
  text-decoration: none;
  flex-shrink: 0;
}

.brand svg {
  width: 24px;
  height: 15px;
  overflow: visible;
  fill: none;
  display: block;
}

.brand-word {
  font-size: 15px;
  font-weight: 550;
  font-variation-settings: 'opsz' 22;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #ffffff;
}

nav.links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
  flex: 1;
  margin: 0 20px;
}

nav.links a {
  font-size: 13px;
  font-weight: 450;
  font-variation-settings: 'opsz' 15;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s ease;
  padding: 4px 2px;
}

nav.links a:hover, nav.links a.active {
  color: #ffffff;
}

div.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ----------------------------------------------------
   3. BUTTONS (SHARED ORBIT SPEC)
---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-btn);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.ghost {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.98);
}
.ghost:hover {
  background: rgba(255, 255, 255, 0.10);
}

.solid {
  background: #ffffff;
  color: #000000;
}
.solid:hover {
  background: #e9e9ea;
}

.bar .btn {
  height: 36px;
  line-height: 34px;
  font-size: 12.5px;
  font-weight: 500;
  font-variation-settings: 'opsz' 15;
  letter-spacing: -0.015em;
  padding: 0 16px;
  border-radius: 9999px;
  box-sizing: border-box;
}

.bar a.ghost, .bar .btn.ghost {
  width: auto;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.90);
  background: transparent;
}
.bar a.ghost:hover, .bar .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.bar a.solid, .bar button.solid, .bar .btn.solid {
  width: auto;
  min-width: 0;
  background: #ffffff;
  color: #000000;
  border: 1px solid #ffffff;
  font-weight: 550;
}
.bar a.solid:hover, .bar button.solid:hover, .bar .btn.solid:hover {
  background: #e6e6e8;
  border-color: #e6e6e8;
}

button.menu {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
button.menu svg {
  width: 55%;
  height: 55%;
  display: block;
}
button.menu:hover {
  background: rgba(255, 255, 255, 0.10);
}

nav.sheet {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(18, 18, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.bar[data-open="true"] nav.sheet {
  display: block;
}
nav.sheet a:not(.btn) {
  display: block;
  padding: calc(9 * var(--u)) calc(10 * var(--u));
  border-radius: calc(9 * var(--u));
  color: var(--ink-nav);
  font-size: calc(14 * var(--u));
  font-weight: 450;
  font-variation-settings: 'opsz' 15;
  letter-spacing: calc(-0.30 * var(--u));
  text-decoration: none;
  transition: all 0.18s ease;
}
nav.sheet a:not(.btn):hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
nav.sheet a.solid, nav.sheet button.solid {
  display: flex;
  width: 100%;
  height: calc(38 * var(--u));
  margin-top: calc(8 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 500;
  font-variation-settings: 'opsz' 15;
  letter-spacing: calc(-0.30 * var(--u));
  color: #000;
}

/* ----------------------------------------------------
   4. EYEBROW PILLS (PRECISION FIT & DYNAMIC LABELS)
---------------------------------------------------- */
.pill, a.pill {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: max-content;
  min-height: 28px;
  padding: 3px 12px 3px 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  white-space: nowrap;
  text-decoration: none;
  gap: 8px;
  box-sizing: border-box;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.pill:hover, a.pill:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

.hero .pill, .hero a.pill {
  position: absolute;
  top: calc(129.6 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 90vw;
  padding: 3px 14px 3px 4px;
}

.chip, span.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: 20px;
  padding: 0 9px;
  border-radius: 9999px;
  background: #ffffff;
  color: #000000;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  flex-shrink: 0;
}

.pill-label, span.pill-label {
  margin-left: 0;
  position: static;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12.5px;
  font-weight: 450;
  letter-spacing: -0.015em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.pill svg, a.pill svg {
  width: 9.5px;
  height: 8px;
  margin-left: 2px;
  color: rgba(255, 255, 255, 0.85);
  display: inline-block;
  flex-shrink: 0;
  transition: transform .18s ease;
}

.pill:hover svg, a.pill:hover svg {
  transform: translateX(3px);
}

/* ----------------------------------------------------
   5. HERO HEADLINE & SUB-HEADLINE
---------------------------------------------------- */
main.hero h1 {
  position: absolute;
  left: calc(0.6 * var(--u));
  right: calc(-0.6 * var(--u));
  top: calc(168.5 * var(--u));
  margin: 0;
  font-size: calc(55 * var(--u));
  font-weight: 545;
  font-variation-settings: 'opsz' 32;
  line-height: calc(56 * var(--u));
  letter-spacing: calc(-0.76 * var(--u));
  color: #ffffff;
}
.ln {
  display: block;
  overflow: hidden;
  padding-bottom: calc(7 * var(--u));
  margin-bottom: calc(-7 * var(--u));
}
.ln-i {
  display: block;
}

main.hero p {
  position: absolute;
  left: 50%;
  transform: translateX(calc(-50% + calc(0.25 * var(--u))));
  top: calc(292.6 * var(--u));
  margin: 0;
  width: calc(700 * var(--u));
  max-width: 88vw;
  font-size: calc(15.7 * var(--u));
  font-weight: 400;
  font-variation-settings: 'opsz' 20;
  line-height: calc(24 * var(--u));
  letter-spacing: calc(-0.05 * var(--u));
  color: rgba(255, 255, 255, 0.50);
}

div.cta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(342.8 * var(--u));
  display: flex;
  gap: calc(9.9 * var(--u));
}
.cta .btn {
  height: calc(36.4 * var(--u));
  line-height: calc(36.4 * var(--u));
  padding-top: calc(2 * var(--u));
  font-size: calc(13.3 * var(--u));
  font-weight: 480;
  font-variation-settings: 'opsz' 16;
  letter-spacing: calc(-0.34 * var(--u));
  padding-left: calc(18 * var(--u));
  padding-right: calc(18 * var(--u));
}
.cta a.ghost {
  min-width: calc(99.6 * var(--u));
}
.cta a.solid {
  min-width: calc(96.4 * var(--u));
}

/* ----------------------------------------------------
   6. ENTRANCE ANIMATION (INTRO SPEC)
---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .intro .brand,
  .intro .links a,
  .intro .actions > .btn,
  .intro .actions > .menu,
  .intro .pill,
  .intro .hero p,
  .intro .cta .btn {
    opacity: 0;
  }
  .intro .ln-i {
    transform: translate3d(0, 115%, 0);
  }
  .intro .brand,
  .intro .pill,
  .intro .hero p,
  .intro .ln-i,
  .intro .cta .btn {
    will-change: transform, opacity;
  }

  @keyframes i-rise {
    from { opacity: 0; transform: translate3d(0, var(--rise), 0); }
    to { opacity: 1; transform: none; }
  }
  @keyframes i-rise-cy {
    from { opacity: 0; transform: translateY(-50%) translate3d(0, var(--rise), 0); }
    to { opacity: 1; transform: translateY(-50%); }
  }
  @keyframes i-pill {
    from { opacity: 0; transform: translateX(-50%) translate3d(0, var(--rise-lg), 0) scale(.972); }
    to { opacity: 1; transform: translateX(-50%); }
  }
  @keyframes i-sub {
    from { opacity: 0; transform: translateX(calc(-50% + calc(0.25 * var(--u)))) translate3d(0, var(--rise-lg), 0); }
    to { opacity: 1; transform: translateX(calc(-50% + calc(0.25 * var(--u)))); }
  }
  @keyframes i-btn {
    from { opacity: 0; transform: translate3d(0, var(--rise-lg), 0) scale(.986); }
    to { opacity: 1; transform: none; }
  }
  @keyframes i-line {
    from { transform: translate3d(0, 115%, 0); }
    to { transform: none; }
  }

  .intro-play .brand { animation: i-rise-cy .62s var(--e-nav) 0s both; }
  .intro-play .links a:nth-child(1) { animation: i-rise .55s var(--e-nav) .070s both; }
  .intro-play .links a:nth-child(2) { animation: i-rise .55s var(--e-nav) .115s both; }
  .intro-play .links a:nth-child(3) { animation: i-rise .55s var(--e-nav) .160s both; }
  .intro-play .links a:nth-child(4) { animation: i-rise .55s var(--e-nav) .205s both; }
  .intro-play .links a:nth-child(5) { animation: i-rise .55s var(--e-nav) .250s both; }
  .intro-play .actions > .btn,
  .intro-play .actions > .menu { animation: i-rise .55s var(--e-nav) .215s both; }
  .intro-play .actions > .ghost { animation: i-rise .55s var(--e-nav) .160s both; }
  .intro-play .pill { animation: i-pill .62s var(--e-soft) .26s both; }
  .intro-play .hero h1 .ln:nth-child(1) .ln-i { animation: i-line .95s var(--e-reveal) .34s both; }
  .intro-play .hero h1 .ln:nth-child(2) .ln-i { animation: i-line .95s var(--e-reveal) .48s both; }
  .intro-play .hero p { animation: i-sub .70s var(--e-soft) .86s both; }
  .intro-play .cta .btn:nth-child(1) { animation: i-btn .62s var(--e-soft) 1.00s both; }
  .intro-play .cta .btn:nth-child(2) { animation: i-btn .62s var(--e-soft) 1.07s both; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ----------------------------------------------------
   7. ORBIT RESPONSIVE RULES
---------------------------------------------------- */
@media (max-width: 1023px) {
  :root { --u: calc(100vw / 900); }
  .bar { left: 50%; transform: translateX(-50%); width: 92vw; padding: 0 8px 0 16px; }
  .links, .actions > .ghost, .actions > .solid { display: none !important; }
  .actions > .menu { display: inline-flex !important; }
}
@media (max-width: 640px) {
  :root { --u: calc(100vw / 486); }
  .bar { left: 50%; transform: translateX(-50%); width: 92vw; }
  .hero p { width: min(calc(560 * var(--u)), 88vw); line-height: calc(23 * var(--u)); }
  .pill { padding-right: 12px; }
}
@media (max-width: 380px) {
  :root { --u: calc(100vw / 470); }
}
@media (max-width: 1023px) and (max-height: 520px) {
  :root { --u: min(calc(100vw / 900), calc(100vh / 470)); }
}
@media (min-aspect-ratio: 3/1) {
  .sky {
    top: auto;
    bottom: 0;
    height: auto;
    min-height: 0;
    width: 100%;
    min-width: 100%;
  }
  .veil {
    background: linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.18) 100%);
  }
}

/* ----------------------------------------------------
   8. UNIFIED ORBIT CARDS & SECTIONS (PURE THEME)
---------------------------------------------------- */
.section-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 24px;
}

.section-head {
  max-width: 720px;
  margin-bottom: 48px;
}

.section-title {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 550;
  font-variation-settings: 'opsz' 32;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #ffffff;
  margin: 16px 0 12px 0;
}

.section-sub {
  font-size: 15px;
  font-weight: 400;
  font-variation-settings: 'opsz' 20;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.50);
  margin: 0;
}

/* The Core Orbit Card */
.orbit-card {
  background: rgba(18, 18, 20, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  transition: border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.orbit-card:hover {
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

/* Metrics Ribbon */
.metrics-ribbon {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(18, 18, 20, 0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 56px 24px;
}

.metric-num {
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #ffffff;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}

.metric-label {
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  margin-top: 8px;
}

.metric-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.5;
  margin-top: 4px;
}

/* 3D WebGL Rig Container */
.orbit-viewport-card {
  background: rgba(10, 10, 12, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
  position: relative;
}

#three-canvas-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Spec Chips in 3D Lab */
.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
}
.spec-chip span.bullet {
  color: #ffffff;
  font-weight: bold;
}

/* Input Fields */
.orbit-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  color: #ffffff;
  font-family: inherit;
  transition: border-color .18s ease;
}
.orbit-input:focus {
  outline: none;
  border-color: #ffffff;
}
.orbit-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* Select Dropdown: White text when closed, High-contrast dark text in popup */
select.orbit-input,
select {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  color-scheme: light;
}

select.orbit-input option,
.orbit-input option,
select option,
option {
  background-color: #ffffff !important;
  color: #0f172a !important; /* Crisp dark slate - fully visible on white menu */
  font-size: 14px;
  font-weight: 500;
  padding: 10px 14px;
}

select.orbit-input optgroup,
optgroup {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
}

/* Modals */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Toast */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: rgba(18, 18, 20, 0.95);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 14px 20px;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  animation: toastIn 0.3s cubic-bezier(0.18, 0.85, 0.26, 1);
}

@keyframes toastIn {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #000000;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}