:root {
  color-scheme: dark;
  --bg: #07090c;
  --panel: #0d1116;
  --panel-soft: #11171d;
  --cyan: #00dbff;
  --cyan-soft: rgba(0, 219, 255, .16);
  --gray: #a6a6a6;
  --white: #eef4f7;
  --muted: #69747c;
  --line: rgba(179, 203, 214, .12);
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: 'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
  font-family: var(--sans);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--white); overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(600px circle at var(--mx, 70%) var(--my, 30%), rgba(0, 219, 255, .055), transparent 70%), radial-gradient(900px circle at 8% 12%, rgba(37, 49, 59, .16), transparent 67%); pointer-events: none; }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; opacity: .16; pointer-events: none; background-image: linear-gradient(rgba(166, 166, 166, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(166, 166, 166, .035) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
#particle-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .64; }
.cursor-aura { position: fixed; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 219, 255, .065), transparent 68%); transform: translate(-50%, -50%); left: var(--mx, 70%); top: var(--my, 30%); pointer-events: none; z-index: 0; transition: left .18s ease-out, top .18s ease-out; }
.site-shell { width: min(1320px, calc(100% - 96px)); margin-inline: auto; position: relative; z-index: 1; }
.topbar { height: 100px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 13px; color: var(--white); text-decoration: none; }
.brand-logo { display: grid; place-items: center; height: 48px; width: 92px; overflow: hidden; border: 1px solid rgba(0, 219, 255, .15); background: #050607; box-shadow: 0 0 22px rgba(0, 219, 255, .07); }
.brand-logo img { display: block; width: 84px; height: 31px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; gap: 4px; letter-spacing: .1em; }
.brand-copy strong { font-weight: 700; font-size: 13px; }
.brand-copy strong i { color: var(--cyan); font-style: normal; }
.brand-copy small { color: var(--muted); font: 9px var(--mono); letter-spacing: .16em; }
.topbar-right { display: flex; align-items: center; gap: 34px; }
.system-pill { display: flex; align-items: center; gap: 9px; padding: 9px 12px; color: var(--gray); border: 1px solid var(--line); background: rgba(255, 255, 255, .018); font: 9px var(--mono); letter-spacing: .12em; }
.system-dot, .state-led, .tag-led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #d9a34b; box-shadow: 0 0 10px rgba(217, 163, 75, .5); }
.system-pill.is-ready .system-dot, .state-led.is-ready, .tag-led { background: var(--cyan); box-shadow: 0 0 11px rgba(0, 219, 255, .7); }
.top-link, .footer-top { color: var(--gray); text-decoration: none; font: 9px var(--mono); letter-spacing: .13em; transition: color .2s; }
.top-link:hover, .footer-top:hover { color: var(--cyan); }
.top-link span { color: var(--cyan); margin-left: 8px; }

.hero { min-height: 650px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(490px, 1.08fr); align-items: center; gap: 50px; padding: 45px 0 56px; position: relative; }
.hero-copy { position: relative; z-index: 2; padding: 32px 0 44px 3.3%; }
.eyebrow { display: flex; align-items: center; gap: 11px; color: var(--cyan); font: 10px var(--mono); letter-spacing: .18em; }
.eyebrow b { color: #73818a; font-weight: 400; }
.eyebrow-line { width: 25px; height: 1px; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
h1 { margin: 27px 0 21px; font-size: clamp(58px, 6.5vw, 90px); line-height: .92; letter-spacing: -.072em; font-weight: 600; }
.title-muted { color: #778189; }
.title-accent { color: var(--white); }
.title-period { color: var(--cyan); text-shadow: 0 0 28px rgba(0, 219, 255, .6); }
.hero-lede { max-width: 410px; color: #8e999f; font-size: 15px; line-height: 1.75; margin: 0 0 28px; }
.hero-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.primary-button { height: 54px; padding: 0 17px 0 20px; display: inline-flex; align-items: center; justify-content: space-between; gap: 23px; min-width: 225px; color: #041014; text-decoration: none; background: var(--cyan); border: 1px solid var(--cyan); box-shadow: 0 0 25px rgba(0, 219, 255, .17); font-size: 13px; font-weight: 700; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.primary-button:hover { transform: translateY(-3px); background: #59eaff; box-shadow: 0 8px 34px rgba(0, 219, 255, .3); }
.primary-button:focus-visible, .secondary-button:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.button-arrow { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(0, 0, 0, .25); font-size: 16px; }
.secondary-button { color: #a6b0b5; text-decoration: none; font-size: 12px; transition: color .2s; }
.secondary-button:hover { color: var(--cyan); }
.secondary-button span { margin-left: 8px; color: var(--cyan); }
.reassurance { display: flex; gap: 10px; align-items: center; max-width: 375px; margin-top: 25px; color: #606c74; font-size: 10px; line-height: 1.65; }
.reassurance-icon { display: grid; place-items: center; min-width: 22px; height: 22px; color: var(--cyan); border: 1px solid rgba(0, 219, 255, .22); font-size: 14px; }

.visual-stage { min-height: 540px; display: grid; place-items: center; position: relative; perspective: 1000px; isolation: isolate; }
.visual-stage::before { content: ''; position: absolute; z-index: -1; width: 76%; height: 68%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 219, 255, .09), transparent 68%); filter: blur(24px); transform: translate(2%, 1%); }
.stage-coordinate { position: absolute; color: #46545d; font: 8px var(--mono); letter-spacing: .15em; z-index: 1; }
.stage-coordinate span { margin-left: 8px; color: var(--cyan); font-size: 7px; }
.coord-top { top: 9%; right: 9%; }
.coord-bottom { bottom: 6%; left: 10%; }
.orbit { position: absolute; border: 1px solid rgba(0, 219, 255, .13); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 444px; height: 444px; transform: rotateX(67deg) rotateZ(-24deg); animation: orbit-drift 24s linear infinite; }
.orbit-two { width: 506px; height: 506px; border-color: rgba(188, 203, 213, .085); transform: rotateX(72deg) rotateZ(35deg); animation: orbit-drift 37s linear infinite reverse; }
.orbit-three { width: 372px; height: 372px; border-style: dashed; border-color: rgba(0, 219, 255, .12); transform: rotateX(65deg) rotateZ(76deg); animation: orbit-drift 52s linear infinite; }
.orbit-core { position: absolute; z-index: -1; width: 154px; height: 154px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, rgba(0, 219, 255, .13), rgba(8, 18, 24, .16) 40%, transparent 71%); filter: blur(2px); }
.orbit-core span, .orbit-core i { position: absolute; display: block; border-radius: 50%; inset: 10px; border: 1px solid rgba(0, 219, 255, .12); }
.orbit-core i { inset: 27px; border-color: rgba(0, 219, 255, .11); }
.verify-card { width: min(380px, 76%); min-height: 402px; padding: 24px 25px 0; position: relative; overflow: hidden; border: 1px solid rgba(183, 205, 216, .16); background: linear-gradient(140deg, rgba(19, 25, 31, .96), rgba(8, 12, 16, .97) 72%); box-shadow: 0 35px 90px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 255, 255, .05), 0 0 45px rgba(0, 219, 255, .045); transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .22s ease-out, border-color .3s, box-shadow .3s; z-index: 2; }
.verify-card:hover { border-color: rgba(0, 219, 255, .35); box-shadow: 0 35px 90px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 255, 255, .06), 0 0 50px rgba(0, 219, 255, .1); }
.card-sheen { position: absolute; width: 160%; height: 95px; top: -48px; left: -30%; transform: rotate(-14deg); background: linear-gradient(90deg, transparent, rgba(0, 219, 255, .06), transparent); pointer-events: none; }
.card-header, .card-kicker { display: flex; align-items: center; }
.card-header { justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.card-kicker { gap: 8px; color: #84929a; font: 9px var(--mono); letter-spacing: .15em; }
.lock-symbol { color: var(--cyan); font-size: 15px; }
.card-index { color: #515d64; font: 9px var(--mono); }
.card-brand { display: flex; align-items: center; gap: 15px; padding: 21px 0 19px; }
.card-logo { width: 116px; height: 44px; object-fit: contain; background: #020303; }
.card-brand-rule { display: block; height: 32px; width: 1px; background: rgba(0, 219, 255, .35); }
.card-brand-name { color: #96a1a7; font: 10px/1.45 var(--mono); letter-spacing: .16em; }
.card-brand-name b { color: var(--cyan); font-weight: 400; }
.connection-state { min-height: 61px; padding: 11px 12px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(0, 219, 255, .14); background: linear-gradient(90deg, rgba(0, 219, 255, .07), rgba(0, 219, 255, .015)); }
.state-led { width: 8px; height: 8px; flex: 0 0 auto; }
.connection-state div { display: grid; gap: 4px; }
.connection-state strong { font-size: 11px; font-weight: 600; }
.connection-state small { color: #748189; font-size: 9px; }
.state-code { margin-left: auto; color: #55646c; font: 8px var(--mono); }
.card-divider { display: flex; justify-content: space-between; margin: 22px 0 8px; color: #58656c; font: 8px var(--mono); letter-spacing: .14em; }
.check-row { height: 39px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(179, 203, 214, .06); }
.check-icon { display: grid; place-items: center; width: 19px; height: 19px; font-size: 10px; }
.discord-icon { color: #8793ff; border: 1px solid rgba(135, 147, 255, .3); border-radius: 5px; font-weight: 700; }
.role-icon { color: var(--cyan); }
.signal-icon { color: #849098; font-size: 17px; }
.check-name { color: #adb8bd; font-size: 10px; }
.check-status { margin-left: auto; color: #d4a55c; font: 8px var(--mono); letter-spacing: .08em; }
.check-status.is-ready { color: var(--cyan); }
.check-status.status-muted { color: #778189; }
.card-footer { margin: 14px -25px 0; height: 43px; padding: 0 25px; display: flex; align-items: center; gap: 13px; color: #68767e; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .015); font: 8px var(--mono); letter-spacing: .1em; }
.card-footer code { color: #96a2a8; font: 9px var(--mono); }
.footer-lock { margin-left: auto; color: var(--cyan); font-size: 14px; }
.floating-tag { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 10px 12px; color: #7c8a92; border: 1px solid rgba(185, 203, 211, .13); background: rgba(7, 10, 13, .92); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); font: 7px/1.6 var(--mono); letter-spacing: .08em; animation: float-tag 5.4s ease-in-out infinite; }
.floating-tag b { color: #c7d0d4; font-weight: 400; }
.tag-glyph { color: var(--cyan); font-size: 15px; }
.tag-left { left: 5%; top: 27%; }
.tag-right { right: 4%; bottom: 24%; animation-delay: -2.7s; }
.tag-led { width: 6px; height: 6px; }

.trust-strip { min-height: 115px; display: grid; grid-template-columns: 1.15fr .68fr .68fr 1.55fr; align-items: center; gap: 15px; border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(255,255,255,.012), transparent 75%); }
.trust-lead { display: flex; gap: 13px; align-items: center; color: #707c83; font: 8px/1.7 var(--mono); letter-spacing: .1em; }
.trust-lead b { color: #a2adb2; font-weight: 400; }
.trust-mark { width: 34px; height: 34px; display: grid; place-items: center; color: var(--cyan); border: 1px solid rgba(0, 219, 255, .25); font: 17px var(--sans); }
.trust-item { display: flex; align-items: flex-start; gap: 12px; }
.trust-number { color: var(--cyan); font: 9px var(--mono); }
.trust-item p { margin: 0; color: #859198; font-size: 10px; line-height: 1.6; }
.trust-item-note { padding-left: 15px; border-left: 1px solid var(--line); }
.trust-item-note p { color: #69757d; }
.process-section { padding: 113px 0 110px; }
.process-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 44px; }
.process-heading h2 { margin: 20px 0 0; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -.055em; }
.process-heading h2 span { color: #758189; }
.process-heading > p { max-width: 290px; margin: 0 2% 5px 0; color: #79868e; font-size: 12px; line-height: 1.8; }
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.process-step { min-height: 230px; padding: 26px 28px 24px 0; position: relative; border-right: 1px solid var(--line); }
.process-step + .process-step { padding-left: 28px; }
.process-step:last-child { border-right: 0; }
.step-index { position: absolute; right: 22px; top: 28px; color: #556169; font: 9px var(--mono); }
.step-icon { width: 39px; height: 39px; display: grid; place-items: center; color: #a6b2b8; border: 1px solid rgba(173, 197, 207, .15); background: rgba(255, 255, 255, .018); font-size: 19px; }
.step-icon-cyan { color: var(--cyan); border-color: rgba(0, 219, 255, .27); }
.process-step h3 { margin: 22px 0 9px; font-size: 16px; letter-spacing: -.02em; }
.process-step p { max-width: 300px; min-height: 43px; margin: 0; color: #7c888f; font-size: 11px; line-height: 1.7; }
.step-foot { display: inline-block; margin-top: 17px; color: #55646c; font: 8px var(--mono); letter-spacing: .12em; }
.privacy-note { min-height: 67px; display: flex; align-items: center; gap: 14px; padding: 14px 17px; border: 1px solid rgba(0, 219, 255, .12); background: rgba(0, 219, 255, .025); }
.privacy-icon { display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 auto; color: var(--cyan); border: 1px solid rgba(0, 219, 255, .3); border-radius: 50%; font: 11px var(--mono); }
.privacy-note p { margin: 0; color: #849198; font-size: 10px; line-height: 1.7; }
.privacy-note strong { color: #c5d0d4; font-weight: 600; }
.privacy-code { margin-left: auto; padding-left: 10px; flex: 0 0 auto; color: #54636b; font: 8px var(--mono); letter-spacing: .1em; }
.site-footer { min-height: 82px; margin-top: 66px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #657179; font: 8px var(--mono); letter-spacing: .1em; }
.footer-brand { color: #a8b3b8; text-decoration: none; }
.footer-brand span { margin-left: 10px; color: #5e6b72; }
.toast { position: fixed; z-index: 20; right: 28px; bottom: 26px; width: min(430px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 16px 15px; color: #d5e0e4; border: 1px solid rgba(0, 219, 255, .3); background: #10171c; box-shadow: 0 18px 55px rgba(0, 0, 0, .45); font-size: 12px; line-height: 1.6; }
.toast[hidden] { display: none; }
.toast-mark { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; color: #031014; background: var(--cyan); font: 12px var(--mono); }
.toast button { margin-left: auto; color: #91a0a7; border: 0; background: transparent; font-size: 19px; cursor: pointer; }

@keyframes orbit-drift { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes float-tag { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

@media (max-width: 1000px) {
  .site-shell { width: min(100% - 56px, 850px); }
  .hero { grid-template-columns: 1fr 1fr; gap: 10px; min-height: 585px; }
  .hero-copy { padding-left: 0; }
  .visual-stage { min-height: 470px; }
  .verify-card { width: min(360px, 82%); padding-inline: 19px; }
  .card-footer { margin-inline: -19px; padding-inline: 19px; }
  .orbit-one { width: 390px; height: 390px; }
  .orbit-two { width: 430px; height: 430px; }
  .orbit-three { width: 330px; height: 330px; }
  .tag-left { left: 0; }
  .tag-right { right: -1%; }
  .trust-strip { grid-template-columns: 1fr 1fr 1fr; padding-block: 18px; }
  .trust-lead { grid-column: span 3; }
  .trust-item-note { grid-column: 2 / 4; }
}
@media (max-width: 720px) {
  .site-shell { width: calc(100% - 38px); }
  .topbar { height: 78px; }
  .brand-logo { width: 65px; height: 40px; }
  .brand-logo img { width: 61px; height: 25px; }
  .brand { gap: 9px; }
  .brand-copy strong { font-size: 11px; }
  .brand-copy small { font-size: 7px; }
  .topbar-right { gap: 0; }
  .top-link { display: none; }
  .system-pill { padding: 8px; font-size: 7px; letter-spacing: .04em; }
  .hero { min-height: initial; padding: 60px 0 40px; grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding: 0; }
  h1 { margin-top: 23px; font-size: clamp(57px, 14vw, 81px); }
  .hero-lede { font-size: 14px; max-width: 450px; }
  .visual-stage { min-height: 475px; margin-top: 13px; }
  .verify-card { width: min(370px, 84%); }
  .stage-coordinate { font-size: 7px; }
  .coord-top { top: 6%; right: 1%; }
  .coord-bottom { bottom: 2%; left: 1%; }
  .orbit-one { width: min(420px, 98vw); height: min(420px, 98vw); }
  .orbit-two { width: min(470px, 108vw); height: min(470px, 108vw); }
  .orbit-three { width: min(360px, 84vw); height: min(360px, 84vw); }
  .tag-left { left: 0; top: 18%; }
  .tag-right { right: 0; bottom: 17%; }
  .trust-strip { grid-template-columns: 1fr 1fr; gap: 16px 10px; padding-block: 20px; }
  .trust-lead { grid-column: span 2; }
  .trust-item-note { grid-column: span 2; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 13px; }
  .process-section { padding: 80px 0 70px; }
  .process-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 30px; }
  .process-heading > p { margin: 0; }
  .process-steps { grid-template-columns: 1fr; }
  .process-step, .process-step + .process-step { min-height: 0; padding: 23px 42px 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .process-step:last-child { border-bottom: 0; }
  .process-step p { min-height: 0; }
  .step-index { top: 24px; right: 5px; }
  .privacy-note { align-items: flex-start; }
  .privacy-code { display: none; }
  .site-footer { min-height: 70px; margin-top: 45px; gap: 10px; font-size: 7px; }
  .site-footer > span { max-width: 115px; text-align: center; line-height: 1.6; }
}
@media (max-width: 390px) {
  .site-shell { width: calc(100% - 30px); }
  .brand-logo { width: 52px; }
  .brand-logo img { width: 50px; }
  .brand-copy small { letter-spacing: .08em; }
  .verify-card { width: 88%; padding-inline: 16px; }
  .card-footer { margin-inline: -16px; padding-inline: 16px; }
  .tag-left { transform: scale(.85); transform-origin: left center; }
  .tag-right { transform: scale(.85); transform-origin: right center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cursor-aura { display: none; }
}


/* Geometría suavizada y presencia de marca */
body::after {
  background-image: radial-gradient(circle, rgba(166, 166, 166, .23) 1px, transparent 1.4px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
.brand { gap: 0; }
.brand-logo {
  width: 156px;
  height: 60px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.brand-logo img {
  width: 148px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0, 219, 255, .14));
}
.system-pill { border-radius: 999px; }
.primary-button { border-radius: 999px; }
.button-arrow { border-radius: 50%; }
.verify-card { border-radius: 28px; }
.card-logo {
  width: 146px;
  height: 48px;
  object-fit: contain;
  background: transparent;
}
.card-footer { border-radius: 0 0 27px 27px; }
.connection-state { border-radius: 14px; }
.check-icon.discord-icon {
  width: 20px;
  height: 20px;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #5865f2;
}
.check-icon.discord-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reassurance-icon {
  width: 30px;
  min-width: 30px;
  height: 30px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #5865f2;
}
.reassurance-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.floating-tag { border-radius: 999px; }
.trust-mark { border-radius: 50%; }
.step-icon { border-radius: 50%; }
.privacy-note { border-radius: 16px; }
.toast { border-radius: 16px; }
.toast-mark { border-radius: 50%; }

@media (max-width: 720px) {
  .brand-logo { width: 132px; height: 50px; }
  .brand-logo img { width: 128px; height: 46px; }
}
@media (max-width: 390px) {
  .brand-logo { width: 118px; height: 46px; }
  .brand-logo img { width: 114px; height: 42px; }
}