@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap');@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&display=swap');@font-face { font-family: Figtree; font-style: normal; font-weight: 400; src: url("fonts/0b3cf991-be7f-4ac1-8eb1-0905ff8b158b.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 500; src: url("fonts/0b3cf991-be7f-4ac1-8eb1-0905ff8b158b.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 600; src: url("fonts/0b3cf991-be7f-4ac1-8eb1-0905ff8b158b.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 700; src: url("fonts/0b3cf991-be7f-4ac1-8eb1-0905ff8b158b.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 800; src: url("fonts/0b3cf991-be7f-4ac1-8eb1-0905ff8b158b.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 900; src: url("fonts/0b3cf991-be7f-4ac1-8eb1-0905ff8b158b.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }:root { --ink: #2a1670; --ink-2: #5a4a9e; --ink-3: #8b7fc0; --deep: #4b2fc3; --violet: #7b52e6; --orchid: #c04fcf; --pink: #ff9fd8; --rose: #feabe8; --lilac: #c9a6ff; --peri: #8fb2ff; --cream: #fff6fb; --up: #14905a; --up-2: #2fbf7f; --down: #d6406a; --gold: #e7b43a; --glass: rgba(255,255,255,.66); --glass-2: rgba(255,255,255,.46); --tint: rgba(243,236,255,.78); --tint-2: rgba(233,222,255,.9); --holo: linear-gradient(100deg,#ffb3e0 0%,#d4a8ff 32%,#a9c0ff 64%,#ffd9f2 100%); --holo-edge: linear-gradient(125deg,#ffffff 0%,#ffd1f2 22%,#cdb4ff 48%,#a9c0ff 72%,#ffffff 100%); --text-holo: linear-gradient(100deg,#4b2fc3 0%,#7b52e6 48%,#c04fcf 100%); --night: linear-gradient(150deg,#5b33c8 0%,#3a1f99 55%,#2a1670 100%); --shadow: 0 30px 60px -34px rgba(75,47,195,.5),0 10px 22px -16px rgba(75,47,195,.28); --shadow-lg: 0 40px 80px -40px rgba(75,47,195,.6),0 14px 30px -18px rgba(75,47,195,.3); --r-xl: 32px; --r-l: 24px; --r-m: 18px; --r-s: 12px; --gut: 48px; --max: 1360px; --ease: cubic-bezier(.22,1,.36,1); --plum: var(--ink); --plum-2: var(--ink-2); --plum-3: var(--ink-3); --lilac-2: #dcc8ff; --lilac-3: #ebe0ff; --lilac-4: rgba(243,236,255,.85); --white: rgba(255,255,255,.7); }
* { box-sizing: border-box; margin: 0px; padding: 0px; }
html { text-size-adjust: 100%; scroll-behavior: smooth; background: rgb(226, 185, 236); }
body { position: relative; color: var(--ink); font-family: Figtree, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0px; z-index: -2; pointer-events: none; background: radial-gradient(48% 22% at 18% 86%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 243, 251, 0.4) 45%, transparent 75%), radial-gradient(42% 18% at 82% 92%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 238, 248, 0.4) 45%, transparent 75%), radial-gradient(60% 55% at 12% 6%, rgb(253, 227, 238) 0%, rgb(249, 198, 230) 35%, transparent 70%), radial-gradient(45% 60% at 60% 8%, rgb(131, 148, 242) 0%, rgb(151, 160, 242) 30%, transparent 70%), radial-gradient(40% 45% at 94% 18%, rgb(254, 174, 232) 0%, transparent 70%), radial-gradient(55% 50% at 50% 60%, rgb(236, 201, 243) 0%, rgb(217, 187, 244) 40%, transparent 75%), radial-gradient(50% 45% at 88% 78%, rgb(246, 189, 235) 0%, transparent 70%), radial-gradient(60% 50% at 6% 70%, rgb(179, 154, 233) 0%, rgb(201, 173, 238) 40%, transparent 75%), rgb(228, 189, 238); }
body::after { content: ""; position: fixed; inset: 0px; z-index: 300; pointer-events: none; background: url("images/e18c95e6-e7cd-465d-b2d5-3e05f14d0093.png"); opacity: 0.38; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: 0px; cursor: pointer; }
::selection { background: rgb(230, 210, 255); color: var(--ink); }
:focus-visible { outline: rgba(123, 82, 230, 0.667) solid 3px; outline-offset: 3px; border-radius: 12px; }
.wrap { max-width: var(--max); margin: 0px auto; padding: 0 var(--gut); }
.display { font-weight: 800; font-size: clamp(42px, 5.6vw, 80px); line-height: 1.04; letter-spacing: -0.035em; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.display img { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.24em; margin: 0px 0.04em; }
.title { font-weight: 800; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -0.03em; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; color: transparent; padding-bottom: 0.05em; }
.title img { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.22em; }
.h3 { font-weight: 700; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.lead { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; color: var(--ink-2); font-weight: 500; }
.stk { font-weight: 900; font-size: clamp(56px, 10.4vw, 150px); line-height: 1; letter-spacing: -0.035em; color: var(--deep); margin: 0px auto; }
.stk svg { display: block; margin: 0px auto; max-width: 100%; height: auto; overflow: visible; filter: drop-shadow(rgba(123, 82, 230, 0.35) 0px 14px 26px); }
.stk:not(.ready) { visibility: hidden; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0px 28px; border-radius: 100px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); background-image: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 220% 100%; background-position: 0px 0px; box-shadow: rgba(181, 108, 240, 0.75) 0px 14px 30px -14px, rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(123, 82, 230, 0.16) 0px -2px 0px inset; transition: transform .25s var(--ease),background-position .9s var(--ease),box-shadow .25s; }
.btn:hover { transform: translateY(-1px); background-position: 100% 0px; box-shadow: rgba(181, 108, 240, 0.85) 0px 18px 34px -14px, rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(123, 82, 230, 0.16) 0px -2px 0px inset; }
.btn:active { transform: translateY(1px); }
.btn.soft { background: rgba(255, 255, 255, 0.66); box-shadow: rgba(255, 255, 255, 0.95) 0px 0px 0px 1px inset, rgba(75, 47, 195, 0.45) 0px 10px 24px -16px; }
.btn.soft:hover, .btn.white:hover, .btn.cream:hover { background: rgba(255, 255, 255, 0.86); }
.btn.big { height: 62px; padding: 0px 36px; font-size: 18px; }
.btn.sm { height: 42px; padding: 0px 20px; font-size: 15px; }
.btn.off { pointer-events: none; filter: saturate(0.8); }
.see { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0px 22px; border-radius: 100px; background: rgba(255, 255, 255, 0.62); box-shadow: rgba(255, 255, 255, 0.95) 0px 0px 0px 1px inset; font-size: 17px; font-weight: 600; color: var(--ink); transition: background 0.2s; }
.see:hover { background: rgba(255, 255, 255, 0.85); }
.see svg { width: 18px; height: 18px; }
.step, .faq details, .empty, .foot-card { background: linear-gradient(160deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.55) 100%) padding-box,var(--holo-edge) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow),inset 0 1px 0 rgba(255,255,255,.9); }
.night { background: radial-gradient(90% 70%at 18% 0%,#8a63ff55 0%,transparent 60%),radial-gradient(70% 60%at 100% 100%,#ff9fd844 0%,transparent 60%),var(--night); color: rgb(255, 255, 255); box-shadow: var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.25); }
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0px 11px; border-radius: 10px; background: var(--tint); box-shadow: rgba(255, 255, 255, 0.9) 0px 0px 0px 1px inset; font-size: 13px; font-weight: 700; color: var(--deep); letter-spacing: 0.1px; white-space: nowrap; }
@keyframes pulse { 
  50% { box-shadow: rgba(123, 82, 230, 0) 0px 0px 0px 7px; }
}
.av { flex: 0 0 auto; display: grid; place-items: center; }
.av img { width: 100%; height: 100%; }
.av.coin { background: transparent; overflow: visible; }
.av.coin img { object-fit: contain; transform: scale(1.14); filter: drop-shadow(rgba(75, 47, 195, 0.28) 0px 6px 8px); }
.nav { position: fixed; z-index: 50; top: 0px; left: 0px; right: 0px; height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gut); transition: color 0.3s; }
.nav::before { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 112px; background: linear-gradient(rgba(238, 212, 247, 0.9) 0%, rgba(238, 212, 247, 0.72) 60%, rgba(238, 212, 247, 0) 100%); backdrop-filter: blur(12px); mask-image: linear-gradient(rgb(0, 0, 0) 62%, transparent); pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.logo { position: relative; display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 28px; letter-spacing: -0.04em; color: var(--ink); width: max-content; }
.logo img { width: 52px; height: 52px; margin: -6px -2px -6px -8px; filter: drop-shadow(rgba(75, 47, 195, 0.3) 0px 6px 10px); }
.pills { position: relative; display: flex; gap: 2px; padding: 6px; border-radius: 100px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(14px) saturate(140%); box-shadow: rgba(255, 255, 255, 0.85) 0px 0px 0px 1px inset, rgba(75, 47, 195, 0.5) 0px 12px 30px -18px; }
.pills a { font-size: 16px; font-weight: 600; padding: 10px 17px; border-radius: 100px; color: var(--ink); transition: background 0.2s; }
.pills a:hover { background: rgba(255, 255, 255, 0.6); }
.nav-r { position: relative; display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
.wbtn { height: 48px; padding: 0px 20px; border-radius: 100px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(14px); box-shadow: rgba(255, 255, 255, 0.85) 0px 0px 0px 1px inset; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.nav .btn { height: 48px; padding: 0px 22px; }
.sheet { position: fixed; z-index: 60; inset: 0px; background: rgba(42, 22, 112, 0.28); backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center; padding: 12px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.sheet-card { width: 100%; max-width: 520px; border-radius: 30px; padding: 14px; transform: translateY(-14px); transition: transform .35s var(--ease); background: linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,244,252,.9)) padding-box,var(--holo-edge) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow-lg); }
.sheet-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 10px; }
.sheet-x { width: 46px; height: 46px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; }
.sheet nav a { display: flex; justify-content: space-between; align-items: center; padding: 17px 16px; border-radius: 18px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.sheet nav a:hover { background: var(--tint); }
.sheet .btn { width: 100%; margin-top: 10px; }
.main { padding-top: 100px; }
.sec { padding-top: 130px; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
.sec-head p { max-width: 30em; }
.center-head { text-align: center; margin-bottom: 44px; }
.center-head .lead { margin: 14px auto 0px; max-width: 34em; }
.pxl { position: absolute; inset: 0px; pointer-events: none; z-index: 1; }
.pxl b { position: absolute; display: block; border-radius: 2px; }
.tws { position: absolute; inset: 0px; pointer-events: none; z-index: 1; }
.tws i { position: absolute; width: var(--s); height: var(--s); background: rgb(255, 255, 255); clip-path: polygon(50% 0px, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0px 50%, 42% 42%); filter: drop-shadow(rgba(255, 255, 255, 0.8) 0px 0px 6px); animation-duration: 3.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation-name: tw; animation-timeline: auto; animation-range: normal; animation-delay: var(--d); }
@keyframes tw { 
  0%, 100% { opacity: 0.3; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1.1); }
}
.hero { position: relative; min-height: 100svh; margin-top: -100px; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; }
.hero canvas { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; z-index: 2; }
.hero .fallback { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity 0.6s; }
.hero.gl-on .fallback { opacity: 0; }
.hero-copy { position: relative; z-index: 4; padding: 110px 20px 120px; pointer-events: none; width: 100%; }
.hero-copy .stk { max-width: min(1180px, 94vw); }
.hero .sub { margin-top: 20px; font-size: clamp(20px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.02em; color: rgb(255, 255, 255); text-shadow: rgba(123, 82, 230, 0.4) 0px 2px 0px, rgba(107, 69, 216, 0.65) 0px 6px 26px; }
.hero .ctas { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; pointer-events: auto; }
.hero .ctas .btn.soft { background: rgba(91, 51, 200, 0.36); color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.45) 0px 0px 0px 1px inset, rgba(58, 31, 153, 0.7) 0px 14px 30px -16px; }
.hero .ctas .btn.soft:hover { background: rgba(91, 51, 200, 0.48); }
.ticker { position: absolute; z-index: 4; left: 0px; right: 0px; bottom: 22px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 0px 16px; pointer-events: auto; }
.tick { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0px 16px 0px 6px; border-radius: 100px; background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(10px); box-shadow: rgba(255, 255, 255, 0.9) 0px 0px 0px 1px inset, rgba(75, 47, 195, 0.6) 0px 12px 26px -18px; font-size: 14.5px; font-weight: 600; color: var(--ink); max-width: 360px; transition: opacity .5s,translate .6s var(--ease); }
.tick .av { width: 34px; height: 34px; border-radius: 12px; }
.tick span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tick em { font-style: normal; color: var(--ink-2); font-weight: 500; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: var(--max); margin: 0px auto; padding: 0 var(--gut); }
.tile { position: relative; min-height: 540px; border-radius: var(--r-xl); overflow: hidden; padding: 36px; display: flex; flex-direction: column; box-shadow: var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.7); isolation: isolate; }
.tile::after { content: ""; position: absolute; inset: 0px; border-radius: inherit; padding: 1.5px; background: var(--holo-edge); mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px); pointer-events: none; z-index: 5; }
.tile h3 { position: relative; z-index: 3; font-weight: 800; font-size: clamp(25px, 2.2vw, 32px); line-height: 1.14; letter-spacing: -0.03em; max-width: 14ch; }
.tile p { position: relative; z-index: 3; margin-top: 10px; font-size: 16px; line-height: 1.5; max-width: 28ch; font-weight: 500; }
.t-pink { background: linear-gradient(155deg, rgb(255, 224, 242) 0%, rgb(255, 195, 232) 38%, rgb(227, 184, 255) 100%); color: var(--ink); }
.t-pink p { color: rgb(106, 63, 151); }
.t-peri { background: linear-gradient(160deg, rgb(201, 214, 255) 0%, rgb(168, 183, 255) 45%, rgb(195, 166, 255) 100%); color: var(--ink); }
.t-peri p { color: rgb(61, 53, 144); }
.t-night { background: radial-gradient(80% 60%at 20% 0%,#8a63ff66 0%,transparent 60%),radial-gradient(70% 60%at 100% 100%,#ff9fd855 0%,transparent 60%),var(--night); color: rgb(255, 255, 255); }
.t-night p { color: rgb(221, 209, 255); }
.tile .obj { position: absolute; z-index: 2; filter: drop-shadow(rgba(75, 47, 195, 0.35) 0px 26px 30px); animation: 7s ease-in-out 0s infinite normal none running bob; }
.tile .obj.b { animation-duration: 8.4s; animation-delay: -3s; }
@keyframes bob { 
  0%, 100% { translate: 0px; rotate: 0deg; }
  50% { translate: 0px -12px; rotate: 3deg; }
}
.ui { position: absolute; z-index: 3; border-radius: 22px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(10px); box-shadow: rgba(255, 255, 255, 0.95) 0px 0px 0px 1px inset, rgba(75, 47, 195, 0.55) 0px 18px 36px -20px; color: var(--ink); }
.ui-bal { left: 36px; right: 36px; bottom: 36px; padding: 22px; }
.ui-bal small { display: block; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.ui-bal b { display: block; margin-top: 4px; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.ui-bal .rows { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.ui-toast { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; font-size: 15px; font-weight: 700; border-radius: 16px; }
.ui-toast .ok { width: 24px; height: 24px; border-radius: 50%; background: var(--up-2); display: grid; place-items: center; color: rgb(255, 255, 255); font-size: 13px; font-weight: 800; }
.bub { position: absolute; z-index: 3; border-radius: 24px; padding: 15px 20px; font-size: clamp(16px, 1.35vw, 19px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; max-width: 300px; box-shadow: rgba(42, 22, 112, 0.6) 0px 18px 36px -22px; }
.bub.in { left: 36px; background: rgba(255, 255, 255, 0.9); color: var(--ink); border-bottom-left-radius: 8px; }
.bub.out { right: 36px; background: var(--holo); color: var(--ink); border-bottom-right-radius: 8px; }
.rule { position: absolute; z-index: 3; left: 36px; right: 36px; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 18px; font-size: 16px; font-weight: 600; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); box-shadow: rgba(255, 255, 255, 0.28) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); }
.rule i { width: 28px; height: 28px; border-radius: 50%; background: rgb(255, 255, 255); color: var(--deep); display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 800; flex: 0 0 auto; }
.rule s { text-decoration: none; margin-left: auto; font-size: 13px; font-weight: 600; color: rgb(216, 203, 255); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { position: relative; padding: 34px; border-radius: var(--r-xl); min-height: 380px; overflow: hidden; }
.step .n { width: 46px; height: 46px; border-radius: 50%; background: var(--night); color: rgb(255, 255, 255); display: grid; place-items: center; font-size: 18px; font-weight: 800; box-shadow: rgba(58, 31, 153, 0.8) 0px 10px 20px -10px; }
.step h3 { margin-top: 22px; }
.step p { position: relative; z-index: 2; margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 24em; font-weight: 500; }
.step .deco { position: absolute; right: -18px; bottom: -24px; width: 200px; filter: drop-shadow(rgba(75, 47, 195, 0.35) 0px 22px 26px); }
.band { position: relative; border-radius: var(--r-xl); padding: 84px 40px; text-align: center; overflow: hidden; isolation: isolate; }
.band .display { background: none; color: rgb(255, 255, 255); -webkit-text-fill-color: rgb(255, 255, 255); }
.band .lead { color: rgb(227, 216, 255); margin: 18px auto 0px; max-width: 36em; }
.band .figs { margin-top: 38px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.band .fig { background: rgba(255, 255, 255, 0.12); box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset; border-radius: 22px; padding: 18px 26px; min-width: 190px; }
.band .fig b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: rgb(255, 255, 255); }
.band .fig small { font-size: 14px; color: rgb(216, 203, 255); font-weight: 600; }
.band .btns { margin-top: 34px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.band .float { position: absolute; z-index: 1; filter: drop-shadow(rgba(20, 8, 70, 0.45) 0px 24px 30px); animation: 7s ease-in-out 0s infinite normal none running bob; }
.band .float.b { animation-duration: 8.6s; animation-delay: -2.5s; }
.band .see { background: rgba(255, 255, 255, 0.16); color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset; }
.band .see:hover { background: rgba(255, 255, 255, 0.26); }
.band h2, .band p, .band .figs, .band .btns { position: relative; z-index: 3; }
.faq { max-width: 900px; margin: 0px auto; }
.faq details { border-radius: var(--r-l); margin-bottom: 12px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; display: grid; place-items: center; font-style: normal; font-size: 22px; color: var(--deep); transition: transform .3s var(--ease); }
.faq details p { padding: 0px 26px 24px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 46em; font-weight: 500; }
.foot { max-width: var(--max); margin: 130px auto 0px; padding: 0 var(--gut) 26px; }
.foot-card { border-radius: var(--r-xl); padding: 38px; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.foot-card .logo img { width: 84px; height: 84px; }
.foot-card .logo { font-size: 34px; }
.foot-tag { margin-top: 14px; color: var(--ink-2); font-weight: 500; max-width: 22em; }
.foot-big { border-radius: var(--r-l); padding: 28px 30px; display: flex; flex-direction: column; gap: 18px; background: var(--night); color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px inset; }
.foot-big b { font-weight: 800; font-size: clamp(30px, 3.4vw, 50px); letter-spacing: -0.035em; line-height: 1.04; }
.foot-big .row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: rgb(221, 209, 255); font-size: 16px; font-weight: 500; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
.foot-cols h4 { font-weight: 700; font-size: 14px; color: var(--ink-3); margin-bottom: 10px; }
.foot-cols a { display: block; font-size: 15.5px; padding: 4px 0px; color: var(--ink); font-weight: 600; }
.foot-cols a:hover { color: var(--violet); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px 0px; font-size: 14px; color: var(--ink-2); font-weight: 500; }
.health { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0px 15px; border-radius: 100px; background: rgba(255, 255, 255, 0.62); box-shadow: rgba(255, 255, 255, 0.95) 0px 0px 0px 1px inset; font-size: 14px; font-weight: 600; color: var(--ink); }
.health::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.health.ok::before { background: var(--up-2); box-shadow: rgba(47, 191, 127, 0.133) 0px 0px 0px 4px; }
.empty { border-radius: var(--r-xl); padding: 44px 30px 50px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty img { filter: drop-shadow(rgba(75, 47, 195, 0.35) 0px 20px 26px); animation: 7s ease-in-out 0s infinite normal none running bob; }
.empty b { font-weight: 800; font-size: 28px; letter-spacing: -0.03em; }
.empty p { color: var(--ink-2); max-width: 32em; font-weight: 500; font-size: 17px; }
.empty .btn { margin-top: 8px; }
.rv { transition: translate .9s var(--ease); }
.rv.pre { translate: 0px 18px; }
.rv.in { translate: 0px; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
@keyframes sk { 
  100% { background-position: -200% 0px; }
}
@media (max-width: 1180px) {
  .pills a { padding: 10px 12px; font-size: 15px; }
  .tile { min-height: 520px; }
}
@media (max-width: 980px) {
  :root { --gut: 24px; }
  .nav { grid-template-columns: 1fr auto; }
  .nav .pills, .nav .wbtn, .nav .btn { display: none; }
  .tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80vw, 420px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: none; }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { scroll-snap-align: center; }
  .steps { grid-template-columns: 1fr; }
  .foot-card { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
  .sec-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  :root { --gut: 16px; }
  body { font-size: 15px; }
  .nav { height: 74px; }
  .main { padding-top: 84px; }
  .hero { margin-top: -84px; }
  .logo { font-size: 25px; }
  .logo img { width: 44px; height: 44px; }
  .hero-copy { padding: 96px 16px 150px; }
  .hero .ctas .btn { width: 100%; max-width: 340px; }
  .ticker { bottom: 16px; }
  .ticker .tick:nth-child(n+2) { display: none; }
  .btn.big { height: 58px; padding: 0px 28px; font-size: 17px; }
  .tile { min-height: 500px; padding: 28px; }
  .ui-bal, .rule { left: 22px; right: 22px; }
  .bub.in { left: 22px; }
  .bub.out { right: 22px; }
  .sec { padding-top: 92px; }
  .band { padding: 64px 18px 150px; }
  .band .figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .band .fig { min-width: 0px; padding: 14px 8px; border-radius: 16px; }
  .band .fig b { font-size: 22px; }
  .band .fig small { font-size: 12px; line-height: 1.3; display: block; }
  .band .float { width: 96px !important; }
  .band .float.b { bottom: 22px; top: auto !important; right: 8% !important; }
  .band .float:first-of-type { left: 8% !important; bottom: 20px !important; }
  .faq summary { font-size: 17px; padding: 19px 20px; }
  .faq details p { padding: 0px 20px 20px; font-size: 15.5px; }
  .foot { margin-top: 92px; }
  .foot-card { padding: 22px; gap: 24px; }
  .foot-big { padding: 22px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .step { min-height: 0px; padding: 26px 26px 150px; }
  .step .deco { width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
  .rv { opacity: 1; translate: none; }
}
.lg-empty { display: flex; align-items: center; gap: 26px; padding: 28px 32px; border-radius: var(--r-xl); background: linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.55)) padding-box,var(--holo-edge) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow); }
.lg-empty img { width: 170px; flex: 0 0 auto; rotate: -8deg; filter: drop-shadow(rgba(75, 47, 195, 0.35) 0px 18px 22px); }
.lg-empty b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.lg-empty p { margin-top: 6px; color: var(--ink-2); font-weight: 500; max-width: 34em; }
@media (max-width: 980px) {
}
@media (max-width: 720px) {
  .lg-empty { flex-direction: column; text-align: center; padding: 24px; }
}
.burnline { display: inline-flex; align-items: center; gap: 10px; margin: 18px auto 0px; padding: 10px 18px; border-radius: 100px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); color: rgb(239, 233, 255); font-size: 15px; font-weight: 600; max-width: 100%; flex-wrap: wrap; justify-content: center; }
.burnline .dot { width: 9px; height: 9px; border-radius: 50%; background: rgb(255, 143, 209); box-shadow: rgba(255, 143, 209, 0.7) 0px 0px 0px 0px; animation: 2s ease 0s infinite normal none running pulse; }
@keyframes pulse { 
  0% { box-shadow: rgba(255, 143, 209, 0.7) 0px 0px 0px 0px; }
  70% { box-shadow: rgba(255, 143, 209, 0) 0px 0px 0px 10px; }
  100% { box-shadow: rgba(255, 143, 209, 0) 0px 0px 0px 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .burnline .dot { animation: auto ease 0s 1 normal none running none; }
}
@media (max-width: 620px) {
}
.more4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.m4 { border-radius: var(--r-l); padding: 22px 22px 24px; background: rgba(255, 255, 255, 0.62); border: 1.5px solid rgba(255, 255, 255, 0.95); box-shadow: rgba(75, 47, 195, 0.55) 0px 14px 30px -22px; }
.m4 b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.m4 p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); font-weight: 500; }
.m4 p span { display: block; margin-top: 8px; color: var(--deep); font-weight: 700; font-style: italic; }
@media (max-width: 1100px) {
  .more4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .more4 { grid-template-columns: 1fr; gap: 10px; }
  .m4 { padding: 18px; }
}
@media (max-width: 620px) {
}.sf-hidden { display: none !important; }/* empty */

html { background: #09090b !important; }
body::before, body::after { display: none !important; }
body { margin: 0; background: #09090b !important; color: #e4e4e7; }
.vg { --ac: #a855f7; --ac-rgb: 168,85,247; --bg: #09090b; --panel: #0f0f13; --wire: #1f2937; --tx: #f4f4f5; --tx2: #a1a1aa; --tx3: #71717a; --ok: #22c55e;
  position: relative; min-height: 100vh; overflow-x: hidden; color: var(--tx); font-family: 'JetBrains Mono', 'Fira Code', 'Roboto Mono', ui-monospace, monospace; font-size: 14px; line-height: 1.6; }
.vg *, .vg *::before, .vg *::after { box-sizing: border-box; }
.vg a { color: inherit; text-decoration: none; }
.vg button, .vg input, .vg textarea, .vg select { font: inherit; color: inherit; }
:where(.vg) button { cursor: pointer; background: none; border: 0; }
.vg img { display: block; max-width: 100%; }
.vg ::selection { background: rgba(var(--ac-rgb), .4); }
/* ---- living backdrop ---- */
.vg-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vg-bg .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%); }
.vg-bg .glow { position: absolute; width: 80vmax; height: 80vmax; left: 50%; top: -45vmax; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(var(--ac-rgb), .16), transparent 60%); transition: background .5s; animation: vg-breathe 7s ease-in-out infinite; }
.vg-bg .radar { position: absolute; right: -20vmax; bottom: -20vmax; width: 60vmax; height: 60vmax; border-radius: 50%; border: 1px solid rgba(var(--ac-rgb), .08);
  background: repeating-radial-gradient(circle, transparent 0 7vmax, rgba(var(--ac-rgb), .05) 7vmax calc(7vmax + 1px)); }
.vg-bg .radar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(var(--ac-rgb), .14), transparent 18%); animation: vg-spin 10s linear infinite; }
.vg-bg .scan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--ac-rgb), .35), transparent); box-shadow: 0 0 18px rgba(var(--ac-rgb), .4); animation: vg-scan 8s linear infinite; }
.vg-bg .lines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); }
@keyframes vg-scan { from { top: -2%; } to { top: 102%; } }
@keyframes vg-spin { to { transform: rotate(360deg); } }
@keyframes vg-breathe { 50% { opacity: .6; } }
.vg-main { position: relative; z-index: 1; }
.vg-wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 24px; }
/* ---- panels ---- */
.vg-panel { position: relative; background: rgba(15,15,19,.82); border: 1px solid var(--wire); border-radius: 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .25s, box-shadow .25s; }
.vg-panel.live::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, transparent, rgba(var(--ac-rgb), .7), transparent) 0 0 / 200% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: vg-border 4s linear infinite; pointer-events: none; }
@keyframes vg-border { to { background-position: -200% 0; } }
.vg-panel:hover, .vg-panel.focus { border-color: rgba(var(--ac-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--ac-rgb), .15), 0 0 40px -12px rgba(var(--ac-rgb), .6); }
.vg-ph { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--wire); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }
.vg-ph b { color: var(--tx); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.vg-ph img { width: 16px; height: 16px; }
.vg-ph .dots { display: flex; gap: 5px; }
.vg-ph .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--wire); }
.vg-pb { padding: 16px; }
/* ---- buttons ---- */
.vg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--wire); background: #111115; font-size: 13px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; transition: border-color .2s, box-shadow .2s, background .2s, color .2s; }
.vg-btn:hover { border-color: var(--ac); box-shadow: 0 0 22px -6px rgba(var(--ac-rgb), .9); color: #fff; }
.vg-btn.pri { background: var(--ac); border-color: var(--ac); color: #0b0b0e; box-shadow: 0 0 30px -8px rgba(var(--ac-rgb), .9); }
.vg-btn.pri:hover { background: color-mix(in srgb, var(--ac) 85%, #fff); box-shadow: 0 0 40px -4px rgba(var(--ac-rgb), 1); color: #0b0b0e; }
.vg-btn.lg { height: 50px; padding: 0 24px; font-size: 14px; }
.vg-btn.block { width: 100%; }
.vg-btn[disabled] { opacity: .45; pointer-events: none; }
/* ---- nav ---- */
.vg-nav { position: sticky; top: 0; z-index: 50; background: rgba(9,9,11,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--wire); }
.vg-nav-in { height: 64px; display: flex; align-items: center; gap: 20px; }
.vg-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: .02em; }
.vg-logo img { width: 34px; height: 34px; border-radius: 8px; filter: drop-shadow(0 0 8px rgba(var(--ac-rgb), .5)); transition: filter .3s, transform .4s; }
.vg-logo:hover img { filter: drop-shadow(0 0 14px rgba(var(--ac-rgb), .9)); transform: rotate(-8deg); }
.vg-logo span { color: var(--ac); transition: color .3s; }
.vg-sys { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; color: var(--tx2); padding: 6px 10px; border: 1px solid var(--wire); border-radius: 6px; margin-right: auto; }
.vg-sys i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: vg-blink-soft 1.6s ease-in-out infinite; }
.vg-sys b { color: var(--ok); font-weight: 600; }
@keyframes vg-blink-soft { 50% { opacity: .3; } }
.vg-caret::after { content: '|'; margin-left: 2px; color: var(--ac); animation: vg-caret 1s steps(1) infinite; }
@keyframes vg-caret { 50% { opacity: 0; } }
.vg-x { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--wire); color: var(--tx2); transition: all .2s; }
.vg-x:hover { color: #fff; border-color: var(--ac); box-shadow: 0 0 18px -6px rgba(var(--ac-rgb), 1); }
.vg-wallet { height: 38px; padding: 0 14px; border-radius: 6px; border: 1px solid rgba(var(--ac-rgb), .6); background: rgba(var(--ac-rgb), .1); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 8px; transition: all .2s; }
.vg-wallet:hover { box-shadow: 0 0 24px -4px rgba(var(--ac-rgb), 1); }
.vg-wallet.live { border-color: var(--ok); background: rgba(34,197,94,.08); }
.vg-wallet .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.vg-tabs { display: flex; gap: 6px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.vg-tabs::-webkit-scrollbar { display: none; }
.vg-tab { flex: none; padding: 9px 14px; border-radius: 6px; border: 1px solid var(--wire); background: #0d0d10; font-size: 12px; color: var(--tx2); white-space: nowrap; transition: all .2s; }
.vg-tab b { color: var(--tx3); font-weight: 600; margin-right: 6px; }
.vg-tab:hover { color: #fff; border-color: var(--ac); box-shadow: 0 0 16px -6px rgba(var(--ac-rgb), 1); }
.vg-tab.on { color: #0b0b0e; background: var(--ac); border-color: var(--ac); box-shadow: 0 0 24px -6px rgba(var(--ac-rgb), 1); }
.vg-tab.on b { color: #0b0b0e; }
.vg-burger { display: none; width: 38px; height: 38px; border-radius: 6px; border: 1px solid var(--wire); place-items: center; }
/* ---- typography ---- */
.vg-kicker { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ac); transition: color .3s; }
.vg-h1 { font-size: clamp(32px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; margin: 14px 0 0; }
.vg-h1 em { font-style: normal; color: var(--ac); text-shadow: 0 0 30px rgba(var(--ac-rgb), .6); transition: color .3s, text-shadow .3s; }
.vg-h2 { font-size: clamp(22px, 3vw, 32px); letter-spacing: -.03em; font-weight: 700; margin: 8px 0 0; }
.vg-lead { color: var(--tx2); font-size: 15px; max-width: 620px; margin: 14px 0 0; }
.vg-muted { color: var(--tx3); }
/* ---- hero ---- */
.vg-hero { padding: 54px 0 20px; }
.vg-hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-top: 30px; align-items: stretch; }
/* CLI input */
.vg-cli { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid rgba(var(--ac-rgb), .45); border-radius: 8px; background: #060608; box-shadow: inset 0 0 30px -12px rgba(var(--ac-rgb), .6); transition: border-color .2s, box-shadow .2s; }
.vg-cli:focus-within { border-color: var(--ac); box-shadow: inset 0 0 30px -10px rgba(var(--ac-rgb), .8), 0 0 30px -10px rgba(var(--ac-rgb), .8); }
.vg-cli label { color: var(--ac); white-space: nowrap; font-size: 13px; }
.vg-cli input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font-size: 14px; caret-color: var(--ac); }
.vg-cli input::placeholder { color: #52525b; }
.vg-log { font-size: 13px; line-height: 1.85; min-height: 210px; max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.vg-log div { white-space: pre-wrap; word-break: break-word; }
.vg-log .ok { color: var(--ok); }
.vg-log .ac { color: var(--ac); }
.vg-log .warn { color: #fbbf24; }
.vg-log .err { color: #f87171; }
.vg-log .dim { color: var(--tx3); }
.vg-meter { height: 6px; border-radius: 3px; background: #18181b; overflow: hidden; margin: 6px 0 2px; }
.vg-meter i { display: block; height: 100%; background: linear-gradient(90deg, rgba(var(--ac-rgb), .5), var(--ac)); box-shadow: 0 0 12px var(--ac); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.vg-tele { font-size: 12.5px; line-height: 1.9; }
.vg-tele .row { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed #1c1c22; padding: 3px 0; }
.vg-tele .row span { color: var(--tx3); }
.vg-tele .row b { font-weight: 500; text-align: right; }
/* ---- sentinel deck ---- */
.vg-deck { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vg-node { --nc: var(--ac); position: relative; text-align: left; padding: 18px 16px 16px; border-radius: 10px; border: 1px solid var(--wire); background: rgba(15,15,19,.85); overflow: hidden; transition: border-color .25s, box-shadow .25s, transform .25s; }
.vg-node::after { content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: linear-gradient(transparent, rgba(255,255,255,.04), transparent); animation: vg-nodescan 5s linear infinite; animation-delay: var(--d, 0s); pointer-events: none; }
@keyframes vg-nodescan { to { top: 140%; } }
.vg-node:hover, .vg-node.on { border-color: var(--nc); box-shadow: 0 0 0 1px color-mix(in srgb, var(--nc) 30%, transparent), 0 0 40px -12px var(--nc); }
.vg-node .ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 12px; background: #0a0a0d; border: 1px solid #23232b; margin-bottom: 14px; transition: box-shadow .25s; }
.vg-node:hover .ico, .vg-node.on .ico { box-shadow: 0 0 26px -6px var(--nc); }
.vg-node .ico img { width: 48px; height: 48px; filter: hue-rotate(var(--hue, 0deg)); }
.vg-node h4 { margin: 0; font-size: 14px; letter-spacing: .06em; }
.vg-node h4 span { color: var(--nc); font-weight: 500; }
.vg-node .st { margin-top: 6px; font-size: 11.5px; color: var(--nc); letter-spacing: .04em; }
.vg-node .dt { margin-top: 4px; font-size: 12px; color: var(--tx2); }
.vg-node .res { margin-top: 12px; display: inline-block; font-size: 10.5px; padding: 3px 7px; border-radius: 4px; border: 1px solid #2a2a33; color: var(--tx3); }
.vg-node .chk { position: absolute; top: 12px; right: 12px; font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--nc); color: #0b0b0e; font-weight: 700; }
.vg-bars { display: flex; gap: 2px; align-items: flex-end; height: 16px; margin-top: 10px; }
.vg-bars i { flex: 1; background: var(--nc); opacity: .55; border-radius: 1px; animation: vg-eq 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.13s); }
@keyframes vg-eq { 0%, 100% { height: 20%; } 50% { height: 100%; } }
/* ---- sections ---- */
.vg-sec { padding-top: 70px; }
.vg-sec-h { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vg-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vg-feature { padding: 20px; }
.vg-feature img, .vg-feature svg { width: 28px; height: 28px; color: var(--ac); }
.vg-feature b { display: block; margin-top: 14px; font-size: 15px; }
.vg-feature p { margin: 6px 0 0; color: var(--tx2); font-size: 13px; }
/* ---- deploy CLI ---- */
.vg-deploy { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; }
.vg-fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.vg-fld > span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
.vg-fld > span b { color: var(--ac); font-weight: 500; }
.vg-in { width: 100%; height: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--wire); background: #060608; color: #fff; outline: 0; font-size: 14px; caret-color: var(--ac); transition: border-color .2s, box-shadow .2s; }
textarea.vg-in { height: auto; padding: 10px 12px; resize: vertical; }
select.vg-in { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ac) 50%), linear-gradient(135deg, var(--ac) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.vg-in:focus { border-color: var(--ac); box-shadow: 0 0 0 3px rgba(var(--ac-rgb), .15); }
.vg-in::placeholder { color: #52525b; }
.vg-in.up { text-transform: uppercase; }
.vg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vg-chip { padding: 7px 11px; border-radius: 5px; border: 1px solid var(--wire); background: #0d0d10; font-size: 12px; color: var(--tx2); transition: all .2s; }
.vg-chip:hover { border-color: var(--ac); color: #fff; }
.vg-chip.on { border-color: var(--ac); background: rgba(var(--ac-rgb), .15); color: #fff; box-shadow: 0 0 14px -6px rgba(var(--ac-rgb), 1); }
.vg-minideck { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vg-mini { --nc: var(--ac); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 8px; border: 1px solid var(--wire); background: #0b0b0e; font-size: 11px; color: var(--tx2); transition: all .2s; }
.vg-mini img { width: 38px; height: 38px; }
.vg-mini:hover { border-color: var(--nc); color: #fff; }
.vg-mini.on { border-color: var(--nc); color: #fff; box-shadow: 0 0 20px -8px var(--nc); background: color-mix(in srgb, var(--nc) 8%, #0b0b0e); }
.vg-range { width: 100%; accent-color: var(--ac); }
.vg-sumtop { display: flex; gap: 12px; align-items: center; }
.vg-sumtop img { width: 52px; height: 52px; border-radius: 10px; background: #0a0a0d; border: 1px solid #23232b; padding: 4px; object-fit: contain; }
.vg-sumtop b { display: block; font-size: 16px; word-break: break-word; }
.vg-sumtop span { color: var(--ac); font-size: 12px; }
.vg-kv { margin: 14px 0; font-size: 12.5px; }
.vg-kv div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #1c1c22; }
.vg-kv span { color: var(--tx3); }
.vg-kv b { font-weight: 500; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-shield { display: flex; gap: 10px; padding: 10px 12px; border-radius: 6px; border: 1px solid rgba(34,197,94,.3); background: rgba(34,197,94,.06); color: #86efac; font-size: 12px; margin-bottom: 12px; }
.vg-done a { color: var(--ac); text-decoration: underline; text-underline-offset: 3px; }
.vg-fine { font-size: 11px; color: var(--tx3); margin: 12px 0 0; }
/* ---- ops / docs ---- */
.vg-ops { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.vg-toc { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 2px; }
.vg-toc a { font-size: 12px; padding: 8px 12px; border-radius: 5px; color: var(--tx3); border: 1px solid transparent; transition: all .2s; }
.vg-toc a:hover { color: #fff; border-color: var(--wire); }
.vg-toc a.on { color: #fff; border-color: var(--ac); background: rgba(var(--ac-rgb), .08); }
.vg-doc { scroll-margin-top: 140px; margin-bottom: 14px; }
.vg-doc .vg-pb p, .vg-doc .vg-pb li { color: var(--tx2); font-size: 13.5px; }
.vg-doc .vg-pb b { color: #fff; font-weight: 600; }
.vg-doc ul { padding-left: 18px; margin: 8px 0; }
.vg-doc li::marker { color: var(--ac); }
.vg-code { padding: 1px 6px; border-radius: 4px; background: #18181b; color: #fff; font-size: 12.5px; word-break: break-all; }
.vg-note { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--ac); background: rgba(var(--ac-rgb), .06); color: var(--tx2); font-size: 12.5px; }
/* ---- footer ---- */
.vg-foot { margin-top: 80px; border-top: 1px solid var(--wire); padding: 26px 0 34px; }
.vg-foot-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--tx3); }
.vg-foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.vg-foot nav a:hover { color: var(--ac); }
/* ---- final CTA ---- */
.vg-cta { margin-top: 70px; padding: 44px 28px; text-align: center; overflow: hidden; }
.vg-cta::after { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 90% at 50% 120%, rgba(var(--ac-rgb), .3), transparent 70%); pointer-events: none; }
.vg-cta > * { position: relative; }
@media (max-width: 1000px) {
  .vg-hero-grid, .vg-deploy, .vg-ops { grid-template-columns: 1fr; }
  .vg-deck { grid-template-columns: repeat(2, 1fr); }
  .vg-three { grid-template-columns: 1fr; }
  .vg-toc { position: static; flex-direction: row; overflow-x: auto; }
  .vg-toc a { white-space: nowrap; }
}
@media (max-width: 640px) {
  .vg-sys { display: none; }
  .vg-nav-in { justify-content: space-between; }
  .vg-two { grid-template-columns: 1fr; }
  .vg-minideck { grid-template-columns: repeat(4, 1fr); }
  .vg-cli { flex-wrap: wrap; }
  .vg-cli label { width: 100%; }
  .vg-wrap { padding: 0 16px; }
}
/* ---- Chakra Petch display headings ---- */
.vg h1, .vg h2, .vg h3, .vg .vg-h1, .vg .vg-h2 { font-family: 'Chakra Petch', 'JetBrains Mono', sans-serif; text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; line-height: 1.04; }
.vg .vg-h1 { font-size: clamp(30px, 4.7vw, 58px); }
.vg .vg-h2 { font-size: clamp(22px, 3vw, 34px); letter-spacing: -.015em; }
.vg .vg-h1 em { letter-spacing: -.02em; }
/* ---- REA ---- */
.vg-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .16em; padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(var(--ac-rgb), .5); color: var(--ac); background: rgba(var(--ac-rgb), .08); white-space: nowrap; transition: color .3s, border-color .3s, background .3s; }
.vg-nav .vg-badge { margin-right: auto; }
.vg-sys { margin-right: 0 !important; }
.vg-try { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11.5px; color: var(--tx3); }
.vg-try button { padding: 3px 9px; border-radius: 4px; border: 1px dashed #2f2f3a; color: var(--tx2); transition: all .2s; }
.vg-try button:hover { border-color: var(--ac); color: #fff; border-style: solid; }
.vg-four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vg-tag { font-size: 10.5px; letter-spacing: .16em; color: var(--ac); transition: color .3s; }
.vg-four .vg-feature b { margin-top: 12px; }
.vg-rep { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vg-bar { display: grid; grid-template-columns: 74px 1fr 118px; gap: 10px; align-items: center; font-size: 12px; padding: 3px 0; }
.vg-bar span { color: var(--tx2); }
.vg-bar b { text-align: right; font-weight: 500; font-size: 11.5px; color: var(--tx2); }
.vg-lever { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #1c1c22; font-size: 12.5px; flex-wrap: wrap; }
.vg-lever code { color: #fff; word-break: break-all; }
.vg-lever i { margin-left: auto; font-style: normal; color: var(--tx3); font-size: 11px; }
.vg-lever .cat { flex: none; font-size: 9.5px; letter-spacing: .12em; padding: 2px 6px; border-radius: 3px; border: 1px solid; }
.vg-lever .cat.control { color: #c084fc; border-color: #6b21a8; }
.vg-lever .cat.supply { color: #fbbf24; border-color: #92400e; }
.vg-lever .cat.restrict { color: #f87171; border-color: #991b1b; }
.vg-lever .cat.fees { color: #22d3ee; border-color: #155e75; }
.vg-lever .cat.funds { color: #fb923c; border-color: #9a3412; }
.vg-sels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 24px; max-height: 360px; overflow-y: auto; scrollbar-width: thin; }
.vg-sels div { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px dashed #17171c; font-size: 12px; }
.vg-sels i { font-style: normal; color: var(--ac); flex: none; }
.vg-sels code { word-break: break-all; }
@media (max-width: 1000px) { .vg-four { grid-template-columns: repeat(2, 1fr); } .vg-rep, .vg-sels { grid-template-columns: 1fr; } .vg-nav .vg-badge { display: none; } }
@media (max-width: 640px) { .vg-four { grid-template-columns: 1fr; } .vg-bar { grid-template-columns: 60px 1fr 96px; } }
@media (prefers-reduced-motion: reduce) { .vg *, .vg *::before, .vg *::after { animation: none !important; } }